Ultimate Guide Making your Site Mobile Responsive

In 2019, 53 percent of web traffic worldwide came from mobile users. But what if your website isn’t mobile-ready? Well, with Sitefinity CMS, you can create and generate custom web designs for desktop, smartphones, and tablets.

You can set and establish adaptive styles so that every device can view your website at its full fluidity. With Sitefinity CMS, you don’t need to create specific website content or markup for each device. By just setting up a few rules, your web page transforms into a perfect fit for all devices. Today, we’ll cover everything related to Sitefinity mobile responsive design. First, let’s kick-start things with responsive design. Responsive design is an approach of creating sites that can be viewed perfectly on a variety of devices.

CSS3 media queries are used to enable web pages to detect the visitors’ device type and resolution and adapt the defined styles for an optimal experience. Responsive design benefits the website in various ways. Firstly, you don’t need to support and maintain different sites, templates, or mark-up for the different devices. Next up, your website has a single URL address for all the devices. Now let’s see how Sitefinity mobile responsive design works.

How to Install and Activate

With Sitefinity CMS, you can use the Responsive & Mobile design module to create Sitefinity responsive websites across all devices. By default, the module isn’t installed in Sitefinity CMS. You must have to install and activate it before making the most of it.

By using the Sitefinity CMS Responsive & Mobile design module, you can configure pages and templates for different mobile devices. Firstly, you’ll be required to define the rules for a different set of devices on how things will be displayed. Once you are done creating rules, you can apply them to specific pages or a page template. And then, you can see how it looks like by launching the preview mode.

Here are a few things you can attain using the Sitefinity mobile friendly website design module:

• Create a Sitefinity mobile friendly website design that’s usable on any device.
• Use automatically generated friendly UI by Sitefinity or create your own CSS3 media queries.
• Create Sitefinity responsive websites layouts using easy drag & drop technique.
• Complete control over how your website looks.
• Built-in previews that show how your website will look on numerous devices and screen sizes.

Before you learn about creating responsive design rules, it’s essential to know about different types of responsive design rules.

Sitefinity Responsive Websites Design Rules

Basically, Sitefinity mobile responsive design rules are mobile rules based on media queries. One can apply the responsive design rules on the template or page level. You are required to define the device types and characteristics to which the rules will be applied with a predefined media query group. Once the requirements are met, you define how to display pages on these devices. A response design rule consists of the following three things:

• Media Queries
  A media query defines a set of devices and characteristics. With Sitefinity, you can choose pre-defined media queries or create them from scratch. It’s basically a definition of the device and how your webpage will display stuff to it.
• Layout Transformation or Redirecting to Another Page
  Set of rules that define how your page content will be displayed. Users can use the Sitefinity “drag & drop” layouts to place custom transformations. The Sitefinity mobile responsive design will automatically become aware of the structures and optimize them for mobile devices. Or you can use a CSS transformation file for customizing layouts according to your choice. Instead of transforming the layout, you can simply redirect a user to a page dedicated to mobile, tablet, etc.
• Navigation Transformation (Optional)
  Lastly, you can also apply transformations to all the navigation widgets on your page. From hiding the navigation menu to choosing the type, you can tweak according to various device types.

Now you know the rules, let’s move forward and see how to create Sitefinity mobile friendly website design rules quickly.

Creating Sitefinity Responsive Websites Design Rules

Before displaying a page differently on different devices, you must define the rules. With Sitefinity CMS, it’s simple to define rules for displaying pages on mobile devices. Let’s have a quick look at how you can create a Sitefinity mobile friendly website design.

• Firstly, in the Sitefinity dashboard, select the “Design” option and then click on “Responsive & Mobile design.”
• After that, click on the “Create a group of rules” option for creating Sitefinity responsive websites.
• Now, you’ll be redirected to a new page.
• In the input field of “Name,” enter the name that you have decided for the rules you are going to declare.
• After that, choose the group of devices for which you want to define the rules in the dropdown box. For seeing the predefined rules for a specific device, just click on the “Details” button.
• Select the devices which you want to set up the way page content will be displayed. If your device isn’t on the list, click on the “Add custom…” button to add a new device. Note that you’ll be asked to enter all the details of the device you are about to add like aspect ratio, resolution, display size, etc.
• Next up, under the “Apply behavior to…” you’ll choose how to display the pages on the selected devices. Now you can choose one option out of two, Transform the layout or Open a specially prepared site.
• Select one option and tweak it according to your preference.
• Lastly, you can apply set rules for transforming the navigation bar. Expand the “Navigation transformation” option and set rules according to your preference.

Seeing Sitefinity Responsive Design in Action

• Open the template or page and click on the “Layout” button that would be located on the upper-right corner of the page.
• After that, click “Settings” that would be just below the “Responsive Layout” heading.
• Now to select one or more groups to be applied to the page or template, click on the “Only selected groups of rules are applied” and choose the rules.
• You can also choose any one option of the other three options as well, but it depends on what you are trying to achieve.

Sitefinity responsive mobile design lets you create your website responsive on all platforms. Follow our guide to make the most of Sitefinity mobile friendly website design plugin.

• Sitefinity CMS Overview
• How to Select a Sitefinity Developer
• Sitefinity vs Competitor CMS Platforms
• Sitefinity vs DNN for eCommerce Implementations
• Sitefinity Feather eCommerce Solution
• Sitefinity Feature Release History
• Multilingual eCommerce Solution
• Comparing Sitefinity Versions
• WordPress Approval Workflow
• Grant Management Software
• Is WordPress HIPAA Compliant?
• Common Sitefinity Errors
• Selecting a Sitefinity Upgrade Developer
• HIPAA-Compliant Hosting
• Importing WordPress Connect to Sitefinity
• Benefits of Bootstrap
• Responsive WP Theme
• Sitefinity Multi-Site & Multi-Domain Capabilities
• Sitefinity Multilingual and Multi-Portal Solution
• Sitefinity Forum Module Features
• Harnessing the Power of Sitefinity Forms
• ADA Compliance and WCAG Optimization
• Guide to Making your Site Mobile Responsive
• WordPress ADA Compliance
• The Benefits of a Responsive Website Design
• Content Management and Approval Workflow
• Guide to Sitefinity Environment Configuration
• Custom Integrations

• Sitefinity Hardening and Security Best Practices
• Sitefinity Upgrades Best Practices
• Sitefinity Hosting System Requirements
• Sitefinity Hosting Plans & Requirements
• Sitefinity Customization Best Practices
• Installation Best Practices of Sitefinity
• Azure HIPAA Compliance
• Improvements to the Sitefinity CMS
• Module Development Best Practices
• Widget Development Best Practices
• Theme Development Best Practices
• Custom Sitefinity Modules & Widgets
• Azure Web Hosting Services
• User Role & Permission-based Access
• Advanced Site Search and Indexation Functionality
• Guide to Website Localization and GDRP Consent
• Sitefinity Content Staging and Workflows
• Sitefinity Digital eCommerce Solution
• Advanced Sitefinity Blog Module Guide
• Unlock Greater Results with Multisite Solutions