Responsive Design

Responsive design

Image courtesy of Sitefinity

What is responsive web design?

Responsive web design is a technique for creating web pages that dynamically adapt to any form factor.  For a widescreen monitor, these designs expand to fill the entire screen.  However, if the web browser’s width is resized to mimic the width of a mobile phone then the design adapts to work comfortably in this reduced size.

How does responsive design work?

At it’s core, responsive design relies on a CSS3 feature called media queries.  Through media queries, specific web site styles are attached to various constraints (for example, the width of the browser window or the type of device).  A responsive web design will utilize media queries and specialized styles to adapt the web site to a variety of form factors. (Demo | Code)

What’s wrong with responsive web designs?

Responsive web designs are  impressive when implemented well.  However, this technique does present challenges:

Browser Compatibility

Older browsers will not support CSS3 media queries.  Among modern browsers, Safari 3+, Chrome, Firefox 3.5+, Opera 7+ and IE9+ are required for media query support. – [More]

Image Resizing

The image sizes that are appropriate for widescreen layouts are not appropriate for mobile-phone layouts.  Responsive designs will either load new images for different layouts or load full-sized images and re-size them client-side.  Either way, this can be difficult to manage and often results in loading more images than would be required by a dedicated layout.

CPU & memory consumption

The “magic” that makes responsive web designs impressive involves a lot of processing by the visitor’s browsing device (computer, phone or tablet). The web site is essentially sending a lot of raw assets and instructions to the visitor’s web browser

How can a CMS help with responsive design?

Responsive design is a relatively young technique.  Consequently, it will be rare to discover deep CMS support for responsive designs [exception].  This being said, CMS’s can make it easier to pursue responsive designs through the following features.

Full control over the markup (HTML) produced

Some CMS’s are very inflexible regarding the HTML they produce.  This inflexibility might include the entire page or be limited to parts of page (navigation).   Because responsive design requires deep use of HTML & CSS, web developers will be severely limited by a CMS that produces HTML that cannot be customized.

Forgiving page and content editor

End-users often love the WYSIWYG content management experiences found in modern CMS’s.  However, these features are created by adding extra elements to the web page.  These added elements facilitate the authoring experience.  However, in a responsive design (where elements appear or disappear based on various factors) the CMS’s interface can potentially conflict with the responsive design.  This could render the page broken while in edit mode or result in content being invisible and thus uneditable.

Where can I learn more?