Responsive Design: Focusing on Percents, Not Pixels

In just a few years, responsive design has gone from an experimental concept to mandatory practice. A responsive site displays the same content at the same URL in every case, but it accommodates the screen size on which it’s being viewed. In a world of smart phones, tablets, HDTVs and even wearable computers, your site should be ready to run anywhere modern browsers are found.

What makes a site responsive?
Responsive design is possible thanks to media queries: specifications which display cascading style sheets (CSS) based on browser conditions. Responsive design was originally proposed to the W3C in 1994, but it didn't become standard until 2012, when it was introduced with CSS3.

Media queries are used to display different styles for mobile, tablet and desktop resolutions while maintaining the same HTML content. If you had a gallery of images, for example, you could arrange eight thumbnails per row for desktop users, while tablet users would see four thumbnails per row and mobile users would see two.

A few years ago, designers only dealt with a handful of screen sizes. They made fixed-width layouts that nested exactly on the edges. When your analytics software said that 90 percent of your visitors were using a 1024x768 monitor, it made sense to build your site to fit in that 1024x768 resolution. Now, since responsive layouts are percentage based (relative to the browser viewport), exact screen size has become almost an irrelevant metric.

In 2014, monitors are bigger, but users are cascading their windows. Handheld devices can be orientated in landscape and in portrait mode. Even the pixel is changing, as Apple and others begin selling screens with Retina displays, which have quadruple the pixel density over traditional tech.

There’s a simple way to tell if a site is responsive: resize your browser horizontally and watch how the site reacts to the smaller window. A website like CNN.com (not responsive) will lose content off the edge of the browser, while Mailchip.com (very responsive) will resize, restructure and reorganize content to fit your changing screen.

Mobile-only websites are dead.
Users who aren't at their desks shouldn't be punished with a hollow version of your site. Mobile-only sites (usually found formatted as http://www.m.example.com) are a relic of the dot-com era from before mobile phones could render things like CSS and images.

Having a separate site structure with separate content is harmful in many ways. Your SEO can take a hit if you don’t properly tag your content as canonical. Maintenance time and cost are doubled, and desktop users don’t take kindly to seeing limited content from a desktop.

Responsive design makes separating users by screen size a nonsensical practice.

Smart phone browsers are just as capable as, if not more capable than, desktop browsers, thanks to Google and Apple's constant updates to support the latest HTML and CSS specifications. Mobile-only sites are a bad habit, and they need to be completely phased out. They frustrate designers, developers and users alike.

You don’t have to worry about your site's SEO with a responsive design, since your content is available at the same URL no matter what device or search engine is crawling your content. Maintenance is also easier, since there’s only one code base to update.

Even native apps (software specifically developed for iOS, Android, etc.) are niche solutions, and only in very specific cases would you firm need to spend the resources to develop one. GPS, multi-touch gestures, and even accelerometers can be accessed with Javascript through web browsers to create app-like experiences.

Learn the best practices of responsive design.
Updating an older site to be responsive is like renovating the foundation, floors, walls and roof of a house: you get to keep your belongings, but everything else changes.

With your firm’s website, you establish your brand as knowledgeable in your field, and you open channels of communication with your existing and soon-to-be clients. Responsive design enables you to focus on delivering the best content without needing to worry about where or how your audience accesses it.

First and foremost, your content should be free of fixed-width layouts, images with text, and frames that pull content from other pages or URLs. These should be considered website witchcraft, and they do not have a place in your firm’s professional online presence.

Responsive layouts are generally broken down into three target screens: mobile, tablet and desktop. It’s a lot harder to shrink visuals than to expand them, so the design process usually starts with the mobile version first. Once the mobile layout is complete, the more complex desktop markup can be added as CSS media queries.

Designing a responsive layout requires extensive planning from the beginning. Since you have the ability to control how (and what) information will display as screen sizes change, you must consider the user when scaling the content. Mobile users, for example, will not need to see large banners or slideshows. Forms, which may be difficult to fill out on a phone, should be hidden from smartphone users. People on tablets might want a slightly more image-rich experience than those browsing on a very small mobile screen.

Probably the most significant difference between the screens will be the navigation. Mobile versions have borrowed some inspiration from natively coded apps by having a menu button which toggles the navigation’s visibility. Effects, such as drop-downs, are shown only to desktop users, because the act of hovering on an element is hard to do on smartphones without clicking.

Document size matters.
While our broadband connections are magnitudes faster than the dial-up beeps and tones with which commercial connectivity began, today's connection speeds are not as fast as advertised, especially in the United States. Metered cellular data plans are the norm, and cable companies are currently lobbying the FCC to eliminate net neutrality so they can prioritize traffic for companies who pay for it.

If they were successful, internet service providers (ISPs) would be able to charge businesses to use "hyperspeed lanes," but educated minds predict that those changes would slow down traffic to sites that don’t want to pay. Granted, that is the worst case scenario, but your website should still load fast for everyone, regardless of their device of choice or their cable subscription plan.

HTML documents alone are just a few kilobytes, but pages can grow into megabytes once you factor in all of the external media that has to be loaded. Compressing your photographs for the web and consolidating smaller images into image sprites can shave precious milliseconds off of your load time.

Page speed is a crucial aspect to consider, especially when a few milliseconds can have an effect on how long visitors remain on your site and even on conversion rates. Every little optimization on your site that reduces document weight will have a positive effect on search engines and a lasting effect on users.