What is Responsive web
design:
Responsive web design (RWD) is a
website design approach that recommends building a single website that adapts
to all devices and platforms.
This avoids the duplication of effort involved in building
separate desktop and mobile websites.
A website built to RWD principles uses floating content elements,
an adjustable page layout, and dynamically resized images to accommodate
various viewport sizes and device capabilities.
In other words, the site responds to the user's requirements.
The Magnolia Standard Templating Kit (STK) implements the RWD
principles.
A website built with the STK can deliver a browsing experience
that works well on desktop browsers, smartphones, tablets and other types of
clients.
In this article we look at how the RWD technology is built into
the system.
Designing
for many devices:
·
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.
Benefits
of responsive web design:
·
- 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.
CMS uses responsive web design:
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.
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
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.
JavaScript:
JavaScript is responsible for client-side functionality such as
teaser paging, menu animations, mouse gesture support and Google Analytics.
JavaScript for desktop browsers and mobile devices is loaded using
three main aggregator scripts:
·
(mobile-)scriptloader-libraries.js loads the
jQuery core library and jQuery UI libraries. The libraries provide a skeleton
for JavaScript functionality.
·
(mobile-)scriploader-plugin.js loads jQuery
plugins such as social and Google Analytics. Plugins take advantage of the base
functionality provided by the libraries.
·
init-(mobile-)behaviour.js initializes the
scripts in the right order so they don't conflict. The init script is the place
where you should customize behavior such as teaser paging
Template
scripts:
The responsive web design approach advocates the use of a single
script for all sites, enhanced by the use of CSS media queries.
·
Substitution of area scripts for different
renditions.
·
Repositioning of navigation through
configuration.
·
Substitution by configuration of device and
browser-specific CSS and JavaScript in the head element of the rendered page.
·
head elements are rendered by the htmlHeader
script.
·
Delivering content to a single URL but this is
configurable.
Template
Configuration:
·
The template mechanism in Magnolia CMS goes
beyond the principles of RWD. Almost everything is configurable. Here is an
overview of how template configuration works:
·
Template prototypecontains configuration that
applies globally to all sites. The prototype configures:
·
navigation defines the behavior and depth of
the default horizontal and vertical navigation menus.
·
areas contain sub nodes for each page area.
The area sub nodes each link to the area templateScript and define the area
behavior in the type property. There are three options: single, list and
noComponent, allowing an area to contain one, a map of many, or no components.
