Setup to Build Responsive Websites
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.
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
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.
- 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.