It will come as no surprise that mobile phone usage is on the increase globally. Recent research shows that 60 percent of UK residents own a smartphone and that 34 percent of those people have made an online purchase from it. So for any business with a website (and every business should have one), the need for a site that is optimised and customisable for smartphones is vital. See also: Responsive vs Adaptive - why a responsive website is best for your business.

See also: Website design packages buying advice

Wix.com, the popular HTML5 web-development platform, makes this happen by automatically converting all of a website’s design, content and eCommerce capabilities into a mobile-optimised version. The website owner can then fine-tune the mobile website, leaving the desktop version of site unchanged.

The URL of the website remains the same and there’s only one source code for both websites and a single source of content, all making for great SEO. This also makes it easy to maintain and manage a web presence from one single location.

Follow these 6 simple steps to create your customised responsive website today:

Step 1. Get started

Get going by choosing from the hundreds of designer-made templates in the ‘Templates’ page on Wix.com, click ‘Edit’ and start customising your website. Once done, click on the mobile icon in the top left hand corner of the Wix Editor and you can view your automatically optimised mobile website. Navigate easily throughout your mobile site by selecting the page you want to customise from the drop down menu, found next to ‘Page’ along the top bar.

Responsive website step 1

Step 2.    Move and hide elements

Feel free to move elements within your mobile site without it affecting the look of your main website. Simply ‘click’ and then ‘drag’ elements to a preferred location on the page. To get their position just right, click on the ruler guide in the top menu, so that the X and Y coordinates appear above each element. Hiding unwanted elements from your mobile site is simple. Just click on the element and then click on the ‘eye’ icon. Another way to hide elements is to press ‘Delete’ or ‘Backspace’ on your keyboard. All items can easily be found and re-added by visiting the ‘Hidden Items’ tab on the left hand side.

Responsive website step 2

Step 3.    Change text size and moving bringing elements to the front

Adapting the size of your mobile website’s text is simple. Click on a text box or button then in the pop-up box, click on the Scale Up (A+) or Scale Down (A-) icon. To bring an element to the front so that it appears on top of other elements, click it and on the pop-up that appears, click the ‘bring forward’ icon. Similarly you can move an element to the back by clicking on the ‘send backwards’ icon.

Responsive website step 3

Step 4.    Adjust background

If the chosen background for your main website doesn’t work in the mobile version then don’t sweat it. This can easily be changed without affecting your main website. To change the background, go to the ‘Mobile Design’ tab on the left and click on ‘Mobile Background’. Go ahead and change the image, and scale and reposition it to how you want it, or simply create a block colour for the background.

Responsive website step 4

Step 5.    Customise the mobile action bar

Make it easier for visitors to interact with your business whilst browsing from their smartphones, by providing buttons to actions that they’re likely to be looking for – your phone number, email address, business location and social media profiles. Activate the Mobile Action Bar - an add-on layer that appears when your site is viewed on a mobile device. Go to ‘Mobile Settings’, ‘Mobile Action Bar’, select the items that you want displayed and activate the bar by moving the red button to the right.

Responsive website step 5

Step 6.    Enable the mobile view and publish

Finally, it’s vital to enable the mobile view for your website. Visit the ‘Mobile Settings’ tab on the left, click ‘Mobile View’ and enable the optimised version of your website by moving the button to the right – the button should turn from red to green. Then click on ‘Save’ in the top right hand corner of the Editor Wix and then ‘publish’ – your mobile site is now optimised, personalized and ready to bring in those important clients!

Responsive website step 6