Whether you’re creating a dedicated mobile website for the first time, or revamping your current mobile website, follow these key tips to stay on the right track. Having a mobile website is essential; today, many people spend the bulk of their online time using phones and tablets.
1. Brand It
Ensure your mobile site reflects the look, mission and brand of your company. No matter how streamlined your mobile website, a user should be able to identify it as yours. It should be similar to your PC-optimized site. A mobile website is part of your company’s online business strategy, not a start-from-scratch offshoot venture.
2. Think Strategically
Know what you expect the mobile website to achieve. Set goals for it, have metrics to measure success, and use data to inform your decisions. If you’re redesigning an existing mobile website, you should already have data on which browsers and devices your mobile visitors are using.
3. Keep it Simple
Think simple, but not plain. You do want clean, simple design — skip the useless, slow-loading animations or auto-play videos. However, you also want appeal. Go back to design basics — think in terms of gradients and drop shadows.
4. Stay Organized
Follow single-column, vertical navigation. Data organized in a single column works well for portrait or landscape orientations on mobile devices. Consider using collapsible navigation with headers as well. For example, if your business is a clothing store with many products, present the product types in a vertical hierarchy such as: Men, Women, Children, Shirts, Dresses. A customer can tap on a product category to get more information, without scrolling past endless data they don’t need.
5. Be Inclusive
Keep customers in the loop. For example, if a video, picture or page needs to load, use an animation that shows the loading state. Have links change color once a customer clicks on them.
6. Empower Customers
Give them the option to browse the full website, if they want. Don’t make it difficult to find the link to the regular website; put it at the top or bottom of mobile pages.
7. Make Actions Easy
Keep the call-to-action options you use on your PC-optimized website — joining free trials or signing up for newsletters — but streamline them. Use clearly outlined buttons, like the ones Amazon has for cart adds and checkout. Put call-to-action buttons under relevant images or descriptions. Also, experiment with wording — does “Buy” work better than “Add to Basket,” or another alternative? Does a certain button work better than another? Run version tests and find out.
Sources:
http://mashable.com/2011/03/24/mobile-web-design-tips/
http://wegraphics.net/blog/tutorials/mobile-web-mastery-25-tips-on-designing-for-mobile-devices/
http://www.sitepoint.com/10-tips-designing-mobile-friendly-website/
http://logoworks.com/blog/three-things-ditch-mobile-sites-2/
https://econsultancy.com/blog/10341-mobile-commerce-calls-to-action-eight-best-practice-tips/
