Responsive Web Design: Answering the ChallengeElance_Keith | Jan 17, 2012
A while back I talked about the importance of your web presence being mobile-friendly. There are many ways to accommodate a mobile viewer, be it a separate mobile-friendly website, making sure that your site has the right dimensions and parameters to display properly on a mobile device, or by creating a responsive website. The first time I heard the phrase “responsive web design” my friend was describing it to me as “the new hotness” (i.e. the "in" thing) and current trends would seem to prove him right.
Responsive web design is certainly a trend worth looking into as it allows a website to break itself down between multiple screen resolutions and monitor sizes—whether that monitor is an actual monitor, mobile phone screen, or tablet display. Setting CSS media queries to accommodate specific resolutions is the key ingredient to creating a responsive site. Using CSS to give elements of a site a percentage based size, setting a max and min height/width and utilizing the em font size are other ways for a site to dynamically adjust. Having your website dynamically select the proper image size for your visitor’s display is a nice feature, it will speed up load times by not trying to load an image that’s three times the size of the display and it will ensure the visitor is able to see the full image, not just parts of it.
Let’s take a look at a great example of a responsive website from a brand I’m sure we’ve all heard of: Sony.
You probably won’t notice much difference between the image above and the image below, other than the tabbed product box under the main banner image that drops from three columns to two. However, if you have a widescreen monitor and squeeze the site in, you will not only see the “More Sony Store” column drop below the products in the middle section of the page, but you will also notice that the main banner image resizes itself to a smaller dimension.
Squeeze it a little more and you’ll see it adjust itself down to an interface that looks like a dream to navigate on a mobile device. The banner image resizes itself down again for quicker loading, the main menu changes to a drop down, and all of the content compresses to one thin, tidy and organized column.
The Sony site utilizes a few different sized main images to accommodate multiple sizes of displays and screen resolutions, but maintain the same appearance across multiple platforms and resolutions. You can also run scripts that will automatically resize your images on the fly. The 2011 dConstruct conference website is an excellent example of this. Their homepage features photos of all their keynote speakers and you will notice that as you expand and collapse the browser window, the images automatically adjust to the new parameters. Another aspect I liked of the dConstruct site was that once you get down to the mobile-sized version the main navigation text links switch to icons. Text links can be a bit of a nuisance to navigate with on a smaller touch screen mobile phone, switching to larger links with bigger target areas and spacing them out is a smart move.
The Clean Air Challenge website features another method of making your navigation links more mobile friendly, once the site is scaled down to that size. Take a look at how the yellow text links at the top of the page stay text links, but you’re given a bigger target area to click on.
These three examples are not only exceptional for the reasons I’ve pointed out, but because they also embrace color. All too often when I come across a responsive website the designer has shied away from making a visually and aesthetically pleasing site by only using one or two colors and lots of text, which varies in size to give the site some sort of design element. Sure, designing and developing a responsive web site that is both functional and pleasing to look at is going to take a little more work. But it could also be the difference between a barely-satisfied client and an ecstatic one, or a yawn prompting a potential client to click “Back” to their search results rather than jumping out of their chair to inquire about your services.
Kayak Capers is not only a fun sounding way to spend your day, but their website reflects that mood as well. The heavy use of icons and broad color palette help this site stand out from a lot of the other responsive sites I’ve come across.
I would encourage you to consider the “hotness” (as my friend put it) of your next website and think abut how you can make it a responsive site. And I beg you to keep the Internet something fun to look at. Be proud of your work; take the time to make sure that you’re not sacrificing visual stimulation to adhere to the responsiveness of your site. Make it something you’ll want to boast about to all your friends, colleagues, followers, connections, and email list. After all, you wouldn’t hire a heart surgeon who takes no pride in their work, would you?
About the Author
Scott Stanton has spent the past decade working nights as a freelance web designer, only to write about the latest design trends at his day job as a freelance writer. Hang on Scott's every word @TheScottStanton.