RESPONSIVE
DESIGN

Responsive design

You can easily create a fully responsive site with mono. A responsive site is simply a site that works equally well on all devices.

A responsive site only has one ‘HTML’-code which means that you only have one site to maintain and one place to update your content. In the mono editor you are able to control what part of your content should be visible on different devices.

A responsive site is the easy solution for anyone who wishes to maximize the user experience with minimum effort.

How to activate responsive on existing non-responsive sites

Most sites are born responsive - but if you already have a site which is non-responsive you can activate the responsive feature on your existing site under MY ACCOUNT > RESPONSIVE

Be aware that there are two pre-requisites you need in order to create a responsive site: 1) Your site needs to have a D4 design skin. 2) You need to have the proper subscription(s) in place.

If these prerequisites are fulfilled you just need to check the checkbox and click apply/save. Your site is now responsive!

If you had an existing and separate mobile site that site will no longer be visible for your visitors. Instead they will see the responsive version of your site. You may switch back to displaying your old mobile site by de-activating the responsive feature (same place as where you activated it) at any time.

Toggle between mobile and desktop views

On responsive sites you have two options to view your site: 1) desktop view and 2) mobile view. You can easily toggle between the two views to see how your responsive site looks on the different devices. The is done by clicking the view-buttons on top of your “page tree” in the left side of the screen.

Control what content is visible on different devices

It´s easy to control which pages or content modules that should be displayed or hidden on different devices.

Each module and page has an option under advanced settings which allows you to choose whether the page or module should be displayed on either: 1) Both desktop and mobile view (default) 2) only on desktop 3) only on mobile.

By default all pages and modules are displayed on all devices, but by choosing one of the other options on individual modules or pages, you may customize what is being displayed where.