As many in the dev community are aware, earlier this week A Book Apart released their latest title, Responsive Web Design by Ethan Marcotte.
Due to the fact that I’ve been so busy with other stuff of late, I honestly have not experimented much with responsive design techniques and the related CSS3 media queries.
I intend to read Ethan’s book and will eventually get around to incorporating some of these techniques into future projects, and I’m hoping to eventually have a responsive layout for this site. But there are a few things about this whole responsive design trend that concern me a little bit.
I Thought Fluid-Width Sites Sucked?
UPDATE: (June 14/2011) In this section, I’m not saying that full-width fluid layouts are the same as responsive layouts; but the underlying concept is the same. Those old-school layouts, for various reasons, never really caught on.
I’m definitely one of those developers who has coded fixed-width layouts pretty much exclusively. The closest I’ve come to making my sites “fluid” is allowing the header and footer to expand the full width of the screen (like on this site’s current design). The rest is usually squeezed into a fixed container div that’s margin-autoed.
So again, my understanding of fluid layouts is pretty limited, and I’m not formulating any definite opinions here. But I am concerned because of the fact that fluid width layouts are nothing new; they’ve been around for a while. But they never really caught on as the best way of laying out a site.
From what I can tell, a fluid-width page will look fine on a user visiting a site on a Mac because, generally speaking, a Mac user doesn’t have maximised windows. While a Windows user (like myself) might have a very wide monitor (like I currently do) thus making fluid-width sites like Wikipedia look awful and unreadable.
One commenter pointed out that this was a feature on Wikipedia to aide page zooming, but I personally don’t see a difference in zooming when the main content is at a fixed width.
Is it just my imagination, or are most of the people who are pushing “responsive” layouts working on a Mac and exclusively using non-maximised windows? Again, I’m not making any definite statements here, and my ignorance in this area might be swaying my current view, but I see this as a concern because the average web user (i.e. our clients’ audience) is not on a Mac.
Make ‘Em Good
There have been arguments against the use of media queries (I know, media queries != responsive web design), which everyone should consider. I hope Ethan has addressed those issues in his book.
Jeremy Keith was recently on the SitePoint podcast to defend his view of responsive design and to clear up some misconceptions and misrepresentations, so I encourage everyone to listen to that broadcast.
Personally, I would like to see responsive layouts that do not incorporate full-width fluid techniques. For the reasons mentioned above, full-width layouts can be very hard to read, and often present too much information on a horizontal plane, making it seem as though the content is overkill.
So, my advice is, if you’re going to use responsive techniques, then do it right. A new Media query showcase website displays some excellent examples that are worthy of imitation, and that work much better than the Wikipedia-style full-width layout. So check those out if you want to get into these types of layouts.
It’s the Future! (Maybe)
I wrote this article because I noticed a lot of people tweeting about responsive design being the future of the web. I’m all for encouraging best practices, but I’m also cautious about accepting new techniques blindly. I think it’s wrong when people accept trends without first researching (objectively) whether this really is the best solution.
Whether or not responsive design is the future of the web, Ethan Marcotte is going to sell a slew of books pushing the technique. So I honestly can’t consider his view “objective” in the truest sense of the word.
I’m going to get around to reading Ethan’s book, and I’m definitely going to play around more with media queries and responsive techniques. But I’m certainly not going to assume that we’ve now found the holy grail of web design without first giving it an objective and thorough test.
I kind of had the same feeling like you about responsive design. I also bought the book yet still have to read it. I still have to form my own opinion on the topic, but there’s one thing I want to say in response to your concerns:
I think you are focusing too much on the situation where users have big screens. Please do keep in mind that this new wave of responsive design is born out of the opposite: scaling down. To mobile devices. But it could be a 70″ TV as well, so it covers all directions. Also, responsive design does not exclude using a fixed width after a certain treshold.
Just a quick comment. Screen size (scaled up or down) does not necessarily equal changes in resolution, which is more important. Consider that in 2001, 800×600 resolution monitors at 15″ were standard. Today, my Android phone has a full color display at 800×480. Screen size? 3.7″ – So, a website designed at 800×600 in 2001 will still look the same on my 3.7″ screen (along the horizontal axis) as it did on a 15″ monitor.
Only one problem with that 800×600 site on your 3.7″ screen: you probably can’t read it, let alone click the links.
I know all the mobile browsers offer resizing and zooming, but the idea (at least from what I understand, I too haven’t read the book) is that your design may vary depending on several variables, most notably your screen size. On a very narrow screen like that of a smart phone, sidebar navigation may not make sense, and the design may differ. Check out the current layout http://modernizr.com. On my laptop, with my window maximized (on a Mac, no less!) at 1280×800, the site has 3 columns. Resize the window a bit smaller and and the layout changes to 2 columns. Resize smaller and it goes down to one column. And something else to note: on my desktop, maximizing the window at 1920×1080, the design still has a fixed width of around 1280, eliminating the Wikipedia problem mentioned in the article.
I browse on my phone frequently, especially to search for things when I’m away from my desk at home or work. I look forward to more designers giving this approach a try.
Ya know, I was coming here to refresh my memory on the full vs. fixed debate for the 873rd time. I have no idea why I did not think to use a solution like the one you mentioned. Not just variable width, but variable content, but only up to a certain width to alleviate the issues with spaced content on the higher resolutions. The way I see it, that solves, the too big and too small problems, makes em all just right. Anyway, thanks for the idea.
You said you look forward to designers giving it a try. You have a +1 from me.
BTW, the site I have listed is my playground, so if you do give it a visit, keep that in mind. I have no idea what will be up when you do.
I had the same thoughts about complete liquid sites that scale with every change of a browser window. In such case you can never tell how your website wil look. But responsive websites convinced me very quickly. The idea of focussing on 3 or 4 layouts with both there -min and -max boundaries, that will just change basic layout things to the best view for the width. The control is much bigger for your design. And maybe the future is that you should design those 3 or 4 stages. But i think you should always (for now) start with your desktop version and like Ferdy says scale down.
This is the first time for me that i will go learn liquid webdesign. But that’s just because it’s to time consuming to make 3 or 4 fixed with verions of your site.
Got Ethan’s book and read it on the patio two days ago. He’s a pretty strong proponent of not using full-width design a la wikipedia, but instead using min-width to feed yet another version for those on large/widescreen views. That said, he’s also a big fan of going the other way, designing for the smaller screens and moving up the ladder from there, rather than designing one optimal desktop one and then just cascading the pieces one under the other.
After reading his book I am going to give it a shot for a few sites I work on, but I was really glad to find this post from Viget this morning (http://www.viget.com/inspire/is-responsive-design-a-good-fit-for-mobile) encouraging a more thoughtful approach to RWD as the only answer to sites for mobile and desktop. So good to see lots of folks being thoughtful about these questions, yourself included.
As said above, responsive design does not equal fluid layouts. You can have fixed width designs – you just end up with three or four, each one optimized for a particular width. I haven’t read the book (yet), but I plan on trying it out on my personal site.
I’m in full agreement with Ferdy at top. I, too, design in fixed width. After applying the article Ethan wrote on ALA, I can see the usefulness. It’s not to hard of an overhaul and in that sense I think it’s only something I will apply moving forward. I won’t redesign everything write now. I’ll procrastinate for a while. : ]
Having said that, please also note that Ethan mentions browser queries towards the beginning of the article. That alters the equation when dealing with handhelds versus desktops.
I have to wait for funds to buy the book
@Graham: Is it irony that you reveal to be a procrastinator and at the same time does not have enough funds to buy a simple book? Hilarious!
One of the keys to responsive design in my eyes is the ability to scale text up and down depending on the window width. Wikipedia’s fluid design for example is set to a font size of 13px for everyone, causing very long lines on wider monitors.
With responsive design, you can increase that on large monitors and keep text to that 60-80 characters per line or whatever. Similarly for mobiles, you can increase the font size a tad so it is easier to read on a small screen.
You really need to read that book.
There’s always the right and the wrong way to do something. If one wants to get responsive web design right, it is important to remember that the final product must look good and readable both in small scale (tablets, phones) AND large scale (desktop, laptop). That’s where the media queries come in. Not only do they let you realign and scale down your product for smaller screens, they make sure your design is still usable viewed with a large desktop screen.
From a business perspective, I consider media queries or ensuring a design responding to varied widths as additional chunks of billable work. While the concept is great (and I’m exploring it in my work) it comes down to the time and planning (and executing) design and usability at each of those varied widths–it’s not a “freebee” per se and I try to communicate to my clients that the expertise of design and usability are what they’re paying for.
RWD using media queries are really nice, and I actually view them as the solution to the problems that can occur when trying to create a completely fluid site. Media Queries let you resize the site to fixed sizes and design around those new dimensions.
As Darrell mentioned, adding RWD via media queries is most definitely additional billable work on top of standard site design/development. I always offer it to clients as an extra service, explaining exactly what it is and its advantages, whether the client is interested or not usually relates to how much traffic they expect to get via mobile devices.
I haven’t read the book yet myself, but I think it’s a valid point and certainly how it can be useful. I also makes things a lot easier if you already have this in mind before you start designing the main layout.
I think it’s definitely the way to go, especially with so many different devices now with varying resolutions. A few weeks back I redesign my blog and decided to implement some progressive enhancement and I’m very satisfied with the results – http://www.gregbabula.com – It was a little easier than I originally thought.
designing for the smaller screens and moving up the ladder from there, rather than designing one optimal desktop one and then just cascading the pieces one under the other.
Responsive (…) Design.
That has to do with design, right? Talking about serving different content to different media falls out of the design area.
What’s left ? Having a different design for the same(!) content, for different media on the web.
Design+Media+Web = CSS. We already have a name for it, right ? Other names: progressive enhancement, graceful degradation. Stick to CSS, progressive enhancement and graceful degradation and you have your web design.
Responsive, if you like to call it like that, but that’s just an unfortunate term, the way I see it. It’s just proper web design. Or bad design. Or responsive can also mean a bad practice design, with some catches that makes him “responsive” ? Is that a target ?
Finally, RWD is the new name for the old DHTML ?
I think the main argument against responsive design is that it can potentially increase load times for mobile devices (particularly where ‘s are concerned) as (1) it encourages the use of HTTP requests for elements that aren’t displayed, and (2) recommends the use of large images that are scaled-down by the browser.
There aren’t many in-depth ‘anti-RWD’ articles out there but this one by Jason Grigsby seems well researched and makes some interesting points: http://www.cloudfour.com/css-media-query-for-mobile-is-fools-gold/
Haven’t read Ethan’s book yet so maybe it addresses some of the issues Jason raises. If not I’m sure there will be some in the pipeline soon enough.
I highly recommend you read the book. He addresses (at least to some degree) all of the concerns you mention, and even some you don’t.
Yep, that’s what I’m hoping for. I’m looking forward to reading it.
My backlog of web design and dev books on the “to read” list is getting way too big, however. :(
“Is it just my imagination, or are most of the people who are pushing “responsive” layouts working on a Mac and exclusively using non-maximised windows”
The upcoming Mac OS X Lion is introducing full screen apps.
I’m looking forward to what to have to say, after reading Ethan’s book. Objective. objective. objectively. :D
Nice post, this has been on my mind a lot. I want my websites to be viewable in all devices and responsive web design is a technique that can give me that. I also agree that I’d prefer rwd over 100% liquid layouts, though you can always do a combination of both. I love how designs with that technique (rwd) scale depending on the resolution. And since mobile devices are more common now, something needs to address these concerns.
http://sasquatchfestival.com/
This website makes use of it.
And a complete mess.
The document outline is gone missing, divitis is back and a number of other things when zooming makes it grade down even further.
The design is good, but that’s it.
It’s a relatively new technique, first described in mid-2010 by Ethan Marcotte in his A List Apart article of the same name. Put simply, it involves providing a number of site layouts adapted to various screen widths, and then serving those layouts accordingly thanks to the use of CSS3 media queries.
Thanks for posting.
It’s not about full width layouts, it’s about sites that adapt to the browser window (generally said). Because if you claim to have a “responsive” site and it still looks ugly or unreadable at the maximized window of a 1920 monitor you have done something wrong and didn’t create a responsive site. A true one should display well on a tiny mobile screen as well as one a Full HD TV.
And that’s exactly my point. Why are commonly used sites like Wikipedia still using full-width layouts? I know that Wikipedia does not really have a true “responsive” layout — it’s more of an old-school fluid layout (like I’ve described above).
I just get the feeling that a lot of people getting into true responsive designs are going to optimize the reading experience for smaller screens (iPhone, iPad, etc) but are going to allow the full-width windows to expand the content to 100%, because that seems to be somewhat easier to code.
As far as I have noticed it’s common to set a maximum width for a website respectively to design the “maximum” state of it to something like 1280 pixels. Of course to be truly responsive you should also provide a design for wide monitors but I think sometime it would just beyond the scope. You can’t provide 5 or 6 different states for every website you make and it’s also not possible to use a single fluid one.
Re: fluid width layouts sucking, I thought the same thing but a % based width with a max-width and you’re cookin :)
I’m sure that as you learn what can be done to respond to viewport sizes you’ll realise that it doesn’t suck at all. :)
Taking your example, when a visitor has a wide viewport it doesn’t mean they have to have lines of text that span the whole width. The designer can apply a max-width to the text, or place other page elements to the side, or turn the text into columns, etc.
This is the point: you get to choose what happens in different situations, so it’s up to you whether it sucks or not.
It seems not too many here read that book but I just finished it and can be a great solution for certain sites.
Using media queries you will actually tweak design for smaller devices, by decreasing heading font sizes, stacking navigation items vertically and resizing pictures.
For larger displays you’ll just limit the main content area.
A conpletly fluid site sucks but “healing” it like the book said with media queries it is easier to navigate for specific devices.
I didn’t read the book but i can understand now what is responsive web design because of your comments and interacting with each other. Your argument is very strong. One thing making the content very small makes the site very unnatural but resizing the font is a nice initiative.
Hi,
I do strongly think that making the site more fluid is a great thing.Especially here in africa(I am from kenya).Most of the screen are low resolution and the internet speeds are slow in some areas.therefore if the site adjusts it ensures that your audience see the whole site instead of having part of the site cut out of the screen.
Great post, i got a lot of new inspiration in your page. Keep writing for us, i should come back to see what new in future in here.
It was a nice article.
It resulted in some interesting comments on this page.
I am not a big fan of ‘fluid layouts’. However, I do realize that in some cases,
depending on your audience and their preferred devices, it can be an ultimate solution.
I am planning to read the book first in order to be able to contribute with some concrete feedback.
I love 100% width fluid layouts since they are usually also good for ipad or iphone – the left and right typical margins of most (non- text based) websites are getting boring
Making website fully responsive is really hard job, as you need to take into account almost any resolution. It’s much easier (and for most sites enough!) to take adaptive layout approach and prepare only 3 versions of the website (“mobile”, “tablet” and “web”).
At Clearcode, a web & mobile development company I run, we see mobile trending a lot – either clients go directly into developing mobile apps, or they ask to design their web application to be responsive (which sometimes translates to adaptive layout only).