To design responsive websites effectively and responsibly, I had to completely redefine the way I view the web.

It pains me to admit it, but I wasn’t too keen on responsive web design right out of the box. Weeks after Ethan’s ALA article, I even briefly entertained the idea of writing a post haranguing the practice, nit-picking concerns on how using media queries to relocate elements on a page could disorient users, but I knew deep down I was full of it. My short-lived adverse reaction wasn’t rooted in any specific limitation of the responsive approach itself, but in my inclination to cling to the way I had always perceived (and built for) the web.

That perception had solidified over 10 years of making websites in a particular way. Pages were wire-framed, then fleshed out in Photoshop, which was where, for the most part, design ended. HTML & CSS were merely used to execute the prescribed layout. I took comfort in that approach, particularly in the control I had with a rigid grid and a perfectly pressed pixel-based structure. What you saw in the comp was what you got on the web. Bada Bing.

To think about the web responsively is to think in proportions, not pixels.

That approach, however, only works for a single view, a concept quickly becoming a thing of the past. Mobile browsing has exploded, and tablets (along with a slew of other devices of varying size) have confirmed the web’s status as a moving target. The choice was before me: retain the control in my original approach but accept that I’d be designing three or five or ten layouts, or redefine the way I think about the web. I found that to think about the web responsively is to think in proportions, not pixels. I traded the control I had in Photoshop for a new kind of control—using flexible grids, flexible images, and media queries to build not a page, but a network of content that can be rearranged at any screen size to best convey a message. Web pages (not that the term ever fit perfectly) aren’t really what we’re building anymore.

***

Did I forsake Photoshop? No. Reagan and I still start designing with a wide, desktop-sized view, but it means something very different to our process. It’s a starting place, and once we’re going, Photoshop is ultimately used for asset building (textures, photos, etc.). The largest and most exciting part of the design process now happens in the browser.

Did I dismiss hierarchy? No, but “squishy” was the unflattering term I initially used to describe responsive sites.  For me, websites take on an increasingly familiar skeletal form as I mentally map content in proportion to specific areas. When working with clients that’s how we address content. Elements are sized & placed purposefully to create order. I was worried that fluid content would have no visual impact and spinelessly reflow, breaking the established hierarchy. However, I soon found that didn’t have to be the case. While working on our first few responsive projects at Paravel, we used fluid-width images, videos, and even text headlines when appropriate, along with proper planning (content choreography) to maintain strong visual presence. The hierarchy, and thus the message, can be preserved at any view.

***

In the process I discovered, to my great relief, that I didn’t have to throw away my design sensibilities to ‘go responsive’; instead, I could develop techniques to incorporate design elements I gravitate towards (like interesting typographic arrangements or full-width images) in a responsive way. My stubborn unwillingness to abandon those sensibilities has made these initial steps into responsive web design worthwhile. It’s gratifying to use the things that might have kept me from adopting a responsive approach as inspiration to innovate. 

If there’s anything I’ve had to learn the hard way through all of this, it’s that responsive web design isn’t bolt-on. Whereas progressive enhancements (like border-radius), or web fonts can easily be added and removed from a site, responsive (for me at least) has required a complete redefinition of how I approach my craft down to the pixel. The more I learn & adapt, the more certain I am that this is the best way to build for the web. The process of adopting a responsive approach has made me better at my job, and I’m thankful for that.

Ads by Fusion

63 Responses

