© HARRISON JACOBS
On the left, a full-sized responsive site. On the right, is how the website design adjusts to a smaller screen or window size.
Responsive Web Design has long been (in Internet years anyways) the hot trend in web development. It may be 2014, but Pete Cashmore, the CEO of Mashable, declared last year to be the year of Responsive Web Design. For those that don’t know what it is or don’t know why its so important, here’s a handy primer.
What is Responsive Web Design?
Responsive Web Design (RWD) was created as a reaction to the increasing variation in screen sizes. People view the web these days on smartphones, tablets, phablets, large monitors, and small monitors. Over time, it became apparent that the strategy that had developed over the last half decade—of having a single desktop site and then a mobile-ready site with more limited functionality—wasn’t going to cut it in “the Web 3.0.”
RWD is a device-agnostic website building philosophy. It means that you create a single website design that then adjusts automatically to different screen sizes. Instead of developing for devices, you develop for window sizes. To do this, RWD uses CSS3 queries to determine the size of the window a person is using. Opening your window in a 10-inch browser window will show the same exact website as opening the site on your iPad. This works because the website is designed in a fluid grid that adapts the layout to the screen size using proportions.
For example, this grid represents what your website looks like in a regular desktop window. As you can see, it is divided into a number of elements:
When the screen window changes, the same website elements rearrange to fit the new window. Like here:
Why do you need it?
Ever click on a Google link for a website and be unexpectedly directed to a mobile site with a limited feature set? You then spend the next five minutes trying to find a link that will bring you back to the desktop version. When you fail, you click out and go somewhere else.
With the exception of very small selection of excellently designed sites, users hate mobile sites. Users, in general, want to see the site they are familiar with (or a design they are familiar with) when they click on a site. They want to feel like they are getting the complete experience.
When someone shares a link to your website, a RWD ensures that those clicking the link will get to the right place (whether they do it on a phone or desktop).
Google also loves RWD, which for many is reason enough to use it. With 67% of search engine market share, Google makes the Internet’s rules. If they say RWD is a best practice (and they do), you can bet that those who follow their lead will rank higher in searches.
Google’s preference for RWD isn’t the only reason it is better for search rankings. In comparison to mobile-ready site designs, RWD use a single URL and the same HTML to serve up a website, regardless of device. Google loves this because it makes more for efficient crawling and indexing.
Why wouldn’t you want it?
Unless you are using a template site like Squarespace (which has Responsive-ready designs), designing a RWD site can be expensive and time consuming. The reason why is that your website has to be designed and tested for every screen size and every browser that a user might use. For example, when you are testing for just browser compatibility, you have to test 11 different sites. These are the must-test browser options:
• IE9 for Windows 7
• IE10 for Windows 8 (which doesn’t run Flash)
• Default Android browser
• Chrome beta
Your website is your storefront and your portfolio. Moving to a RWD may be time-consuming and expensive, but it will set up your website for the future. If there’s one thing I’ve learned in the photo business, it’s better to be one of the first adopters than the last.