Browsing on a mobile phone have a totally different experience compared to conventional web browsing. Having good practices when designing a mobile website helps to make your mobile website frustration free. Here are some tips for Navigation and Links mobile web best practices.
Keep the URLs entry point short.
As the keypads and screen sizes on mobile phones are small, input is often troublesome, avoid lengthy URLs.
Keeping an entry point short might be obvious to you, but it is important. Instead of:
http://mobile.yourdomain.com
http://yourdomain.com/mobile
http://yourdomain.com/mobile.html
You can consider popular formats like:
http://m.yourdomain.com
http://yourdomain.mobi
http://yrdmain.co (abbreviated domains)
You can automatically redirect mobile users through your main website. However and whenever you can, you should include QRcodes to your URL for quick entry to your mobile site and/or their specific pages. QR codes are a type of specific matrix barcode and the name is abbreviated from Quick Response Codes. These barcodes are designed specifically to be read by smartphones.
Keep to recommended size for your buttons and links.
According to Apple Inc, the average finger tap is 44 x 44 pixel. Which is why, when designing a mobile website it is recommended to design your button with the height of at least 44px. It is common for icons to appear 32×32, but have padding to make the touchable area 44×44.
For other mobile devices, a study for one-handed thumb use on small touchscreen devices showed that there were no significant differences in error rate between target sizes =9.6 mm in discrete tasks and targets =7.7 mm in serial tasks. You should consider your navigation, forms and buttons to be designed to that height when creating them.
Call-to-action buttons
Any call for action buttons should follow the standard suggestions for web design. For instance, buttons should draw user attention with size, however make sure that the button is not too large to bury your main content, navigation bar or other important information. Put it in a prominent positioning and use highly contrasting colors. Do note to tell your users what to expect before they press your button. Mobile browsers loads slower that web browsers, so it costs more for them to click to an unwanted page.