Elliot Jay Stocks is a designer, speaker, and author. He is the Creative Director of Adobe Typekit, the founder of typography magazine 8 Faces, one half of Viewport Industries, and an electronic musician.

Responsive web design: the war has not yet been won

Posted on 01 March 2013 57 comments

Responsive Web Design. All the cool kids are doing it. We extolled the virtues of Ethan’s holy trinity of fluid layouts, flexible images, and media queries, and slowly but surely everyone dropped fixed-width designs for websites that flex and bend to every scenario, and adapt to every device.

Or did they?

Well, no. As widely adopted as the RWD process is, there are still numerous designers, developers, freelancers, and agencies who continue to opt for the safety of fixed widths, or adopt the process in a semi-complete sort of way — like making several fixed designs that adapt to specific device sizes, or change only when the screen is at a mobile-like resolution.

It’s easy to dismiss this crowd as old-school agencies, or print-focused creatives who don’t ‘get’ the web, and they certainly do account for a large amount of this RWD-wary crowd. But I’ve noticed a whole bunch of very web-savvy people (whose work I respect, and many of whom I call friends) who seem not only adverse to the idea of adopting the RWD process, but actually quite vocal in their opposition.

So today I’d like to address these arguments and — hopefully — dispel some of the myths that are preventing a huge number of talented people from embracing the inherently fluid nature of the web.

RWD is not mobile design

With no disrespect intended to the talented folks behind GoCardless, my heart sank a little when I read their blog post about why they’ve decided to ditch responsive web design. Their argument hangs on the premise that only 2% of their audience were visiting the site on a mobile device, and thus it wasn’t worth the extra time and effort to make the site responsive (more on that in a second). Although the article is well-written and eloquently substantiates their rationale, I can’t help but feel that they’ve misinterpreted the meaning of RWD: namely, that it is not simply mobile design. Nor is it tablet design, nor game console browser design, nor screen-on-your-futuristic-fridge design. RWD, in my opinion, should be device agnostic.

Allow me to elaborate. From the very first responsive site I created, I made the decision to introduce media queries only when it felt natural to re-adjust the content, rather than when the screen width reached a device-specific dimensions, like ‘iPhone landscape’ or ‘iPad portrait’. I’ve always encouraged others to follow the same process, if for no other reason than it stops us thinking about specific devices, and in turn makes our sites more future-proof. A hardware manufacturer might introduce a brand new product tomorrow that changes the world and uses completely different dimensions. If you adjust your design when it looks right, you won’t have to worry about retro-fitting your media queries for new devices.

RWD does not have to take more time, or cost more money

Perhaps the biggest obstacle preventing people from getting behind the concept of RWD is that it takes more time to build responsive sites, and more time equals more money. Well, I won’t lie to you: it does.

To begin with, anyway.

Once you overcome that initial struggle of adapting to a new process, designing and building responsive sites needn’t take any longer, or cost any more money. The real obstacle is designers and developers being set in their ways. I know this because I was one of those people, and to those of you who’ve now fully embraced RWD, you may well be nodding in agreement: we all struggled with it to begin with, just like we did when we moved from table-based layout to CSS.

For those of you who are unconvinced, I imagine you’re keen to point out that different views mean different designs, and that will always mean longer design periods and higher costs, right? And what about complex sites? It’s all very well when you’re designing simple one-page blogs, I hear you cry.

Well, again I think it’s all about changing the way you work. Changing the way you think about web design, really. For a start, get out of Photoshop. Don’t design a ‘desktop’ view as a flat file and a ‘mobile’ view as a flat file, or something between, or anything for that matter. Now has never been a better time to embrace designing-in-the-browser. Sure, that’s a challenge, and if you’re not particularly code-savvy, there’s certainly an overhead there while you acquire those extra skills. But if you’re a web designer, you should be able to write code.

I say this not to create some sort of elite, or to chastise those who don’t yet have that knowledge, but because knowing your way around markup and CSS — and therefore being able to quickly try out what works and what doesn’t work in the browser — is the biggest step you could ever take in making RWD part of your process instead of an add-on.

Add-ons take extra time and cost your clients more money. Integrated processes don’t.

(As an aside, if you’re like me and like to keep things simple, you might find my 1000px responsive grid helps avoid some of the tough maths often associated with RWD.)

RWD is worth it

If you’ve read everything I’ve written so far, I’ve hopefully got across two key points:

  • RWD is about making your site adaptable to any scenario, without worrying about specific devices and their proprietary dimensions.
  • RWD doesn’t need to take more time and therefore doesn’t need to cost your clients more money. At least not after you’ve rethought your approach to web design, anyway.

However, there may still be some of you out there who are still asking the simple question, ‘but is it worth it?’ And it’s actually a very valid question, especially in those circumstances — such as when you or your company are adapting to a RWD workflow — when it can equate to more time and greater costs.

The answer, as always, is: ‘it depends.’

Some desktop-optimised designs work fine just as they are on tablets, which was one of GoCardless’ main points, and probably the main reason they saw RWD as simply designing for mobile. But aside from just telling you that responsive sites are far more likely to be future-proof as the plethora of computing devices grows, it’s worth looking at some actual statistics.

Electric Pulp recently evaluated the affect that responsive-ising a client’s e-commerce site had on conversions, transactions, and revenue. The results were overwhelmingly positive, even when taking in the overall (desktop) growth of the product, as detailed in a follow-up post.

At the end of last year, Time magazine found that moving to a responsive design worked wonders for them. Craig Ettinger, general manager for Time.com, has detailed the positive increases in interviews for magazine.org and adweek.com.

