All Rocketspark sites are mobile-responsive, which means their layout automatically adjusts depending on screen size so you don't need to make a different mobile website. You can design your website on a desktop and it will automatically be optimised for mobile.
What can I change about my mobile site?
Although most of the work is done for you, in some cases you may need to adjust certain parts of your site just for mobile. In Rocketspark, you can adjust specifically for mobile how your feature area looks, the colour and size of your text, the content width and spacing within a stack, and how the grid gallery looks.
A recent study by Google found that 75% of people prefer to browse a mobile-friendly site on their smartphone, so it's worthwhile checking how your site looks on a range of devices and tweaking your settings to ensure users are getting the best experience. To read more evidence about why you should have a mobile site check out our blog post on why you should have a mobile website.
How is the content reorganised with a Rocketspark mobile site?
When you build your website you will need to be conscious of how your website content will respond on a mobile device. The stacks will wrap first and then the blocks. Watch this video to see how Rocketspark mobile websites automatically rearrange your content to fit on mobile screens or check out the info-graphic examples below.
Single stack example of how Rocketspark mobile website content is automatically arranged
If your page is set up with only a single stack with multiple blocks in it you may find that the mobile order is not ideal because the column order takes priority over the row order. That is, we take all the blocks in the first column and then all the blocks in the second column. This means that a block that you'd like to feature near the top of your mobile site ends up halfway down the page. We recommend that you break your page up into more stacks as per the two and three stack examples below.
Two stack example of how Rocketspark mobile website content is automatically arranged
In this example you can see how the content in the first stack is arranged first before the content in the second stack is arranged.
Three stack example of how Rocketspark mobile website content is automatically arranged
Extra tip:
- To view your mobile website on your Desktop computer in a different way you can click and drag one corner of your internet window and make it as narrow as it can go and you will see the website respond to the screen width - revealing the mobile website.