Hi, “simon_brooke”:http://www.alistapart.com/comments/responsive-web-design/P40/#49. Two quick things:
By default, Mobile WebKit will render a web page at 980px. You’ll need to include “a viewport @meta@ element”:http://developer.apple.com/library/safari/#documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html#//apple_ref/doc/uid/TP40008193-SW6 to override this behavior; personally, I recommend setting the value to width=device-width, initial-scale=1.0, and then use min-width/@max-width@ to design for different resolution ranges.
I believe Mobile WebKit simply ignores the handheld media type altogether.
Hope that helps.
“bradybd”:http://www.alistapart.com/comments/responsive-web-design/P40/#50, “the final demo page”:http://www.alistapart.com/d/responsive-web-design/ex/ex-site-FINAL.html works just fine for me in Safari 5.0.2. Not sure what the error could be on your end—sorry!
Copy & paste the code below to embed this comment.
Pellio
Great article, cant wait to start using these!
Was wondering, if you have multiple versions of images which load depending on browser width, are all three images being downloaded even though only the appropriate one is being displayed?If its loading them all, will this not be a problem for page size, especially now google is meant to be using size as a factor is its results?
Nice examples, and a compelling argument for a single page. But for a well-featured application or site, it is naive to send the same content and IA to every browser.
Firstly, the constraints of certain browsers aren’t just related to their media-queryable screen size. Input techniques, supported gestures, local APIs, network profile… A mobile browser certainly doesn’t enjoy having to download huge images simply so it can resize them itself or ‘display:none’ them. (Let alone the user whose quota you’re cheerfully using up.)
But the most important caveat is this: media queries tell you about glass and plastic. Presumably one should rather be designing for the human on the other side? If the site you designed for sedentary users provides exactly the right services and content for your mobile users too, then it’s only by highly suspicious accident.
Imagine the perfect airline web site for a desktop user (ticket booking, holiday planning, pretty animation of the new flat beds in business class). Now imagine the perfect airline web site for a mobile user (on-line checkin, flight status, geo-location, registering for SMS alerts).
What CSS media query allows me to turn the former into the latter?
Thanks a lot Ethan for this well explained article. I must agree with James Pearce though on the content side of things.
For most of the sites we make a responsive layout will not be enough. We need responsive content. But for the more basic websites we will sure going to use your well documented article on how to handle this!
Copy & paste the code below to embed this comment.
mickeyhawk
These techniques hold a lot of promise for better design and more findable information (due to same URLs used for different devices/viewports). I wonder if the criticisms related to the necessity to show different content or functionality (as well as better performance) could be handled using AJAX (where AJAX is supported) in conjunction with media queries to provide a more appropriate experience?
Ever since I read this article a few months ago it has stuck with me. I try to be a progressive thinker, but I thank people like you ALA’ers that help push the discussion!
Also, good choice on the content of your example layout- I’ve been making my way through all of the old Sherlock Holmes books for a while now.
Copy & paste the code below to embed this comment.
Mich8060
I have a couple of question about this method. I work for a popular e-commerce site as a user experience designer. Recently the engineers in my company have been pushing for us as designers to start incorporating responsive web design concepts into our new projects, referring us back to your article to support their argument. The problem I run into time and time again is that many of the examples illustrated are of relatively simple layouts where elements, usually similar in nature are repeat and thus can move freely without creating confusion for the user.
However, when we decided to go fixed width on our site it wasn’t applied to every page but to those pages where elements needed to remain in key location on the page. Elements such as Mini Carts, Buy Boxes, Checkout forms, and other highly complex elements needed to remain locked and clear to a user in order to prevent confusion. If I was to constantly float elements up around these very important key components they may cause what I refer to as “information overload” for the user.
Boxes appearing next to the “Add to Cart” button may scare our customers away.
My next question is consistency. At my work we know two things, that people almost never resize their browsers once the page loads and that many of our customers will browser our site from one computer but purchase from another, Often these screen resolution do not match each other. If we present one layout to the user and they go home from work and are presented with another layout on their home computer how does that affect their experience?
Dave Snyder’s article in Practical Web Designer October Magazine seems to lack the same focus and completely ignores User Experience, as I believe most of the articles around this idea do. I’m not saying that fluid is completely wrong, in fact I agree with it when the content is repetitive and easily digestible like in your examples or on something like a search results page, but I believe that fixed is also just as valid where information needs to be consistent.
Please I’m not trying to disrespect your article, but I’d love to see some solutions that involve more complicated interfaces such as checkouts or product pages.
Any thoughts?
Talk about a sudden influx of questions. Thanks for the responses, all.
“bnt”:http://www.alistapart.com/comments/responsive-web-design/P50/#53, the JS library I mentioned in the article will interpret any media queries in your main CSS file. It seems to have a few limitations: queries on link elements are disregarded, and I don’t believe that the library can read stylesheets included via @import. Hope that helps.
“James Pearce”:http://www.alistapart.com/comments/responsive-web-design/P50/#55, I disagree with your odd characterization that responsive design is somehow intrinsically “naive.” I’ve partnered with several clients for whom a responsive approach was, in fact, the best approach for their clients and audience. But as I explicitly stated in the article, a responsive approach isn’t for every project: if your research guides you to believe that the goals of your mobile users are, in fact, different, then a separate, small screen-friendly site is perfectly appropriate.
For more on this, the second and third paragraphs of “this comment by Jeffrey Zeldman”:http://www.zeldman.com/2010/10/17/ipad-as-the-new-flash/#comment-56928 neatly sum up my thoughts on the topic.
“Mich8060”:http://www.alistapart.com/comments/responsive-web-design/P50/#59, you raise a number of fantastic questions. I’m not sure I can properly answer them in a simple comment form. I would say, however, that if you’re experimenting with “fluid grids”:http://www.alistapart.com/articles/fluidgrids/, you might experiment with introducing max-width constraints as best serves your audience. I’d also recommend leaning on your media queries to spotfix design issues as the viewport changes, addressing some of those overload points as needed. I hope that helps, and thanks again.
Copy & paste the code below to embed this comment.
Glow
the choice between design responsiveness and user zoom is an awful one
I agree with you Ethan, it’s sad we have to set the zoom to 1 for the design to look great both in portrait and landscape orientation.
I would like to ad another example that may help or inspire some of you : “Juslisen”:http://www.juslisen.com . It’s a personal website i redesigned recently. Thanks to css3 media queries it fits well on small, medium and large screens (ie: smartphones, tablets, desktop).
What about the markup though? A site for desktops obviously needs to include content that can’t been displayed on a mobile, e.g. showing a slimmed-down version of the site.
I’m torn between serving a whole new site to mobile users, just so we can omit the extra markup / larger images used on the full site, as opposed to used media-queries. By scaling images, or using display: none ; the mobile is still loading a hefty site. Where do your draw the line? How can I leverage the benefits of media-queries, but also those of serving a site with 1/2 the markup and weight?
Thanks for the article. I’m still on the fence about fluid vs fixed layout, though I like the idea of tailoring the experience to the device. I think things like fluid grids and flexible images are alright for websites, but I think it would be terrible building a decent sized web app with them. I’m still undecided about the best direction for the mobile web. I can’t tell you how many times I’ve gone to a site on my iPhone and been completely lost because it looks nothing like the “desktop version” I’m used to. So many sites implement the generic “mobile version” and I can hardly stand to use them. It will certainly be interesting to see how the industry solves these problems.
Copy & paste the code below to embed this comment.
jacsfolly
I loved the article, it certainly opened a world of possibilities. However, when Thomas Maas (above) writes, “everybody resizes their browser window all the time”, isn’t that a huge assumption? Do they?
Who are we designing for? The end user or our clients? Perhaps there’s something too old school about suggesting that we should design for the end user. If our websites win awards for the client but do not sell their product or service, haven’t we failed?
There’s also something peculiar about the apparent assumption that fluid websites that expand to the size of the user’s browser are ‘readable’. To understand this, don’t we have to go back to the roots of readability; i.e. ye olde broadsheet newspaper?
We have long been taught that people find it difficult to read the width of a broadsheet newspaper, which is why the broadsheet (or tabloid for that matter) is broken down into bite size columns; i.e. because people read in bite size chunks! Times change, people don’t.
Usability gurus tell us it hurts the eyes (and the brain) to have to read across a huge expanse of browser and therefore, we should design for readability. The human eye finds it more comfortable to read in bite size chunks.
So how do we measure the success of a website? By it’s fluidity or by the increased enquiries and/or sales it brings to the client who trusted our opinions and experience? The problem I see with fads and fashions is that they are here today and gone next year, or at the very least, they have evolved into another fad or fashion which in turn, is here today and gone next year.
I remember when Flash was lauded as, well, the best things since other flashy blinky things, but now, jQuery does the job more efficiently and effectively, and actually gets more respect from search engines for doing it!
Are we, as website designers, in the business of creating usable – and readable – websites for the end user, or in the business of patting ourselves and our clients on the back for the bright sparkly new fangled diggery doo of a website we’ve created that uses all the current fashionable technology but doesn’t actually sell itself to the end user?
Copy & paste the code below to embed this comment.
jhewitt
Great article Ethan. This is well written with perfect examples. I think you’ve done a nice job providing the web design community with creative solutions to a problem/opportunity that we’re all facing and have been facing. I was particularly happy to see your point about what can be done about increasing the size of the hot spot for links on smaller devices (great for touch devices too!). Since all the touch devices hit the market, I’ve been worried about how to resolve this. Thanks for the article.
In your CSS declarations percentages are expressed thus:
3.317535545023696682%
There’s really no need for this level of accuracy. The browser renders to the nearest pixel, and even if you have a 10,000px wide window 3 decimals places is more than safe: 100% is 10,000px so 0.001% is 0.1px. The rest of the digits really have no effect.
Copy & paste the code below to embed this comment.
atlantajohn
Firstly, thanks for this post – it’s really helpful and insightful.
Unfortunately, I’ve run into a small bug. In Firefox 3.6.13 (latest update as of 1-13-2011), the media query isn’t working below 400px min-width when called. I reviewed this in the site referenced in this article (http://www.alistapart.com/d/responsive-web-design/ex/ex-site-FINAL.html). It still works in Chrome…
Copy & paste the code below to embed this comment.
Lsnrae
Great article! I would love to start working like this.Â
There are two additional challenges I see with the same design being used across all media but reflowing accordingly, as would happen with the use of Responsive Design:
(1) Designers would also have to be developers to be able to create comps of pages that would reflow to display appropriately in different media types. Otherwise, a designer with no technical experience could create a desktop view and mobile view that are impossible or extremely difficult to implement from the same code, and get that signed off by the client.
Unless this designer was extremely good, they’d probably have to actually build out their comp in order to ensure what they were proposing was actually doable. This just means design phase would take longer (and presumably development phase would be shorter).
Anywhere I have worked, design and development have been two separate domains. For this to work in that kind of environment, close collaboration between designer and developer would be even more important than in the past. Developers would have to teach designers what techniques are possible that could inform their designs.
(2) Clients would have to decide what media they need to see the design on before signing off. If they needed to see the design on several media types, they’d have to wait longer to see that. Or, they would have to trust to the designer’s and developer’s judgement when implementing a desktop sized design on different displays (in my experience, the client would never agree to this).
With these challenges, it’s still an approach I’d love to try out, especially in an ideal world where I could design and develop (I’m a developer only where I work) and the client would trust me to create the reflowed design versions on various media types for a single approved desktop design.
Copy & paste the code below to embed this comment.
noiseshapes
I was trying to use import for my media queries, but it didn’t seem to work. I can only have it as media inside the main style. Also it looks like using @media I’m actually overriding the main style, so I have to write !important; to enforce the new rules for the smaller screen.
Any thoughts?
Thank you for the article.
Copy & paste the code below to embed this comment.
rhiaro
Firstly, thanks Ethan for a fantastic article :)
I’m using @import to import more advanced styles is causing my CSS to fail validation (against CSS3), with the error
“Parse Error and (min-device-width: 130px);”
It works, it just doesn’t validate. I’ve read a few conversations about there being bugs in the CSS validator. Does anyone know anything? It’s driving me mad..
The way you’ve gone about this, along with how you explain it is beautiful. This will work very well for small to medium-sized websites, but for sites with exceedingly large amounts of content that are not completely controlled through a small handful of dynamic scripts, implementing, controlling and maintaining this method may prove to be more t=work that separating out completely different templates for different media devices.
I do agree that your method is intelligent, but implementing this on a large scale may prove to be more work that most companies are willing to invest.
As the owner and creator of an online website builder I always look at new layouts and ways of presenting data at a much higher level than the average web designer/developer. I create the tools that so many other people use to create their websites.
Is it really feasible in any way or form to consider such layouts for a CMS or website builder used by novice designers? I say this from experience as I know that millions of website are created using tools like ours. Custom web designers might rejoice at the thought of such layouts being to complicated for CMS or website builders, but I can assure you there will not be huge spike in demand for such designs because of $$$. Not unless custom designers are willing to create custom designs for $10 a month (which they are not).
That said, I wonder what your thoughts are about implementing such technologies into CMS systems and website builders. Is it even a possibility? Knowing that so many of our users don’t even know the difference between their email address and their domain address, I don’t think it will ever be possible at that level. Your thoughts?
Hi! I am thinking about one problem. Why is convenance screen width resolution only 950px (plus minus)?
Because I understand, that a few years ago, it was because screen resolution (1). I know that you can’t use long rows because when you want design website with progressive enhancement you have to do a rules for better legibility and use only a some specific count of word and letter for one row (2).
But I understand that there is a lot of people with 1024px (about 22% – and it will be a less and less) and 800px is only about 2%, I think.
But isn’t better for design maybe use media queries like less-fw with one more parameter for .. maybe 950px – 1200px? It will solve problem with little resolution and we can help many peoples with a better resolution. You can paste every informations for one page (it have to be readable of course). It could be better for maybe aplication on web.
I know, that a lot of peoples with a better screen resolution (like me on my mac) have open two windows in one time, but when you will use media queries its not problem. When you will design text only in some rules for better legibility you can maybe use empty space for something else like some aside.
Of course i am talking about design with px width, no with % width.
Copy & paste the code below to embed this comment.
mikaels
Thanks for a great article (and great book)!
I have a question for you about the best design strategy for responsive design in the following case. the website in which i’m involved with is a big government site where we have control over the mark-up and css for most of the different pages and layouts (that we can make responsive) BUT some pages include web-applications developed by other consultancy firms and here we don’t have 100% control.
What do you do in a situation like this, where maybe 95% of all pages would benefit from a responsive design and width set to device-width:
<meta name=“viewport” content=“initial-scale=1.0, width=device-width” />
But the remaining 5% would probably be best viewed in the shrinked default view…
Seems like switching between them would create an inconsistent experience.
Copy & paste the code below to embed this comment.
egiova
It is not “Web Responsive Design” we are discussing. In my (humble) opinion, you rather call the beast something like “web Templating Architecture With Design In It”.
As it seems the worry here is not the way it looks, but the way it renders across devices. Technical worry vs Aesthetic worry.
Copy & paste the code below to embed this comment.
Yuvalik
The biggest problem I have with responsive sites is that it does not provide a choice to the user.
I guess most people like to see the same site presented differently to them on different devices, but I do not. I like it that I can click that “classic” link at the bottom on Google’s page on my phone.
In fact this whole discussion about responsive design takes me back a few years when it was advocated to procide diffent stylesheets for different display types like tv-screens, pages (printing) and screenreaders. Of which only printing has taken a foothold it seems.
As a user I want to keep at least be given control over this. If I like the whole website to just load on my phone instead of a fluid, smaller version than that should be possible.
As has been mentioned by others, why isn’t bandwidth on the forefront of responsive web design? It defines whether I add extra animations, images, and flares, or strip away the extra, and stick primarily to CSS styling alone.
I’m getting the impression it’s because there isn’t a good way to test bandwidth, is that right? How hard would it be to develop a good way?
User downloads CSS file, with images, time measurement taken, ajax request sent while other info continues to download. Granted, you’d only have a clear bandwidth picture after half the page is loaded, but that’s when the javascript is loaded anyway. Not to mention a lot of media is loaded “below the fold,” in which bandwidth would determine amount/quality.
Ok, so I don’t really know what I’m talking about, but given that everything else IS possible, and bandwidth can be measured with other analytics and methods, I don’t see why someone isn’t tackling this issue.
Hm, now I can’t go back and editing my comment to show the fool of myself. However, I still think that there are applications that do need to be talked about. The below stack overflow discussion touches on it, and mentions, and I agree, it’s applicability to video sites. What about other features? Large javascript applications? I guess I feel like rather than a blank topic that gets a sprinkling of conversation inspired by new developers, it needs to be addressed definitively.
Ex. Here’s how it’s done, here’s why it’s rarely practical, here’s when it its practical, and this is when and how it’s best implemented. That kind of a thing.
You can find my thoughts about applying responsive web design on forms in an article I wrote: http://www.formable.net/thoughts-about-responsive-web-form-design
Navigation and ease of use are very important in designing a website. Thanks for effort you have put forth on the subject! – David = A Work Of Art, Inc. Fort Lauderdale, FL
I think responsive web design it’s great but what about performance ?
Usually responsive tends to hide elements instead of use only necessary things…and we know that mobile devices and connections are slower than Laptop or Pc ones.
Which is the best approach to solve this issue ?
I have read the article and your book Ethan, but I cannot figure it out how I can position fixed, relative or absolut a div with Responsive Web Design.
I’ve have been using this blog for excellent infomation for a time now and find that it’s a helpful resource for people trying to find the suitable information. Keep up the good work.
Great post. I was checking continuously this blog and I’m impressed! Extremely useful info specially the last part :) I care for such information a lot. I was looking for this particular information for a very long time. Thank you and good luck.
This kind of technology is great for coping with the many different platforms that people access the internet from these days.
There is an argument of course that designing a separate mobile site is better than building an all encompassing responsive site.
Perhaps we just need to practice more but right now it feels that convincing a client to spend more to get a responsive site (i.e. it takes a lot more work to do) isn’t the right thing to do when a normal site and quick rework for a mobile site (assuming it’s CMS driven it’s quite easy) will fit the bill.
Excellent post! Thanks for sharing. I wrote a post introducing Responsive design to someone new to the topic: Responsive Design — an introduction: http://bit.ly/L05U9a
Look back fellows. Before we’ve got into html5 and css3 to standard things more-less, there was time when major players were trying to push their very own “way of life” to concur the market (my opinion). Now since everyone (aside of MS IEXXX) comes to final conclusion, hardware folks are still jiggling around with their very own “proprietery” ideas. How about to come-up with several standards for their screens? It will be much easier for W3C to came-up with a solution. And then we’ll only compete by human characteristics (which affects any visual expressions, including designing things). But no, freedom of enterprize and unbounded competition is “The Mantra”, right?
So where is the plain logic and functionality?
As an analogy – look at cars or airplanes.
Ethan I agree that one website can now be built to accommodate all platforms if done right. We have a lot of customers ask for a separate mobile website. We tell them that in most cases it is unnecessary and a waste of money. I was surprised by this stat: “Mobile browsing is expected to outpace desktop-based access within three to five years.” but I don’t think we as designers should be intimidated by this.
103 Reader Comments
Back to the ArticleEthan Marcotte
Hi, “simon_brooke”:http://www.alistapart.com/comments/responsive-web-design/P40/#49. Two quick things:
980px. You’ll need to include “aviewport@meta@ element”:http://developer.apple.com/library/safari/#documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html#//apple_ref/doc/uid/TP40008193-SW6 to override this behavior; personally, I recommend setting the value towidth=device-width, initial-scale=1.0, and then usemin-width/@max-width@ to design for different resolution ranges.handheldmedia type altogether.Hope that helps.
“bradybd”:http://www.alistapart.com/comments/responsive-web-design/P40/#50, “the final demo page”:http://www.alistapart.com/d/responsive-web-design/ex/ex-site-FINAL.html works just fine for me in Safari 5.0.2. Not sure what the error could be on your end—sorry!
Pellio
Great article, cant wait to start using these!
Was wondering, if you have multiple versions of images which load depending on browser width, are all three images being downloaded even though only the appropriate one is being displayed?If its loading them all, will this not be a problem for page size, especially now google is meant to be using size as a factor is its results?
bnt
I’m trying to use css3-mediaqueries.js to make media-queries work in IE, but don’t know how to do it.
Could you put an example of how to do it?
Thanks!
Chimera web design
Don’t really code much for different screen sizes so this has been a big help.
Thanks Ethan
James Pearce
Nice examples, and a compelling argument for a single page. But for a well-featured application or site, it is naive to send the same content and IA to every browser.
Firstly, the constraints of certain browsers aren’t just related to their media-queryable screen size. Input techniques, supported gestures, local APIs, network profile… A mobile browser certainly doesn’t enjoy having to download huge images simply so it can resize them itself or ‘display:none’ them. (Let alone the user whose quota you’re cheerfully using up.)
But the most important caveat is this: media queries tell you about glass and plastic. Presumably one should rather be designing for the human on the other side? If the site you designed for sedentary users provides exactly the right services and content for your mobile users too, then it’s only by highly suspicious accident.
Imagine the perfect airline web site for a desktop user (ticket booking, holiday planning, pretty animation of the new flat beds in business class). Now imagine the perfect airline web site for a mobile user (on-line checkin, flight status, geo-location, registering for SMS alerts).
What CSS media query allows me to turn the former into the latter?
clearsite
Thanks a lot Ethan for this well explained article. I must agree with James Pearce though on the content side of things.
For most of the sites we make a responsive layout will not be enough. We need responsive content. But for the more basic websites we will sure going to use your well documented article on how to handle this!
mickeyhawk
These techniques hold a lot of promise for better design and more findable information (due to same URLs used for different devices/viewports). I wonder if the criticisms related to the necessity to show different content or functionality (as well as better performance) could be handled using AJAX (where AJAX is supported) in conjunction with media queries to provide a more appropriate experience?
Spenny
Ever since I read this article a few months ago it has stuck with me. I try to be a progressive thinker, but I thank people like you ALA’ers that help push the discussion!
Also, good choice on the content of your example layout- I’ve been making my way through all of the old Sherlock Holmes books for a while now.
Mich8060
I have a couple of question about this method. I work for a popular e-commerce site as a user experience designer. Recently the engineers in my company have been pushing for us as designers to start incorporating responsive web design concepts into our new projects, referring us back to your article to support their argument. The problem I run into time and time again is that many of the examples illustrated are of relatively simple layouts where elements, usually similar in nature are repeat and thus can move freely without creating confusion for the user.
However, when we decided to go fixed width on our site it wasn’t applied to every page but to those pages where elements needed to remain in key location on the page. Elements such as Mini Carts, Buy Boxes, Checkout forms, and other highly complex elements needed to remain locked and clear to a user in order to prevent confusion. If I was to constantly float elements up around these very important key components they may cause what I refer to as “information overload” for the user.
Boxes appearing next to the “Add to Cart” button may scare our customers away.
My next question is consistency. At my work we know two things, that people almost never resize their browsers once the page loads and that many of our customers will browser our site from one computer but purchase from another, Often these screen resolution do not match each other. If we present one layout to the user and they go home from work and are presented with another layout on their home computer how does that affect their experience?
Dave Snyder’s article in Practical Web Designer October Magazine seems to lack the same focus and completely ignores User Experience, as I believe most of the articles around this idea do. I’m not saying that fluid is completely wrong, in fact I agree with it when the content is repetitive and easily digestible like in your examples or on something like a search results page, but I believe that fixed is also just as valid where information needs to be consistent.
Please I’m not trying to disrespect your article, but I’d love to see some solutions that involve more complicated interfaces such as checkouts or product pages.
Any thoughts?
Ethan Marcotte
Talk about a sudden influx of questions. Thanks for the responses, all.
“bnt”:http://www.alistapart.com/comments/responsive-web-design/P50/#53, the JS library I mentioned in the article will interpret any media queries in your main CSS file. It seems to have a few limitations: queries on
linkelements are disregarded, and I don’t believe that the library can read stylesheets included via @import. Hope that helps.“James Pearce”:http://www.alistapart.com/comments/responsive-web-design/P50/#55, I disagree with your odd characterization that responsive design is somehow intrinsically “naive.” I’ve partnered with several clients for whom a responsive approach was, in fact, the best approach for their clients and audience. But as I explicitly stated in the article, a responsive approach isn’t for every project: if your research guides you to believe that the goals of your mobile users are, in fact, different, then a separate, small screen-friendly site is perfectly appropriate.
For more on this, the second and third paragraphs of “this comment by Jeffrey Zeldman”:http://www.zeldman.com/2010/10/17/ipad-as-the-new-flash/#comment-56928 neatly sum up my thoughts on the topic.
“Mich8060”:http://www.alistapart.com/comments/responsive-web-design/P50/#59, you raise a number of fantastic questions. I’m not sure I can properly answer them in a simple comment form. I would say, however, that if you’re experimenting with “fluid grids”:http://www.alistapart.com/articles/fluidgrids/, you might experiment with introducing
max-widthconstraints as best serves your audience. I’d also recommend leaning on your media queries to spotfix design issues as the viewport changes, addressing some of those overload points as needed. I hope that helps, and thanks again.Glow
I agree with you Ethan, it’s sad we have to set the zoom to 1 for the design to look great both in portrait and landscape orientation.
I would like to ad another example that may help or inspire some of you : “Juslisen”:http://www.juslisen.com . It’s a personal website i redesigned recently. Thanks to css3 media queries it fits well on small, medium and large screens (ie: smartphones, tablets, desktop).
jamesmehorter
Great article! Thanks!
What about the markup though? A site for desktops obviously needs to include content that can’t been displayed on a mobile, e.g. showing a slimmed-down version of the site.
I’m torn between serving a whole new site to mobile users, just so we can omit the extra markup / larger images used on the full site, as opposed to used media-queries. By scaling images, or using display: none ; the mobile is still loading a hefty site. Where do your draw the line? How can I leverage the benefits of media-queries, but also those of serving a site with 1/2 the markup and weight?
Thanks for the thoughts!
geddesign
Thanks for the article. I’m still on the fence about fluid vs fixed layout, though I like the idea of tailoring the experience to the device. I think things like fluid grids and flexible images are alright for websites, but I think it would be terrible building a decent sized web app with them. I’m still undecided about the best direction for the mobile web. I can’t tell you how many times I’ve gone to a site on my iPhone and been completely lost because it looks nothing like the “desktop version” I’m used to. So many sites implement the generic “mobile version” and I can hardly stand to use them. It will certainly be interesting to see how the industry solves these problems.
jacsfolly
I loved the article, it certainly opened a world of possibilities. However, when Thomas Maas (above) writes, “everybody resizes their browser window all the time”, isn’t that a huge assumption? Do they?
Who are we designing for? The end user or our clients? Perhaps there’s something too old school about suggesting that we should design for the end user. If our websites win awards for the client but do not sell their product or service, haven’t we failed?
There’s also something peculiar about the apparent assumption that fluid websites that expand to the size of the user’s browser are ‘readable’. To understand this, don’t we have to go back to the roots of readability; i.e. ye olde broadsheet newspaper?
We have long been taught that people find it difficult to read the width of a broadsheet newspaper, which is why the broadsheet (or tabloid for that matter) is broken down into bite size columns; i.e. because people read in bite size chunks! Times change, people don’t.
Usability gurus tell us it hurts the eyes (and the brain) to have to read across a huge expanse of browser and therefore, we should design for readability. The human eye finds it more comfortable to read in bite size chunks.
So how do we measure the success of a website? By it’s fluidity or by the increased enquiries and/or sales it brings to the client who trusted our opinions and experience? The problem I see with fads and fashions is that they are here today and gone next year, or at the very least, they have evolved into another fad or fashion which in turn, is here today and gone next year.
I remember when Flash was lauded as, well, the best things since other flashy blinky things, but now, jQuery does the job more efficiently and effectively, and actually gets more respect from search engines for doing it!
Are we, as website designers, in the business of creating usable – and readable – websites for the end user, or in the business of patting ourselves and our clients on the back for the bright sparkly new fangled diggery doo of a website we’ve created that uses all the current fashionable technology but doesn’t actually sell itself to the end user?
Just a thought… or three. :-)
jhewitt
Great article Ethan. This is well written with perfect examples. I think you’ve done a nice job providing the web design community with creative solutions to a problem/opportunity that we’re all facing and have been facing. I was particularly happy to see your point about what can be done about increasing the size of the hot spot for links on smaller devices (great for touch devices too!). Since all the touch devices hit the market, I’ve been worried about how to resolve this. Thanks for the article.
stephband
In your CSS declarations percentages are expressed thus:
3.317535545023696682%
There’s really no need for this level of accuracy. The browser renders to the nearest pixel, and even if you have a 10,000px wide window 3 decimals places is more than safe: 100% is 10,000px so 0.001% is 0.1px. The rest of the digits really have no effect.
atlantajohn
Firstly, thanks for this post – it’s really helpful and insightful.
Unfortunately, I’ve run into a small bug. In Firefox 3.6.13 (latest update as of 1-13-2011), the media query isn’t working below 400px min-width when called. I reviewed this in the site referenced in this article (http://www.alistapart.com/d/responsive-web-design/ex/ex-site-FINAL.html). It still works in Chrome…
Any help on this would be appreciated…
Lsnrae
Great article! I would love to start working like this.Â
There are two additional challenges I see with the same design being used across all media but reflowing accordingly, as would happen with the use of Responsive Design:
(1) Designers would also have to be developers to be able to create comps of pages that would reflow to display appropriately in different media types. Otherwise, a designer with no technical experience could create a desktop view and mobile view that are impossible or extremely difficult to implement from the same code, and get that signed off by the client.
Unless this designer was extremely good, they’d probably have to actually build out their comp in order to ensure what they were proposing was actually doable. This just means design phase would take longer (and presumably development phase would be shorter).
Anywhere I have worked, design and development have been two separate domains. For this to work in that kind of environment, close collaboration between designer and developer would be even more important than in the past. Developers would have to teach designers what techniques are possible that could inform their designs.
(2) Clients would have to decide what media they need to see the design on before signing off. If they needed to see the design on several media types, they’d have to wait longer to see that. Or, they would have to trust to the designer’s and developer’s judgement when implementing a desktop sized design on different displays (in my experience, the client would never agree to this).
With these challenges, it’s still an approach I’d love to try out, especially in an ideal world where I could design and develop (I’m a developer only where I work) and the client would trust me to create the reflowed design versions on various media types for a single approved desktop design.
noiseshapes
I was trying to use
import for my media queries, but it didn’t seem to work. I can only have it asmedia inside the main style. Also it looks like using @media I’m actually overriding the main style, so I have to write !important; to enforce the new rules for the smaller screen.Any thoughts?
Thank you for the article.
rhiaro
Firstly, thanks Ethan for a fantastic article :)
I’m using @import to import more advanced styles is causing my CSS to fail validation (against CSS3), with the error
“Parse Error and (min-device-width: 130px);”
Code being:
<link rel=“stylesheet” type=“text/css” href=“v7style.css” />
<style type=“text/css”>
@import url(“v7stylebasic.css”) screen and (min-device-width: 130px);
</style>
It works, it just doesn’t validate. I’ve read a few conversations about there being bugs in the CSS validator. Does anyone know anything? It’s driving me mad..
Thanks!
patrickmcgovern
The way you’ve gone about this, along with how you explain it is beautiful. This will work very well for small to medium-sized websites, but for sites with exceedingly large amounts of content that are not completely controlled through a small handful of dynamic scripts, implementing, controlling and maintaining this method may prove to be more t=work that separating out completely different templates for different media devices.
I do agree that your method is intelligent, but implementing this on a large scale may prove to be more work that most companies are willing to invest.
Heathbits
As the owner and creator of an online website builder I always look at new layouts and ways of presenting data at a much higher level than the average web designer/developer. I create the tools that so many other people use to create their websites.
Is it really feasible in any way or form to consider such layouts for a CMS or website builder used by novice designers? I say this from experience as I know that millions of website are created using tools like ours. Custom web designers might rejoice at the thought of such layouts being to complicated for CMS or website builders, but I can assure you there will not be huge spike in demand for such designs because of $$$. Not unless custom designers are willing to create custom designs for $10 a month (which they are not).
That said, I wonder what your thoughts are about implementing such technologies into CMS systems and website builders. Is it even a possibility? Knowing that so many of our users don’t even know the difference between their email address and their domain address, I don’t think it will ever be possible at that level. Your thoughts?
Francisc
Your article was very insightful and mind-opening.
Thank you.
Al Dente
Excellent article, which I am revisiting to ask when your Responsive Web Design book is going to move to the physical world? ;-)
Yours, patiently
Dan
Karlosb
Many thanks for this article Ethan.
I recently had this discussion with a fellow web designer about “Responsive Web Design” so I did some research and found your article here.
Plenty to think about for future projects (or indeed modifying existing client sites).
Many thanks once again!
Regards
Karl
ondrek
Hi! I am thinking about one problem. Why is convenance screen width resolution only 950px (plus minus)?
Because I understand, that a few years ago, it was because screen resolution (1). I know that you can’t use long rows because when you want design website with progressive enhancement you have to do a rules for better legibility and use only a some specific count of word and letter for one row (2).
But I understand that there is a lot of people with 1024px (about 22% – and it will be a less and less) and 800px is only about 2%, I think.
But isn’t better for design maybe use media queries like less-fw with one more parameter for .. maybe 950px – 1200px? It will solve problem with little resolution and we can help many peoples with a better resolution. You can paste every informations for one page (it have to be readable of course). It could be better for maybe aplication on web.
I know, that a lot of peoples with a better screen resolution (like me on my mac) have open two windows in one time, but when you will use media queries its not problem. When you will design text only in some rules for better legibility you can maybe use empty space for something else like some aside.
Of course i am talking about design with px width, no with % width.
ojete
I couldn’t resist to check the CSS of an article talking about flexible web designs. Then I found the irony in base.css at line 203:
#main {
voice-family: inherit;
width: 750px;
}
Electrofix
thank you 4 the good article!
one minus – IE (6,7) not correctly handle this… :(
mikaels
Thanks for a great article (and great book)!
I have a question for you about the best design strategy for responsive design in the following case. the website in which i’m involved with is a big government site where we have control over the mark-up and css for most of the different pages and layouts (that we can make responsive) BUT some pages include web-applications developed by other consultancy firms and here we don’t have 100% control.
What do you do in a situation like this, where maybe 95% of all pages would benefit from a responsive design and width set to device-width:
<meta name=“viewport” content=“initial-scale=1.0, width=device-width” />
But the remaining 5% would probably be best viewed in the shrinked default view…
Seems like switching between them would create an inconsistent experience.
What do you reckon is the best strategy here?
cheers
egiova
It is not “Web Responsive Design” we are discussing. In my (humble) opinion, you rather call the beast something like “web Templating Architecture With Design In It”.
As it seems the worry here is not the way it looks, but the way it renders across devices. Technical worry vs Aesthetic worry.
Yuvalik
The biggest problem I have with responsive sites is that it does not provide a choice to the user.
I guess most people like to see the same site presented differently to them on different devices, but I do not. I like it that I can click that “classic” link at the bottom on Google’s page on my phone.
In fact this whole discussion about responsive design takes me back a few years when it was advocated to procide diffent stylesheets for different display types like tv-screens, pages (printing) and screenreaders. Of which only printing has taken a foothold it seems.
As a user I want to keep at least be given control over this. If I like the whole website to just load on my phone instead of a fluid, smaller version than that should be possible.
thinkaroundcorners
I believe that due to the simple implementation as a CSS layer this is the most promising mobile technology that I have ever seen.
The simple implementation is the key.
son0fhobs
As has been mentioned by others, why isn’t bandwidth on the forefront of responsive web design? It defines whether I add extra animations, images, and flares, or strip away the extra, and stick primarily to CSS styling alone.
I’m getting the impression it’s because there isn’t a good way to test bandwidth, is that right? How hard would it be to develop a good way?
User downloads CSS file, with images, time measurement taken, ajax request sent while other info continues to download. Granted, you’d only have a clear bandwidth picture after half the page is loaded, but that’s when the javascript is loaded anyway. Not to mention a lot of media is loaded “below the fold,” in which bandwidth would determine amount/quality.
Ok, so I don’t really know what I’m talking about, but given that everything else IS possible, and bandwidth can be measured with other analytics and methods, I don’t see why someone isn’t tackling this issue.
So what am I missing?
son0fhobs
Hm, now I can’t go back and editing my comment to show the fool of myself. However, I still think that there are applications that do need to be talked about. The below stack overflow discussion touches on it, and mentions, and I agree, it’s applicability to video sites. What about other features? Large javascript applications? I guess I feel like rather than a blank topic that gets a sprinkling of conversation inspired by new developers, it needs to be addressed definitively.
Ex. Here’s how it’s done, here’s why it’s rarely practical, here’s when it its practical, and this is when and how it’s best implemented. That kind of a thing.
http://stackoverflow.com/questions/3943016/php-speed-test-for-user-connection-speed-without-echo-in-current-page
26buckets
this has been a perfect solution for my app websites both view-able on tablets and mobile devices! Thank you very much for you in-debt article.
glardon
You can find my thoughts about applying responsive web design on forms in an article I wrote: http://www.formable.net/thoughts-about-responsive-web-form-design
WE Design Fort Lauderdale
Navigation and ease of use are very important in designing a website. Thanks for effort you have put forth on the subject! – David = A Work Of Art, Inc. Fort Lauderdale, FL
andreapernici
I think responsive web design it’s great but what about performance ?
Usually responsive tends to hide elements instead of use only necessary things…and we know that mobile devices and connections are slower than Laptop or Pc ones.
Which is the best approach to solve this issue ?
lavak00731
Hi,
I have read the article and your book Ethan, but I cannot figure it out how I can position fixed, relative or absolut a div with Responsive Web Design.
sminfosoft10
I’ve have been using this blog for excellent infomation for a time now and find that it’s a helpful resource for people trying to find the suitable information. Keep up the good work.
“Web Design Company”:http://www.sminfosoft.com/
sminfosoft10
Great post. I was checking continuously this blog and I’m impressed! Extremely useful info specially the last part :) I care for such information a lot. I was looking for this particular information for a very long time. Thank you and good luck.
“Technology News”:http://update-technologynews.blogspot.in/
randyosbourneman
If you wanted to be a responsible web designer, you should be more dedicated to yourself as a web designer.
interactivered
This kind of technology is great for coping with the many different platforms that people access the internet from these days.
There is an argument of course that designing a separate mobile site is better than building an all encompassing responsive site.
Perhaps we just need to practice more but right now it feels that convincing a client to spend more to get a responsive site (i.e. it takes a lot more work to do) isn’t the right thing to do when a normal site and quick rework for a mobile site (assuming it’s CMS driven it’s quite easy) will fit the bill.
jerryboston
I be taught one thing tougher on different blogs every day.
Writing Tips
jerryboston
Really appreciate this wonderful post that you have provided for us.
ernestlv
I just got into RWD and everyone was pointing to this place. Nice! writing! I enjoyed reading it!
edward-jackson
I’m glad I finally got here, found some great sources in this blog.
ZZMike
“… margin-right: 3.317535545023696682%;”
What are all those digits doing there? That last “682” is enough to pin the item down to either the left or right side of a silicon atom!
“3.33%” would be fine, and take fewer bytes
sanjeevsharma
Excellent post! Thanks for sharing. I wrote a post introducing Responsive design to someone new to the topic: Responsive Design — an introduction: http://bit.ly/L05U9a
moonzuk
Look back fellows. Before we’ve got into html5 and css3 to standard things more-less, there was time when major players were trying to push their very own “way of life” to concur the market (my opinion). Now since everyone (aside of MS IEXXX) comes to final conclusion, hardware folks are still jiggling around with their very own “proprietery” ideas. How about to come-up with several standards for their screens? It will be much easier for W3C to came-up with a solution. And then we’ll only compete by human characteristics (which affects any visual expressions, including designing things). But no, freedom of enterprize and unbounded competition is “The Mantra”, right?
So where is the plain logic and functionality?
As an analogy – look at cars or airplanes.
UnknownInkDesign
Just want to say a big thanks, Ethan, for what I think is a much better way to design web sites!
Cheers,
D Morris
Professional Web Design Company
Ethan I agree that one website can now be built to accommodate all platforms if done right. We have a lot of customers ask for a separate mobile website. We tell them that in most cases it is unnecessary and a waste of money. I was surprised by this stat: “Mobile browsing is expected to outpace desktop-based access within three to five years.” but I don’t think we as designers should be intimidated by this.
TexasDavid
We would love to find people who can do this and hire someone. Where do you find these people? :)