In conclusion

I could go on about why I think Responsive Web Design is a great idea for your websites, clients, colleagues, and of course users, but the thought I’ll leave you with is this:

Create a new HTML document, add some content, don’t add any CSS, and view that document in a browser. What do you see?

The web has always been fluid; we’ve just wasted a good number of years forcing fixed pixels onto an inherently responsive framework. The time to stop is now.

This post came out of the presentation I gave at Responsive Day Out in Brighton, UK, on 1st March 2013.

57 comments

  1. Simon Minter

    Simon Minter

    01 March 2013 @ 05:05PM #

    All good points and an interesting read. I’d slightly question the ‘get out of Photoshop’ message that I’ve read both here and in other places – I still find it a very useful tool to be creative without even considering the constraints of devices, before then converting an early-stage (or ever mid-way-through-stage) mockup into a working web page. What’s more, lots of stakeholders ‘get’ Photoshop/JPEGs/printouts/sketches as a way of understanding what something’s going to look like: it can sometimes be intimidating or confusing for a stakeholder see a work in progress in a browser, as they may get caught up in the detail before the general ‘look and feel’ is captured. What works for me tends to be a wee bit o’Photoshoppery before leaping into the browser.

  2. Francesco

    Francesco

    01 March 2013 @ 06:36PM #

    Client questions are always the same: “Is RWD a business opportunity?” “Can we measure the ROI?”

    How we, as designers, could reply?

  3. Diego Vargas

    Diego Vargas

    01 March 2013 @ 06:55PM #

    I am relatively new to RWD, I have worked on a few project and every time I see more potential in it. At the beginning I found it cumbersome and time consuming, but it is no different than moving from table layouts to CSS years ago. I have started to create a work flow that makes sense to me, leveraging anything that is worth looking into. What I am trying to say is that it is not easy to change, but I believe is worth it.
    However, I am surprised how many designers are against it. I was talking with an old friend from my college years, and he told me that RWD is a mistake, it increases the development time and the benefits are minimal, except on a few cases. I was flabbergasted with that opinion, 55% of internet access is done with mobile devices, and I feel that RWD should become the standard, and not using it should be relegated to specific applications that would not benefit from it, perhaps that is the case of GoCardless. One of the points my friend brought is that all the percentage calculations are cumbersome and time consuming. I spend some time tackling that issue on my own, and I came up with a viable solution that is working so far for me using SCSS.

    =======
    /* Define the starting with, number of columns, padding and column padding /
    $frame-width: 980px; /
    Frame with /
    $frame-pad: 10px; /
    frame padding /
    $col-total: 12; /
    Number of columns /
    $col-pad: 10px; /
    column padding /
    /
    calculates the padding of an object in percent relative to the frame /
    @function objPadding($obj-padding){
    @return (($obj-padding / ($frame-width – ($frame-pad
    2)))100)+ 0%
    }
    /
    function generates css for responsive grid column system based on the frame with a column number /
    @function gridCalc($col-num){
    @return (((($frame-width – $frame-pad * 2) / $col-total)
    $col-num – $col-pad * 2)100)/($frame-width – $frame-pad * 2) + 0%
    }
    /
    generates columns automatically */
    $i: $col-total;
    @while $i > 0 {
    .col-#{$i} {
    width: gridCalc($i);
    padding: objPadding($col-pad);
    float: left;
    }
    $i: $i – 1;
    }
    =========
    Now, this is an small example on how to generate flexible grid layouts automatically with little effort, I have yet to come up with a satisfactory solution to the managing of the grid once they become too narrow for the layout, I have some solutions, but they are specific to the project instead of being as generic as this option. I am sure that better people than me have created much better and sophisticated solutions, but if I can do something like this to improve my work flow, I know anyone can.
    I am also considering ‘Prototyping’ with this column manufacturing process, to improve the layout process without an image editor, but I am not quite there yet.
    I think that instead of rationalizing why not to use RWD we should, ‘…embrace the fact that the web doesn’t have the same constraints [as print], and design for this flexibility.’ – John Allsopp. Sooner or later someone will look at our websites and applications on a mobile device, and it is time to get ready for it.

  4. Henry Zeitler

    Henry Zeitler

    01 March 2013 @ 08:07PM #

    RWD is – in one word – sustainable. In a few years, many people won’t even see your desktop site anymore if you have a mobile domain. If you want to provide the whole content you should go for RWD.

  5. Christian Bundy

    Christian Bundy

    01 March 2013 @ 10:00PM #

    The analogy of a robot is one of my favorites – if you could build a robot, and you had the ability to make it completely scalable to absolutely any size of environment, why wouldn’t you?

  6. Iain

    Iain

    01 March 2013 @ 11:24PM #

    To me, I’ve always seen it as a way of getting of seeing our designs on mobiels easier, but earlier this week it’s becoming apparent that the TV screen is becoming more popular and it’s made me think that, while I understand RWD is device-agnostic, I’ve only realised it’s heading for something that isn’t to scale things down; there’s every potential it’s going to go up the way, because if the TV is going to be a major form factor for the Internet then we have to think not just for mobile devices, but also larger form factors as well as various digital forms.

  7. Catherine Azzarello

    Catherine Azzarello

    02 March 2013 @ 01:27AM #

    I’m sorry, but I disagree: RWD IS more work if for no other reason than it requires more testing. Worth it, yes. But more expensive. And the TV form factor complicates everything due to limited input controls aaaand testing.

  8. lefthandnav

    lefthandnav

    02 March 2013 @ 02:20AM #

    Do you really think there is exactly zero overhead in creating a RWD no matter what the site. Of course just about every site where this is claimed, is a simple lo-fi blog style site. RWD surely takes more time – more design time, dev time, and definitly more discussion time, and absolutely definitely more testing time. it’s pretty rough maths to claim that all sites will need no extra time and resource no matter how complex. Try doing this on an enterprise level site with 1000s of pages, numerous different sections + paradigms, 100s of authors, and dozens of stakeholders, and see how your zero overhead idea stacks up. almost everything in a project adds to overall time. How can a complex web app created in RWD have no time cost at all?

  9. Matthew Snyder

    Matthew Snyder

    02 March 2013 @ 05:03AM #

    Right now the battle is on, but it is like trying to move a row-boat in a tidal wave…. give it 18 months and the word “mobile web” will be out of people’s vocabulary, just like the word “feature phone” was about 2 years ago…. just like the word “mobile email => email” 10 years ago… and just like " B+W displays => Retina " 13 years ago….

  10. Martin

    Martin

    02 March 2013 @ 10:47AM #

    I love RWD, and the fluidity of Pinterest style boxes and galleries is great. However I find RWD to dumb down designs. It’s the problem of hybrids, not great on desktop and not great on mobile. Whereas a mobile site or a desktop site can be great. Now this is a great generality and RWD makes sense for blogs and news sites. But for high emotional impact, full screen imagery I haven’t yet seen that happen. I’d be happy to be wrong.

  11. iamkeir

    iamkeir

    02 March 2013 @ 06:10PM #

    Nice, really on point. I’ve made responsiveness, fluidity and device agnosticism integral to my work – not a bolt-on – but would like to add that, personally, testing is the one area that still does seem to take more time for me (and therefore money). I think this is down to a learning curve with RWD not only for the designer/developer – but also devices and browsers to; we’re all still learning! Despite this, I still advocate RWD 100%.

  12. Richard Forbes-Simpson

    Richard Forbes-Simpson

    02 March 2013 @ 06:16PM #

    RWD does take more time and money. I think you mean to let the client assume how a design will look on certain devices before you start building it?

    Havent we learned from mistakes in the past? Assumptions are the mother of all f***-ups. Never leave it up to the client to assume how something will look because more often than not they’ll ask for changes during the build stage which in turn causes backtracking, which in turn runs a project over budget. That of course, equates to losing money.

    There is a reason why so many of us still provide design visuals as comprehensively and detailed as we can, it works. Designing in the browser might make you some head-way in terms of getting them to agree that its ok for a button to have rounded corners in chrome but be square in IE7, but you’re still leaving room for them to assume they are getting one thing, when in fact you’re giving them something else.

    RWD isnt a one size fits all approach. Some clients dont even want it! to suggest that we are at ‘war’ with clients over what we believe to be what’s best for them is precisely what’s pissing me off about this industry at the moment.

  13. Rick Hurst

    Rick Hurst

    02 March 2013 @ 07:24PM #

    Nice post Elliot, points well made – while reading it I have to admit to feeling slightly guilty about having been at times vocally resistant to the “everything should be responsive by default” viewpoint. I think maybe because I often worked for the type of “old-skool” agencies where the design and build are handled by separate teams (or even different agencies) and deadlines are tight, so unless the designers get involved and interested in RWD they will hand over to the web monkeys, at best, photoshop designs for different breakpoints, at worst a design intended to be fixed width, with no remit to adapt it. These are the same type of agencies who resisted moving from table and frameset layout to CSS layouts in the early noughties, and the ones who couldn’t let go of the idea that flash was the future of the web – they’ll catch up in the end!

  14. Jordan Moore

    Jordan Moore

    03 March 2013 @ 12:03AM #

    The war is over when we no longer have to give it a label like “responsive web design”. I see clear parallels between this and the uptake of CSS over tables for layout. We don’t need to say “Look, no tables!” anymore just like we won’t need to say “Look, it’s responsive!” in years to come.

    The naysayers, the resistance are much like the ones who stuck with tables back then who feared change and disruption to their comfy workflow. The same applies today, either you do something and adapt or do nothing and pretend this isn’t happening.

  15. Rodoula Matsa

    Rodoula Matsa

    03 March 2013 @ 07:27AM #

    Jordan, you are echoing words I wrote on my site just a couple of days ago. Completely agree with you.

    I don’t understand the “it takes longer to test” argument. Yes, it does take longer, but we are professionals and if we care about our craft we must adapt. I’m not in it just to make a living. I want to create something I’d be proud of.

  16. Richard Forbes-Simpson

    Richard Forbes-Simpson

    03 March 2013 @ 12:30PM #

    Rodoula Matsa – I agree to an extent that we must adapt and adopt new approaches if we care about our craft, but the bottom line is we can’t make a living doing it if we’re losing money. No matter how much we profess to love doing what we do, its not ‘professional’ to be prepared to spend more time testing and perfecting a website that’s run over budget.

    My stance on RWD is that it’s definitely the way forward and every project this year have been responsive builds. Clients are becoming more aware and more willing to adopt the RWD approach, however not every client are happy to pay for the additional costs needed. If the costs can’t be met then an alternative solution (a fixed width website) is offered. I’d prefer not to do fixed width websites but I’m most definitely not prepared to take on a project that I know won’t be profitable.

  17. lefthandnav

    lefthandnav

    03 March 2013 @ 12:57PM #

    @rodoula As one of the people who said it takes longer to test, all I’m saying is that it certainly does take longer to test. I’m not saying that you shouldn’t go responsive, just pointing out that it does add time to projects.

    There’s a lot of noise floating around in the Twitter fragment of web design professionals putting about the idea that you’re behind the times if you don’t make your project responsive. Ultimately everything in a project costs time, money, and resource, and though RWD could make your site more optimum it can definitely add to time and money on a project.
    If you have limited time, money, and resource (like almost everyone) and you have a tiny mobile audience with a low projection for mobile growth (like Go cardless seem to) you might have aspects of your project that justify your attention over and above RWD.

    Screen size and device is one (or maybe two considerations of a web design) and there are many web designers who prioritise them above other considerations such as image sizes, caching, accessibility, printability etc.

    These designers have failed their audiences in other very important ways. However we gloss over that, as RWD is held up as a singularly important aspect. Somehow when RWD isn’t employed a design has failed, and thus the designer has failed. This can create division and a sense of hierarchy amongst designers.

    However the big factors in a project are still time, money, and resources.

    Even using Elliot’s blog I do indeed get a nicely formed responsive design, but two things have affected my experience much more than having to do one pinch to zoom at the start – 1) the first time I tried to submit the form I didn’t add an email address and on submit the form was returned blank with the error message so I had to start my entire message again which was really frustrating 2) the submit button is so perilously close to the text area on mobile that I accidentally hit submit before finishing she trying to reposition the cursor in the text area (very frustrating).

    This isn’t a sincere criticism merely a demonstration that realistically with Elliot’s blog he perhaps equally doesn’t have the time, money, resources to worry about that in this project, even though it’s had a greater effect on my user experience than the RWD consideration has.

    I just think most of us designers aren’t reluctant, regressive, stuck in our ways, but that we just have limited time, money, resources, and sometimes we have audience priorities that outweigh responsive on a given project. Couple this with the fact the devices are always changing, trying to help out on non responsive sites (faster browsers, browser UIs that auto zoom on small elements, screens that match desktops for pixel numbers etc) and couple also with the fact your mobile audience isn’t necessarily the same as everyone else’s, then it’s inevitable that you may not end with a RWD.

    You see it’s not a war, it’s a bunch of thoughtful people with competing priorities.

  18. Malcolm Graham

    Malcolm Graham

    03 March 2013 @ 02:04PM #

    OK so RWD is great. I love seeing a nice responsive site. However it does take longer to make a site fully responsive. You have far more testing to do and potentially a lot more artwork to create. Web Designers have always had to make hard choices about which platforms and browsers to support. It has never been a good idea to try to test on 100% of devices. Another issue is that mobile versions of sites often need totally different content. When different content is needed for mobile versions, there is very little point in making a design responsive. If you just have a brochure site with no functionality then doing RWD does not take much longer and is probably a good idea. It is interesting that Twitter, Facebook, Google and LinkedIn do not have responsive design. Does the author not think that these billion dollar companies have weighed up the pros and cons and decided not to do it? or they just don’t know about it?

  19. Richard Forbes-Simpson

    Richard Forbes-Simpson

    03 March 2013 @ 08:04PM #

    @lefthandnav well said!

    Elliot, Just wondering, what percentage of the work you do nowadays are client work? and if any client work, do they have budgets like normal businesses do?

  20. John J. Locke

    John J. Locke

    03 March 2013 @ 08:05PM #

    I have to agree with Jordan that the war will be over when we stop seeing RWD as a fad or a label, and just start thinking of it as Web design, period. A lot of the controversy from designers seems to be from the assertion that designing responsively from the start doesn’t add any time to a project after a while. It does add some time, but it will add a ton of time if we keep approaching it from the waterfall methodology. If we want to keep producing a Photoshop comp for every resolution, then yes, it’s going to add a lot of time. Not ironically, the people who seem to be arguing most loudly against RWD seem to embrace Photoshop as design, when problem solving is what we’re after.

    Did people also complain this much when CSS was introduced? I’d be curious to hear from those who were there.

    We’re not just designing for the phones we have today, but for the different devices that are going to be introduced in the next five years. Is it a good idea to future-proof our designs as much as possible? I would say yes.
    Part of this discussion involves educating our clients on benefits of having a website that is easy to use on mobile (since that’s the default portal now, not a desktop). If we haven’t got the stones to argue for an approach that will benefit the client’s site for years to come, then we don’t deserve to be called designers.

  21. Matt Hamm

    Matt Hamm

    03 March 2013 @ 08:21PM #

    Elliot,

    Great article. I couldn’t have put it any better myself. Responsive web design has to be the way forward. However, I tend to disagree with you about having to get out of Photoshop. Agreed Photoshop has a fixed canvas, but as long as you design in a way that elements and grids you create can be easily flexible and adaptive. Not letting photoshop’s fixed width canvas dictate design decisions and always bearing in mind ‘How’ it is going to be built in Markup is essential. I suppose different people work in different ways. I continue to use Photoshop for RWD without it being problem in the design process. I find that designing in the browser from scratch makes design decisions feel more restrictive and less creative.

    Huzzah! for everything else. :)

  22. Paul Stamatiou

    Paul Stamatiou

    03 March 2013 @ 11:28PM #

    Great post!

    Unrelated, but your text reflows when highlighting it, actually rather weird. OS X / Chrome 25. While highlighting, it goes invisible, then starts moving as it gets highlighted.

  23. Jamie

    Jamie

    03 March 2013 @ 07:44PM #

    I think more people will go responsive if its easier/faster to create responsive sites.
    Sites like www.getskeleton.com and some of the stuff on Github will help make it ‘easier’ for people and if its faster or as fast as making a ‘fixed’ site then designers will use it more.

  24. Val

    Val

    04 March 2013 @ 04:45AM #

    You’ve raised some really great points in this post!

    I can’t totally agree with the idea that RWD doesn’t take more time though. Adapting your process and moving away from the waterfall process can absolutely lessen the amount of extra time and headaches involved. But RWD still involves more design decisions and more testing along the way. That’s not an excuse to avoid RWD by any stretch, of course. It’s just the nature of the game.

    If RWD results in more value for your client in the end, shouldn’t it cost more? If you’re offering a potential client a (RWD) solution will be future-friendly and will gracefully handle the endless landscape of screen sizes that are out there shouldn’t that come at a higher price than the fixed-width proposal offered from another company?

    Those of us who have embraced RWD as part of our process and made it just the way we build web sites shouldn’t sell ourselves short.

  25. Jason

    Jason

    04 March 2013 @ 06:23AM #

    Francesco,

    Here’s your ROI #s that you can provide: http://www.joshbroton.com/sessions/rocking-responsive-web-development-midwestphp/#/19

    Not only did they see a 377% increase in sales on the iPhone, they saw 42.4% growth on all devices.

  26. Daniel Howells

    Daniel Howells

    04 March 2013 @ 09:36AM #

    Hi Elliot -

    Agree with all the points apart from the fact that it doesn’t take more time. While I agree that if you execute on an integrated design/dev process the timings should eventually level-out and shouldn’t be significantly more, the time taken to test and track bugs on a multitude of devices definitely takes longer. This is especially the case on larger sites with many many templates and lots of moving parts and conditionals. And don’t get me started on testing complex layouts on multiple Android devices… oh boy…

    Also, there still seems to be some sort of disconnect between anecdotal evidence that people don’t actually like responsive sites (my non-webby friends almost exclusively don’t, and my mother gets very confused and uncomfortable when the site feels different on an iPad in portrait mode than on a desktop browser). While this is probably because the responsive sites they see are poorly designed and built, but also the articles you point to don’t address this: of course Ettinger will say the benefits of moving to a responsive design are beneficial, because he’s just spent a boat-load of cash on the redesign and needs to convince his publisher it was the right move. I’m super keen to see some really solid, significant empirical evidence that the ROI on responsive design is (at the moment) truly significant.

    And while I’m talking about ROI, I totally get e-commerce gets a significant uptick in ROI, but for anything else, I’d assume there’d actually be a decrease since mobile advertising really isn’t there yet.

    Don’t get me wrong: I think RWD is awesome but I think we’re still in the awkward, acne-ridden teenage years.

  27. Sascha

    Sascha

    04 March 2013 @ 11:32AM #

    Building a responsive template does not cost more time (money). Implementing in various cms, testing, optimizing images and performance, working with forms, complex navigations, lightboxes (just to name a few) does.

    Good article though.

  28. Matt

    Matt

    04 March 2013 @ 11:43AM #

    I’m still surprised some people aren’t fully embracing responsivity.

    Great talk at responsive conf! Great conf!

  29. Chris Ferdinandi

    Chris Ferdinandi

    04 March 2013 @ 12:29PM #

    Serious question for the “it takes longer to test” folks: if you build a non-responsive site, do you ONLY test it on a desktop with the major browsers?

    Even without RWD, we should still be progressively enhancing and assuming people may visit a site from devices of varying capabilities. Wouldn’t that involve testing on a variety of devices?

  30. Malcolm Graham

    Malcolm Graham

    04 March 2013 @ 12:34PM #

    Google, Apple.com, Twitter, LinkedIn and Facebook don’t use responsive design. Does anyone here have a view as to why that is? I agree that it would be great to be able to deliver responsive sites every time but there are real issues with doing this in the real world. Don’t you think these companies have considered doing responsive design? These companies probably have more expertise and budget than anyone. They take web design very seriously, but have not gone responsive. Why?

    Also many people want to see the desktop version of sites. The click-throughs on ‘view desktop version’ from a mobile version are always surprisingly high.

  31. Daniel Howells

    Daniel Howells

    04 March 2013 @ 01:15PM #

    @Chris Ferdinandi

    The main point is that if you are offering differing layouts for different devices, you’re increasing the number of elements that need to be independently tested. E.g. you might be offering a dropdown navigation for mobile devices, which needs to work as well as the navigation you’re offering on the desktop version. Said dropdown, in turn, might behave differently on a tablet to a phone. So even there, that increases the amount of testing you need to do by some magnitude.

  32. Neil Nand

    Neil Nand

    04 March 2013 @ 01:26PM #

    Like this post a lot and pretty much agree with everything & practise it myself.

    I do however make designs in Fireworks for different screen sizes before going into code. I’m primarily a developer but when I do design I find it so hard to code a design from the outset with no actual ‘goal’. I find it so much easier being able to visually see and quickly move boxes about and effectively wireframe a site in Fireworks, then make the HTML & CSS version. I then go back to Fireworks for the actual look and feel of the site too before putting it into HTML & CSS.

    The final HTML & CSS version that’s responsive may well look quite different to what I made in Fireworks (although they’re normally quite similar) but it gives me a kind of target / goal to aim for while coding so I know what I’m trying to accomplish with my code.

    Still a great post!

  33. Matt

    Matt

    04 March 2013 @ 01:31PM #

    The comments:

    “The real obstacle is designers and developers being set in their ways”

    and

    “The web has always been fluid; we’ve just wasted a good number of years forcing fixed pixels onto an inherently responsive framework.”

    The two comments above have shown you to have either not thought about what you’re talking about or have no idea what you’re talking about.

    It’s not a designer or developers decision to make a fixed width site. The project requirements dictate what can or cannot be done. Initial meetings will have conversations around RWD and whether it is feasible in a project. The fact that you also think it doesn’t take more time tells me that you don’t have any experience working on enterprise level websites with massive requirements and stakeholders. And looking at your links in the about section of this website it’s clear that you have only designed simple blog/conference/brochure style sites. I include the likes of smashing magazine as a simple blog too.

    Also to say “WE” have wasted a number of years creating fixed width sites is just arrogant and incorrect. RWD isn’t about mobile I agree, but mobile growth has made RWD an important topic in website creation. Before that the user experience wasn’t massively compromised by fixed width.

    Why call it a war too? Pointless and dividing.

  34. Alan Horne

    Alan Horne

    04 March 2013 @ 01:39PM #

    Although I agree with your point, I don’t think it stands in the real world.

    Not every designer is able to turn away clients who aren’t willing to pay the extra development costs for RWD, I would love to implement it as standard on my client sites, but I’m not in the position to turn away small projects at this time in my freelance career.

    Time, don’t get me started, I have been doing RWD on projects for 18 months now, and to say it’s no slower is verging on the ridiculous. Yes as I do it more, the quicker I become at coding them, but I can tell you right now a fixed width website will ‘Always’ take less time to code and test.

    As for designing in the browser, it’s not the way ahead for our industry, if your designing for yourself, then yes…maybe, but it’s down to personal preference in my humble opinion. Again in the ‘real world’ this simply won’t work. Are you telling me every single one of your clients is happy for you to simply hand them a finished and coded website before they see anything?

    I’m a strong advocate for RWD, I think it is the future of web design, but I think some of your arguments are a little off point.

  35. Richard Forbes-Simpson

    Richard Forbes-Simpson

    04 March 2013 @ 01:52PM #

    @matt – “It’s not a designer or developers decision to make a fixed width site. The project requirements dictate what can or cannot be done.”

    Well said. Usually the decision is made before it even reaches the designer/developer and we usually have to work within the parameters that has been laid out/agreed/signed off by client.

    I feel like there’s a disconnection in our industry. The fact that we’re there to provide a service t0 clients gets distorted in all the noise about whats the right way forward and what isn’t. The client comes first in a project, not us!

    RWD is the way forward but only if it’s fit for purpose.

  36. Adam Reece

    Adam Reece

    04 March 2013 @ 02:09PM #

    @Malcolm Graham – Twitter, Facebook and LinkedIn all have mobile versions of their site or apps to handle the mobile/tablet world.

    I have no idea why apple.com isn’t responsive yet.

  37. Rodoula Matsa

    Rodoula Matsa

    04 March 2013 @ 04:39PM #

    Richard, lefthandnav,

    You make good points. However, we are looking at things from a different perspective. Elliot’s article conclusion mentions that the web has always been fluid, and I agree. There should come a time when we plan for a project that we don’t decide on whether it’s going to be fixed, adaptive, or responsive. Websites are not just blogs, news sites and company profiles, sites merely served on desktops and iPhones. Interaction design and online applications are increasingly becoming one and the same and when we finally embrace the fluid nature of the web I believe that the creativity that we put into it will grown tenfold.

    I guess I’m looking at the bigger picture here. :)

  38. att systems

    att systems

    04 March 2013 @ 08:27PM #

    Do you mind if I quote a few of your articles as
    long as I provide credit and sources back to
    your weblog? My blog site is in the very same area of interest as
    yours and my users would truly benefit from a lot of the information you provide here.
    Please let me know if this ok with you. Many thanks!

  39. Sambodhi Prem

    Sambodhi Prem

    04 March 2013 @ 08:55PM #

    I struggle with the hierarchy of information: what to show first on mobile? It takes time… How to arrange the information so that it makes sense on all devices. People browsing on a mobile relate to information differently than when they view a website on their desktop.
    The transition to RWD might be a bit like writing prose vs writing poetry. Mobile forces me to cut to the chase…

  40. Mazurka

    Mazurka

    04 March 2013 @ 09:40PM #

    “It takes a lot more time to test responsive sites” says a bunch of people. Are you not testing your fixed width sites? Are you not testing them on phones, tablets, netbooks to see what experience your potential users are having? Then you probably have bigger problems than RWD. It can take longer but that is not a constant.

    Designing in the browser vs Photoshop. Firstly you shouldn’t be using Photoshop to begin with, Fireworks has always been the tool for SCREEN DESIGN (and is clearly better at it) whereas Photoshop was designed for PHOTO EDITING, and it always has been that way. Forgetting that point it seems it’s not really if you do one or the other but how much design is done with software and how much in the browser… those levels will differ for every person.

  41. Nicole Glynn

    Nicole Glynn

    04 March 2013 @ 09:55PM #

    @Malcolm Graham

    “Also many people want to see the desktop version of sites. The click-throughs on ‘view desktop version’ from a mobile version are always surprisingly high.”

    I suspect that has more to do with many sites limiting the content that can be accessed via their mobile sites due to the misguided notion that the designer can accurately predict what content people do and do not want (or need) to access via a mobile device.

  42. Ferdy

    Ferdy

    04 March 2013 @ 11:00PM #

    Very interesting discussion. I too have been on the fixed width wagon for many years and am now working on a complex and large fully responsive redesign of a web application. This does not concern a trivial blog, it’s a highly visual web application that spans 119 unique pages.

    It is a massive undertaking, I’m at about 60% now. I hope you don’t mind me plugging my blog here, as there in a series of articles I am covering in detail all the problems and solutions that come with such a major RWD project:

    http://www.ferdychristant.com/

    If you don’t feel like reading those articles (there’s 10 already), I’ll summarize as briefly as I can:

    I’ve been doing it wrong all along, and RWD completely changed my view on web design. It takes actual practice, actual doing to realize this. It will be a few weeks of pain, and then you will be a reborn web designer. I’m not a RWD prophet, just the average developer trying this stuff out.

    Learn RWD and learn it properly, and you’ll never look back.

  43. Malcolm Graham

    Malcolm Graham

    04 March 2013 @ 11:31PM #

    I wrote a long comment earlier but it seems to have gone missing… Now actually using a mobile so I will keep this one very brief. Most major web savvy brands do not use RWD. Some examples include web based Marketing materials by: Facebook, Apple, Google, Twitter and LinkedIn. Why do none of these web giants use RWD for online marketing?

    I have never seen a serious website that is fully responsive. Show me a site with over a million uniques that is fully responsive. Try building an e-commerce site with 5 million pages all fully responsive.

    I support the use of responsive design but I don’t like being told by people with no experience of launching major websites that everything HAS to be responsive. It is fairly low down on the list of priorities for most projects.

    Design work can be done on paper, in photoshop or in fireworks. Creativity and innovative thinking are far more important than the tools you are using.

  44. lefthandnav

    lefthandnav

    04 March 2013 @ 11:52PM #

    @ferdy Thanks for posting your blog – the detail in your posts is phenomenal and looks well worth careful attention.

    Quick question though – is Jungledragon your own site? It seems like it is from the bits I read, which would give you far greater opportunity to implement RWD as the time and materials issue is one that you can decide the boundaries of if you yourself are the client of course.

  45. Malcolm Graham

    Malcolm Graham

    04 March 2013 @ 02:42PM #

    @adamreece none of the Marketing websites for the above companies are responsive e.g.) twitter.com, linkedin.com, facebook.com. The Marketing sites i.e.) Why you should use their products is not in the app. They just do not use responsive design. They would have considered going responsive several years ago and decided not to. These are not the only ones. Hardly any successful high traffic websites use responsive design. Please send me a list of successful responsive implementations, I would be interested to see it. By successful I mean a site with 1 million + uniques a month. Having delivered enterprise websites for 15 years I can understand the decision not to use responsive design by these big players in the industry. I do get told (mainly by very junior people) everything should be responsive all the time. I do think that if someone has a very high budget for web design then it is one of the things that should be considered as part of the project, however it is not a given that every site must be responsive. Far more important is good content for example. In most cases online shopping is done from desktop versions of sites. If you are building a 1 million product e-commerce site (as I have done) making every product listing responsive and testing it could take many months. Making something mobile compatible (something that renders for mobile) should be goal 1, making it responsive is goal 2 in my opinion. If you have a big budget and you are in no hurry then I think responsive design is the way to do. If your site is a blog of simple brochure site then it also probably makes sense. Many of the people advocating ‘responsive everything’ have probably never been faced with a serious client, with a budget and a time frame.

  46. Bobby Anderson

    Bobby Anderson

    04 March 2013 @ 02:44PM #

    As designers or developers we can only go so far to brief clients (potential or otherwise) about the pro’s and con’s of responsive web design – it’s in our best interests to educate clients as best we can about what we can/can’t do for them as they aren’t on the whole ‘web savvy’ people.

    If some clients neither see the need or can’t justify the extra cost for a responsive site – that’s fine, don’t do it, give them what they originally requested and keep a good client relationship for future developments.

    With regards to designing in the browser, this can only be done to an extent, clients like visuals, they want to see a ‘finished product’ before signing off .

    Personally if I have designed, for arguments sake, a desktop view in PS/FW, I will have designed the page with the information architecture in mind from the start, therefore when it comes to the front end dev/responsive dev, I know that my content is in the correct order and prioritised to allow me to design the smaller views within the browser from that stage onwards.

    RWD is here to make our lives easier, to allow us to bring a desktop website to a smartphone and to ensure that content is easy to access and the user experience is as optimised as possible. It may not be the perfect solution, but it’s a solution none the less.

  47. John

    John

    05 March 2013 @ 09:06AM #

    The number of devices and therefore the number of screen-sizes increase on a monthly basis. It would be madness to try and cater for all of them. My approach is to break it down into 3 distinct sizes: small, normal and huge, which could be translated into handheld, desktop and wall. For the average site, this would be enough to be readable and usable across all devices. It is only when a site is aimed specifically at some device or size that I add more specific media-queries.
    The problem that remains however is pixel-density. My 7" Galaxy Tab has a wide resolution of 1024, but I cannot read the text at zoom-level 1. Media-queries should have included density from the start. Unfortunately it will be a while before this is widely supported.

  48. Chris

    Chris

    05 March 2013 @ 03:47PM #

    Thanks for that great post.
    In response to the argument against RWD; “only 2% of their audience were visiting the site on a mobile device.”
    In my experience, sites we have re-designed as responsive have had incredible increases in mobile traffic. GoCardless’s argument is flawed; a possible reason for little mobile traffic is because their mobile experience isn’t particularly nice. It’s a bit like saying a city has no need for bike paths because no one bikes.
    If you build it (responsively), they will come.

  49. PH from Kaliseo

    PH from Kaliseo

    05 March 2013 @ 04:21PM #

    Well it’s very easy to end that war : be empiric and make A/B testing with a RWD and a static one and check who won in terms of sales. If it worth it, then do it.

  50. Mazurka

    Mazurka

    05 March 2013 @ 06:44PM #

    @malcom
    microsoft.com is responsive. Not the entire website but alot of the key customer facing pages are. Boston globe, Disney.com, gov.uk, Starbucks, Time.com, the list goes on. As for “find me pages with 1 million views per month that are responsive” well I don’t have access to everyone’s analytics accounts so that may be tough. But many sites within our industry like Smashing Mag, A list apart, and the next web are all fully responsive and I imagine get hundreds of thousands or more visits. To say big brands “would have considered going responsive many years ago” is a ridiculous statement, Ethan Marcottes talk that literally spawned this shift in web design was in 2011 (not that long ago) and it can take quite long time for larger beasts to adopt new techniques (apple’s own website was still 640px wide when everyone was designing 800 or even 1024 websites).

  51. Scott Riley

    Scott Riley

    05 March 2013 @ 07:50PM #

    Talk of a ‘war’ and a ‘resistance’ is taking things a bit far, is it not? The debates I’ve heard and had, both for and against responsive, have often been greatly productive, educational and eye-opening.

    This whole idea of a ‘One True Method’ approach to designing for the web, and the frankly demeaning and insulting suggestion that those who do not design responsively aren’t ‘real’ designers, are huge downers to such an exciting and mould-breaking approach to design. Responsive web design is but one approach to solving a host of problems; it is oftentimes the ideal solution for many projects and has helped push debate and potential change in web standards, but that doesn’t make it the only method worth considering.

    ‘Real’ designers will assess many different solutions and find a means of filtering and analysing the benefits and pitfalls of each. To suggest that to be a ‘real’ designer you have to instantly default to responsive design is to suggest that we remove yet another analytical approach from our process.

    Every site I’ve created in the past year has began with a decision to ‘go responsive’; however, this decision was made after deliberation and analysis of each site’s own host of problems and their potential solutions. I fully expect that almost all my future sites will be responsive in some mould; but I won’t be ridding this deliberation from my process.

    Arguing that responsive is the only way forward is the same as arguing that of ‘Flat Design’. To simply default to a certain solution for every project we have is doing as much a disservice to our craft as refusing to use said solution. Why should we eliminate a potentially superior solution straight off the bat simply because we wish to evangelise a specific approach?

    Finally; every project is unique, every project will have it’s own criteria for success and it’s down to us to decide the right approach to achieving and quantifying that success. I’m astounded when I hear ‘industry leaders’ suggest that we should not do this, and instead default to responsive.

  52. Theo

    Theo

    06 March 2013 @ 11:14PM #

    Great article and discussion, however i think that RWD is definitely the way to go if you want a future proof website.

  53. Marc Brooks

    Marc Brooks

    08 March 2013 @ 03:50AM #

    Takes a LOT of nerve lecturing about responsive web design when your blog looks like this… gratuitous whitespace.

  54. John Niedzwiecki

    John Niedzwiecki

    08 March 2013 @ 01:24PM #

    Great post. It’s so important to remember responsive isn’t just mobile. There can even be a big difference between a desktop with a 23" monitor and a 15" laptop where that fixed design and be problematic. Yes, responsive can get all the way down to a phone optimized version, but it is not the point.

    From a testing perspective, yes, it will take more time, but I think it should be fairly marginal. The changes in a responsive design are meant to be presentation, not functional (largely). Yes, there can be navigation changes and form changes, but still in how they’re represented. Functionally, your page still has the same HTML when it responds, and the same application function. Largely, you need to test if it looks correct when you shrink the browser size down. If you say “but now I need to test it on a phone or a tablet” that’s a choice. If you’re not testing on a tablet now for your site, then you have no support for that browser. Testing the responsive site on a tablet is the same cost as testing your site now on a tablet. If you’re not testing then you’re not testing. You can’t count something you should be doing anyway as extra cost.

    The greatest “extra cost” is the “we have 1000s of pages of an application” and that converting it isn’t zero cost. That is true. That will take cost, but any UI redesign takes cost. That is a large hurdle to overcome, but necessary if you want the value of RWD.

  55. Paul Decotiis

    Paul Decotiis

    08 March 2013 @ 03:17PM #

    Great Article, and is a valuable conversation to have regardless if your a web designer or a web developer.

    Most companies build websites to make money, gain interest in a product or service, showcase your work, etc. With those purposes in mind, why would we ever limit our users from providing the best possible viewing experiencing to our users, dependent upon their web-viewing device of choice? You cant choose how someone arrives at your home or place of business, but you can make pro-active decisions about what their experience will be when they get there. Responsive web design is responsible web design, and our users deserve it.

  56. Johan Hernández

    Johan Hernández

    09 March 2013 @ 03:49AM #

    @ Francesco Definitely yes, I’ve redesigned sites that were not responsive and in all of them the bounce rate have fallen considerably from mobile devices.

  57. Marc A. Donald

    Marc A. Donald

    13 March 2013 @ 02:54PM #

    Nice Article ! We can consider web design as a combination of planning + mixing text, images, and multimedia files to form a professional web design. Web designers utilize HTML for the website structure and CSS for adding their final touch from colors, fonts, alignment. Javascript is important as well to create an interactive page.

    But the point that web designers should be more familiar with the new web design techniques such as responsive web designs. Nowadays, huge traffic is coming from hand-held devices such as tablets and smart phones. A responsive web design will work on any device with no problem.

© 2005 – 2014 Elliot Jay Stocks. All rights reserved. Powered by Harmony and tracked by Gaug.es. To keep updated with new content, you might like to subscribe to my RSS feed.