ellipsis flag icon-blogicon-check icon-comments icon-email icon-error icon-facebook icon-follow-comment icon-googleicon-hamburger icon-imedia-blog icon-imediaicon-instagramicon-left-arrow icon-linked-in icon-linked icon-linkedin icon-multi-page-view icon-person icon-print icon-right-arrow icon-save icon-searchicon-share-arrow icon-single-page-view icon-tag icon-twitter icon-unfollow icon-upload icon-valid icon-video-play icon-views icon-website icon-youtubelogo-imedia-white logo-imedia logo-mediaWhite review-star thumbs_down thumbs_up

How to combine responsive design with content management

How to combine responsive design with content management Gabe Sumner

Responsive design is getting plenty of attention these days, and for good reason. Mobile internet traffic is increasing exponentially -- by 2014 "mobile" web traffic will surpass desktop traffic. This paradigm shift creates new opportunities along with new challenges.

One of those challenges is making your website mobile-friendly. Historically, this change has been made by "forking" the website that already exists. This move involves creating a new website and duplicating content, which doubles the effort required to manage your web presence. Despite all the work, forking could be doable if it truly solved the problem -- but it doesn't.

Statistics show there are more than two devices (mobile and desktop) accessing our websites at any given time -- devices like smartphones, tablets, netbooks, laptops, widescreen displays, and more -- and it's not realistic to create dedicated websites for each device out there.

Responsive design promises to solve this challenge by using web standards to create a single website that is automatically optimized for all devices. Compared to the alternative, it's easy to understand why enthusiasm surrounds this topic. However, most of this attention is focused on the high-level benefits or the underlying technologies (CSS3 Media Queries). What isn't addressed is how responsive design will be incorporated into the day-to-day content management process.

Responsive design is hard to mix with the content management process

Today, most web content is authored by people who do not have a strong understanding of the underlying web technologies. By interacting with content management systems and rich text (WYSIWYG) editors, content authors can compose web content without being bogged down in technical details -- and that's a good thing. It enables more people to create content and shortens the distance between ideas and execution.

However, responsive design requires careful use of HTML and CSS3 and is easily "broken" if best practices aren't adhered to. For example, tables are often innocently used to create ad-hoc columns on a page. But on a smartphone, there might not be room to display a four-column table. And when tables are used for layouts, it becomes impossible to use responsive design to optimize the page.

These examples are a few out of many that show how CMSs often allow (or even encourage) unsuspecting content authors to break a responsive website. And because the website adapts uniquely to each device, content authors are often unaware anything has happened. This situation results in websites that quickly degrade and forces a return to the days of the "webmaster," when all content changes went through a programmer.

User-friendly content management that preserves your responsive design

The following five recommendations are strategies for empowering content authors in a CMS while simultaneously protecting the website's responsive design.

Use structured content instead of freeform content
Many CMSs provide content authors with a blank canvas for creating a website. But in the context of a responsive website, some content could be inappropriate (or even broken) for some devices. Rather than training authors regarding what they should and shouldn't do, it's often better to define structured content types. In this scenario, content authors are completing a pre-defined form (title, description, screenshot, etc.), and the result is driven by templates created by developers, making it almost impossible to scribble outside the lines.

Create a "sandbox" for content authors through page templates
Pages in a CMS are often driven by templates created by developers and designers. These templates enforce a consistent visual style for the website, but also designate "editable regions" intended for content authors. By surrounding these regions with DIV wrappers and then applying CSS styling through the wrappers, content authors can create visually-rich content without using ad-hoc in-line font styling (colors, font sizes) through the WYSIWYG editor.

Provide a "best practice" alternative to using tables for layouts
Needing a couple of extra columns on a page is a relatively common request, but it often requires a developer's involvement. Instead, many content authors use the only tool they have available: tables. Tables, when used to create layouts, are incompatible with responsive design. This challenge can be overcome by providing content authors with tools that enable them to create new layouts that do not utilize tables.

Enable content authors to preview their changes using multiple devices
Many challenges associated with managing a responsive website originate because content authors are unaware of the impact of their changes. And unfortunately, the only true way to test this impact is to access the website on a variety of devices. Previewing the page can alert content authors to unintended consequences of edits. These emulators can be built directly into the CMS and used to test new content.

Tame the WYSIWYG editor
The WYSIWYG editor is at the core of every CMS. This tool enables content authors to create HTML without knowing HTML. However, this tool is frequently characterized as the most fragile part of the CMS. Innocent operations, like copying and pasting from Word, can pollute the website with tons of embedded formatting. Alternately, the features available in the editor (like tables) can encourage content authors to use bad practices. The stability of the rich text editor can be vastly improved by disabling unneeded features and auto-cleaning pasted content.

Is it time for the CMS to become aware of responsive design?

Although responsive design has been around for a few years, it's still a relatively cutting edge technique. Websites successfully utilizing responsive design are largely relying on structured content to preserve the website's integrity. Everything is template-driven and highly controlled by developers.

Although effective, this strategy relegates content authors to "filling out forms," which isn't empowering or creative. Many marketing teams are looking for greater levels of creative empowerment, not less. A move toward infusing responsive design directly into the CMS might be a solution one day.

Gabe Sumner is a product marketing manager for Telerik.

On Twitter? Follow iMedia Connection at @iMediaTweet.

Gabe Sumner works as a Product Marketing Manager for Telerik’s Sitefinity CMS.  At Telerik, Gabe is responsible for providing education and collaborating with Telerik business units to ensure Sitefinity is meeting the current and future...

View full biography


to leave comments.

Commenter: Peter Marino

2012, November 16

There are WordPress templates available that have responsive tables so its not really a problem if planned well.