In the future, website design will be ‘mobile first’ and ‘computer second’. Optimising for mobile will be the difference between success and failure.
Let’s start with a fact…
In 2018, mobile contributed to 52.2% of internet traffic. That’s just over half your market. And the consequences are obvious.
In the future, website design will be ‘mobile first’, and ‘computer second’. Optimising for mobile will be the difference between success and failure.
In fact, that’s the situation right now. And if you’re not mobile optimising – then you should!
“Pop ups and ads are the enemy of mobile users.”
Here’s what to do right now: after your next site update, pick up a variety of smart devices and test. Then make edits for mobile optimisation.
Wait, what do you mean by ‘variety of devices’?
Screen sizes differ from one mobile to another. And they can differ drastically, depending on the device (large tablets vs. mini-smartphones).
For example, look at the Apple iPad and Samsung Galaxy Y.
Marketing analytics count both as mobiles. Yet, their screen sizes differ, where the iPad is 9.7 inches, and the Galaxy Y is 3.0 inches.
Now, you don’t need to own both. But make sure you have access to either device for testing. Or, make sure you have a simulator app that mimics both phones!
Where do I get a simulator app?
Try mobiletest.me which mimics the previously mentioned devices.
But without further delays, it’s time to explore the list. We’ll explore each factor and how they matter to mobile users!
1. Responsive design
Here’s another fact … 94% of visitors judged websites based on responsiveness. Or, in layman terms, that’s almost everybody.
A non-responsive website is hard to navigate. It takes a long time to load, and this repels users who just want quick information.
Testing responsiveness
Loading speed is everything. Open your smartphone (or simulator) and see how long it takes to load a page. And if it loads slowly, then it’s time to do the following adjustments…
a. Check the caching
This reduces the time required by Google to load your pages. And if you have a habit of clearing cache, then this might compromise your mobile loading speed.
Now – most people know how to clear cache. And they do it habitually to check for website edits.
But they don’t know how to make a new cache.
If that’s your situation, use a plug-in. Many CMS (like WordPress) provide easy methods of instantly caching pages.
One we recommend is W3 Total Cache – which is highly rated, with 4000+ votes.
And speaking of WordPress…
b. Check your theme
Is your theme responsive? Some work well with computers, but they’re horrible on mobiles. If that’s your situation, swap out for a better one. Look for premium themes, found in stores like ThemeForest and StudioPress.
c. Remove pop-ups and ads
Both are the enemies of mobile users. There’s already limited space on mobile, to begin with. And nothing kills that more than sales spamming and subscriptions offer.
If you have either, we recommend removing them. They reduce loading speeds on mobile, plus they’re irritating to navigate through.
But you know what’s as irritating as popups and ads?
2. Button sizes
On mobile phones, small buttons are stressful. They take forever to click. And that’s because most of your clicks don’t register unless you start using smaller items (like a pen, or your fingernails).
Also, there’s the reverse problem. Sometimes, buttons are too big, and they take up a lion’s share of a mobile screen.
As a website owner, your job is to find the optimal button sizes. And you need to balance them with the rest of their pages!
Any recommended sizes?
It depends on the manufacturer. Some recommend 48 x 48px (like Apple). Others go down to 34 (like Microsoft).
But just to be safe, stick to Apple’s values: 48 x 48 seems to work well on small phones. It amounts to 1×1 cm, which is enough space for any finger to click!
Colours
Are your buttons noticeable on mobile? Or are they camouflaged by the rest of your website’s aesthetics? If they’re not noticeable, give them a vibrant colour. Make sure they catch the eye while meshing with your theme at the same time.
For example – if your website is predominantly light green and blue, then add in darker shades of either.
A dark contrast matches your website’s main colours. But it doesn’t look repulsive. The contrast sets it out from the rest of the site!
Aspect ratio
The right ratio maintains the quality of your buttons.
Are your buttons too tall or short? Does the text in your button look wavy and unclear? And how about the colours, are they fading away in certain dimensions?
Padding issues
Button design doesn’t stop with colours and dimension.
Padding matters too. This is necessary so that parts of your buttons don’t get covered by content, thus making them difficult to click.
3. Overlapping content
While small buttons are irritating – overlapping content is a nightmare.
Overlapping content comes from bad CSS coding. It happens when you mess up a ‘float’ or ‘position’ property on specific elements.
It could be anything, from an entry post to a sidebar widget.
Now on phone, those are 100% noticeable. And usually, getting past them requires scrolling acrobatics.
As you can tell, no mobile user will bother scrolling. They’ll just leave your website!
Why this occurs
Some website owners opt for quick CSS fixes to solve position issues.
For example, let’s look at navigation bars. Instead of properly positioning those (with the right dimensions – in the right footers/sidebars), they forcefully fix them with ‘absolute’ properties.
They’ll then do something similar with buttons in their navigation.
Now, the result may be fine on a laptop. But when it comes to mobile, expect the position to drastically shift.
You might find your navigation dragging off, thus overextending your website width. Or, it might popup in the middle of a page.
And, this example doesn’t just occur with navigation. It occurs with many design elements too (such as logos).
So keep that in mind.
What’s the solution?
Just get a professional web designer.
Sure, you’ll pay extra money. But they’ll fix your scripts for mobile compatibility. They can fix errors in overlapping content for ‘flexible’ positioning.
And flexibility is what you need for mobile optimisation. After all, you’re dealing with multiple screen sizes, from 3 inches wide, to 16 on laptops!
4. Fonts and images
Similar to buttons, make sure that text and image sizes are comfortable. You need anywhere from 6 to 12 words across a phone’s screen. And images should fully appear on screen, without having to scroll over.
Otherwise, you’ll need to resize.
How do I resize?
Before answering that, we’d like to get into a few metrics. That is, absolute vs. relative font measurements.
Metric changes
In HTML, there are two ways to measure text size. You do so by pixels (standard) or by EM.
Pixels are hard measurements. The font display on a laptop is the same on a mobile phone. And this makes them impractical for mobile optimisation.
However, EMs are relative.
Relative to what?
EM measurements put minor fonts in a ratio to larger subheadings and headings.
Basically, if you alter the font-size of a heading, anything with an EM value gets altered in relation to it.
And this is excellent in mobiles. Because now, you don’t need to “manually update” fonts on every single text-type!
Images
Often, you need to scale down pictures.
Now, this doesn’t compromise quality. In fact, it might enhance the quality of certain images. But the problem lies in the coding.
The solution to this is in CSS. That is, you need to size your images so that they’re ‘relative’ to the browser size.
Your images shouldn’t have ‘fixed numerical values’ as dimensions.
Also, along with images make sure you have all your videos scaled correctly. Not using video? Checkout this guide on why you should be. Video Marketing Stats
The last items on our list. Here, your focus has less to do with colour and size. And it has more to do with positioning.
After all, navigation and inbound links are how you keep traffic. And if those aren’t properly displayed on mobile, then expect traffic to disappear.
But no worries. There are some rules to keep in mind when designing a mobile user’s navigation. Those are …
Conspicuousness
Make sure your navigation is easy to see. Don’t tuck it away at the bottom of the page. In fact, it’s best if you keep it right under the header!
Keep it horizontal
Speaking of header navigations, keep it horizontal.
This doesn’t interfere with the content reading experience. Visitors can simply swipe across to see the menu, before swiping back to where they were reading!
Make it scroll with the page
On the computer, this is optional. But on mobile, it’s a must.
This lets your traffic page hop pages quickly, and without any scrolling. They’ll appreciate you for it, and they’ll stick to your site!
First Published Flying Solo
