Adapting Your Site to Different Window Sizes

Modern browsers like the latest versions of Internet Explorer, Firefox, Safari and Opera support the width and height properties of the W3C Working Draft CSS Device Adaptation, which as of 1 November has evolved to an Editor’s Draft. This gives Web developers a simple tool to control automatic content scaling across various window dimensions. In particular, it enables sites to easily adapt to browsing on touch-enabled tablet devices in the snapped view and in portrait orientation.

Auto-Scaling and When it is Used

Many websites have prioritized optimization for a 1024 pixel wide window. This ensures a good user experience for a wide variety of displays when the browser is maximized. However, sites may not work well on new form factors like tablets and portrait screen orientation if they haven’t optimized for other window sizes as well. In particular, pages often clip or distort layout when viewed in a narrow width.

Techcrunch, not optimized          Wikipedia, unoptimized

This narrow layout is particularly important in Windows 8, where the snapped view of the browser is in this exact state. This situation also occurs for portrait mode on slate devices due to the smaller form factor.

The snapped view and portrait mode are auto-scaled by default to ensure at least 1024 pixels of layout width. Mobile devices take a similar approach when displaying non-mobile-optimized sites on a narrow form factor. Since most sites are built to work well at 1024 pixels, this ensures that they are laid out well and do not clip content by default.

Techcrunch, optimized          Wikipedia, optimized

Although this approach ensures a good default experience, users will need to zoom in to view and interact with the site.

Working Well In a Narrow Window

The best narrow layouts are those that have been custom-made by the Web developer. In addition to fitting the site into a narrower region, this also may require changes to image sizes, reordering of content, alternative tools for site navigation, or other fundamental changes to content.

If your site has already made these modifications for narrow windows, then Device Adaptation can be used to override the default scale.

For some great examples of adaptive layouts, check out Media Queries. Metal Toad Media also has a great article discussing layout width support based on prevalent devices and screen sizes in the market.

Using @viewport

Simple support for the snapped view

If your site is already capable of a 320 pixel width layout, you can easily choose to show that version in the snapped view. Combining Device Adaptation with CSS media queries allows the auto-scaling feature to be overridden selectively. This CSS overrides the default auto-scaling, and instead enforces a consistent 320 pixel layout width for all windows 320 pixels wide or narrower:

@media screen and (max-width: 320px) { @viewport { width: 320px; } }

When the window is less than 320 pixels wide the content will be scaled down to fit. For example, a 300 pixel wide window will show the content at 93.75% scale. For larger widths, normal scaling applies (for example, when the browser is in portrait mode).

Device adaptation degrades gracefully in browsers which do not yet support it. These browsers can still benefit from narrow layout support—they just won’t auto-scale to fit content to the window.

Portrait support

If your site supports a 768 pixel wide layout as well, then portrait mode support can be easily added with a second viewport rule:

@media screen and (max-width: 320px) { @viewport { width: 320px; } }   @media screen and (min-width: 768px) and (max-width: 959px) { @viewport { width: 768px; } }

I recommend testing your site in layout widths of 768 pixels (portrait on most slates) and 320 pixels (snapped browser) in addition to 1024 pixels and wider (landscape). You can see an example of the viewport rule in action in the Make it Snappy! demo on the IE Test Drive site.

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • http://www.codeconquest.com/ Charles @ CodeConquest.com

    I have to say, responsive web design kind of scares me off at the moment.

  • Andreas Baitis

    This is all good and well, but with device pixel densities sky-rocketing especially in the tablet space it’s not enough. The Nexus 10 in portrait mode has a width of 1600px, in landscape 2560px, I can see a situation where this device could be mistaken for a 24″ widescreen monitor. Pixels aren’t enough any more, we need to be able to find out the ppi of these devices via Javascript or have CSS properties that are aware of the ppi somehow.

    • Robert

      You should do your own research, instead of relying on just the information in blog posts.
      Everything is catered for : dpi, dpcm, orientation, aspect ratio, resolution, etc.
      Go here : http://www.w3.org/TR/css3-mediaqueries/

      • Andreas Baitis

        I’m not relying on the information in this post. Simply pointing out to the author that pixels aren’t enough, IMO, and it’s just my opinion.

        Glad to here that css media queries support PPI, this is a good thing, cheers.

    • Dave

      Just like the iPad 3 and 4 with Retina (and the iPhone 4, 4S and 5), this 2560×1600 renders as 1280×800 and should look nearly as good as an iPad.

      Anyone questioning why I say ‘nearly as good as an iPad’ then this is because the iPad’s perfect 1024×768 (or 2048×1436 if Retina, but still rendering at 1024×768) is perfect for viewing web pages. The Nexus 10 will just have some white space at the side.

  • Phillip

    Responsive design is pretty much a must these days. I’m not pro developer, just someone who builds web apps on the side and for work needs. It can take a bit to get your brain wrapped around it though. Just practice, alot. Only thing I would like to add to this article though is instead of px, you should try using em’s for you sizes.

  • http://www.maxilista.com Johny

    Finally there are some good news in this direction. I will definitely implement on my new projects.

  • http://www.mayhemdesignstudio.com mayhemds

    Love this site and just can’t get enough of the great lovely jubbley tutorials. Keep up the great work….
    sitepoint Rocks! I’ve learnt a lot from you guys….
    Thanks

  • Kelly

    Responsive Design and media queries is a cool feature. Yet, I’m not so sure that making a “desktop web site” fit small devices is the way to go. There are some issues to consider… mobile devices don’t have the resources a desktop or laptop have. Especially when it comes to images.

    In any case, I’d like to build a mobile/tablet site in addition to my “desktop” site. This might provide a much better mobile experience. I’m using jQuery Mobile to make mobile sites, and that requires the use of the viewport meta tag: which means the width of the page will be equal to the width of the device, and the initial zoom is 1. (I think most mobile sites use the viewport meta tag these days.)

    The question to answer: should we start by building a mobile site and adapting it to larger devices, or build “desktop sites” and adapt to smaller devices”?

    After experimenting a bit, I might have that answer. My instincts tell me to create a mobile site separate from my “regular site”. But time will tell.

    Just something to think about….

  • Shantanu Patel

    Dear SitePoint team,

    I’m a regular visitor to SitePoint and the atricles here are just amazing. Even today, I read the article at http://www.sitepoint.com/adapting-your-site-to-different-window-sizes/ and thought of printing the article (PDF / hard copy). To my dismay, there was a lot of junk stuff, which was totally not required. The navigation, scattered text, in between ads, entire comments section.

    It would be better if I there would be just what is required for an printed copy. I would really love to keep copies of your articles for future / offline reference.

    Keep up the good work.
    Thanks!

  • http://www.responsivedesign.net.au/ Responsive Design Sydney

    And there are so many already built in frameworks around the web. Responsive Design really rocks but need some clear cut idea before implementing it