Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by abimanyusaridjo
abimanyusaridjo
Courses Plus Student 951 Points

Best practices for sizing web pages, and working with images?

Hi guys,

I've always been struggling with the concept of size when it comes with web development.

My main questions are:

Let's say I'm making a typical blog site -- like a generic Wordpress theme.

In terms of width and responsiveness, should I immediately set a fixed width to the page (or the content area), and use media-queries as the content collapses when I resize the browser?

So for example, just set the content container to width 1200px and margin: auto to center it. Then apply media queries as needed? Should I not specify a size to the page, and let the content determine the size?

And when it comes to images, I generally set them to max-width:100% which I guess makes them responsive... I also wrap them in containers, which I don't know if it's necessary.

My question with images is, let's say my client gives me 2 images to be placed next to each other with 300x250 sizes. But then, my client gives me a 500x500 to replace one of them with -- breaking the layout since one is taller than the other. Should there be a CSS that presets the sizes of images, so that all my images will default to 300x250, regardless what size I'm working with? Sorry if this doesn't make sense -- but I feel like I've seen images of different sizes on websites, collapse into the same size when the browser is resized.

I've read a few articles on responsive images, but they're generally advanced and dive into viewport units, javascript. I've been searching for a basic best practice/foundation -- the first 2-3 things you should always do when working with images, and if specifying large width to the website's main container is necessary.

Sorry for the wall of texts, and I hope this all makes sense and not too complicated :) Looking forward to your thoughts!!!

Thank you!!

1 Answer

Callum Booth
Callum Booth
1,970 Points
Callum Booth
Callum Booth
1,970 Points

So (un)fortunately there is no one right answer. For page widths there are a few ways to do it, you can give it a width of 100% and then a max-width of 1200, which means for large desktop is has space either side but for mobile/tablet it keeps it within the screen. The Bootstrap framework does it slightly differently it uses breakpoints and a max width for each breakpoint, so it up to you to decide if you need smooth scaling or more fixed jumps.

Regarding images, this again has a few options based on how you need the image to display, my preference is to apply an image with a width of 100% then use a container, or wrapper which then has a width that's required, this means my image will always scale or up or down as required to the right width.