Overview: Responsive design

Responsive design is a design approach you can employ to create sites that users can view from a variety of devices – desktop and mobile. Responsive design addresses the need to provide, optimize, and adapt viewing experience based on the capabilities or constraints of the device and its screen size. The technology you use to create responsive design is CSS3 media queries which enables web pages to detect the visitor’s device-type and screen resolution and adapt the web styles to create an optimized user interface (UI) for that device. That is, one and the same HTML code defines the page content regardless of the device accessing it, but the presentation of the content changes reflecting the CSS media queries that specify which CSS rules apply for the device displaying the page.

A website created using the responsive design approach has an adaptable page layout, fluid grid and page elements, and dynamically resized UI and content, such as videos or images.

When using responsive design you benefit from:

• No additional server logic is required to detect devices or redirect the user in order to provide accessible content for smaller or bigger screen sizes. The logic for transforming the webpage is built into the styling.
• You do not need to support and maintain different sites,  templates, or markup for the different devices.
• You can easily integrate responsive design into an existing website if it is written with compliant HTML and CSS.
• You have a single URL address for one page and it is accessible from all devices – desktop or mobile.
• Besides the screen width, using media queries you can also edit properties such as orientation mode, aspect ratio, colors, resolution, and so forth.

Considerations:

• JavaScript control
  If you have one website version for all devices, you should always consider JavaScript events such as hover or click since the mobile devices prompt the user to touch, tap, swipe, and so on.
• Information architecture
  Since some devices have small screen sizes, you sometimes need to build the information architecture of a website in a different or specific way. In addition, some specialized web applications like mobile banking have their logic and security implemented in a different way.

PREREQUISITES: By default, the Responsive & Mobile design module in Sitefinity CMS is disabled. To use the module you must install and activate it. For more information, see Activate and deactivate modules.

With Sitefinity CMS, you can create responsive web designs for desktop computers, tablets, and smartphones. By establishing a set of adaptive styles, web pages fluidly conform to an unlimited number of devices and resolutions. In addition, there is no need to recreate website content or create dedicated markup for a particular device. Your web page transforms into a perfect fit for all devices.

You can configure pages and display settings for these pages for different mobile devices. To do this, you must first define the rules for the output devices, then for each of the defined devices, choose how to display the pages. You can also define transformations that automatically optimize your website for each visitor’s unique screen by transforming Sitefinity CMS built-in layout widgets for mobile displays.

Once you create the rules, you need to apply them to a specific page or a page template and then you can see how the result looks in the preview mode.

Using the responsive and mobile design module in Sitefinity CMS you can:

• Create web content that is usable on an infinite number of devices.
• Create responsive CSS3 media queries via a user friendly UI or use the ones automatically generated by Sitefinity.
• Easily create responsive pages using drag & drop layouts.
• Have complete control over how Sitefinity CMS layouts transform.
• Have built-in previews that simulate the web experience from numerous device types and screen sizes.