One Site Fits All: Strategies for Building Responsive Design Tablet, Mobile and Web Sites

Introduction As a digital publisher, your challenge is to produce great looking, high quality content on more and more devices. From 3-inch smartphones, to 7- and 10-inch tablets, to multiple laptops and desktop monitors, the variety of screen sizes is increasing at a rate that’s compounded further by the growing number of operating platforms. Seemingly, the only thing that’s not growing is your newsroom budget to accommodate this digital explosion. A silver bullet is needed. And, that’s where responsive design can help. In simple terms, responsive design is a website development technique for creating web pages that dynamically adapt to any screen size and orientation. For widescreen desktop and laptop monitors, responsively designed web pages expand to fill the entire screen. For mobile phones and tablet devices, the pages automatically adapt to these smaller screen sizes. From the end-user’s perspective, responsive web pages look good on any device, regardless of screen size or platform. From the designer and editor’s perspective, responsive design allows you to create content once and publish it to any digital channel. There’s no need to create separate templates for different screen sizes and orientations. And, from a marketer’s perspective, responsive design enables greater SEO (search engine optimization.) There is no need to build separate desktop, tablet and mobile sites with backlinks and redirects for mobile users. As a result, link popularity can be maintained in the single responsive site, which helps drive organic search traffic, audience engagement, and sales. Sounds great, doesn’t it? Create once, publish everywhere. Expand the number of channels for your content without adding staff or changing workflow. Preserve the quality of your brand across all web, mobile and tablet devices. Best of all, your web teams can begin using responsive design today for creating web sites and pages that automatically adjust to any screen size. Before you start, however, you need to make absolutely certain that your Web Content Management System (WCMS) can handle responsive design. Not all WCMS Platforms are Created Equally Responsive design relies on several key features available in standard web developer tools like HTML, CSS3 (Cascading Style Sheets) and JavaScript to help automatically adapt the style of a site to the size of the viewing screen. If your current WCMS does not give your developers full control over these tools, then your attempts to build responsive design websites may fail. This is crucial. A modern WCMS is responsive-design enabled. There should be no limitations or structures imposed upon the markup of your sites. All content and templating in the system should fully support the tools needed for responsive design. Not all systems are as flexible or open. For example, some older WCMS’s are rigid in the code that’s produced. This inflexibility can range from entire pages to page elements (e.g. navigation) to limited browser support. Responsive design requires extensive use of the HTML5 and CSS3 standards. As Gartner recommends: “Use proven, well-established cross-platform libraries to insulate the codebase from browser incompatibilities, with the expectation that these will evolve to HTML5 as standards mature.” Site Authoring and Editing In addition to its flexible markup and templating, your content management platform should provide a web authoring and editing environment that is completely compatible with responsive design. Authors and editors need an online editing application with the assurance that all layout and content elements will behave responsively. Some WCMS editing programs add extra elements to web pages in order to enhance the authoring experience. These added elements can actually interfere with responsive design by causing conflicts on various screen sizes and form factors. Web pages can fail to load on some devices – or content can even become invisible – due to the conflicts caused by these extraneous text editing elements. So, before embarking on a responsive design initiative, make sure your WCMS supports open HTML, CSS and JavaScript features without any hard-coding. A good test for this fluidity is to verify with your WCMS provider that no special markup or scripting needs to be incorporated into a web page. Systems that rely on hard-coded scripts to facilitate page layout and content placement can cause conflicts with your responsive designs. Multi-Site, Multi-Channel, Multi-Device Delivery A system that supports responsive design will give web developers full control — and allow editors to manage and publish content — across all digital channels. Responsive design enables each page to automatically adapt to the screen resolution, size and orientation of the reading device. Some WCMS platforms use a side-by-side method, where the format and content for one device is separated from the format and content of another device. This runs counter to responsive design principles. Ideally, your WCMS will allow content and layout to be managed separately, and thus it will be possible to let one single template handle the layout for all channels. With responsive design, the same content can be delivered to all channels automatically. There is no need to create separate layouts for the multitude of screen sizes that your audiences will be using. As a result, editorial workflow is streamlined, errors are reduced, and your published content will generate an engaging, brand-building user experience on any digital device. Progressive Enhancement Responsive design best practices advocate a web design approach called progressive enhancement. With progressive enhancement, designers are encouraged to create sites for the smallest footprint first and gradually add features for increasingly larger screen sizes and more advanced devices. Often called “mobile first” design, progressive enhancement ensures that your site designs will work on small mobile and smartphone screens first, with added content and functionality built in layers to support increasingly larger and more complex devices. With progressive enhancement, layers can be added that support more advanced browser software and higher bandwidth connections. A modern WCMS supports progressive enhancement for this layered site development model. Typically, this encompasses five layers of progressive enhancement for automatically rendering content on a variety of devices: ♣ Level 1: the raw text content layer o This forms the core user experience with clear, well written copy that works across all digital channels ♣ Level 2: the text with semantic mark-up layer o HTML5 semantic tags and well-chosen style attributes provide anchor points for good presentation in different responsive design renderings o This also improves overall site Search Engine Optimization (SEO) ♣ Level 3: the text and semantic mark-up layer with audio-visual support o Images, audio and video to complement and enrich the text o This further enhances the end-user’s engagement and content experience ♣ Level 4: interactive experience o This layer adds interactivity to the content o Accomplished using JavaScript ♣ Level 5: enhanced semantics and accessibility o Support for WAI-ARIA (the Accessible Rich Internet Applications Suite) o WAI-ARIA defines a way to make web content and applications more accessible to people with disabilities o Helps with dynamic content and advanced user interface controls available in Ajax, HTML, JavaScript, and related tools to define new ways to build functionality for disability assistive technology Not all WCMS platforms take this progressive enhancement approach. A good test here is to see if your developers are able to start with a baseline of usable functionality and then progressively adding increasing layers of richness to the user experience. Responsive design can be seen as the next logical step after graceful degradation. Graceful degradation is a web development technique that helped developers to ensure that designs would degrade gracefully if displayed on older web browsers. The code structure was built in a way that kept a text-only, non-CSS version of the HTML available in a logical and well-structured output format. With graceful degradation, websites could display a basic, simpler version of a page if the full layout could not be rendered. The downside of graceful degradation is the difficulty in preserving brand quality and integrity across all devices. With progressive enhancement, the brand experience and usability of the page is considered for all devices. WCMS best practices encourage this approach because all progressive enhancement pages will do graceful degradation, while not all graceful degradations will provide progressive enhancement. Channel Context While responsive design ensures that the same content is displayed well across all screens and devices, it does not automatically deliver contextually relevant information. This is where multi-channel publishing comes into play. The main benefit here for digital publishers is the ability to supply audiences with contextually relevant news, information and advertising content that displays well on all digital devices. By itself, responsive design does not cater for the fact that users need different information in different channels. When a user is on-the-go, he or she wants information that addresses current needs and perhaps even location-aware content, rather than the general information of the site. This is channel context. With a responsive WCMS, it will be possible to deliver the same or different content to different channels depending on the context of the user. Consider, for example, an airline site. On the main site, a user can do a lot of things, like look for tickets, manage bookings, check-in for flights, calculate mileage points, etc. If a user visits the airline site from a mobile device, it is more likely that he or she is interested in seeing upcoming flight and check-in information on the first screen of the site. In the context of traveling to the airport with a mobile phone, it makes more sense to show the user pertinent information for today’s flight, rather than showing a version of the general site. This is an example of channel context, and it is all about making sure that the information displays well (i.e. responsive design), but also that it is relevant to the user’s situation (the context). This concept can be extended further to the advertising that is displayed for a user based upon his or her device and context. Best practices are still emerging for ad management within responsive design, and ad networks are beginning to adapt to this concept. As this area evolves, publishers will be able to target audiences with a continual blend of relevant content and contextual advertising for any web, mobile or tablet device. And, that will help turn the responsive design silver bullet into pure gold.

General

One Site Fits All: Strategies for Building Responsive Design Tablet, Mobile and Web Sites

Publishing Executive Staff

About

Subscriptions

Events

Publications

WORK SMARTER - LEARN, GROW AND BE INSPIRED.

Subscribe today!

Publishing Executive Staff