Take the 2-minute tour ×
Webmasters Stack Exchange is a question and answer site for pro webmasters. It's 100% free, no registration required.

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 two ways to accommodate this diversity. One is to build a fully fluid layout that adjusts to every screen size out there. On the other hand, I could try to create layouts that optimize for common sizes. This route could inevitably clash with some new device with a very different screen size, and would involve some amount of initial set up and testing for the targeted sizes.

Would either of these routes be preferable to the other, or is there another option I haven't considered?

share|improve this question
add comment

5 Answers 5

up vote 14 down vote accepted
+100

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.

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

Information Architects iPhone screenshot

On an iPad

Information Architects iPad screenshot

On an iMac

Information Architects iMac screenshot

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.

share|improve this answer
3  
That's a pretty awesome answer. I've said "use responsive design" on a couple of answers previously. The questions were probably different enough to this to not look like duplicates, but I think the next time it comes up I'll point people here. –  paulmorriss Jun 17 '11 at 13:20
1  
I think it's safe to say this answer will be the resource we point users to whenever a question like this comes up. –  John Conde Jun 17 '11 at 13:28
    
+10 in comments, because I can only +1 the answer. –  Chris Kluis Jun 21 '11 at 13:57
1  
Impressive response. I agree with John Conde, above, that this could become a reference for future similar questions. –  Grant Palin Jun 22 '11 at 20:50
add comment

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.

share|improve this answer
add comment

I'd use two stylesheets.

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

Another for mobile.

share|improve this answer
add comment

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 http://www.mayfielddigital.co.uk/blog/web-round-up/best-responsive-web-design-examples-and-resources/

share|improve this answer
add comment

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.

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.