How to: Optimise Your Bluepark Website for Mobile
Tuesday, 20 May 2014 | Cate
We've just released one of our biggest features to date - fully optimised mobile templates for your ecommerce website. This allows you to target mobile specific customers 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:
- Go to Site > Template Manager
- At the top of the page change the Mobile drop-down to the same template set in the Default field to the left
- Open your site on any smart phone and navigate through your site to see how each page looks
Depending on how bespoke your design 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. Your site is now mobile optimised!
However, it may not work at all, like one of our internal test sites, and you will either need to make a few small changes to the current template and current layouts or create a new mobile template.
Making changes to your current template
The test site above has just a few issues that are causing it to render badly using the mobile feature.
The smaller square banners are set as a fixed width of 316px each. What this means is that these images will only ever show as 316px wide, so three going across the page, plus the padding in-between will have a fixed with of 960px. This is too wide for a mobile and can be fixed by assigning a different block to the mobile layout for the homepage.
- Go to Site > Layout Manager and click to edit your homepage layout
- Tick the Define Mobile Blocks option 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
Having removed the square banners block and replaced it with the Selected Products block you can already see the site improving on mobile devices.
The navigation bar doesn’t render at all on the mobile site. This is because the desktop version uses the header background as the background image for the navigation bar. Also there is some bespoke CSS creating the drop-down arrows on each link. This will need to be tweaked on the template to create a more user friendly navigation for all devices.
- Open the original header in a graphics package such as PhotoShop
- Separate the navigation bar from the header to create two images
- Upload new navigation bar background to Template > Bars > Navigation > Background Image
- Upload new header image to Template > Header > Background Image
Having done this, as well as removing the bespoke CSS for the down arrows, you can now see that the mobile site and desktop site render much better.
Lastly, the mobile version is currently using the Company Name set in Configuration > Company Options as the logo. To keep the two versions consistent you can assign the mobile version its own logo.
- Go to Template Manager > Header tab
- Assign your mobile logo to the Header logo (mobile) field – This should be no wider than 640px
Having assigned a mobile header the site now looks much more consistent with the desktop site.
With a few minor changes to the current template the website is now optimised for mobile devices.
Creating a new template for mobile
You can, of course, create a completely separate template for mobile devices. This can be done either by making a copy of your current template or the Bluepark-glass template and making any changes.
Currently, we suggest using this method if you have code within the Product Detail Page field in the Custom HTML tab in your default template. This is because the custom code uses a two column layout for the product page which does not render correctly on a mobile.
If you wish to use custom code within your newly created mobile specific template you must make sure this is designed as a one column layout.
Changing content shown on mobile
There may be times when you want to show your customers different content on mobiles to what is shown on the desktop version. This could be something as specific as the example above where the content has a fixed width and therefore won’t display correctly on mobiles or it may be that you want to target certain content to your mobile users. Therefore, there are certain areas within the admin console where you can make changes to what content is shown on different devices.
Assign mobile specific layouts
You can assign different layouts for mobile devices, allowing you show different blocks.
- Go to Site > Layout Manager and click into the layout you want to assign different blocks to
- Tick Define Mobile Blocks on the Properties tab and Save and a new Mobile Blocks tab will appear
- Assign the blocks you want to appear on that layout on mobile devices only to the Mobile Blocks tab
On the Properties tab you can also set if that particular layout should have the Catalogue/Information menu maximised by default and if the Search block should automatically be displayed on mobile devices.
On the Catalogue tab you can also set the number of columns that particular layout should display of both categories and products.
Assign mobile specific page content
In the Page Editor add any mobile specific content to the Mobile Content field and it will override the Page Content field when viewed on a mobile.
In the Category Editor add any mobile specific content to the Mobile Content field and it will override the Page content (above list) only. Any content within the Page content (below list) will still show on mobiles.
In the Product Editor add any mobile specific content to the Mobile Content field and it will override the Page Content field when viewed on a mobile.
To access the Mobile Content field on any of these sections you will need to make sure Split Screen is un-ticked at the top of the page.
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