: Building for different screen sizes When building new webpage layouts, I think of all the devices out there - cell phones, tablets, desktops, etc - with a diversity of screen sizes. I can see

@Harper822

Responsive design (also known as 'adaptive' design), where the same web page presents the best version of two or more hand-crafted layouts depending on the browser width, is the strongest option for most websites. To see why, it helps to look at all of the options available to web designers:

Fixed layouts

A fixed page width, where the content width is the same regardless of the browser width, offers a uniform look and feel across devices and can require less coding, thinking, and maintenance than more flexible designs.

Some feel that fixed-width layouts are relics of a bygone era, where people craved pixel perfection and uniform looks across all browsers. Andy Clarke, author of Hardboiled Web Design, feels that this way of thinking is dead:


"In the past it was standard practice
to fight hard to create a website that
looked and worked the same across all
browsers — no matter what their
capabilities. To do this meant making
compromises and avoiding using
technologies not supported by all
browsers.

Is this hardboiled?

Don’t kid yourself, sweet cheeks. This
isn’t the way to evolve our craft or
build a better web. This kind of
old-fashioned thinking holds us back.
It forces us to make excuses for not
doing what we know is the right thing.
The worst that we, as the current
custodians of the web, can do is to
allow anything to limit what’s
possible."

— Andy Clarke, Hardboiled Web Design, p6 [PDF Edition available here]


While some see fixed layouts as the height of laziness, fixed-width designs are still chosen by very smart design teams over fluid or adaptive layouts. Apple, for example, currently serves the same layout to iMacs as it does to iPads and iPhones. Why does the company responsible for bringing mobile web browsing to the masses not optimise its website for mobile devices?

Because it doesn't think it needs to.

Instead of adapting its website for small screens, Apple built hardware and software to comfortably handle wide websites on those screens. Apple thinks that a 'mobile optimised' experience is best delivered in a native application, not in a browser window. That's why it offers the Apple Store app instead of serving a mobile-optimised Web store. And it's why it encourage publishers to offer magazine apps over tailored websites. Apple's current web design philosophy is clear: one layout to rule them all works fine. For everything else, there's an app for that.

For this reason alone, some would argue that fixed layouts remain as relevant as ever; they'd say that fluid and adaptive layouts are just stop gaps while we wait for mobile browser software to improve, and HTML and JavaScript to evolve and tempt developers away from siloed app stores.

In my opinion, though, pinch-tap-drag-scrolling your way around the Web for any length of time on a mobile device isn't much fun at all, even on an iPhone. If you believe that the best Web experience is the one that makes reading, publishing, and interacting with websites a pleasure instead of a chore, regardless of the device you're using, you have to concede at some point that serving content tailored to each visitor is worth considering.

Fluid layouts

Fluid layouts, where the page's width flows to fill the screen (often up to an imposed maximum width), promise a better experience across different platforms by delivering content at a width more suited to the viewport.

In practice, fluid layouts cause more problems than they solve, as noted by Cameron Moll in this quip:


"...fluid designs solve every layout
problem much the same as computers
make offices paperless i.e. they
don’t."

— Cameron Moll, "Should all sites be fluid?", September 2006


When you adopt a fluid layout, you relinquish control of your design and accept that text will rewrap, images will reflow, line lengths will vary unpredictably, text, images, and navigation elements may crush together at small widths, and columns will jump and float around just to spite you.

A fluid layout, some might say, is also a lazy option. It is the shotgun approach to adaptive web design. Instead of providing a tailored experience with three or four carefully considered fixed-width designs, you're offering an unpredictable experience in the hope that it might work on big and small screens, and hopefully plug all the gaps that you haven't fully considered in between.

This doesn't make fluid layouts useless. There are ways to make them work. The 456 Berea St blog, for example, adopts a fluid layout up to a given width, after which it uses a fixed one for anything bigger. And at really small widths, the sidebar drops away to use a single column that makes it easier to read on small screens. But this is no longer a fluid layout. It is something better. It is a responsive design.

Responsive layouts

A 'responsive' or 'adaptive' layout -- where the same web page presents one version of two or more crafted layouts depending on the visitor's browser width -- is a key part of progressive enhancement, which aims to make a website look the best it can for every visitor.

Choosing to adopt an adaptive layout is 'excellent customer service', in the words of Aaron Gustafson, the author of Adaptive Web Design. If we design our sites well, he says, visitors should be presented with a perfectly crafted experience without realising that we're making a fuss of them:


"As web designers and developers, we should strive to be as good at our job as that attentive, unobtrusive waiter, but it isn’t a simple task. Just as a waiter has no idea if a customer coming through the door will require frequent refills or few, we have no way of knowing a particular user’s needs when they arrive on our site. Instead, we must rise to meet those needs. If we’re really good, we can do so without our customers even realizing we’re making special considerations for them. Thankfully, with progressive enhancement’s user and content-focused approach (as opposed to graceful degradation’s newest-browser approach), this is easily achievable."

— Aaron Gustafson, Adaptive Web Design, p12 [PDF edition available here]


