Responsive Website Design for Mobile Devices

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.

As Seen on MobileAppTracking

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.

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).

Responsive 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”).”

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?

Matt Tronvig
http://www.tune.com

Senior Marketing Developer at TUNE. With over ten years of experience in the field, Matt specializes in front end design and development. While not handling the various branding, development, and marketing needs of TUNE Matt enjoys Sounders FC, indoor soccer (go Sloppy Dribblers!), gaming, and brushing up on his design & programming skills. Matt joined the TUNE team before launching their first product in 2009.

  • Wade Bejcek

    Very informative and simple… Yet detailed enough where it counts.

  • jimbanks

    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.

  • tanch

    woo! it’s really excited.

  • Pingback: Mobile Website Best Practices | luvx3.org | realising buzzing zest~*()

  • http://twitter.com/sandisv Sandis Viksna

    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.

  • Mo Babar

    Agree with Sandis..a challenge for ecommerce and affiliate sites with standard CMS.

  • http://www.buraq-technologies.com/ ambreen11

    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

  • longbeachwebdesign

    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