Responsive Web Design

Designing for many devices

Research into mobile device use on the Web shows a large gap between supply and demand. More consumers use a mobile phone than a computer to access the Web. At the same time, only nine percent of websites are actually completely mobile compatible.

Largely this is due to complexity. Designing for desktop alone is complex. When you include mobile it becomes exceedingly complex. There are many factors to take into account:

• The number of Web enabled devices on the market increases.
• Different devices have different capabilities.
• Smartphone models are upgraded rapidly but older phones still need support.
• Old browsers in corporate environments don't support recent functionality.
• Compared to fixed data connections, mobile networks tend to be slower and often have a measurably higher latency. This can lead to long retrieval times, especially for lengthy content and navigation between pages.
• Mobile users have different interests to users on fixed or desktop devices.
• Mobile users have to pay for bandwidth.

Year 2011 was commonly recognized as the year of mobile commerce in Web design circles. The rapid and extensive adoption of mobile devices to access the Web really hit the mainstream. This forced the design community to come up with better ways to build websites.

Origins of Responsive Web Design

Much debate followed about best practices for designing mobile websites. Ethan Marcotte proposed that addressing browser capability, screen sizes and orientations by creating flexible, fluid and adaptive websites was the answer. This approach, known as Responsive Web Design, seemed to overcome most challenges in most circumstances.

Today, RWD is considered a best practice. Google and Bing endorse it and Google uses it on their own pages. W3C opposes the idea of creating separate mobile and desktop versions and advocates that any web page should have one set of HTML available at one URL, implicitly endorsing RWD. New articles in support of Responsive Web Design appear on the Web daily. One commentator describes it as the "new black".

Benefits

Responsive Web Design offers the following benefits:

• You can start from an existing desktop website and adapt what already works rather than start from scratch.
• The need to maintain multiple sites is eliminated. This can be a dramatic cost-saver.
• All renditions of the site are available at the same URL. This is good for search engine optimization.

How Magnolia CMS uses Responsive Web Design

Magnolia CMS implements the principles of RWD in the Standard Templating Kit. Web pages rendered with the system are compliant with HTML5 and CSS3. Content is abstracted from presentation and fed from a single back-end. You can serve multiple devices without unnecessary replication.

A website built with the STK uses a flexible grid. For desktops browsers, the design adapts dynamically to the viewport. Below is the Standard Article page from the demo-project sample website at screen widths of 1200, 1024 and 768 pixels. Note how the extras and promos areas float from the top right to the bottom. This is an example of reorganizing page elements to fit the viewport.

The same reorganization takes place when the site is viewed on a smartphone. Content that does not work well on the small screen or is not of interest to smartphone users is either left out or reformatted. An iPhone user sees a minimized, modified version of the site.

Here are the two layouts side by side. Note how the navigation is pushed down in the smartphone layout, giving preference to the main area which typically has the most important content such as the story of a news item. This has the benefit that the important content is displayed "above the fold". The phone user can see it in the first screenful without having to scroll. The promos area is left out altogether in the smartphone variation. The red line is an approximate viewport size.

Tip

If you don't have a smartphone at hand, you can view the smartphone variation on a desktop browser by adding the mgnlChannel=smartphone attribute to the URL:http://demopublic.magnolia-cms.com/demo-project/about/subsection-articles/article.html?mgnlChannel=smartphone

Technology

Responsive Web Design relies on three technical ingredients to detect the requesting device's capabilities and adapt the design accordingly:

• CSS media queries detect the type of device and the viewport size.
• Flexible grids allow page elements to float, reformat and reorganize depending on the viewport size.
• New variations of images are generated on-demand to fit in the available space.

These mechanisms implement the basic tenet behind Responsive Web Design: that it is better to design one website that adapts to the ever-increasing number of devices than to create many disconnected designs. Each device is treated as a facet of the same experience.

CSS media queries

CSS media queries is an extension to CSS3 that allows you to control how page elements are rendered on different devices. Media queries are always used in conjunction with media types. The media type identifies the device. The media query is a logical expression that evaluates to either true or false.

Here is an example of a media query:

only screen and (min-width: 1200px)

The query targets the media type screen which is intended for desktop browsers. The expression evaluates to true if the website is viewed with a browser where the viewport size is very large, 1200px wide or more. When true, a style sheet that optimizes the experience for a wide, cinematic screen is applied.

In Magnolia CMS, media queries are configured in a theme. The media attribute contains the media query and the link attribute the style sheet that is applied when the expression evaluates to true. Here is an example from the pop theme. Pop includes several style sheets. The wide sheet that is expanded in the screenshot show the media query and a link to the associated style sheetwide.css. Note how the link property contains just a reference to the style sheet. The actual sheet is stored in the resources workspace. You can edit it in Templating Kit > Resources.

Magnolia CMS ships with a basic collection of style sheets targeted at different media types:

• styles is the basic style sheet that optimizes the experience for desktop browsers
• print is intended for printed documents and the print preview mode.
• wide is for wide screens. It displays the promos area since there is more screen real estate.
• small is for narrow screens. The main area displays two columns of teasers instead of three.
• ie6 is a specialized CSS only used for Internet Explorer 6.
• ieStyles includes styles for IE7 and IE8, applied with a conditional comment.
• mobile is for smartphones and other handheld devices, see also Device Detection

In addition to the basic set, you can create your own stylesheets. Define matching media queries if you need to render content for other types of devices such as Web-enabled TVs.

Magnolia CMS uses conditional comments to overcome the limitations of legacy browsers. The ie6 and iestyles configuration nodes have an additional attribute conditionalComment that contains a statement that is interpreted by Microsoft Internet Explorer. Magnolia CMS uses them to provide and hide code to and from Internet Explorer.

In the page HTML, the media query and the style sheet link are rendered as a link element inside the head.

<head>
   <link rel="stylesheet" type="text/css" 
      href="/demo-project/resources/templating-kit/themes/pop/css/wide.css" 
      media="only screen and (min-width: 1200px)">
</head>

Typically you will find several link elements like this on the page. The style sheets are loaded incrementally. The basic styles sheet contains a lot of style information that is used on all devices and viewports. The more specific sheets loaded later such as wide define only additions and exceptions.

Here is the viewport comparison again, this time with the style sheet name included.

Note

The mobile media query is used when the default site is rendered on a desktop browser. It is a kind of fallback. Magnolia CMS has a more advanced mechanism for tailoring the mobile experience. The Device Detection module and the channels functionality allow you to format existing content but also target unique content to mobile users. The smartphone variation uses its own theme, pop-mobile, with the media property set simply to screen. The pop-mobile theme is loaded when the User-Agent header identifies the requesting device as a smartphone.