The realisation that our job as web designers is to adapt to our visitors and not force them to adapt to us -- as Apple might have us believe -- is a fairly recent development in Web design. It is, in my opinion, a renaissance of sorts: we have finished cherry picking the good habits from years of print design. Now we must throw away the shackles imposed by working within a predefined space on the printed page.

Where once we treated the browser as a fixed canvas, we're now accepting that no defined canvas exists at all, and this is becoming ever more clear from the huge mix of screen sizes you're no doubt starting to see in your visitor stats. Instead of treating each new device as a unique 'page size' to target (and then having to rally troops when a new device comes out) we can follow more future-proof conventions.

We can think in terms of bands -- 'large', 'medium', and 'small' -- instead of thinking about specific phones and tablets, then design sites to look their best in those bands. Whatever new devices come out, they will fit into one band or another, and -- even if they're right on the border between two bands -- we still have more control over the experience than if we'd used a fixed or fluid layout.

In Responsive Web Design, Ethan Marcotte offers this call to arms:


"We need to let go.

Rather than creating disconnected
designs, each tailored to a particular
device or browser, we should instead
treat them as facets of the same
experience. In other words, we can
craft sites that are not only more
flexible, but that can adapt to the
media that renders them.

In short, we need to practice
responsive web design. We can embrace
the flexibility inherent to the web,
without surrendering the control we
require as designers. All by embedding
standards-based technologies in
our work, and by making a slight
change in our philosophy toward online
design."

— Ethan Marcotte, Responsive Web Design, p8 [PDF edition available here]


But what bands do you use? Ethan Marcotte recommends the following three in Responsive Web Design. (To learn what they do and understand the caveats, you might like to grab the book.)
@media screen and (max-width: 768px) {
...
} @media screen and (max-width: 520px) {
...
} @media screen and (min-width: 1200px) {
...
}


There are also a range of CSS frameworks designed to help build adaptive websites, including Joni Korpi's Less Framework.

Instead of using arbitrary breakpoints, it's perhaps better to let your site's design dictate the bands. Reduce your browser's screen width and, whenever your design breaks, that width should be one of your “breakpoints”. Keep reducing the width and adding breakpoints with CSS media queries until your design looks good at all widths. That way, your design will look good on all devices instead of only the handful of screen sizes you've tried to pigeonhole it into. If you use Chrome, turning on Developer Tools (View > Developer > Developer Tools) and reducing your browser width gives you a helpful readout of the current width in the top right corner that you can use to work out where your breakpoints should be.

Another popular approach to consider is Mobile First responsive design, where your core stylesheet handles the styles for the smallest devices, and the media queries deal with larger screen widths, instead of the other way around. This can result in faster performance on mobile devices, particularly if you use lots of CSS background images. (You'd construct the breakpoints in the same way – just start with your browser width at its minimum and work upwards. And don't forget to test on as many actual devices as you can get your hands on – consider visiting an Open Device Lab.)

In short, when it's done well, adaptive design is a joy to behold and experience both as a web designer and a communal garden web user. Take the site of Japanese firm Information Architects, for example:

On an iPhone



On an iPad



On an iMac



Just as Aaron Gustafson predicted, you don't even know you're being catered for until you see the designs on the same page.

The experience could hardly be more pleasant in each case; you don't have to think about or interact with the page to start reading the content, spend time wondering why it looks strange on your screen, or zoom in to see navigation elements before you can tap them, because someone already solved those problems for you. And that is why responsive design almost always trumps other options.

Vote Up Vote Down

@Bryan171

I'd use two stylesheets.

One thats flexible to fit the majority of regular desktop PC users.

Another for mobile.

Vote Up Vote Down

@Angela700

The current recommended best approach is to use what's been coined "responsive web design" where you need to satisfy various devices and screen size/resolutions with a single approach.

A great article outlining the hows, whats and whys of responsive web design can be found at www.mayfielddigital.co.uk/blog/web-round-up/best-responsive-web-design-examples-and-resources/

Vote Up Vote Down

@Shelley277

It depends how much style influences your design. There are many factors, customer requirements, third-party content which will constrain you flexibility in terms of size.

If you can build a site that looks good and is highly usable to all your users that scales to any size, then awesome, do it!

The next option is to have a style with minimum width dictated by certain elements such as vertical menu, navigational aid or the like and have the main content column resize to fill the remaining available space. Still, it is not always easy depending on certain contents (banner ads, widgets, video, etc).

What most sites end up with is a fixed-width common denominator layout. Note I did NOT say lowest common denominator. If you look at stats, either your own or those from w3schools, you will notice that 85.1% of people have displays over 1024 pixels wide and 98.9% of people have at least 1024 pixels width. Think about the ease of implementing a 1024 pixel-wide layout and the effort needed so that 1.1% more people do not need to scroll horizontally and you'll see why this is an extremely common choice for designed websites.

Of course, consider your audience, it may not match visitors of w3schools. You may also purposefully alienate more visitors if they do not suite your needs. Stuck In Customs was designed extremely wide because the target is people with in interest in graphics and photo which mostly work with large displays. It also makes the experience much bolder for them.

Vote Up Vote Down

@Kevin317

A fluid layout is the easiest to create and maintain. You then can also use a mobile stylesheet to "fix" any issues that may arise in very small devices.

Vote Up Vote Down