Mobile-Friendly: Tips for a Successful Mobile Website

Why is Mobile Friendly Optimization important?

In 2013, only 16% were surfing the web on their smartphones. By 2018, more than half of all Internet users were using their mobile phones online: the number of mobile users tripled within five years. Of course, these figures do not mean that users are exclusively using their smartphone, but it clearly is becoming the preferred device for internet use, alongside desktop PCs, notebooks, game consoles and smart TVs.

You could argue it doesn’t really matter how people are surfing the internet, as long as they get to your site. But, mobile internet use is different from PC surfing. On a mobile device, users don't have a keyboard or mouse, and they have a much smaller screen. Depending on where you are, the mobile internet connection to your smartphone may be much slower than your broadband connection.

This means that mobile internet users appreciate short loading times and easy-to-use devices. Mobile optimization therefore primarily means good UX, content optimization and technical optimization.

Mobile websites are not only important for satisfied users, but also for Google. Since 21 April 2015, Google has been showing how important mobile optimization of websites is. Since then, "mobile friendly" has been a ranking factor. Just one year later, Google once again optimized its "Mobile Update" (aka "Mobilegeddon"). Page Speed then became a ranking factor for mobile websites in 2018. In the same year, Google launched its "Mobile First Indexing". Since then, the mobile version of a website is indexed preferentially.

Your users and Google show you why your website should be mobile-friendly. And now we'll show you what's important for mobile optimization.

Is my website already mobile friendly?

On the market, there are now numerous free and paid tools that can help you check whether your website is mobile-friendly. For example, you can do a free website analysis with Ryte.

Figure 1: Mobile Insights in Ryte's Single Page Analysis

If you're not sure if your website is mobile friendly, you can run Google's Mobile-Friendly-Check.

Figure 2: Mobile friendly test with Google

Basics for your mobile website

In practice, three variants are usually used for mobile-friendly optimisation.

1. Responsive Web Design (RWD)

This variant is a state of the art technique for mobile websites. The HTML code is the same for the desktop page as well as for smartphones. CSS is used to adapt the content and layout of the mobile page to the screen of the mobile device.

The advantages: The effort for the page maintenance is low, because you only have to maintain one version. There is also only one URL, which is suitable for all types of mobile devices such as smartphones or tablets, which in turn saves resources for the Googlebot. No redirects are required to get an optimized view for that device. This significantly reduces loading times. In addition, such redirects can be error-prone, and can have a negative impact on the usability of the website.

The disadvantages: You cannot customize the mobile page or make it stand out from the desktop version.

2. Dynamic Serving

With this variant, mobile websites are delivered with a code (HTML and CSS) tailored to the user agent. The URL remains the same, regardless of whether you access the website with your smartphone or computer.

The advantages: There is only one URL for all devices and you can define the specifications for the corresponding output device very precisely on the basis of the user agent.

The disadvantages: The output of code variants means that you have to do more page maintenance and, above all, pay attention to many details when making changes.

3. Mobile-optimized subdomain

In this case, the mobile page has its own URL that corresponds to the URL of a desktop version. The content on the mobile website can be the same as on the desktop URL, but does not have to be. Usually, two different HTML codes are output. On the desktop variant and the mobile pages, rel=alternate tags are inserted to refer to the other version.

The advantages: You can optimize the mobile page perfectly to the output device.

The disadvantages: The programming and maintenance effort is significantly higher than with the previous options. You have to maintain two pages.

Google itself recommends responsive webdesign as a solution for mobile SEO. These are the main advantages of responsive web design compared to the other two options:

• Less maintenance effort

• One URL for all devices

• Very flexible, as the website is basically suitable for many different output devices

• Danger of incorrect configuration lower

• URLs are easier to share

• the Googlebot saves resources

How to show Google that your site is mobile friendly

When crawling, the Googlebot can recognize whether your website is mobile friendly:

Alternatives to the mobile website: PWA, AMP & Apps

Progressive Web Apps (PWA) or Accelerated Mobile Pages (AMP) are alternatives to the preferred responsive web design. These pages are mobile friendly from the ground up and offer several advantages.

