O'Reilly

Setup to Build Responsive Websites

By on  

Eric Wendelin is one versatile dude. When I met him he was writing Java at a small startup called Sun / Oracle, and now he's writing front-end code for a startup -- that's a big leap. With this responsive design post, Eric flexes a little muscle and shares his process for putting together a responsive website.

Not long ago, the biggest challenge for a web engineer was making sites that worked well in several different browsers. While that is still the case, our challenge is shifting to supporting the growing number of devices. I have come across a few tools and paradigms that helped me make this shift. Some ideas cannot be easily expressed in words; truly the best teacher is experience. Make a committment to yourself to grind your mental axe on this skill.

The first thing I want to say is in regards to design. You cannot have a responsive site without a responsive design. I recommend taking a "mobile first" approach because it forces you to focus on the most critical elements in your app. Once the most important elements are established, the rest can be deemphasized or taken away on smaller screens. This isn't really a dev tip — for the rest of the article I'll assume you have a polished design that must adapt to various screens.

Chrome Developer Tools Setup

Chrome has an awesome feature that helps emulate other devices. Open the Developer Tools and find the gear in the lower-right for the settings. Go to the Overrides tab and check the User Agent box, then select a device from the dropdown list. Chrome will automatically populate the device metrics and scale the viewport accordingly. The arrow button on the right changes the orientation of the "device". You can also emulate touch events.

Chrome Dev Tools - Overrides

I use this to really dig into the layout for a specific device. Theoretically, you could open multiple Chrome tabs and set them to different devices, but that's cumbersome. I have a tool I use for that.

Responsive Design Bookmarklet

Lennart Schoors and Benjamin Keen developed a really neat bookmarklet that creates a series of <iframe>s containing various resolutions of the current page. I use it to test a bunch of resolutions at the same time to make sure the layout responds correctly on a wide range of devices.

Here are the resolutions I usually use (based on my Google Analytics data + speculation):

  • 480x800 — Generalized Smartphone/Nexus S Portrait
  • 800x480 — Generalized Smartphone/Nexus S Landscape
  • 640x960 — iPhone 4S Portrait
  • 960x640 — iPhone 4S Landscape
  • 640x1136 — iPhone 5 Portrait
  • 1136x640 — iPhone 5 Landscape
  • 768x1024 — iPad Portrait
  • 1024x768 — iPad Landscape
  • 720x1280 — Samsung Galaxy Nexus Portrait
  • 1280x720 — Samsung Galaxy Nexus Landscape
  • 1440x900 — Generalized Laptop
  • 1920x1080 — Generalized Monitor

You can use your favorite dev tools to inspect any given viewport, but you can't change all of them at the same time. If you need to click around and check out multiple different devices simultaneously, use Adobe Shadow Edge Inspect.

Adobe Edge Inspect

Adobe Edge Inspect Extension

The previous setups have some major gaps (such as pixel density and font scaling) that are tough or impossible to emulate without using a real device. You can use various emulators or Apple's shiny new Remote Debugger in Safari 6 but that is (currently) only for iOS devices and only if you're non-mobile computer is a Mac. Weak.

The free version of Adobe Edge Inspect allows you to preview and inspect your web pages in real-time on one mobile device. The paid version will allow you to work on multiple devices at the same time.

For this setup, you need to install the Edge Inspect native app on all of your mobile and non-mobile devices and install the Edge Inspect Chrome extension. Connect all devices, start Edge Inspect on them, and choose the computer you want to connect to. Now all of the mobile devices will one-way mirror your computer. Interactions on one mobile device is not mirrored on any other screen. You can also view and change HTML/CSS/JS/Storage with the inspector. Turn on the Chrome extension and click the <> symbol next to a device to inspect the page on it. Awesome!

Edge Inspect + LiveReload FTW

Using your favorite editor and seeing changes in real-time is the new hotness, and we can do just that using LiveReload. I recommend buying the Mac app because setting up Edge Inspect sync without it is tedious. You also need to install the Latest LiveReload extension for your browser. If you don't have a Mac, you'll need to use guard-livereload and livereload.js. For more help, see Adobe's guide to using LiveReload with Edge Inspect.

The only drawback to the Edge Inspect and LiveReload system right now is that WebSockets are not supported by Android browsers (as of v4.1), so LiveReload doesn't work on Android.

Phew! Now we have a system that allows us to develop in our favorite editor and see changes on multiple screens at once! The setup is tedious, but well worth it. Nothing beats seeing and using the design on a real device.

Other Resources

  • BrowserStack has a bunch of mobile emulators for iOS, Android and Opera Mobile that you can run remotely, and their service is cheap and awesome. Recommend.
  • I'm intrigued by Adobe Edge Reflow for layout development (not yet released).
  • Lastly, I love Majd Taby's article on setting up WebKit Inspector for development. All web developers should read it.

Thank you to David Walsh, Divya Manian and Chris Coyier for their reviews and feedback on this article.

Eric Wendelin

About Eric Wendelin

Eric Wendelin is Principal Engineer at MapVine, a startup aiming to turn sales meetings into sales. He is an open-source software fanatic, blogger and conference speaker.

O'Reilly Velocity Conference
Save 20% with discount code AFF20

Recent Features

  • CSS vs. JS Animation: Which is Faster?

    How is it possible that JavaScript-based animation has secretly always been as fast — or faster — than CSS transitions? And, how is it possible that Adobe and Google consistently release media-rich mobile sites that rival the performance of native apps? This article serves as a point-by-point...

  • CSS 3D Folding Animation

    Google Plus provides loads of inspiration for front-end developers, especially when it comes to the CSS and JavaScript wonders they create. Last year I duplicated their incredible PhotoStack effect with both MooTools and pure CSS; this time I'm going to duplicate...

