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.
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.
On Monday, we launched the newest version of the MobileAppTracking website. The site takes advantage of the CSS media queries feature to provide responsiveness and is optimized for desktops, tablets, and mobile phones.
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).
MobileAppTracking uses the adaptive approach. 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.
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).
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”).”
Don’t wait to be mobile ready — get started now. Many great resources are available to help you easily tackle responsive design:
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?