Mobile users are constituting a greater number of total internet users than ever before, so optimizing your website to be mobile friendly is crucial to increasing traffic flow. As phones and tablets become more popular, websites not optimized for mobile users are now in the minority so make sure your site isn’t left behind by following these five simple tips.
Optimize Input Fields
Input fields are a major source of aggravation for users of unoptimized mobile sites. Due to the different keyboards and input methods on mobile devices, you need to disable autocorrect and enable autocapitalize in all input fields.
Most input fields require users to type their name or some other unique information which will automatically be changed to a recognized word by the mobile device’s own autocorrect if not disabled. If the user doesn’t realize their information has been changed it can cause them a lot of bother later down the line, so save them the hassle by optimizing your input fields.
Eliminate wasted space
Empty space on a website may not be an issue on a desktop browser, but it causes havoc for mobile users that need to pinch, zoom and swipe just to read the information presented. Set your website’s preferred viewport width to the minimum size readable on a desktop by adding a meta tag to the page’s head.
Use trial and error to optimise the width of the website for all devices if it’s based on fluid percentages. Having a website that fits the screen size of any device will enable your users to access the information on the site with minimal fuss.
Use Mobile Friendly Images
Most images are chosen for their suitability for desktop sites and will normally be too wide for mobile devices. Make your images fit the page by giving them a maximum width of 100% to enable automatic resizing for the smaller mobile screens.
Background images can be also be set to automatically resize by setting the CSS property for ‘background-size’ to ‘contain’. To ensure the quality of the image isn’t hampered by the resizing, make sure ‘user-scalable’ isn’t set to ‘no’ in a meta tag so that mobile devices can adjust the quality as the user zooms in and out.
Word-wrap Control
Long segments of text without breaks are not of consequence on desktop sites, as there is plenty of space for them to be displayed, but on mobile they will run off the screen if left unoptimized. Use word-wrap to instruct the text to break to the next line before running off screen so that the user can read it without scrolling.
Having to scroll often frustrates users so using word-wrap makes for a better, more streamlined experience. Text off screen can also often be completely missed by the reader and important information can go unseen, so word-wrapping your text is an important step in mobile device optimisation.
Fonts Fallback
Custom fonts can make your website stand out and give it a unique feel, but they also have to be downloaded when users view your website on a mobile device. Downloading fonts takes a short amount of time when the user firsts loads the page and they’ll be greeted by a blank section instead of text while they wait. To prevent users staring at nothing you can use standard fonts for all of your text or use Google Font Loader to initially display basic fonts while your desired one downloads in the background.
Making several small changes to your website can greatly improve the experience a user has while viewing it on a mobile device. An enhanced user experience translates directly to greater traffic flow and increased conversion rates, so taking the time out to cater to mobile users will pay immediate dividends for you and your digital enterprise.
