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:
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]
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.