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 led a variety of marketing and communications projects at San Francisco startups. Becky received her bachelor's degree in English from Wake Forest University. After living nearly a decade in San Francisco and Seattle, she has returned to her home of Charleston, SC, where you can find her enjoying the sun and salt water with her family.
Very informative and simple… Yet detailed enough where it counts.
Matt, great article. Although responsive web design is definitely better than nothing at all, I am starting to think that mobile first is a better way. RWD takes a site and using CSS redoes the layout, but it’s not very good for those with accessibility issues who may zoom in on a site using an tablet or smartphone.
Mobile first on the other hand makes the site suitable for mobile (not all mobiles are smartphones) and then adds functionality from there. RWD is still going to be slow because the images are still big, even if scaled back for mobiles, and sometimes serving a completely different image with less content but more relevance is better than trying to view a scrunched down product image.
Use em’s rather than pixels and images and fonts can scale up or down in unison.
Head First Mobile Web by the smart guys over at Cloud Four http://cloudfour.com/about/head-first-mobile-web.html is a great book on mobile web design and RWD.
woo! it’s really excited.
[…] Responsive Website Design for Mobile Devices […]
Great post Matt. I see this a big challenge for many eCommerce sites powered by standard shopping cart platforms. Hopefully they will sort this out shortly.
Agree with Sandis..a challenge for ecommerce and affiliate sites with standard CMS.
Creating an additional design can be costly and time consuming though. Responsive web design is where the layout of the webpage responds dynamically to the screen size of the device. Responsive web design has really come into it’s own over the last twelve months or so due to the development of a number of tools which makes the process easier.Great article. Thanks for sharing
definietely now Mobile first on the other hand makes the site suitable for mobile (not
all mobiles are smartphones) and then adds functionality from there. RWD
is still going to be slow because the images are still big, even if
scaled back for mobiles, and sometimes serving a completely different
image with less content but more relevance is better than trying to view
a scrunched down product image. thanks for sharing all those information here.
long beach web design
The concept of responsive design extends to desktops and mobile platform. , because there are so many different sizes for laptops and desktops’ screens.
If this is soo simple, why isnt any of hasoffers admin area responsive? All of the navigation is unclickable and does not scale…