Menu
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.
545
1280px and 1920px are the two standard widths for web design. A 1280px website will look great on laptops and mobile devices but not so great on large monitors. To ensure your site looks just as good on big screens as it does on small screens, set your max site width to 1920px or more.
The browser's viewport is the area of the window in which web content can be seen. This is often not the same size as the rendered page, in which case the browser provides scrollbars for the user to scroll around and access all the content.
A viewport is defined by the size of the rectangle filled by a web page on your screen. The viewport is the size of the browser window, minus the scroll bars and toolbars. Browsers use “CSS pixels.” For many devices, such as those with retina screens, the viewport is smaller than the advertised device resolution.
In an SVG document, the viewport is the visible area of the SVG image. You can set any height and width on an SVG, but the whole image might not be visible. The area that is visible is called the viewport. The size of the viewport can be defined using the width and height attributes of the <svg> element.
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" />`
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 */
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
