The new rules of the responsive web

Responsive web design has become a near ubiquitous buzzword on the web. Try searching for #rwd on Twitter to find equal parts content and Twitter spam. This is a common phase in the maturing of a new idea. I remember when AJAX was all the rage; the term got driven into the ground. Now, few people talk about AJAX but libraries like jQuery are fully embraced in a developer’s workflow.

This seems to mirror what’s happening to responsive web design. The term is everywhere. A friend of mine is in magazine publishing, she went to a conference recently, and an editor for a well-known new magazine was talking about upcoming trends and mentioned responsive web design. Editors may not be web professionals, but they know the buzzwords.

As responsive web design gained steam, the way we build websites changed. As the term moves from buzzword into a common part of every web design project, the way we work as web professionals needs to change. With this in mind, we need to lay some new ground rules for how we work.

 

Rule 1: Don’t stop at “squishy”

When somebody tells you to “check out this responsive site”, what’s the first thing you do? You probably scale the window to see how the layout changes. I’m probably not going to open it in my phone and tablet and start changing orientations or start running page speed tests. I scale the browser and move on with my day. This is our experience as designers and developers, but not as users. When I visit a site as a user, I have no patience. I don’t care if the site squishes nicely; I just want the thing I want.

“Squishy” is a linear scaling of a website. Does the site go from skinny to fat? Instead of linear scaling, responsive web design should focus on establishing a site core and progressively loading from there, based on capabilities. Imagine a site that had to be built for a tiny cellphone running IE7 on an EDGE network. That should be your core site and then scale up based on screen size and capabilities.

 

Rule 2: Don’t look for an easy way out

Responsive web design is complicated. That’s just how it is. I wish there were something I could tell you to make it easy, but there isn’t. Most people have responded to responsive web design by adding something to their workflows, whether it’s a new deliverable or just going to a developer and asking whether their design will work responsively.

I have a friend who’s working on a responsive site for a client. She’s building the site in Photoshop in desktop size. After a few mockups on some pages, she wanted to show what the site would look like in a tablet and a smartphone, so she did those mockups too. After presenting to the client, she was given some creative tweaks. There are about 50 PSD files for this site at this point. It takes her a few days to revise the layouts.

Trying to add new designs alone will result in a time consuming and inconsistent process. One of the best ways to solve this is by prototyping your wireframes and presenting those to your client. This gives you a deliverable to speak directly to the site’s layout without simultaneously talking about the design. Foundation by ZURB is a great tool for building prototypes quickly.

Simply adding prototypes into your workflow won’t be enough though. In order to succeed in building responsive sites, you need to adjust, which brings us to the next rule.

 

Rule 3: Embrace change

When I first started building websites, I used two tools, Photoshop and GoLive. Now I have at least six programs that I absolutely require in order to build a site. I still use Photoshop for creating graphic elements, but I mostly design in the browser with Sublime Text 2 and I use Safari’s developer tools to inspect elements on my iOS 6. I also use Codekit to compile my pre-processed CSS and Terminal for version control in Git.

Responsive web design also means changing the way you design. Instead of laying out an entire page in Photoshop, I use Samantha Warren’s Style Tiles to articulate visual design. By designing a site’s visual brand and interface elements outside of an actual layout, you can communicate design directly and combine it with the layout from the prototype to create your responsive site in the browser.

CSS preprocessors are also huge help in any responsive workflow. To put it simply, preprocessors can be used to untangle some of the complication of building a site and ease a lot of the repetition inherit to working in CSS. I personally prefer SCSS, but LESS is a better alternative for some as it has a lower barrier of entry and has better documentation.

 

Rule 4: Remember your roots

[The web] should be accessible from any kind of hardware that can connect to the Internet: stationary or mobile, small screen or large. — Tim Berners-Lee

HTML and CSS are inherently responsive. From the inception of HTML, the web was intended to be flexible enough to work on any hardware with an Internet connection. It wasn’t until we as designers and developers moved towards fixed layouts that this changed. In trying to impose fixed dimensions on websites, we constricted the web to desktop computers.

 

Summary

The responsive web is one that abstracts what you have to say from how you say it. Take, for example, NPR’s recent move to an API driven content model. By moving to an API for providing content, NPR has been able to manage its collection of apps and sites in a consistent way. The only thing that changes is the presentation layer.

This is what the responsive web should be all about. Figuring out what it is you have to say, and letting how you say it be driven by that. Design is about meeting a need in a way that is visually pleasing, but also that works to meet the needs of the user.

This is what the responsive web is all about, the user — creating websites that work for the people that use them, however they access the content. Making sites that can refactor themselves for small screens is just the beginning.

Have you embraced responsive web design yet? What rules for responsive design would you like to add? Let us know in the comments.

