Question

There many different opinions on this, but when designing a web page, what is the best window size, or viewport size that you should cater for? Now this is assuming you want to cater for the broad general public (meaning should you create a gaming website the people rolling there won’t have 800×600 screens…)

Also, is it best to leave the main containing div at an auto size (so that it stretches with the screen size, assuming you do not have any fixed elements inside that you do not want stretching) or do you fix your width? I’ve designed a few websites, but I’m still not sure what is best practice in 2012.

Answer 1

Look up more on Responsive Web Design.
Basic outline of it is: You should set up your css with media queries and adjust your styles to accomodate a variety of sizes. You should also design with a more fluid layout in mind using more % and less px.

I think these are pretty common media queries for responsive design:

/* Landscape phones and down */
@media (max-width: 480px) { ... }

/* Landscape phone to portrait tablet */
@media (max-width: 767px) { ... }

/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) { ... }

/* Large desktop */
@media (min-width: 1200px) { ... }

Add this to the top of your html:

<meta name="viewport" content="width=device-width" />

If you want to have separate style sheets so that your user doesn’t have to download one monster style sheets, do it like this:

`<link rel="stylesheet" type="text/css" media="only screen and (max-width: 480px), only screen and (max-device-width: 480px)" href="/assets/css/small-device.css" />`