Responsive Website Design for Mobile Devices

Photo by rawpixel on Unsplash

2019 Update: HasOffers has rebranded to TUNE! TUNE is the same great technology behind HasOffers, now enhanced with new tools and features for performance advertisers and affiliate networks. Check out our new platform features page, sign up for a free trial, or read the rebrand announcement.

Responsive design first appeared on the web design scene in 2010 with Ethan Marcotte’s aptly titled article, Responsive Web Design, but until very recently, it hasn’t been widely used. The rapid adoption rate of the iPad and other tablets in 2011 is challenging designers to rethink their approach to design. Many main stream sites are turning to responsive design to provide a seamless browsing experience for users across the broad spectrum of devices we now use to consume media.

What Exactly Is Responsive Design?

If you’re unfamiliar with responsive design, it is basically a method of using CSS to automatically adjust website layouts for optimal content display at each screen size. The HasOffers blog is one example of a site using responsive design. To see it in action simply grab the right side of your desktop browser and change the width. You should see the site adjust itself as you make the browser window smaller or wider. A few other notable sites taking advantage of responsive design include Sony, The Boston Globe, Smashing Magazine, BarackObama.com, and About.com.

Responsive Design for Mobile

There are several ways to go about designing a responsive site. The two most common methods being a fully fluid layout, which provides the most flexibility, and an adaptive approach.

Most of the responsive grid systems use a fully fluid layout. The HasOffers blog uses this approach. Some other notable examples include 1140, 320 & Up, and inuit.css (which has nothing to do with the accounting software company).

The difference between adaptive design and fully fluid design is easy to spot. Fully fluid designs continually adjust as the browser size changes, while an adaptive approach “locks” the layout width into place for specific screen resolutions. Some examples of the multi-step approach include Skeleton, Less, and MQFramework.

Responsive Images

Normally displaying images on responsive sites is easy. You can simply set a max-width:100%; and the images will scale to fit inside the parent container. In March of 2012 Apple made every web designers job just a little bit more difficult with the release of the new iPad and its amazing 264ppi 2048×1536 resolution. I say Apple made things more difficult because most websites don’t use images optimized for such a high resolution.

Websites and apps can now provide their users an even more beautiful user experience by using high resolution images. The main problem to overcome is choosing a method for serving hi-res images to the iPad (or similarly hi-res desktops & devices) without serving them to other devices. Showing the higher resolution image and scaling it down to fit smaller screens can drastically increase page load time. In affiliate marketing, those slow load times, can dramatically reduce conversion rate.

There are several methods to tackle this problem. The basic concept is to determine the browser width server-side and then load the correct image based on that. However, most methods fail or have severe limitations to them. The W3C is currently in process of providing a standard for responsive images. Until then, if your server uses Apache and PHP and doesn’t rely on a CDN to serve up images, Adaptive-Images.com is an excellent solution (with a few caveats).

Mobile Responsive Design for Landing Pages

You should be using responsive design in your affiliate web and email marketing campaigns. Unless you are doing device targeting in a PPC campaign, you have no way of knowing which device a user will choose to access your campaign. We’re already seeing close to 20% of clicks coming from mobile, even though the offers aren’t targeted to mobile users. It’s also safe to assume that over the next year the number of mobile device users is going to climb—fast.

The same can be said for an advertiser’s conversion pages, if affiliates are sending you traffic from mobile and tablet devices, your shopping carts and signup forms should provide visitors with an experience where they can easily give you their money. After an explosive Cyber Monday sale, FAB.com CEO Jason Goldberg said that, “20% of sales came via our iPhone, iPad, and Android apps“.

Tablet visitors are also more valuable, with a recent Adobe Digital Marketing Insights Report finding that “Tablet Visitors spend over 50% more per purchase than visitors who use smartphones (“Smartphone Visitors”) and over 20% more than visitors who use desktop/laptop computers (“Traditional Visitors”).”

Get Designing

Don’t wait to be mobile ready — get started now. Many great resources are available to help you easily tackle responsive design:

Intro to Responsive Design
Responsive Web Design: What It Is and How To Use It
Beginner’s Guide to Responsive Web Design
On Being Responsive
Responsive Design Pt.1

Responsive Newsletters
Optimizing your email for mobile devices
Responsive Design for Email

Responsive Frameworks
Foundation
LESS
Skeleton
320 & Up
1140 CSS Grid
Inuit CSS
Golden Grid System

Responsive Tools
Responsive Design Testing
Resize My Browser
Protofluid Rapid Prototyping

Responsive Design Books
Responsive Web Design

A great repository of excellent responsive websites can be found at mediaqueri.es. What are your favorite sites utilizing responsive design?

Author

Becky is the Senior Content Marketing Manager at TUNE. Before TUNE, she handled content strategy and marketing communications at several tech startups in the Bay Area. Becky received her bachelor's degree in English from Wake Forest University. After a decade in San Francisco and Seattle, she has returned home to Charleston, SC, where you can find her strolling through Hampton Park with her pup and enjoying the simple things between adventures with friends and family.