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!

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.

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...

One of my favorite social APIs was the Open Graph API adopted by Facebook. Adding just a few META tags to each page allowed links to my article to be styled and presented the way I wanted them to, giving me a bit of control...

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...

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...

Discussion

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?

“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**.)

@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:

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.

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)

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 ):

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 :)