10 Mobile Web Design Best Practices
For a mobile web designer, constantly improving your strategy is something you should keep doing. Here are some pointers for you to consider when you think of charging up your strategy.
Full site
You might have a great design and a fantastic layout, but you still should include a link to the full site for your users. Some people are just used to this and they don’t like change.
Headings length
If you have headings that wrap over more than two lines, the content gets pushed down the page and it might go out of frame. It’s best to keep them short, descriptive enough without going into an essay and focussed.
Use placeholder text on small, common form inputs
Where context may be pretty obvious on small forms, change to using placeholder text instead of the usual labels. Examples of these are login forms, address forms or search boxes.
Place labels above form inputs
Ensure that labels are placed above form elements when using them. If you don’t want the user to lose context of input, it’s best you use top-aligned labels as recommended by our mobile website designer.
Pop-ups
Mobiles still suck when it comes to window management. Maps, YouTube and anything that opens native applications ends up taking users out of the website’s flow and also out of context. It would be best to try to integrate these elements on the page so that users are able to remain with the website they are viewing.
Font-based icons
If you want to spice up your designs, use font-based icons.
Give your mobile website a mobile-first makeover
There is more to a mobile website than just squeezing the existing site into a column format. Look at the analytics and user feedback. Focus on the main elements and reorganize, if required the content so that it makes sense.
Default font size
Keep your default font size to at least 14 px although you might think it looks too big. The only instance you can use a smaller font size is for labels for forms.
Fat fingers and tipsy taps
Design your tabs and actions keeping in mind that some of us have slightly fatter fingers than others. Keep your touch targets big because the really small ones can be very annoying. The recommended size is 40px by 40px.
Don’t confine your creativity to what you can do on a desktop site. Remember that on smartphones, people like the options of user location, picture taking, call making and much more.
We hope these tips were useful for you.
