12 Tips For Creating A Mobile-Friendly Website

Although websites are designed on desktop computers, they’re more likely to be viewed on mobile devices in today’s smartphone-powered society.

Here are our 12 practical tips for creating a mobile-friendly website:

1. Build on a responsive framework. The days of separate desktop and mobile sites are over, and search engines now penalize duplicated content. Avoid fixed-position objects in favor of mobile-friendly website frameworks that reshape to fit different screen resolutions, and ensure horizontally scrolling isn’t necessary.
2. Stick to HTML5. Flash won’t display on modern devices, and even JavaScript can deliver inconsistent results on the move. HTML5 is a language every device can understand, and platforms like WordPress are also compatible across the board.
3. Design for fingers. Without a keyboard or mouse, users may struggle to navigate a website while physically holding a device. Ensure pages can be controlled one-handed without pinch-and-zoom actions, and make each clickable button/link at least 50 pixels square so people don’t accidentally click the wrong thing.
4. Put vital content first. Essential components of any website include contact details and a navigation system, which may need to be a dropdown hamburger menu. It’s hard to display more than 50 words on a mobile device without scrolling, so position the most essential messages front and center.
5. Strip out unnecessary content. Designing for mobile offers a great opportunity to remove anything that can’t justify its presence. Try to avoid more than three sentences per paragraph or three paragraphs per page, delete superfluous downloadable content, and ensure every subpage deserves inclusion.
6. Use icons as shorthand. A mobile-friendly website should use every pixel of space efficiently, and an icon or logo can be far tidier than text. A shopping trolley icon will be instantly understood by users, and other universal shorthand includes telephone, email and home(page) symbols.
7. Avoid unusual fonts. Arial and Helvetica may be predictable font choices, but they display on all devices. Rarely-used fonts might display illegibly on portrait-oriented smartphone screens. Readability has to take priority over style when creating a mobile-friendly website.
8. Optimize images. Compressing photos to a few KB in size will deliver pixelated results on Ultra HD or Retina displays, but uploading an uncompressed 5MB JPG file will massacre loading times on 4G. If images look okay on a ten-inch tablet, they’ll be fine on smaller screens.
9. Embed videos, but don’t play automatically. Search engines evaluate a site’s loading time when ordering results pages, and self-playing video content drains bandwidth. Remember that YouTube allows videos hosted on their servers to be embedded and displayed on external webpages.
10. Incorporate mobile-specific capabilities. Exploit smartphone and tablet technology for the benefit of site visitors. Geolocation can power store finders or directions, while phone numbers should be equipped with ‘click to call’ functionality. Offer contact via text message, and add social media buttons.
11.  Simplify mobile forms. Always turn off autocorrect while turning on autocapitalize, ensuring that customer names and addresses display correctly – capital letters and correct punctuation are harder to achieve on tiny keyboards. Remove non-essential form fields, and include prominent ‘next’ or ‘submit’ buttons.
12. Test, test and test again. Ask friends and relatives to fully beta-test a new mobile site prior to launch, and on as many devices as possible. Resolve any browser-specific issues that arise, and ask them whether the site could be improved on each separate platform/operating system/web browser.

Let WestHost’s Website Builder 7 create your responsive and professional website today.