Overview: Responsive design

With Sitefinity CMS, you can provide the best possible user experience for all your users on all their devices. The ASP.NET MVC and the Bootstrap frontend framework enable you to build and develop apps that are responsive, mobile-first, and work seamlessly on any device – desktop or mobile. All MVC widgets are built with mobile-first mindset and their responsive design is based on the Bootstrap front-end framework in the Bootstrap package. For more information on Bootstrap, see Overview: Resource packages.

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.

When working with Web Forms widgets, you can establish a set of adaptive styles for web pages that fluidly conform to a predefined 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 to fit into all predefined devices.

You can configure pages and display settings 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 layout 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 different of devices.
• Create responsive CSS media queries via a user friendly UI or use the ones automatically generated by Sitefinity CMS.
• Create responsive pages using drag & drop layouts.
• Have control over how Sitefinity CMS layouts transform.
• Have built-in previews that simulate the web experience from predifined device types and screen sizes.

NOTE: Keep in mind that 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.