CODEWITHSUNDEEP
htmlcss
DextrousDave
DextrousDave

Reputation: 6793

HTML basics: What is currently a good viewport size?

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 800x600 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.

Upvotes: 5

Views: 1816

Answers (5)

sheriffderek
sheriffderek

Reputation: 9043

like imakeitpretty said... but don't worry about the currently popular device sizes... just resize until it is about to look ugly... and then make the break point... so it will look great on everything.

/* break point 01 ----------- */
@media only screen 
and (min-width : *size-it-gets-ugly*px) {
/* Styles */
}

/* break point 02 ----------- */
@media only screen 
and (min-width : *size-it-gets-ugly*px) {
/* Styles */
}

/* break point 03 ----------- */
@media only screen 
and (min-width : *size-it-gets-ugly*px) {
/* Styles */
}

Upvotes: 2

imakeitpretty
imakeitpretty

Reputation: 2116

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" />`

Upvotes: 5

J V
J V

Reputation: 92

960px has been a solid standard width for a while.

The reasoning is put in this other SO question here.

Understanding your user is really important though, what you said about gamers is completely true.

I'm not familiar with responsive, but that looks promising as well

Upvotes: 0

anon
anon

Reputation:

The best size is the size of the display that is viewing your site.
As j08691 pointed out responsive is the best practice in 2012. Responsive design while sounding like an empty buzzword is really useful. Your content is always the same size as the viewers browser.

Using media queries with fluid grids yields the best looking and most usable results. If you're not keen on writing your own, than have a look at an existing one like the Responsive Grid System.

Upvotes: 1

dezman
dezman

Reputation: 19358

I would say 940px width + responsive using media queries min-width: 780px and 480px.

Upvotes: 1

Related Questions