Leave a comment or contact me via Twitter @TrentWalton

  • Robin Kylander

    Interesting article as always, you’re an amazing inspiration source.

  • Chris Gillis

    One of the best posts I’ve seen on responsive design - thanks for sharing your thoughts about the new approach.

    Now if we all can get away from using photoshop for layout....ahh that’s another day’s work.

  • matthew carleton

    good read Trent,
    I have been going in the same direction too. Do you do any sketching or any of that sort when working with mobile now? I am still finding myself trying to produce some sort of visual to work from, even if its just a sketch.

  • Rory McCawl

    The last paragraph is gold Trent, pretty much sums up how to approach responsive design, it will take time, effort and thoughtful planning. While still quite new to designing responsively, each day I see and learn new things which will improve how I approach new projects in the future. Great post.

  • Alistair Chisholm

    Since returning from NAconf I’ve had a similar growing comprehension. Ethan’s RWD book is a great read on the subject.

  • Andy Baudoin

    This approach is one I’ve been struggling with, mostly because it seems to throw a large wrench in established processes at larger firms. It’s been hard to find information from larger groups that have moved on to responsive design as their standard and how they approached that.

  • Trent

    @matthew carleton:

    Do you do any sketching or any of that sort when working with mobile now?

    Definitely! Quick sketches do wonders, especially when trying to articulate where things go in those single column views.

  • bob asbille

    this all makes sense. BUT i often find myself, when on an iDevice, choosing [ when applicable ] to view the “regular” site instead of the device-specific one dealt to me originally. maybe i’m alone in this.

  • Jeff Hilton

    It seems responsive design is a fertile area for new ideas and techniques for us web design pioneers. I can’t help but feel we are only beginning to understand this area though. The density of information, relative importance of various blocks, quality of experience on various devices, etc. seems to be a whole new science.
    At the moment I am still feeling that mobile experiences are different than desktop and won’t be handled well by resizing, aligning, omitting, scaling etc. Mobile will require dedicated design that presents a unique view and harnesses the extended hardware resources such as GPS, voice input, optics, etc. (not just apps, Im talking websites - which seem to be converging somewhere ahead anyway).
    Thanks for sharing you experiences so far with this! Great stuff...

  • Justin

    As always, a nice read.

    Do you use a responsive framework to build from?

    It seems like there’s a divided perspective on designing responsively, but it seems to me that much of the division is based on designers being stuck in a rut, afraid to shift out of basic habits and tendencies. Like everything else, it’s hard to change!

  • Ryan Rumsey

    Lovely, as always Trent. I feel like responsive design is still in it’s infancy in many ways. We’re learning to design proportionally and the evolution of this approach will allow us to design environmentally. Understanding the needs of a user on a mobile device compared to those on a PC can provide great insight towards IA, content strategy and usability. A practical example could be contacting someone. On a PC, chat/email/social may be the user preferred methods but on a phone, dialing a number may be the most efficient and effective way of communicating. By approaching responsive design in this manner, we will all better designers and experience makers.

  • Trent

    @Justin:

    Do you use a responsive framework to build from?

    Sort of... We use Foldy fairly often as a starting place, but almost always have to modify it.

    it seems to me that much of the division is based on designers being stuck in a rut, afraid to shift out of basic habits and tendencies.

    I know exactly what you mean. I think that if a framework helps someone get started, they should utilize it as a point of entry as well as a means to broaden their understanding.

  • Ralph

    Wow... this was such a great read and encouraging. Indeed, RWD takes every web designer/developer out of its comfort zone whether they like it or not :)

    @Bob Asbille - With a responsive design there is no other site. The whole point of a responsive design is to serve the same website for desktop, laptop, tablet and (smart)phone.

  • Trace Meek

    Great article, and so true. It also makes me think of the Habit Fields article you referenced in a previous post, in that it takes a while to train oneself away from the habit of thinking in pixels (especially when pixels are so fundamental to many of the tools we use).

  • Nathan Smith

    “My short-lived adverse reaction wasn’t rooted in any specific limitation of the responsive approach itself, but in my inclination to cling to the way I had always perceived (and built for) the web.”

    — Get off my lawn!

    That’s how I feel too. I’d even say I still prefer fixed-width, but am begrudgingly coming around to this newfangled way of thinking. :)

  • Jerod Smith

    Responsive design was just the nudge I needed to make me start designing more and more in the browser. For better or worse (haven’t decided which), I find this makes my design much more intentional. (I set specific numbers instead of bumping something to see what happens)

  • Ines

    This is a great article!
    I absolutely agree with you, that we spend most of our time in browsers and Photoshop is used for asset building. This is obviously not always the case, since some clients still prefer a classical screendesign. But at least I try to stay on that path when it comes to my own projects.

  • Reid

    I would love to learn more about how this responsive thinking has effected your design and development process at a high level. Have you changed the way that you typically interact with your clients? Wireframe > Design > Development lent itself extremely well to a linear project timeline. How do you communicate this new workflow to your clients in terms of schedules and design reviews? Does the scale of the project affect how much design happens in the code editor?

    I’m very happy to see someone writing about responsive as a process rather than a new set of rules. Keep it coming.

  • Andrew Lohman

    Great work on the header section…The slight shadowing on hover is fantastic. Oh yeah, great read too.

  • Kristofer Layon

    Great observations about responsive design, though I’d like to note two things in response to Trent and Nathan: responsive design *can*, in fact, be a bolt-on, and can also work with fixed-width sites.

    Now granted, neither are necessarily ideal (and both are decidedly not “mobile first”, arguably the better way to be design responsively). But as far as taking baby steps into responsiveness and getting a feel for the mobile context, you can add media queries and a mobile stylesheet to a legacy web site (as long as it’s otherwise designed with CSS layout, etc.) and get an admirable mobile presentation for an otherwise fixed-width site. The original fixed-width site doesn’t necessarily need to be redesigned to do this; you just need to add a mobile presentation that kicks in at the right device widths.

    Is this optimized for all mobile devices? No. And is it optimized for mobile performance in all respects? No. So is it perfect? Hardly. But it’s still a solid start, and delivers a responsive mobile version of a site to most visitors.

  • Mike

    @Ralph: Sometimes it makes sense to have a separate mobile site in which case you can take care of larger devices like tablets to laptops, desktops, and beyond (tvs?) with your responsive site. This doesn’t diminish the importance of the responsive site because you’re still supporting a wide range of sizes!

  • Kevin Jones

    Great post Trent. Nice to see someone else’s thought process on the subject. Honestly, RWD makes me a little nervous but I look forward to getting better at it the more I work with it.

  • Tim Brown

    Trent, I really enjoyed this post. Read it twice already. Thanks.

  • James Finley

    Keep the great articles coming, Trent! Here at Echo Design Group, we have launched two adaptive/responsive sites (we find adaptive grids give us more visual control) and are prepping to launch 5-7 more within the next month. We are also getting ready to tackle a site that is current at 28% mobile/tablet, growing 10% last year along, and on path to hit 30% by summer.

    Between you and Mark Boulton, I’m loving the great reads on the latest evolution in our industry.

  • Kev Adamson

    A great “real world” view on it all.
    And your thoughts regarding the use of tools such as Photoshop are spot on as well.

    Folk looking for that all in one solution won’t find it. And those abandoning everything that’s gone before, instead of redefining it’s purpose, are de-tooling themselves at the very moment we need all our tools at our disposal.

    RWD is definitely emerging as a thought process rather than a black and white linear technique.

  • Michela Chiucini

    I agree with @Jeff Hilton: we are just at the beginning of the road and it’s so interesting to read thoughts on the subject.
    Responsive web design forces us to analyze a design from different perspectives and this, sometimes, brings improvements also in the larger version.
    The extra time required is definitely well spent(much better than trying to adapt to older browser).
    The Photoshop/sketch/browser approach works well for me too, but like @Reid, I’m still looking for the best way to share the workflow with clients.

  • Fyza

    @Chris Gillis: Yes, Photoshop is such a pain, and I’m afraid of using Fireworks since I haven’t touched it in years.
    I have started using Illustrator for most of my design work now (aside from texturing, if it’s even needed) and it’s such a breath of fresh air. Much easier to deal with and make changes.

  • The Frosty

    I’ve welcomed the responsive design process, since I moved into designing in a browser a few years back.

  • Seth Hall

    I started my web design career in 2011, the year RWD became standard. So I had the good fortune of adopting it early in my career. Although I have made several responsive sites, I am still unsure of best practices and whether I am doing it right or not. I design fully in the browser, which I love, and my sites adapt as the browser resizes and on mobile and tablets, so I assume I am doing it right. I just feel like I am hacking my way through. I have yet to read Ethan’s book, so maybe that will help, since i lean toward the defined and practical and all. Any thoughts?

  • Jon Brown

    Trent - This articulates something that I’ve had trouble explaining to people. Responsive design starts at the wireframe.

    As a WordPress developer I come across a myriad of people that want to find an existing responsive theme that they can bolt on to their site, and while this might work reasonably for a standard blog with a single sidebar... I, like most WP professionals I know, rarely if ever build “blogs”. When an entire web property is built with WP as a CMS, you’ve got to 1st identify the content and make decions on how and where that content is going to display at different screen sizes, as well as what if any content will appear or disappear entirely at a given screen size. Those decisions are going to be entirely different depending on what the purpose of the site is. One can’t just say, stack the menu, content and sidebar all vertically and call it a day.

    @The Frosty: - I’d love to understand how people design responsive in the browser... being still fairly new to responsive design I tend top work iteratively back and forth between browser and PSD.

    @Michela Chiucini: - Sharing this workflow with clients is a huge challenge for me too. I’ve had huge push back showing browser based wireframes to clients who freak out at the “spartan design” in spite of trying to explain the process to them of content before graphics.

  • Tobias

    Now it is also important to show the people what is possible...when working with customers they need to understand how the viewing of the internet has changed and that this is essential not only from a designers point of view but also for strategic purposes.

  • Jeremy Girard

    What a wonderful post. I too have found that responsive is not something you tack-on to a site after it is done, but is something that must be part of a project’s requirements from the very beginning.

    While a responsive approach to web design is a redefinition of how you design for the web, I also find, like you it seems, that the redefinition builds on what has worked for us in the past. Like you, I start designs in Photoshop (or the sketchbook) and follow a very similar process. I have often said that responsive design hasn’t changed the way I build websites, it has improved it.

  • iDGS

    Thought provoking. (Me like!)

    You (Trent & fellow readership, collectively) may also enjoy a recent post by Tito Bottitta over at Upstatement [http://upstatement.com/blog/2012/01/how-to-approach-a-responsive-design/], wherein, among other things, he reveals they use (* gasp *) Adobe InDesign in the early phases of site design, e.g., for the redesigned Boston Globe. ...Which gives their approach a bit of street cred’, eh? ;-)

  • Zach

    I’ve been using Rupert’s foldy960 to ease into responsive web design, that’s been a great starting point for me. It’s definitely a worthwhile learning curve.

  • Cory Mathews

    I viewed this exactly the same way at first. I though it was just going to be a lot more work for a very slight amount of benefit, like most other newer “advances” are in our field. However after playing around with the media queries more in depth, they feel like a natural progression for css. I will still avoid browser prefixes, and reset stylesheet nonsense. But media queries are an excellent addition to CSS.

  • Matt

    Most of the responsive websites i have seen, if not all, use horizontal navigation, menu on the right, or left, so, they all look quite similar in layout, this worries me...

  • Mina Mikhail

    I love your bespoke article design and this particular article is a great articulation of the challenge of designing responsively. I’ve just gotten started with it myself and, while I do find it quite challenging in these early days, the benefits are quite clear to me.

    I noticed you mentioned that you do browser-focused mockups in Photoshop to find your proportions. I lean more toward code than pure design, so I tend to do most of my work in the browser, and when I started doing responsive designs I would always start with the mobile layout first, using the constraints of the format as my guide. After having done several projects this way I’m starting to find the desktop layouts much more challenging because of all the real estate! I’m sure this will work itself out with time and further projects, particularly those with data requirements beyond what I’ve encountered so far, but it was certainly an unexpected outcome. I’d be interested to know your thoughts on the “mobile first” approach.

    As a final note, I took a look at Foldy, it’s a nice baseline. So far I’m using parts of HTML5 Boilerplate and concepts (but not much code) from Joni Korpi’s Golden Grid System. Maybe I’m just being anal or making my life more difficult, but as part of my transition to responsive design, I decided to move away from grid-specific classes toward using semantic class names for structure. The specific code is less reusable across projects but the concepts and readability are what matter most to me right now on these smaller projects.

    Thanks for the great write-up!

  • Web Cooperative

    @Matt:

    Surely horizontal has always been more popular. It’ll likely remain that way.

  • Trent

    Wonderful comments all around! I’m glad to know my perception is shared.

    @Reid: Good question! Things still seem to be changing from client to client, but I’ll try and log the process a bit more carefully on a project we start this week.

    @Seth Hall:

    I just feel like I am hacking my way through.

    I think that’s how you know you’re doing it right :) And yes, Ethan’s book is a fantastic place to start.

    @Mina Mikhail:

    I’d be interested to know your thoughts on the “mobile first” approach

    I definitely dig it. Many projects we do at Paravel start with a wide/desktop view, but are developed in a min-width based mobile first sort of approach.

  • avangelist

    Glad you wrote this, it is the discovery I think most people will have if they allow themselves to experiment

  • Rob Willox

    Great to see the idea of scalability being resurrected! It is not a particularly new idea and remember a good many years ago using relative measures as against fixed sizing and rigid grid structures.

    It wasn’t prompted by the recent need to optimise display for different devices such as mobiles, tablets and various other formats but more from an accessibility perspective so that the ‘full’ layout would scale proportionally to suit the users needs.

    It’s re-kindled my enthusiasm as it overcomes and addresses many of the issues I’m sure a lot of us have experienced when the requirement is there to develop a ‘mobile’ friendly from an existing fixed-width site.

    Starting now to integrate into the process the concept of scaleability will not only benefit the client but our own businesses being able to offer and provide a site design process able to address whatever ‘new’ requirement presents itself.

    Thanks for bringing it back into my consciousness!

  • Andy Cohen

    Nice writing. I like how you were thorough in your description of your process. Seems like this particular project was a ground up approach. Are you partial to any frameworks that guide our nudge the designer/developer in the direction of best practices?

  • Trent

    @Rob Willox:

    It’s re-kindled my enthusiasm as it overcomes and addresses many of the issues I’m sure a lot of us have experienced when the requirement is there to develop a ‘mobile’ friendly from an existing fixed-width site.

    Exactly how I feel:)

    @Andy Cohen:

    Are you partial to any frameworks that guide our nudge the designer/developer in the direction of best practices

    Ultimately, I think it’s good when people can manage building whatever is necessary from scratch, but I agree that frameworks as a starting place can be really helpful. At Paravel, we use Foldy fairly often. I like it because it’s really simple and will most likely require some modifications.

  • Rudy Chou

    I’ve been stuck on an older mindset and mental model for awhile as well. I agree that responsive designing requires a whole new way of looking at our process.

    Its not an add on or progressive enhancement. Its a worthwhile investment where you design or in many cases re-design once and have it be browser/machine agnostic.

  • PJ

    Fantastic article, Trent. You perfectly articulated something that’s been swirling around amorphously in my own head over the past few months.

  • Michael Lynch

    How do you feel about making an existing, non responsive site responsive? I don’t mind the idea of making a site responsive from the beginning but the idea of making an existing, non responsive site responsive is really overwhelming and intimidating to me. Ultimately I know I should but it just seems like so much more of a burden than starting from scratch.

  • Debbie Campbell

    Thank you for this article. I had been intimidated about getting started in RWD but recently took a class on it at lynda.com. After that, I altered my own WordPress site to display well in handheld devices and tablets - it was a good experience and not as hard as I expected.

  • Matt

    We need to keep in mind that responsive design isn’t just about the front-end design but also how the website works. It needs to load fast, have the latest web standards and a good content strategy. We should be building websites with the user in mind...not the PSD.

  • Anthony

    @Seth Hall:
    “I just feel like I am hacking my way through.”

    Glad I’m not alone!

  • Julian

    I’m so glad I stumbled upon your blog. I’m just dipping my toe into responsive design - a long way to go!

    Thanks

  • Theo

    We are in a cross-over period where the majority of designers still make designs for the desktop browser using 985px width and the desktop mouse events like onmouseover. Where is the onmouseover or a:hover on my android?

    Developers and designers have adjustments to make in the way they work and in the way they think about a website.

  • ThePeach

    @Theo in the agency I’m working at we are facing the same problems and the gut feeling I have is that web designers must have prior knowledge of the current technologies, of what lies behind the “page”. The common misconception here is that a graphic designer can do the work of a web designer.

    @TrentWalton nice article, found your blog recently while investigating on the matter.
    Regarding this specific post I think the biggest challenge we have to face is to take the whole mental map and export it in the proper way. I’ve read a couple of articles on how to approach the design phase of a responsive web site (most notably Ethan Marcotte’s book at ALA, IIRC) but none of them in my opinion get to the real point of what you call “Content Choreography”, or “Content Strategy”. It’s probably just my personal sensitivity that makes me think more of the root and the basis of what we are doing. I’m struggling like hell to make people (read: designers) understand that at the end it’s not about the design and that “form follows function”.
    Nice article btw, keep it up!

  • GrahamC

    Really good article. I particularly like the comment “To think about the web responsively is to think in proportions, not pixels.”. I’ve now spent almost a fortnight just planning a site on paper, in terms of wire-framing as to how different elements might come together, and am now on the cusp of writing some code.

    Your comment “responsive web design isn’t bolt-on” is, in a way, almost contradictory to the situation I find myself in at the moment though.

    I intially built out the current site I’m looking at remodelling as an html5 site that I omitted 99% of features from. Really all I wanted was a semantic site that described itself well in terms of well formed markup, micoformatting/microdata and a realistic hierarchy of information.

    When I’ve come back to this project I’ve kind of realised that because I (tried to) make sure I had fairly decent markup in the first place, making things responsive is less of a technical dilemma, but more of an interesting challenge in terms of how best to re-arrange items for various different layouts.

    It’s so far been quite a refreshing experience to come back to my own code and not think “eejit” but the responsive thinking is really interesting. Quite unbelievable that we’ve not all been doing this for years really.

    Cheers for the article anyway! Nice!

  • Spark

    Another great post, Trent. Thanks for sharing your view of Responsive design, we all have much to learn.

  • Martin

    I think most people will have if they allow themselves to experiment

  • Jed

    Great article. I think for me as a designer with a print background, the biggest issue is letting go of a degree of control and thinking of the “responsiveness” as a benefit, not a hindrance.

  • mOxby Design Inverness

    I’m encouraged that you haven’t abandoned Photoshop. We always start with Photoshop, but as you say, the real work starts in the browser and the code. The shift has occurred because website consumers actually expect the web to work however they access it, without realising the work that is required to make that happen. But it means a website is a constantly evolving, changing thing with the same content being delivered in an appropriate way depending on how that website is accessed. Exciting and challenging times!

  • Digiworks

    @Chris Gillis: Totally agree ; )
    think in proportions, not pixels!!

  • Friedrich

    I think this is the future and with the time everybody will get used to it.

  • Richard

    @matthew carleton: Hi Matt, as old fashioned as it may seem, I usually begin with a few blank sheets of paper and a pencil. To be honest, it would most likely be easier to just mock it up in photoshop etc, but its not as fun? Rich

  • Christian Krammer

    Amen! You totally nailed it. Everything that’s not responsive doesn’t belong to the web anymore.

  • Karl

    Responsive design is definetly the future of the web - I like this style and will build some sites in the future responsive.

  • ECTemplates

    It’s so clean, I like this version.

Leave a Reply