*14-day free trial. No credit card required  Get started
7 best practices of mobile-friendly websites

7 best practices of mobile-friendly websites

 

Mobile-friendly website practices - are they really necessary? The short answer: yes. 

 

In 2018, Google officially announced its Mobile First Indexing, or ranking websites based on their mobile websites, not their desktop version, first. At this time, a study by Blue Corona found that companies who did not prioritize mobile-friendly versions first suffered 50% or more drops in traffic.

 

In addition, Q1 of 2019 - January 1st through March 31st - saw that 48.7% of global website traffic came from mobile devices. That should not come as a surprise, since internet usage statistics also found that 52.2% of global website traffic in 2018 came from mobile devices, surpassing desktop searches for the first time.

 

In 2013, that number was just 16.2%, meaning that in the past six years, traffic from mobile devices more than tripled worldwide. Observing this fact Google began to reward mobile-friendly websites with higher search rankings, and penalize those that were not.

 

Then, in 2018, Google officially announced its Mobile First Indexing, or ranking websites based on their mobile websites, not their desktop version, first. At this time, a study by Blue Corona found that companies who did not prioritize mobile-friendly versions first suffered 50% or more drops in traffic.

 

To help develop a mobile-friendly website, we’ve compiled this list of best practices. As a note, keep in mind that some of these elements are accounted for in Ucraft’s website builder - so think of this list as more of a “checklist” of tweaks to compare your website against. 
 

 

 

Starting out right

 

site with responsive design

 

GitHub on 3 different devices

 

 

First off, what does it mean to have ‘mobile-friendly website?’ Google defines it as:

 

  • Avoiding software not often found on phones - for instance, Flash. 
  • Using legible, large text - at least 12 pixels on at least 60% of the page.
  • Employing content that auto-adjusts to screen size.
  • Adding links that are far enough apart to click on each separately.

 

 

Essentially, a mobile-friendly website is an intuitive and easy-to-use experience to visit on a smaller screen.

 

Here are three primary techniques to make your website mobile-friendly: 
 

 

1. Responsive Web Design

 

Using this technique means that your HTML and your URL remain the same when visited on mobile. Everything about your website simply adjusts to screen size.

 


2. Dynamic Serving

 

Dynamic uses the same URL no matter the device, but the version of code is different depending on the device.

 


3. Separate URLs

 

Finally, this technique creates an entirely separate URL - typically something like: www.m.yourdomain.com or www.yourdomain.com/mobile

 

 

Google itself recommends Responsive Design. Here are some advantages: 
 

  • The layout is flexible, detecting screen size and orientation automatically
  • The UX is similar across all browser and device types
  • You only need one URL

 

Bonus: if you use Ucraft, you can easily choose templates that allow you to craft your website around this technique.

 

That said, let’s dive into our ‘checklist.’
 

 

 

#1: Design with mobile-first in mind

 

Since Google uses Mobile First Indexing, it makes sense to use this technique yourself . While most visitors want to see similarities between your mobile and desktop versions - like content, colors, and themes - they will still expect the structure to be different.

 

Basically: stick to the essentials only. What is relevant?

 

While you could show many different navigation tabs for a desktop site, it is recommended to stick to around four to eight items for a smaller screen. Space can be saved by eliminating the ‘home’ tab completely.

 

Instead, place a logo at the top-left of your mobile screen, and make it so that it takes users to the home page when they tap it. 


 

 

mobile friendly website

 

Smashing Magazine across 3 devices

 

 

If you need multi-level navigation, keep it simple with a vertically-oriented dropdown functionality. Skip Flash - no matter how tempting - as it may not be available on your visitor’s phone. Otherwise, those visitors won’t get to enjoy any special effects you create with the plugin.

 

Also be careful with pop-ups. They can be hard to close on mobile devices, which can result in friction in your visitors experience.

 

If you take these tips seriously and design your website with a responsive mobile structure in mind, your mobile features will transfer over to desktop, making them look the same.
 

 

 

#2: But if you design it second - do your research

 

If you avoid designing your website with mobile in mind initially, change is a little more difficult, but not impossible. Your goal here is to start by gathering data using web analytics tools and UX testing.

 

Some questions to ask: What content do visitors find most important? What do they ignore? What path do visitors usually take through your website?

 

Further, if you use ads for revenue - do not remove them. But if they are a secondary method of profit, consider eliminating them on mobile to keep your website fast.

 

Lastly, run speed tests on different elements of your website. If there are any elements that take a long time to load, consider whether they are really important to the content of your website, and whether they can be reduced or eliminated completely.

 

For reference - research by Google found that 53% of visitors will leave your mobile page if it takes longer than 3 seconds to load.

 

Your next step is to map out your content paths. For those of you who don’t know, a content path is simply a series of experiences that take your visitors to a desired outcome (i.e. eventual sale) - you can dig into a deeper explanation and take a look at some examples here. Once these have been wireframed, you can start piecing them together with Ucraft’s templates. 
 

 

 

#3: Write content with mobile in mind

 

That leads us into the next best practice tip - writing content with mobile in mind. A common mistake is to simply squish content or reduce font sizes to fit smaller screens.

 

Rather than awkward formatting or endless zooming and sliding around the screen, ask yourself what content is most important and t how much of it can be easily read and digested on any screen size?

 

