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:
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!
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 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.
1. Remove or replace the promo banners block
2. Remove the fixed sizes on the images
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.
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.
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 firstname.lastname@example.org