Featured image/thumbnail, size image via Shutterstock.

  • http://www.savthecoder.com SavTheCoder

    a nice take on responsive design. thanks!

  • simonminter

    “I use Safari’s developer tools to inspect elements on my iOS 6″ – can you provide a bit more information about this please? Do you mean doing this on a phone/tablet directly, or within an emulator?

    • http://twitter.com/matthew_carver Matthew Carver

      This can be done directly on the device. If you connect the iPhone/iPad to your computer and go to the Settings app on your iOS6 device. Under Safari > Advanced you can toggle “Web Inspector”. Then open Safari (make sure you’ve enables ‘Develop’ mode under Preferences) and under the Develop tab you should be able to access a web inspector for your attached device. Open the site you want to inspect in Safari on your iOS device and you’ll be able to access a full web inspector on your computer.

      Here’s some more info on it: http://timgthomas.com/2012/09/inspect-mobile-web-sites-with-a-mac-and-ios-6/

  • jack

    thanks for sharing us information about web desgin. i like this article.

  • Taimur Rehman

    Never would you come across ideas as popular as this has become now, even in Pakistan, people know what the ideas is all about and ask us to deliver web solutions which are responsive. with the advent of handheld easy on almost every pocket, people are now pretty much aware of the fact that their websites might also viewed on them as well. Anyways, a very nice share Matthew. Keep on sharing the good stuff :)

  • http://www.blackbookoperations.com/ Black Book Operations

    Webdesign – Website: 1000 dollar.
    Responsive Webdesign – site for everyone: 3000 dollar

    I hope clients do understand the extra amount of work that comes in to play…

    I wish I could go back to the days where all I had to do was b i tch and moan about IE. And that was it… I miss you IE, I sure do miss your bad browsery ways…

    • http://twitter.com/pizazzwp PizazzWP

      And that’s why we’re seeing designs becoming sterile. The added cost of responsive design is cutting into design budgets. Plus, responsive design is easier the simpler the overall design.

  • http://www.facebook.com/patrickmball Patrick Ball

    Crap you’ve learned a lot since we worked together. I feel stupid. lol.

    • http://twitter.com/matthew_carver Matthew Carver

      Thanks, buddy.

  • http://www.nathanhornby.com/ Nathan Hornby

    I would definitely label this ‘Best case scenario, maximum budget'; but useful lessons none the less.

    I think the whole ‘develop for a tiny cellphone running IE7 on EDGE’ is a bit misleading though; really you should be developing for your user base – which might not have these conditions attached to it. IE7 is already dropping off the standard support table, and that’s before actually looking at analytics to see if there’s any ROI in it at all. It’s not a bad mantra, but potentially triples the workload unnecessarily.

    • http://twitter.com/matthew_carver Matthew Carver

      With the whole “develop for a tiny cellphone running IE7 on EDGE”, I’m trying to articulate the idea of starting a project under a high degree of constraints and giving the site progressive enhancements.

  • http://www.facebook.com/people/Diego-B-Correa/100001449632363 Diego B. Correa

    great article!!

  • http://kizi-yepi.kizi2.com/ kizi-yepi

    Thanks so much for your writing!

    I found that this an article was useful for my work & I
    hope that you can continue post more exciting writing!

    Good luck!

  • http://www.facebook.com/ernest.burnett1 Ernest Burnett

    Thanks for the article (and for defining squishy)! Have a good reference for an online wireframing tool? Possible 2 rules – similar in idea to rule 4 concerning having fallbacks for older browers. Not only in rule 4 would it be important to consider widths and ratios for different hardware types but attributes browser types can support – min-widths for example, other rule test your design and plan fallbacks there too – ie. slight filter/opacity transition where an IE transform fails.

  • rickysynnot

    A) this is a great write up, thanks. I might actually send this onto a few clients so they can understand our point of view. Its a really new movement, after all.

    That’s the beauty of the web, compared to say, traditional print design. Our ability to embrace the client and fill them with knowledge so quickly and for so little cost is really amazing.

    B).. is anyone else getting that tag rollover effect? AWESOME!

  • Aaron Whittaker

    At my company we build responsive wordpress sites and we have a responsive framework that we’ve built as a starting point and then create a child theme to customize the framework to match the design of the PSD. It saves us a ton of time from having to start from scratch on every project. The most time consuming aspect of Responsive Design is all the testing we have to do especially because we don’t have all the mobile devices and virtual devices aren’t always the best way to test. Can anyone suggest good ways to test on mobile devices?

  • http://twitter.com/bjankord Brett Jankord

    This is really one of the best articles on web design I’ve seen while. The way be are accessing the web is changing/evolving/adapting. We too, must change/evolve/adapt the we we build our websites to keep relevant with this change.

    I think you are spot on with all of the rules you recommend. Would love to see more developers adopt these rules.

  • http://twitter.com/ccchristine CC Christopherson

    Nice article. Definitely an important point about not stopping at squishy. Responsive design should not only adapt visually based on device size, but also to accomodate user intent on the specific device.

  • http://www.mathewporter.co.uk/ Matt Porter

    All valid points, as ever we have to use new technologies where and when they are viable. Always study your / a clients data and propose a solution that suits. Some clients sites may benefit from dedicated mobile sites due to their user base, obviuoulsy there are many pro’s and con’s, but always offer a service that suits a client best. ALso agree with Black Book Operations comment.