Here are a few suggestions to get started:
 

  • Add in large, descriptive buttons: Apple suggests a size of 44x44 pts. 
  • Increase font size: Choose at least 16px, with a line height of 1.5. 
  • Skip mouseover and hover effects.

 

 

 

#4: Don’t forget navigation

 

navigation of a mobile website

 

 

 

In addition to minimizing items listed across the top of your website, keep these other factors in mind to help visitors easily navigate across a mobile device.

 

Very Important Pages

 

Give visitors the most important web pages first. If you have a website built and have access to traffic analytics, take advantage of it. Where are visitors going the most? What pages aren’t they visiting? In addition, ask yourself a few more questions: 
 

  • If you’re using a silo strategy, which category pages are the top ?
  • What actions do smartphone users take most often on your website? 
  • Which pages on your website take visitors to what they came for in the quickest and most straightforward way?

 

Let your answers guide you in creating new content in an educated manner. 

 

 

 

Search = Navigation


If your website is complex - like a large eCommerce site with many categories of products - consider including a search box rather than additional drop-down menus. So, setup your search bar different additional search terms and test it to ensure it works.

 

 

 

Navigation should be intuitive


All the work you’ve been doing so far has been to make your website intuitive and easy=to-use. But further, keep menu language simple and intuitive. Some examples include adding a magnifying glass next to your search bar to make it clear what that feature is for. A few stacked lines can indicate a menu. A shopping cart can also indicate what the visitor has ready to buy. 

 

 


Don’t forget multiple screens


Your most interested visitors will likely visit your website repetitively and on multiple devices. So, keep your colors and themes the same, no matter the device.

A few more questions to consider: 

 

  • Can your visitors find your essential information, like address, phone number or email, easily?
  • Should you include a “call” button or store locator on your website?

 

 

 

#5: Optimize images to boost speed

 

optimized images in mobile site

 

 

Your images need to load quickly to avoid slowing down your website’s loading time. To accomplish this, you need to optimize your images for mobile through either: 
 

1. The old method: Scale the images through manipulating code. This keeps it the same file size, but allows it to scale in size with the screen. But, this sometimes still results in longer load times. 
 

OR


2. The newer method: Scale the images using HTML markup. This stops the visitor’s browser from downloading larger images than necessary. But, not all browsers can support it yet. 
 

 

There are easier things you can try, too. For instance, when selecting images, pay attention to the file size, consider the format (i.e. JPG or PNG), resolution, and file name. Reduce as much as possible without destroying quality.

 

 

 

#6: Boost speed by reducing HTTP requests and combining files

 

When a visitor lands on your website, their browser will send a request to the server for the files it needs to be able to load the site - and each and every file needs its own request. This happens every time they visit a new page. The more files needed, the longer the page will take to load.

 

Naturally, you would think reducing the number of file requests as much as possible would be the solution - and you would be right. But the dichotomy to this is that if you reduce the number of HTTP requests down to just one, it will be huge, resulting in a noticeable increase in website load time. Using smaller image sizes is a good place to start.

 

 

 

#7: Test your website

 

mobile website speed test

 

 

So by now you’ve done a few things: 

 

  • You’ve put together your website using Ucraft’s templates with mobile in mind; 
  • You have written your content with different screen sizes in mind; 
  • You’ve made it touch-friendly; 
  • arranged navigation; and 
  • You’ve chosen smaller images or played with code. 

 

That means you are ready to go live, right? Not quite.

 

Next is arguably the most important step: testing your website for mobile-friendliness. The simplest way to do this is to use Google’s Mobile Friendly Test. Once you publish your website, you can pop in your URL and Google will run a test with its “Googlebot smartphone.”

 

You’ll get a rating, in addition to the option to click through and see if there were any page loading issues. Here, you will be given a full list of pages with the load errors that showed up.

 

In addition, you should use other testing tools, like Browserstack and Web Developer. But the best way to test your website out for mobile-friendliness?

 

Real life testing. Using a real device gives you the most accurate way of gauging how your mobile site will respond in reality. Grab as many different devices as you can and visit your website on them: iPhone and Samsung smartphones, iPads, Tablets, etc.

 

When you do so, keep a checklist in mind: 
 

  • How does the website look on each device? Great, or less-so?
  • Are there any bugs? Which devices, and what kind?
  • Is the UX friendly? Are you able to easily tap the button you want without suffering from “fat thumb” syndrome?

 

Of course, there are many devices out there - cost and time investment can make it impossible to test them all. If that’s your case, use the tools linked to above or try out emulators or simulators - anything within your resources to ensure mobile-friendliness.

 

 

Conclusion

 

Given research, it’s integral to design your website to be mobile-friendly. Google ranks websites by judging their mobile-friendliness , and people use mobile devices more than desktop to access the internet. And with so many different screen sizes, your website needs to be capable of adjusting to each one.

 

So to summarize our “checklist” for a mobile-friendly website: 
 

  • Go with a Responsive Web Design if possible. It will keep your site interface the most similar across a wide array of devices and maintain a single web address.
  • Focus on designing for mobile first - do that, and the desktop version will take care of itself.
  • When putting the site together, increase your font size, skip mouse-over type effects, and keep buttons large and separate so they’re easy to tap.
  • Don’t forget to optimize images and combine file to reduce load time.
  • Lastly - test your site. Use real devices when possible. 

 

Run through, test, and tweak these things and you’ll be well on your way to a mobile-friendly website - and higher Google rankings. 

 

 

08.08.2019