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:
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:
Use responsive design in Feather
Responsive design of Feather widgets depends on the CSS framework in the Bootstrap package.
The Navigation widget is an exception. You can transform the navigation into a <select> tag (dropdown). For more information, see Responsive design and grid widgets.
Back To Top