AMP and PWA both have a very slim source code. While AMP can convince above all by its speed, PWA offers functions like native apps. For example, these can be stored as icons like an app on the mobile screen. You can find a step-by-step guide to AMP here.

Both variants have the disadvantage that they cannot be easily individualized in comparison to responsive websites.

Apps are usually more flexible, since they are geared to the different operating systems of the individual end devices, and can therefore use a number of features of the corresponding device. However, developing an app requires more internal resources as well as costs.

Page Speed Optimization for mobile friendly Websites

There are many ways of improving the page speed of mobile websites:

• Remove JavaScript or CSS which blocks rendering.

• Use browser caching. Constant elements such as CSS for the layout are cached in the browser's cache. They then do not have to be reloaded every time the page is called up again or there are further clicks on the page.

• Compress your images. We show you here how you can compress images.

• Remove unnecessary HTML code. For example, these could be comments that are no longer needed.

Content and layout tips for your mobile-friendly site

The biggest difference between calling up a website with a smartphone or the desktop is the different screen sizes, meaning the page is operated differently.

In mobile optimization, you should pay attention to the following factors:

1. offer the user the content that is really needed. Ask yourself whether there is content on the website that you can do without, or that you can display more easily. Use short sentences. Important: Desktop = Smartphone - the websites should have the same content.

2. don't place touch elements too close together: your users will operate the mobile website with their fingers via the touch screen. If the space between individual controls is too small, the page is difficult to use because, for example, a finger hits two elements at once.

Tip: A distance of at least five millimeters between touch elements is recommended. Each element should be at least seven millimeters high.

3. Format input forms best with relative sizes: Input fields for addresses or other data should adapt to the screen. The input fields should be as large and clear as possible on a mobile device so that it is easy for the user to make entries and thus get to their destination more quickly.

4. use as few different fonts as possible: the more uniform the typeface is, the better text can be read on small screens.

5. Pay attention to a sufficient font size: Google itself recommends font size 16 as the basis. This is defined in CSS pixels. The definition of the CSS class for the font size can look like this:

body {font-size: 16px;}

Möchtest Du weitere Schriftgrößen verwenden, können diese dann in Relation zur Basis angegeben werden:

.small {

font-size: 12px; /* 75% of the baseline */

}

If you are using a responsive mobile website, you are at an advantage, because the viewport tag displays pixels independently of the output device.

Common errors with mobile-friendly optimization

1. Blocked JavaScript, CSS and image files:
   JavaScript, CSS and image files are not indexable for the Googlebot: If important files are blocked by robots.txt, the Googlebot cannot crawl your website correctly and therefore cannot index it correctly. Therefore, you should make sure the Googlebot can crawl all files necessary for rendering the website. With Ryte, you can test the robots.txt for free.
   

2. Not retrievable content:
   Some web designers still use Flash. However, this content cannot be played back on smartphones.
   

3. Incorrect redirects:
   Redirects don't work: This is especially true if you are using a mobile URL. Webmasters often forget the reference to the mobile version in the source code via rel=alternate.
   

4. Irrelevant internal redirects:
   Internal links should be checked regularly, and the website operator should pay attention whether they refer to the correct pages. Often, the mistake is made here to integrate links that refer to an irrelevant page, for example links on mobile pages that refer to homepage of the desktop website.
   

5. The images used are too large:
   If you forgot to compress the images on your website, this will have a negative impact on the loading time of your mobile website.
   

6. You forgot the viewport tag:
   In this case, users need to scroll horizontally to capture content, which has a very negative impact on usability.

You can download a comprehensive guide to mobile optimization as an e-book here.

Mobile friendly is only one part of search engine optimization

Even if you have now read a complete guide to mobile SEO, you should always keep in mind that mobile optimization is only one part of your SEO measures. Regardless of how the mobile website is displayed on smartphones or tablets, unique content with added value continues to count for users and Google. Despite or even with mobile SEO in mind, you should invest at least as much time in great content to achieve top rankings and inspire your users.