Cate

How to: Optimise Your Bluepark Website for Mobile

Tuesday, 20 May 2014  |  Cate

How to: Optimise Your Bluepark Website for Mobile

All of our free built-in templates come fully optimised for mobile. This allows you to target mobile specific customers straight away with a much more refined and easy to use mobile version of your website. Even if you already have a site with us, with just a flick of a switch and a couple of amendments, you can transform it into a fully functioning responsive website for both desktop and mobile devices and, in turn, increase your conversion.

Your current template

The first thing to do is to see how your current template looks using our mobile feature. To do this just follow these steps:

  1. Go to Design / Layout > Template Manager
  2. At the top of the page make sure the Mobile drop-down is set to the same template set in the Default field to the left. If it is set to None, then chose your template name from the drop-down.
  3. Open your site on any smart phone and navigate through your site to see how each page looks. You can also view the site using our mobile simulator by clicking on the magnifying glass icon to the right of the template name in the Template Manager and then clicking on the View Mobile Site link at the bottom.
Mobile unedited template

Depending on how bespoke your design and content is will depend on how the site will look on a mobile. It may look absolutely perfect, like our demo website, and therefore you won’t need to make any amendments. Congratulations, your site is now mobile optimised!

Mobile unedited template

However, it may not work at all, like one of our internal test sites, and you will need to make a few small changes to the current template, layout or content.


Making small changes to content and the template

The test site above has just a few issues that are causing it to render badly on a mobile.

The Content

The small promo banners underneath the main slideshow are the main issues because they are set with a fixed width of 450px each. What this means is that these images will be forced to display at 450px wide no matter what. Therefore, as there are three images going across the page, plus the padding in-between them, this sets a fixed width of 1400px. This is far too wide for a mobile and so the site gets pushed across to the side.

There are three ways to sort this out, and which one you use will very much depend on your content and what you want displayed on mobile. As you can see from the image below, each one changes how and what content is shown. The first is done by removing the promo banners block entirely, the second is by removing the fixed sizes on the images, and the third is by using the Mobile Content field on the block. How to achieve each one is outlined below.

Mobile edited layout

1. Remove or replace the promo banners block

  • Go to Design / Layout > Page Layouts and click to edit your homepage layout
  • Tick the Define Alternative Mobile Blocks option at the bottom and Save
  • A new Mobile Blocks tab will now have appeared where you can assign or unassign relevant blocks to show only whilst viewing on a mobile

2. Remove the fixed sizes on the images

  • Go to Design / Layout > Content Blocks and find the block that has the issue
  • Click on the Edit button next to the Block Content field
  • Click on the first image and then on the Image icon in the pop-up menu
  • Delete the figures in the Width and Height fields, so they are left blank
  • Click on OK, Accept Changes and Save
  • Repeat for each image

Please note, fixed widths can be added to other elements on a website, such as tables. It is best to set these to either have no width or a width of 100%, rather than a fixed width, to make sure they can fit correctly on all devices.

3. Override the main content and show mobile specific content

Within each Page, Category, Product, Blog Post and Block you can override the main content with content that will only show when viewing the site on mobile. All you need to do is add your mobile specific content in the Mobile Content field within the Alternative, for Mobile Devices section of the Content tab.

For the third example above, we simply added the main content into the field and then changed it so the images sat in a column, rather than a row.

The Header

Lastly, the mobile version is currently using the Company Name set in General Settings > Settings > Company tab as the logo. To keep the two versions consistent you can assign the mobile version its own logo.

  1. Go to Design / Layout > Template Manager and click to edit your template
  2. In the Header tab you can assign your mobile logo to the Header logo (mobile) field under the Header Content (mobile) section. It is best practice to make sure this logo is no wider than 640px
  3. Alternatively, you can type in the name you want to display in the header within the Header Title field, if this is different to your Company Name. This will then be styled using the template settings.

Mobile header edited

With just a few minor changes to the current template the website is now optimised for mobile devices.


What if there's still a problem?

More often than not, the solutions above will sort out any issues the site may have when displaying on mobile. However, if you have a completely bespoke template, one that is vastly different from our built-in ones, then there may still be some issues. It is best to speak to the person who did the design and advise them of the following options.

1. Use the Mobile CSS to override the main CSS

In every template there is a Mobile CSS field within the Pages tab and this can be used to override the main CSS. Simply copy the code within the Additonal CSS field and paste it into the Mobile CSS field. Any changes can then be made to the Mobile CSS so it only displays for mobile.

2. Create a seperate template for mobile

Alternatively, create a completely separate template for mobile devices, if this is easier. This can be done either by making a copy of your current template or the Bluepark-Flat template and making any changes. Once it is ready, simply set the Mobile template to the new one at the top of the Template Manager.


Let us know how you get on setting your website to mobile optimised and if you have any problems don't hesitate to email support@bluepark.co.uk