5 Quick and Easy Enhancements for your Mobile Website

To design and develop an optimum mobile experience requires a great deal of skill, not to mention an aptitude for patience. But there are a few things anyone with basic web skills can do that take little time yet make a big difference. 

Adjust font size and leading 

Body text that takes work to read will trigger (at best) subconscious annoyance in your users. A pretty reliable rule of thumb is to set the font size to 16 pixels (or equivalent) with a minimum line-height of 1.4 for all screen sizes, then tighten up the leading a bit for mobile. As the optimal settings will depend on your chosen typeface, you'll want to do a bit of testing and tweaking.

Now, tune your headers. Line height should be tighter than that set for body text. Adjust the font size; what works on desktop may appear exaggerated on a small screen. Ensure the relative size between <h1>, <h2> on down isn't so subtle that there is no visual hierarchy. 

Increase button size

Are your buttons finger-friendly? A touch target area should never be smaller than 28 x 28 pixels but should ideally be closer to 50-60 pixels (nearer to the size of the average index fingertip). 

Get rid of dead ends

Give your users something to do when they reach the end of the page. Invite them to subscribe, navigate to the next article, or contact your company for more information. Or if the footer lacks navigation, a simple “Return to top” button (finger-friendly, of course) will allow your users to avoid the loooong scroll back. 

Reconsider dropdowns

Using a dropdown form element on mobile can be a 2-to-4 tap operation, which is why Luke Wroblewski considers them a UI element of last resort. Consider whether a radio group would make a suitable replacement. 

Click to call

A click-to-call link will activate a phone's dialler when tapped, saving your visitors time and trouble. Turn the link into a button to make it even easier.  

<a href="tel:+990012345678">+990012345678</a>

Another nice thing about click-to-call is you can add a click tracking event so that Google Analytics can show you just how many of your users are dialing by way of the link. 

Conclusion

In 5 simple steps we have enhanced readability, improved navigation and provided more opportunities for your visitors to interact with your website through their mobile devices. Not bad! If you've got a great quick and easy tip, tell us about it in the comments below. 

Although mobile web design is in relative infancy, it's a fast moving train as mobile devices - and people's expectations of them - rapidly evolve. New tools and techniques are being rolled out every day, and staying on top of that is a big part of what we do. If you have a website or web app that requires a mobile experience boost, feel free to contact us