Responsive Design

Web browsing devices

A Web Express site that has been enabled for responsive design means it will be able to react to the screen size being used by visitors. We can never guess what devices visitors will be using to browse the internet, but we can add responsive design to adjust to those devices.

1

Configure Theme

  1. Go to the Express toolbar and select Design.
  2. Click the Configure button next to the active theme (listed first).

Configure theme

2

Enable Responsive/Mobile Friendly

  1. Expand the Responsive/Mobile Friendly section.
  2. Click the checkbox next to Enable responsive/mobile friendly design.
  3. Select Primary Sidebar: this setting sets which is the primary sidebar for tablet displays.
    • First/Left: choose this setting if your sub navigation is on the left.
    • Second/Right: Choose this setting if your sub navigation is on the right.

Enable responsive/mobile friendly design

3

Responsive Preview

Preview how your site will look on mobile devices. 

  1. Clicking on the phone graphic drop-down in the upper right of the admin bar and select either Smart phone or Tablet. 

Responsive preview

Note: Responsive Preview can give you a good idea of what the site might look like on a mobile device or tablet, but it’s no replacement for testing your site using mobile devices.