Incredible Demos

  • HTML5 Datalist

    One of the most used JavaScript widgets over the past decade has been the text box autocomplete widget.  Every JavaScript framework has their own autocomplete widget and many of them have become quite advanced.  Much like the placeholder attribute's introduction to markup, a frequently used...

  • Background Animations Using MooTools

    One of the sweet effects made easy by JavaScript frameworks like MooTools and jQuery is animation. I ran across this great jQuery tutorial that walks you through animating a background image of a page. Here's a quick MooTools code snippet that...

Discussion

  1. Yulia

    How would you deal with wordpress setup on a localhost? Would I have to change wp-config.php to accomodate for different host/IP address?

    Thanks,
    Yulia.

  2. “The only drawback to the Edge Inspect and LiveReload system right now is that WebSockets are not supported by Android browsers (as of v4.1), so LiveReload doesn’t work on Android.”

    I use a combination of Edge Inspect and Sublime Text 2 with Windows 7, OS X and the LiveReload plugin for ST2 available here* and it works and refreshes the page with Android 4.x on my Nexus 7 and my Galaxy Nexus GSM on my local network. It even detects when a new client is connected in Sublime Text 2, but you have to load the JS file in the head of your document that you are editing though. It also works server-side (with the ST2 SFTP plugin by Will Bond**.)

    *https://github.com/dz0ny/LiveReload-sublimetext2
    **http://wbond.net/sublime_packages/sftp

  3. @Yulia: I think that depends on whether WordPress generates links that are relative or absolute. I don’t recall the default behavior of WordPress and whether that would mean changing wp-config.php, but I get the sense it would not be painful to accomodate for. HTH

    • Yulia

      Thanks for the response, Eric, I got it working with the help of this article:

      http://davemcmillan.net/382/snippets/how-to-test-a-wordpress-site-on-a-mobile-or-virtual-machine/

      Basically all you have to do is set WP_HOME and WP_SITEURL to your IP address and use this for changing the links for images:

      $('img[src*=localhost]').each(function() {
          var newImgSrc = $(this).attr('src').replace(/\localhost/,'65.217.150.180');
          $(this).attr('src', newImgSrc );
      });
      

      *might be helpful for anyone else that could encounter the same issue*

  4. @Brandon: That is excellent to hear, thank you. I took Adobe at their word regarding support because I only have older Android devices that don’t seem to be supported.

    • Responsive Design View is neat, but doesn’t have a couple features that Chrome does like font scale factor or the ability to emulate touch events AFAIK. I left it out for brevity and to encourage to progression to Edge Inspect as a better solution.

  5. The iPhone does not operate as 960×640.. it is 480×320 with a pixel density of 2x. I don’t know why Chrome treated it as they did in the developer tools since it looks nothing like how my phone renders a site.

    • You make a good point. 480×320 should be added to the list of resolutions. Unfortunately, the only rather weird way of emulating pixel density is scaling the page with ⌘+ (real devices better, obviously)

  6. This is great stuff btw!

  7. Peter Schmalfeldt

    Super Helpful. The only thing missing for me was a better viewer for the device snapshots. I was able to track down this Adobe Edge Inspect Snapshot Viewer Github project that makes it easier to view the snapshots generated from the Google Chrome Extension ( helpful for people like me managing dozens of devices ):

    https://github.com/manifestinteractive/edge-inspect-viewer

    • Shameless self promotion? ;) Neat tool, though. Will definitely give it a try.

  8. Lucy

    Hi guys,

    i stumbled across a pretty nifty app to check out what a site would look like with responsive features, used it for my site http://www.rocketmill.co.uk/responsive-web-design – have a look for your self – http://mattkersley.com/responsive/

  9. Hi guys! I have created a framework that allows you to create a responsive site quickly and easily just by clicking buttons or if you want adding your html.. My framework is based on Foundation ( another framework ) but if you want you can select Bootstrap ( is converted from Foundation, so not all can be converted ).. This is the site: http://www.responsivetemplater.altervista.org/

    Tell me what you think about that :) .. Sorry if I was wrong to write in english :)

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!

Recently on David Walsh Blog

  • Open Files from Command Line on OS X

    I'm as much of a fan of application UIs as anyone else but I'm finding myself working more and more from the command line lately.  Much of that is becoming obsessed with media manipulation but I'm forcing myself to use less UIs so that I...

  • Get Stock Quotes From Command Line

    When I conned my way into my first professional programming gig, I didn't really think much about money -- just that I was getting my foot in the door.  But as my career has gone on, I've been more aware of money, investing, and retirement.  I've recently...

  • Geolocation API

    One interesting aspect of web development is geolocation; where is your user viewing your website from? You can base your language locale on that data or show certain products in your store based on the user's location. Let's examine how you can...

  • Create an Image Preview from a Video

    Visuals are everything when it comes to media.  When I'm trying to decide whether to watch a video on Netflix, it would be awesome to see a trailer of some kind, but alas that isn't available.  When I'm looking to download a video on my computer,...

  • New:  Webdesigner News!

    A new and exciting website has recently been launched for web designers and developers. You likely spend hours every morning browsing through hundreds of posts on your RSS feeds, hoping to stumble across relevant stories. Webdesigner News was built to provide web designers and developers with...