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