Responsive Design: Capitalizing the Mobile Web

2013.04.03

The following is an exerpt from my contribution to "What Every Publisher Needs to Know About Responsive Web Design And Advertising" an ebook published by the team over at responsiveads.com. You can get the ebook here

 
An engaged audience is a profitable audience. By providing a great web experience to people on their own terms, publishers hold their audience’s attention longer and increase readership. In our multi-screen world, this means letting people access publishers’ content on whichever devices they own. Responsive design is usually the most cost-effective way of doing this.

Successful Mobile-Friendly Websites

Simply having a website that functions on many devices isn’t a magic bullet for success. There are four main aspects that every successful mobile-friendly website requires:

#1: Valuable Content 

All successful websites need to provide the audience a good reason to visit. Publishers can’t predict whether a visitor will be using a small or large screen, so they should keep content as concise as possible. Switching to a mobile-friendly approach gives publishers the opportunity to re-evaluate their content strategies and decide what provides the best value for the reader. 

#2: Easy Navigation 

Smaller screens require simplified, finger-tappable interfaces. It is essential not to assume that because a visitor is using a smartphone, he/she only wants to access a small subset of a publisher’s content. They may be switching between devices, such as emailing or social sharing a link between a desktop and a smartphone.

#3: Easy to Read

The majority of web content is text, so it must be large and easy to read. A visitor should never need to “pinch and zoom” to navigate or read any part of a site. 

#4: Fast-Loading 

A site can have intuitive navigation, great typography and valuable content, but if it takes 30 seconds to load, publishers will lose most of their audience. This doesn’t mean a mobile-friendly site can’t include video or graphics; however, the page’s text and navigation should appear before rich media starts loading. Then the visitor can choose whether to wait for the media to load or quickly jump to a different page. 

Mobile-Friendly is a Balancing Act

Creating a mobile-friendly website is a balancing act. Publishers simply don’t have the luxury of including all the content typically seen on a desktop homepage, nor can they assume their sites are being loaded over a broadband Internet connection. On the surface, optimizing performance appears to be a technical exercise, but it is more than just a question of better programming or faster servers. A site can have highly optimized images, but if editors load too many on a single page, mobile visitors will suffer. Performance requires alignment across a publisher’s entire team, including designers, developers, editors and leadership.

How to Get There: Responsive Design

Responsive Web Design is a strategy for building sites that allows them to work on a range of devices, including smartphones, tablets and desktops. It lets a website optimize its layout to accommodate different screen sizes. Publishers can reach their entire multi-device audience through a single website, saving significant development and maintenance costs compared to native apps or dedicated mobile sites. However, native apps do have their advantages, including creating device-specific mobile experiences and the ability to deliver push notifications to users. 

Where Did it Come from? 

The term “Responsive Design” was originally coined by web designer and developer Ethan Marcotte in a 2010 article published on alistpart.com. The concepts presented in that original post were further developed in his book Responsive Design.

How it Works 

Responsive design uses long-established web design tools in a new way. There are no plugins to download, and it functions on every modern web browser released since early 2011. There are also strategies to support older legacy browsers such as Internet Explorer 7 and 8. Responsive design uses a property of CSS called media queries to allow web browsers to reorganize site layouts depending on screen size. It uses one code base and one set of content.
 
All the logic that controls a site’s layout happens on the client-side web browser, and every visitor viewing a responsive site downloads the layouts for all possible screen sizes. Then, the device’s web browser chooses the layout that is the best fit for its screen. 

How it is Different 

Responsive design is a different approach than having a dedicated mobile website, which often appears as “m.website.com”. These sites detect that the visitor is using a specific device such as an iPhone. Then they redirect the visitor to a different mobile-only website from the desktop version. Server-side code controls m. layouts, whereas client-side code is used in responsive design. 

Validation

In September 2011, The Boston Globe was the first major newspaper to launch a site — BostonGlobe.com — with responsive design. The launch proved responsive design was a viable strategy for a high-traffic website. Soon after, Starbucks.com and BarackObama.com launched responsive websites, and by 2012 they were joined by highly recognizable brands such as Microsoft.com, Time.com and Mashable.com.

 

Comments

Excellent read.Thanks for posting and sharing the information.I do agree that responsive web design is the future of website development in coming years.
The responsive web design is an easy way to interact targeted audience at their own level. Now, it has become a top trend of website design and development, but we require some improvements in loading time to make it easier for visitors.
Thanks for the Informative article. Today, even search engines suggest responsive web design services as their recommended method for building websites.
Great article! Over the past year now, we have been changing our clients sites over from Drupal to WordPress and developing them in what I like to call Adaptive design. Its basically responsive design - but we still utilize set / max widths within the design. We have noticed a dramatic increase to our clients leads from mobile traffic on the new WP adaptive sites versus the older Drupal versions.
Thanks for sharing the blog.I really got a good content on responsive mobile app websites. It will be useful on my way to work in future as well. Keep Posting. Appreciable work.
Responsive design is all about the mobile adaptive version that rendring the images and make it easier. Thank you for sharing the valuable key points for the responsive trends.
You are right! These emerging new trends has set a revolutionary changes in website development and designing, Now comes the World of "Responsive" technology, Besides these changes, it become important for us also to remain updated with these emerging trends. I am Website Designer and Developer by profession who design and develop <a href="http://www.kendriyavidyalayablog.com">school website design</a>, school software, school attendance software using android technology etc. and keep myself up-to-date by reading such kind of blogs like this. Thanks very much for sharing such valuable information.
Thanks for sharing the valuable key points for the responsive trends – very useful.
Thank you for sharing. Very good article :)
Really an insightful post! Thanks for this great information, responsive web designs are spirit of the time!
Very nice your write about responsive web site. we can learn more from this. yesterday i read another <a href="http://coxsview.blogspot.com/2014/02/how-to-create-responsive-web-site.html">one</a> also good article. very tnx.
My spouse and I absolutely love your blog and find nearly all of your post’s to be what precisely I’m looking for. Again, awesome weblog!
Responsive is certainly here to stay. Google is now officially backing it since you wrote this article. Reference: https://developers.google.com/webmasters/smartphone-sites/details
Hey would you mind letting me know which webhost you’re utilizing? I’ve loaded your blog in 3 completely different web browsers and I must say this blog loads a lot faster then most. Can you suggest a good internet hosting provider at a honest price? Thank you,I appreciate it!
sds

Add new comment

Share

Author

Aidan Foster

Responsive design expert & owner of Foster Interactive, a Drupal focused studio based in Toronto, Canada.

If you like this post please share it.

Follow @finteractive on twitter

Additional Info

If you're interested in learning about advertising on responsive websites, checkout responsiveads.com and the IAB report on responsive ads.