Most people are visiting websites these days from their mobile phone. So it's more important than ever to have a mobile friendly version of your website. In this article I'm going to share with you 10 tips and tricks for creating a better mobile website.
1. Only include what you need.
Phones have limited screen real estate. So it's important to make sure you're only sharing the most important design elements on the mobile version of your website. To hide less important elements go to the mobile editor, select the element, and click the hide icon. This will hide those elements only in the mobile version of your site.
2. Use large text that's easy to read on a small screen.
Smaller screens shouldn't mean site visitors have to squint to read the text on your website. Be sure to use large enough fonts, so they're easy to read on the small screen. You can adjust the font size in the mobile editor by selecting the text box and using the slider to increase and decrease the size.
3. Use large buttons that are easy to tap.
An easy to tap button should be at least 60 pixels tall. This is about the size of the pad of the average finger. If your buttons are too small it's going to make it more difficult for people to tap when on a mobile device.
4. Drag elements from the sidebar to where you want them to be displayed.
By dragging elements from the sidebar you can place them where you want them to appear in your mobile layout. This makes it easier to keep track of the elements you're adding to your page.
5. Keep your call to action near to the top of the page.
By keeping your call to action, like say a button near the top of the page it will be easy for visitors to find the answer to the question... what do I d next? If you place that call to action below the bottom of their screen they may never see it.
6. Use tall form fields so they're easy to fill out.
By making your input fields taller it will be easier for people on mobile devices to tap the fields and then see what they're entering. This create for a better user experience.
7. Use the reorder button to reorder content by section.
Sometimes you just get to the point where you want to start over. If this happens to you, remember clicking the refresh button in your browser will allow the editor to be refreshed. As long as you don't choose to save the page your changes will be lost and you'll return to the last saved state.
8. Refresh the page if you get stuck.
Before you start over consider letting WebStarts automatically determine the layout of your mobile elements by clicking the re-order button attached to each section, element group, and page.
Finally, don't forget to create a mobile version of your website by going to webstarts.com. It's free to sign up and get started.