Responsive Web Design: Missing the Point
Alex Mangini touched on something I think is extremely important. In his post, Why Is Responsive Design Such a Big Deal? Seriously…You Tell Me, he asks:
Do you really need to serve your “mobile” visitors a different layout based on your current content?
Short answer: no. Like Jason Grigsby recently wrote, other tasks like optimizing performance can lead to a much better mobile experience than adapting the layout:
If you could only do one thing to prepare your desktop site for mobile and had to choose between employing media queries to make it look good on a mobile device or optimizing the site for performance, you would be better served by making the desktop site blazingly fast.
Also, Kristofer Layon’s book, Mobilizing Web Sites: Develop & Design, beautifully articulates lots of techniques to make your desktop site more mobile-friendly without necessarily having to go through the responsive process.
The fact is that many of these modern mobile browsers actually do a pretty good job at rendering “full” websites. So that brings us back to Alex’s point: why the fuss with responsive web design? Why bother?
Here’s the Point
Whenever I talk or present on this subject, I usually lead off with these three images:
The point of creating adaptive sites is to create functional (and hopefully optimal) user experiences for a growing number of web-enabled devices and contexts. It’s not because it’s “the right thing to do”. It’s not because it’s fun. It’s not because it’s trendy. It’s not so you can impress your boss by resizing a browser window.
In order to deal with all this diversity, we can no longer just cross our fingers and hope that these devices’ browsers are capable enough to properly render desktop designs. We need to actively take matters into our own hands and do all we can to create more contextually-aware, flexible experiences. The desktop-only days are gone. And yes, addressing this involves adapting layouts, but it also involves addressing a ton of other stuff.
Does creating a better mobile experience really matter?
Yes, yes and yes.
I got to help create a large brand’s mobile e-commerce site. Shortly after they launch, they saw a huge jump in their conversion rates. Since then, they’ve invested even more resources in their mobile web presence and things are going quite well.
Creating mobile-optimized sites, whether responsive, device experience, RESS, or other, is a good idea. The same goes with tablets, tvs, and other emerging contexts. Better experiences mean more conversions, more engagement and a better chance the user will walk away with a positive feeling about your brand, service or product. Sure, my client’s desktop site rendered just fine on smartphones, but creating a focused experience made all the difference. Creating contextually-aware experiences is good business.
Fighting the Fad
Your visitors don’t give a shit if your site is responsive. They don’t care if it’s a separate mobile site. They don’t care if it’s just a plain ol’ desktop site. They do give a shit if they can’t get done what they need to get done. They do give a shit when your site takes 20 seconds to load. They do care when interactions are awkward and broken.
I recently had a lengthy discussion with a tech director here at work who was convinced that responsive design is a fad. Of course I challenged him, but as we talked I began to understand why he felt that way. So much of the talk about responsive design is about the readjustment of layout, and he felt that everyone was just trying to out-media-query each other.
As we talked further, I found that we actually agreed. We’re concerned with creating a good user experience and achieving content parity, regardless of technique. Yes we should be thinking flexibly. Yes we can use the principles of responsive design to achieve this. But we’re not using those techniques for the hell of it. We’re using them to take the experience to the next level.
And just because we’re utilizing those techniques doesn’t mean that we can’t also use server-side and other techniques to adapt the experience. There’s a lot of different ways to create great experiences, and it’s worth exploring anything and everything that can help get us closer to our goals. We don’t need to limit ourselves to media queries.
Rise Above the Hype
I remember Zeldman commenting on the Future Friendly site when Scott Jehl appeared on the Big Web Show podcast (the comment is around the 31 minute mark). He thought it was funny how the site was featured on the Media Queri.es gallery site even though it was just simply a single column of text, instead of a more overtly adaptive design.
That’s the point! That’s all that site needs to be. I’m sure we could have spent a lot of time creating a bunch of columns and bending over backwards to figure out how they would adapt with a slew of media queries. But all anyone needs to do on the site is read some words. Period. A single column of text accomplished that quite well.
Don’t feel like you need to include 750 media queries and jump through 100,000 hoops just so you can proclaim “Yes! My site is Grade A, Grass-fed, 100% Certified Responsive.” Instead, do whatever is necessary to create a great user experience.
Responsive design is the real deal. It is not a fad. It’s a legitimate attempt to address the massive challenge of delivering great experiences to this explosion of devices and browsers. But don’t feel like it’s the end-all be-all of website construction. This aint religion. This is web design.
76 Comments
Mariken
Great post! Exactly the thing I am bussy with right now.
Javier España
Great post, glad I found this through @byrichardpowell, glad you got the point as clear as you show it here. Congrats!
Aaron Gustafson
Well said!
Per Axbom
All valid points. Great article. I guess the challenge for large companies getting by with less-than-average website designs is achieving to the insight that it’s better to redo and do it right than throw in a couple of media queries and call it a day. The latter is the quick and dirty solution that you can show off in meeting rooms, imitating the all-to-familiar and often-performed user task of resizing the browser and going “aaaah”! 😉 The former approach is scary and seemingly expensive. It’s one of those “Follow the money” situations where organisations too often fail to see the connection between their website and the money.
Ryan
Sorry to get slightly off topic but this reminds me of the days when we moved from table based layouts to CSS. Many of people *got it* while others didn’t, there was massive discussion and lot’s of healthy debate (some pretty harsh), some crazy techniques and stuff we still use today.
It’s early days, in 5 or at worst 10 years time we’ll have learnt from this current disruptive phase and levelled up 🙂
My advice would be to embrace it, break it, backtrack, try new things and learn, try overdoing and under-doing it. Work out what works and go with that.
Michael Robinson
I completely agree – making a site “responsive” should be thought of a journey towards a truly device agnostic site, not a competition to create the best browser-resize experience. Applying Occam’s razor to this process would leave us with mostly text.
The readability of text reduces as bells and whistles are added, we should carefully consider what bells we add and where, else we risk inadvertently shooing our visitors away.
Michael
Great post as always.
Especially the point “Performance” should get much more attention in my opinion. Serving a 7MB website which is full “responsive” is much worse than serving an website which is only 400kb but doesn’t adjust to the current screen size.
So before thinking about going responsive we all should do our homework, optimise as much as we can (just think about image optimisation, which is often forgotten, also by me, but can give you a big performance boost), try to make the site as accessible as possible and then we still can optimise for screen resolutions by adding some media queries (which will never be a performance killer also if you add 500 lines of them, as they will be just some kb if you minify and gzip them).
Lyza Danger Gardner
Great post, Brad. You really nailed something I hadn’t quite put into words—how responsive and adaptive concepts are getting glommed in with designer parlor tricks and one-upmanship (that’s the fad piece, yeah?).
Then again, try teaching core tenets of front-end performance and watch web designers fall glumly asleep very quickly. No matter how much performance-oriented content I keep trying to cull from our technical workshop, it still just causes glazing over. Yet it is so damned important. So there is a disconnect: most people agree it’s important, but there is a dread of actually dealing with it.
James Morgan
Nice to read a take like this amidst my scramble to hop on the responsive train. The effectiveness of the overall experience is still what should count the most. Well said.
Sean Davis
Great post. I came over from Alex’s blog.
I’m one of the folks that hopped on the responsive bandwagon because I kept hearing about it. It was more so to learn more about it than the need to get it implemented. Just earlier today, I made my only responsive site fixed again. To me, it just wasn’t worth the change. I hadn’t concentrated at all on performance, like you mentioned in the article. Good stuff… definitely some things to think about.
angga kuntara
http://www.business2community.com/online-marketing/pharmaceutical-marketing-still-lacking-in-responsive-web-design-0145416#comment-415534
Noraly
Great article! Responsive Design is hyped at the moment. It looks like a competition who can make the most complex RD of them all.
For disbelievers, I think it will prove it self and you will find yourself working on a RD project yourself in a few years.
3c_nik
completely agree with the above article.
We area ll aware of the ‘sales’ element in this industry and any technical term that can be thrown around to wow clients will be used.
The same agencies that sell an app to a client for the sake of saying they have one and probably the guys pulling the bottom right hand corner of a browser window in meetings and winking at the client. “see, RESPONSIVE……”
I believe the Reponsive should be used responsively. This is not limited to this tech this logic should be used for everything:
Does it enhance the goal of the client/user experience?
If it is not needed why use it?
James
Great points Brad as usual. The one thing that scares me a bit and makes me a little bit sad is that so many people seem to need reminding (https://bradfrost.com/blog/web/responsive-web-design-missing-the-point/#comment-1719) that optimisation and standard good performance practices are still required and that these are quite often being substituted in favour of making a site that reshapes a bit if you drag a browser window.
I often wonder at what point some designers/developers started abandoning common sense and good practice in order to try and be “responsive”?!
@welcomebrand
Daniel Anderson
I’ll echo @aaron
Ian Isted
Excellent article. Exactly the approach we took to a client site just the other day. Smartphones are advertised as being able to render full webpages properly. Not to show old WAP sites.
We should only be providing a different mobile design if it is beneficial to the user.
Brian Artka
right on. I also think, as Luke Wroblewski preaches, thinking mobile first while planning your responsive web design is huge. Start small, build upon the most important content types. No need to fill the “desktop” view with garbage just because space allows.
This was tricky the first time we tried it, but after doing it, it makes so much damn sense.
Celine Nguyen
This is a really good point in the current discussion about responsive design—responsive design isn’t the goal, a desktop–mobile–device-agnostic web is (I think Michael Robinson noted this above). Unwieldy layouts are the obvious thing to change for small screens, but I did like your point that a snappy, fast-loading site is critical and has a greater impact on user experience.
Missing the Flash
The silly thing about future friendly is the future web eats its children, so why bother worrying about the future? It will all be redesigned. Anyway, I know that’s not the question “future friendly” is asking. It’s more something like, “How to we deal with so many changing device displays” rather than how do we future proof our web designs (impossible!).
I just feel a little disgruntled because there is no decent Flash replacement. Multimedia in the future friendly way just seems to be little jquery boxes of content, marginalized media, and a few animation tricks, rather than really designing for rich sensory experiences that Flash used to deliver on the desktop…nothing has filled that void.
Will
Wrestling with this at the moment. I’m also of the belief that your content and design should be optimised for the medium. But that’s too expensive for many clients. Maybe mobile first would solve that and make the desktop experience much leaner in the process. A responsive approach felt like the silver bullet, achieve all in one swoop. Sadly not so simple.
mcshefferty
Excellent article. As with all buzz terms, I find it refreshing to stand back and think “why?”. Responsive web design techniques are just another tool to create an improved User Experience on the wide variety of platforms that we now consume the web over.
fjpoblam
Great post. One of the best things mobile design has taught me is to rethink my designs *in general*. I’ve cleaned up lots of clutter, made faster pages, and focused on what the visitor needs on each page (as opposed to what the designer/client would *like* the visitor to see on each page). Makes for a much better website, in terms of both appearance and usability, on *all* devices.
Sergio Acosta
Users are first, so content is first. Very well said.
David Hudson
Nailed it! I think developers have a tendency to push things as far as they can while forgetting the K.I.S.S. philosophy. I have to admit though, I’ve created responsive sites just to show off my skillz 🙂
Paul
Great stuff, and has won an argument over whether or not you should have mobile site.
David Ashkas
The point on performance is salient in the current environment of bloating CSS. There’s been much written about JS bloat, but CSS bloat as it is now, is a recent development.
I had only just finished reading another article earlier today about handling responsive media queries with JS on top of CSS via adapt.js. My first thought was this was – another layer of file handling and scripting?
Having worked with a developer recently who really drove home the point about scripting bloat, I’m definitely more aware. However, with that said, what is the performance overhead of CSS compared to JS? When does performance come ahead of reading optimisation?
FA Design
Excellent observation!
Chikezie Ejiasi
Well said. This is the insight we need in the industry.
Isaac
Good article. I was just mulling this over while creating a blog post this morning showcasing some nice examples of responsive design. I decided to do a little digging and stumbled across these stats http://www.w3schools.com/browsers/browsers_os.asp (claim: only 1.3% of web browsing is taking place on mobile devices). Granted I’ve seen others put this figure as high as 10%. However, while mobile (or non-desktop) use accounts for a growing share of traffic, it still remains a quite small minority. The fact is, by the time this figure becomes more significant, many of the websites ploughing money into responsive design will have gone out of business or be ready for a complete redesign.
Claire McEachern
As designers and producers of web content, “we” get it. The next hurdle is convincing clients who see all the hooplah on fancy sites and think that is what makes a great site when all they need is simplicity. How do we convince them without spending countless hours putting together something complicated just to show the client it won’t work. I suppose this is just the learning curve a beginning designer though 🙂
Treavor Wagoner (@treavioli)
I just don’t think merely eliminating a few elements like absolute width will help improve performance across platforms/devices. But I’m getting the impression that responsive design is more than that; it’s a response to an issue not the browser.
Tim from IntuitionHQ
Anther great post. And well said.
tberno
I think that the complexity of the future web’s array of devices points to a future in which we describe certain devices or platforms as a unique media and adapt messages accordingly, much as a traditional ad campaign coordinated messages across broadcast, print, outdoor, etc. There may be a logical limit as to how responsive a system can be to be optimized to deliver both content and performance. It will be more important to deduce which platforms represent the best opportunity to communicate with our desired audiences. Which is also a form of responsive design, as far as I’m concerned.
Shahnawaz D
A real great post, excellent take on responsive design.
James
I’m not sure I get the angle of this article.
People are creating responsive websites (which if done correctly should involve stripping out content/functionality with the side effect of efficiency savings) as a response to an increasingly diverse (in terms of form factor and resolution) user base.
So what’s the problem? This article seems to lack any kind of actual argument.
Elliott a web design guy
Great article, some great points! I love the frankness used too. People DO give a shit when your site takes 20 seconds to load…. just brilliant! This posts has made my day thanks 🙂
Justin Reynolds
Thanks as always for an interesting post. Agree especially with the emphasis on performance as a fundamental element of adaptive design – it is so easy to get caught up endlessly finessing layout.
skram
Multi-Device Layout Patterns
http://www.lukew.com/ff/entry.asp?1514
Blakepeter47
Great post…Now a day website is so important for all new services provider..So its help new provider.
webdesign, website laten maken, site maken, site bouwen
Thanks
Ian Thoams
This post follows on from some discussions we’ve been having in my office about putting content first. Working for a PR firm, we’re obviously interested in sentiment, content consumption and business results so the need to understand what a consumer/user/client wants to find and achieve is of paramount importance. My job, therefore, is to produce a design that supports their content and that, in my opinion, is the key focus for web designers moving forwards.
Put the technology second and support the content in the way that is most appropriate, but make sure that you are supporting it appropriately across a variety of screens and devices.
Simon Ashley
Great post, absolutely bang on the nail. Responsive Design – Its about helping the user to get things done. Period.
Not at all about ego’s, design awards etc etc
Chuck Spidell
Response design = opening your website to a broad audience.
Numbers Mcclaine
Awesome read, thanks for sharing
-b-
I get the flava of RWD sure, but also it means straight up massive billable hours for those clients with flush budgets. Seriously, just look at all those break points and tick off the hours. Has anyone charted hours per break point and are most of the sites being done by designers as portfolios so they got skin in the new game? You can get to mobile much faster and with 1/3rd of the work and not have to demonstrate your prowess, cause I guarantee your readers do not care about breakpoints or how fluid you are.
Only you and your designers peers do.
web developer a roma
I could not refrain from commenting. Exceptionally well written!
KS
😉 – your site is responsive too 😉
So i think the decision is as often based on the content ;), for some content it’s ok to make it responsive, other content should be simply served as it is.
but you’re right just putting some media queries to a given page can’t be a solution 😉
DESIGNfromWITHIN
Great post, could not agree more…
Martin
That is quite true, most people won’t wait so long for pages to load. The competitor is always just a click away. Although a website can look great with big images, that isn’t going to impress a customer who has a slow internet connection.
Simple, modern, clean intuitive sites are the future.
affordable web site development
Nice post and Thanks for this useful information:-)
BT
Excellent article. Very practical viewpoint.
Marco Berrocal
Well said. I haven’t started to implement RWD yet, still tinkering about starting and how many people I would like to kill going over it 😉
Brilliant article.
Stefani Sturmer
Whoa! This blog looks just like my old one! It’s on a completely different subject but it has pretty much the same page layout and design. Wonderful choice of colors!
ryscript
Thanks for sharing such a great article, this is what I’m looking now.
Tmo
I strive for the best user experience possible. Adjusting for device as well as being blazingly fast are both parts of it. For UX, it is “the right thing to do”. Fast and formatted, thats my credo.
jpcarmona
Excellent article. ” reminds me of the days when we moved from table based layouts to CSS. Many of people *got it* while others didn’t, there was massive discussion and lot’s of healthy debate” – I agree!
Nicolas
Totally dig the Crossfield company sticker on the workstation in your “This is not the web” picture. There on purpose or by chance?
Ashton Harris
Great Article. I was worried in the beginning that you were only going to argue that speed was more important to user experience than the interface but you explained the importance of both very nicely. When considering the large gamut of device sizes, carrier speeds, bandwidths, a users environment (are they driving, walking, watching tv, etc.) everything comes into play. If a site is to slow the user experience will suffer, if a button is too the user experience will suffer.
Stevan
I completely agree with you. I think that responsive design is in its fad stage. That said I think most new things like go though this and the end result ( m
Stevan
I completely agree with you. I think that responsive design is in its fad stage. That said I think most new things like this go though this and the end result ( most of the time) is we work out the best pieces to keep and the the pieces to get rid of.
James Noble
This is book marked, saved, download, pasted and ready to explain the process to clients. Ace.
Rhys Burnie
Adaptive layout is great for desktops if you target might be using various window sizes rather than full screen, but it doesn’t make sense to do it for mobile devices purely because most mobile browsers have cache limits of under 20kb I think iPhone is under 15kb so serving the same CSS for desktop that adapts mean the CSS will never be cached (as most desktop CSS is over that size limit). I’d rather have a completely seperately set of CSS for mobile devices which are not concatenated into one huge file which is great for desktop. For mobile serving several mobile specific files all under the cache limit would mean it caches and the users data plan isn’t chewed up downloading resources on every page load.
Tri Nugraha
Well said. Enough said. This is what i need to keep in mind. Thanks!
Thorvald
Excellent article. A lot to think about. 🙂
glaiza bernaldez
Great article! I learned a lot from reading this. I’ll definitely be reading this review in full one more time
o.seston
Excellent ! Many thanks for pointing the real questions.
Michael "Spell" Spellacy
Great post! You inspire me, man.
Artur
Inspiring. Absolutely agree: it’s just about creating the proper experience for the user no matter the stuff, be a Tesla Model S or a Fridge.
Travis
Mobile Friendly is definitely the latest marketing buzz word. I personally believe that iOS and other mobile devices stole so much smart phone/tablet market share because they have fully functional web browsers. I refuse to make different versions of my website to support anything less. It reminds me of the 90s when we would code two versions of a websites to support IE and Netscape Navigator. I’ll stick to best practices.
Mississippi Web Design
Good work on this article, enjoyed reading the whole content. Thanks.
Nathan Miller
All the points are very important and very useful for us.
Thanks for sharing.
Tony
Great stuff, but as a visual communications designer and by that I mean old school graphic designer, I worry about how objects appear on the page (you know what I mean) and use words like “juxtaposition” a lot. I’ve been fiddling with Foundation 3 from Zurb and had difficulty in maintaining any reasonable style/design across different sized devices.
Then I tried the design on a number of tablets. I fit perfectly. But when I tried none responsive designs, they also fit perfectly. In fact all the sites fit the screen perfectly, the browsers were taking care of that. If anything the responsive ones sometimes confused the browser and they zoomed in to the page by default when there was no need.
Now I know nothing about all this stuff and I’ve no doubt that all you say is correct, but I want to maintain the design layout across as many devices as possible. That is imagery (I still want the the web to be more than words on a page) and text.. As for phones, I’d do some kind of media query and present a different style, one which I control.
I know I’m probably completely wrong, but hey I’ve spent my life swimming against the tide:)
Tony
Just read the blog that started this. Now I understand. It’s all about the content. That’s all that matters. Not that a site portrays a visual style that communicates the values of the company/product. Consumption is the driver and convenience is king. The happy meal generation is taking over the world. God I’m way off the mark. hahaha
Dallas
I find that once we need to accomodate different devices we need to start being much more thoughtful about design and functionality. Those 3 different menus are massive overkill on the iphone screen. Designing a site which needs to work on tiny mobile screens and widescreen TVs helps you work toward better, simpler design.
rasterfield
RWD is one of ways for user, customer experience. It’s become a buzz word and fad, trend but also become our challenges. I sometimes think that RWD is a self-serving methodology for our products catching up the industry trend and making one fits all/ easy for us to maintain. However, the thoughts are dismissed by potential future/older devises around us (like in the article) to produce seamless experience for our user/customers.
Users don’t give a shit about it. That’s for sure. We have been trying to produce the good experiences with our products without making a boarder of their ways to connect with us.
Troy
Really that’s correct we are creating the websites but we are not remembering which type of design is good and which type of logo we have to create we only keep our business in mind. So I have found this blog is very important and valuable so I appreciate for sharing the blogs. Thanks a ton!
barry
Cant stand the internet – since the explosion of tablets and mobile phones, websites everywhere have suddenly got shit in order to accomodate their inferior way of interacting with users – result – all the non tablet users now have to put up with crap websites that are slow cumbersome to use. easier to just phone a shop up now and give creditcard over the phone than waste time tripping over lousy websites that dont work properly.
Comments are closed for this post. If you've got something to add, feel free to reach out on Twitter.