So, you’ve followed the advice to create a website for a small business but now you’re wondering if your new shiny site is Mobile friendly?
Being friendly for mobile users is vital for your business, in fact if you just cater for desktop then you’re potentially losing 61% of customers. Being mobile friendly can no longer be ignored.
Thankfully it’s not too difficult to build a mobile friendly site and most modern sites are sympathetic to the device they are viewed upon but just in case you need a few extra pointers we’ve compiled this list to get your mobile site truly ready for any device.
Without further ado let us get started on some of the key factors in being friendly for mobile devices.
Responsive design is a critical aspect of website design, a responsive site will adapt to the viewers device. That means you can build only one website, not a separate site for desktop, tablet and mobile. Cool huh!
2014 was crucial moment for mobile devices, it was the year that more mobile users accessed the internet than desktop users, that may not seem a big deal, but it meant that finally site owners had to do something about mobile devices. If you didn’t have a site that worked on mobile, then you were losing out.
No longer will that cluttered navigation bar be tollerated.
Your users are looking for a clean, simple experience so you’re not going to be able to just squeeze that 10 item navigation bar across the 400 pixel width and expect them to like it.
Most mobile sites declutter their navigation by using a ‘hamburger’. This tidy little icon allows the user to expand and shrink the navigation links when they choose. If you don’t have this then you’re probably going to need to get it.
One of the greatest things about mobile device is the access to information nearly anywhere. So, if you’ve got a connection, you should be able to load a webpage.
Out on long walk in the lake district and want to see who won the champions league final? Pull out your phone and have a look.
So, it’s worth understanding the page size on your site and trying to reduce the amount of file and size that need to be transferred to the users mobile.
If you have access, then switch on dynamic compression on the webserver.
Compress your images and if you have the technical know-how then take advantage of HTML5 SrcSets, these allow you to suggest various file sizes depending on the browser and device. The browser will download the image that best suits the device size.
Think, do you really need to serve video to the users on mobile? If you do, then consider serving a 720p version and not that 4k behemoth.
Apart from great UX there are some other design considerations that need be thought through when showing content on a smaller device surface.
Makes sure your text is still legible, not too large and not too small. This is where a mobile first strategy is beneficial when build your stylesheets (CSS). Building for the smallest device first allows you to get it right for the largest audience, mobile should never be an afterthought.
Show and hide elements dependant on screen width to keep the content relevant for your mobile audience.
There is however a downside to this approach as the content still must be downloaded even though it’s not shown, this eats up valuable bandwidth and slows your load times. There’s no easy way around this without inspecting the user-agent header that accompanies the users request. A bit techy for most and a bit unreliable too.
If you have input fields in your page that expect the user to choose a number, or if the box can only accept email or any other type then you can assist your user by setting the correct type on your Input element.
To collect information from the user, mobile devices show a keyboard so the user can type what they need, there are various types of keyboard though, so, for example if you tell the device the input is for the email type it should show a keyboard that has the relevant characters for email (as below).
To tell the mobile device to use the email keyboard you would need to add type=”email” within the input tag as below:
<input type="email" />
You can also make life easier for telephone numbers or credit card information by using the type=”tel”.
<input type="tel" />
Additionally, for IOS devices there’s the extra pattern attribute to show the succinct 0-9 dial pad:
<input type="tel" pattern="[0-9]*" />
It’s all been a bit inconsistent up to now, but luckily there’s a new kid on the block to help us all out.
Meet InputMode, this is slowly becoming adopted by all the main browsers and is already available on all main mobile operating systems, simply add inputmode=”numeric” to the input element.
<input type="tel" inputmode="numeric" />
You can go the extra mile for users by helping the browser recognise what items on the page mean, so, rather than a set of numbers that could mean anything you can tell the browser this is a telephone number. This will allow the browser to prompt the user to make a phone call when the number is clicked.
Markup for this would look like:
<div itemscope itemtype="http://schema.org/Person"> <p>Telephone: <span itemprop="telephone">01111 1111</span> </p> </div>
We now see how important it is to cater for the greater than 60% of users that browse the web on their mobile phone.
What simple steps you can make to have a mobile friendly website that your customers will love.
Remember, happy customers = happy companies.
At Yoodu that's all we do...
Webistes for you and your business.