cta quote button US

Simple Ways to Make Your Website More Mobile Friendly

Mobile users are constituting a greater number of total internet users than ever before, so optimising your website for them is crucial to increasing traffic flow. As phones and tablets become more popular, websites not optimised for mobile users are now in the minority so make sure your site isn’t left behind by following these five simple tips.

  1. Input fields

if__plug_2008415Input 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 optimising your input fields.

  1. Eliminate wasted space

if_Website_Optimization_302243Empty 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.

  1. Images

if_cell-6-2_234310Most 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.

  1. Word-wrap

if_wrap-text_850689

 

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.

Need Inspiration? Check Out Some Related Projects and Tasks

Coding Mobile Friendly Website For Shopify Store

We are looking for a skilled developer to make our website more mobile friendly. Currently, the website is built on Shopify, and looks great on the desktop. However, the UX of our mobile site could be ... (United States)

Build An Secured HTML Webpage For Arcgis Items

We want to make an HTML web page. This page must be located behind an ArcGIS login (see technical details). On this page, items must appear from the secure Arcgis environment based on certain tags ... (Netherlands)

Melioristic Media Marketing- Need A Website Done

Website designers- desktop/mobile friendly preferably from wix, open to new ideas trust worthy/fast responsive/reliable NEED IT ASAP -I want to collect email list/full contact -Easy to ... (United States)

Outstanding Opportunity For Full Stack Web Developer: Become

We are growing fast and we expect to be the leaders in our segment 5 years from now. We are recruiting the team who will help us build and be part of that success. Read why our company stands out ... (Argentina)

-
These results are based on the freelance jobs extracted from Upwork.

If you think your friends/network would find this useful, please share it with them – We’d really appreciate it.

1 Comment

  1. ben Daveson
    May 3, 2018 at 11:09 am

    I have read multiple articles regarding web optimization, but this is by far the best and precise i have ever come across. The best part is mentioning about elimating of wasted space and word wrapping, Thank you for this wonderful article

    Reply »

Leave a Comment

We would be glad to get your feedback. Take a moment to comment and tell us what you think.