1. What does “mobile friendly” mean?

“Mobile friendly” means making a website as easy to view as possible on portable devices, notably smartphones. This includes using larger fonts, leaving plenty of space around “click targets”, avoiding functionality that does not work on portable devices, etc. And crucially (according to Google), the site should have a “responsive design”, that is it should restructure itself when viewed on a portable device, typically reducing the content to one column.

2. Our “Mobile mode”

All our sites are now mobile friendly by default. Unless you intend to add extensive customtisaions you won't need to do anything else to make your site mobile friendly.

In addition to a mode for smaller phone screens there is a size for tablets which can be used to make style adjustments for medium sized screens.

2.1 Previewing mobile mode

To view your site in mobile or tablet mode, click preview in the admin system and select the device from the options.

By default your menu will collsapse down to a single button that can be pressed to open the full menu. Your site title will be smaller, and the rest of the site will adjust to fit into the screen.

By default all “grids” will collapse to a single column, unless they have been specifically set not to.

If you have pop-ups in your image gallery, these won't work in mobile mode and the full size images will be used.

3. Styling for mobile mode

When you are previewing in mobile or tablet mode, the styling you adjust will only apply in that mode or a smaller screen size. For example styling applied in tablet mode will apply to tablet mode and mobile mode.

There is some styling that needs to be applied in full screen mode.

3.1 Using mobile menus

3.2

4. Column layouts

The main content of your site can have 1,2, or 3 columns. You can adjust this for different parts of your site. You could for instance have 2 columns on the home page, 1 on your gallery pages, and 3 on your contact form.

For more information, see the guide