Mobile web: the common errors

'Mobile first' is an important phrase when it comes to modern web design. More and more people are using their smart­phones or tablets in addition to classic desktop computers in order to surf on the go. Even home-based surfing takes place in­creas­ing­ly from the comfort of the couch using a mobile device. Having a mobile site is important for a suc­cess­ful web project but having a mobile-optimized site doesn’t au­to­mat­i­cal­ly mean it has a good user ex­pe­ri­ence or is search engine optimized. We introduce the most common mistakes and explain how to avoid them.

These figures make it clear that the mobile web trend needs to be taken very seriously and not down­played by de­vel­op­ers. Mobile sites enable you to address new target groups and to connect visitors with your website. The goal, therefore, must be to improve usability and optimize your website for the ever in­creas­ing number of internet-enabled mobile devices. The mobile first approach takes this trend into account. Ac­cord­ing­ly, mobile sites, re­spon­sive designs, and apps are important — this article explains the dif­fer­ences in more detail here. In addition, mobile op­ti­miza­tion is an important ranking factor for search engines like Google. However, there are many pitfalls and mistakes that might occur when re­design­ing websites for mobile op­ti­miza­tion and these should be avoided.

The first and most basic error can happen when choosing the con­fig­u­ra­tion variant. There are several ways to make a website mobile: for example, using re­spon­sive design, using a separate mobile website, or using an adaptive layout. One of the most elegant solutions is a re­spon­sive design. Compared to separate mobile sites and adaptive layouts, Google prefers sites with a re­spon­sive design. Another advantage is that in­di­vid­ual devices and operating systems don’t need to be adapted to because the screens au­to­mat­i­cal­ly readjust. Website operators benefit since less effort is needed and at the same time, visitors benefit from con­sis­tent usability. The focus is on your target group and the questions: which devices and screen sizes are right for your visitors and, therefore, for your website? And: what kind of layout will give your visitors the best possible ex­pe­ri­ence? If the right con­fig­u­ra­tion option is selected from the start, many of the errors described later can be avoided. This is par­tic­u­lar­ly true for the more complex but preferred (from an SEO and usability point of view) re­spon­sive design variant. Modifying this variant is very expensive in many cases and re­launch­ing it is also cost-intensive. In addition, it is very important to note that a re­spon­sive design is not always the right choice for every project: very complex sites, which require large amounts of data, for example, run slower on mobile devices with a bad con­nec­tion and weaker hardware.

This leads directly to the next error source: the user interface. Mobile devices are usually operated by touch screens but if a bad decision is made regarding the graphical user interface (GUI), this can lead to con­sid­er­able im­pair­ments. This includes, for example, fonts that are too small, parts not being displayed properly, links that are too close together, or poor nav­i­ga­tion.

For a page to be displayed correctly for mobile, you have to define a display area. If you don’t, the default desktop screen width will au­to­mat­i­cal­ly be used on smaller screens. This means that anyone visiting your site will have to zoom in using their thumb and fore­fin­ger, which is a fail in the world of mobile web. The solution to this problem: in your document’s header, enter a viewport meta tag that tells the mobile browser the size and scale of the page. Google rec­om­mends the following code:

The in­di­ca­tion 'width=device-width' sig­nal­izes that the display width should be adapted to the device. The attribute 'initial-scale=1' has a 1:1 re­la­tion­ship between CSS and device-in­de­pen­dent pixels and ensures that the scale does not change when the device is tilted.

It is frus­trat­ing for your users if they can’t read the text easily or can’t read it at all. For the font to be legible on all devices, you should use relative font sizes that can be scaled with CSS. For the scaling on each device to be correct, the display area must be first defined, as described above. As the basic font size, Google rec­om­mends 16 CSS pixels. The remaining quan­ti­ties are scaled relative to the basic parameter. For example, this is done using the following CSS class:

The 75% of the basic font size cor­re­sponds to 12 CSS pixels. The CSS class 'large' cor­re­sponds to 125% of the basic font size or 20 CSS pixels. Despite defining relative font sizes, you shouldn’t overload the layout of your website with too many fonts and too many font sizes. This quickly overloads the page and makes nav­i­gat­ing un­nec­es­sar­i­ly complex. You should try to make it as easy as possible for users on the mobile web.

If you have ever used touch and swipe movements to operate a website on your mobile device, you will know from your own ex­pe­ri­ence how important it is that the controls are easy to use. If the links and buttons are too close together, it makes it very difficult to navigate the page since an adult’s fingertip is wider at 10mm than the standard mouse cursor. Therefore, clickable elements must be placed on mobile-optimized pages and be at a suf­fi­cient distance from each other as well as being large enough to find easily. If they’re too close, there’s the risk of clicking on the wrong link, which leads to the visitor becoming frus­trat­ed and po­ten­tial­ly leaving the site. For buttons, Google rec­om­mends a minimum width of 7mm or 48 CSS pixels.

On the mobile web, many pages are looked at quickly and answers are only searched for 'briefly’. The ad­jec­tives 'fast' and 'short' should, therefore, be taken seriously when designing your mobile site. Ac­cord­ing­ly, a mobile-optimized site should have an easy-to-find search function. It should be located centrally so the user just needs to glance quickly in order to find it. Search queries should also be completed with the auto-complete feature to make it easier for users to operate a touch-screen keyboard. In our Digital Guide, you will find more tips for a user-friendly search.

There’s nothing more annoying than staring at a blank page while you’re waiting for it to load. Loading times are known as 'con­ver­sion killers'. According to Kiss­met­rics, 40% of people will abandon a website that takes more than 3 seconds to load and just a 1-second delay in page response can lead to a 7% reduction in con­ver­sions. Users are becoming more impatient on the whole. Long loading times aren’t only a problem for online stores but any website you decide to visit might be in­ter­rupt­ed when you lose signal on the subway or in the wilder­ness, for example. Common errors regarding per­for­mance include:

• Un­com­pressed images and/or image sizes that are too large
• Too many images and other mul­ti­me­dia elements
• Messy HTML and CSS code
• Too much JavaScript
• Un­com­pressed source code 
• Too many HTTP requests
• Redirects
• Missing browser caching
• Slow servers

Most of these errors can be solved with a few in­ter­ven­tions. The Google PageSpeed Insights Tool can help you with this. With this tool, you can see how your website looks on various devices and get tips on how to optimize it. You can then take action in a more targeted way. For example:

• Compress images: in our guide, we explained how important com­pres­sion is. For example, you can use freeware tools or special browser-based ap­pli­ca­tions. You adapt the ap­pro­pri­ate image size with the 'picture tag' and @media. The file formats are: JPEG, GIF, and PNG. Al­ter­na­tive­ly, you can also use pure CSS, IconFonts, or SVG instead of images.

• Purify and compress HTML, CSS, and JavaScript code: there are specific tools for this. But even doing something so simple, such as deleting un­nec­es­sary spaces and moving JavaScript files to the end of the body, can work wonders. Here we introduce tools and tips for CSS.

• Use caching to relieve the webserver: if you store fre­quent­ly used files locally, you can sig­nif­i­cant­ly improve the loading time for recurring users. Pro­gres­sive Web apps also provide offline caching for better per­for­mance.

• Reduce the number of HTTP requests by pooling resources.

• Improve the per­for­mance of the content man­age­ment system (CMS).

• If your site receives a lot of traffic from abroad, a content delivery network is worth con­sid­er­ing.

• Ac­cel­er­at­ed Mobile Pages (AMP) can also provide better per­for­mance.

• If these measures are not suf­fi­cient, improving the hosting en­vi­ron­ment should help. Above all, large-scale websites should have unlimited web space and traffic. Also a hardware upgrade — such as switching to faster SSD memory — sig­nif­i­cant­ly increases per­for­mance.

The goal of Google is to make the content of mobile sites easier to access. Screen-filling in­ter­sti­tials, as in the example above, block the content com­plete­ly and should therefore not be used. Legally binding cookie guide­lines are exempt, however, as are subtly placed banners or login dialogs for non-public and non-indexable content.

Since the Googlebot indexes and renders a website’s contents, the bot should not be 'blocked' using robots.txt. This means that, like a normal user, it should have access to all CSS, JavaScript, and image files. If re­stric­tions are defined in the robots.txt, important content may not be rendered, which ul­ti­mate­ly results in a poorer ranking.

You can use Google Search Console to explore your site using the 'Fetch as Google' feature to see how it is crawled and rendered by a Googlebot. You can also use this tool to in­ves­ti­gate the robots-txt and see which elements might be blocked.

If you opt for a separate mobile site rather than a re­spon­sive design, there are some further potential pitfalls that your mobile-optimized website could encounter. This includes, in par­tic­u­lar, incorrect redi­rect­ing and 404 errors, which are only displayed on mobile sites, and not shown to desktop users.

In view of mobile web users, it would make no sense to create a specific mobile site, neglect it, and only offer 'slimmed down' content. It is a mis­con­cep­tion that mobile devices are only used on the go and for short search queries, gathering quick in­for­ma­tion: 61% of mobile web users actually use their smart­phone or tablet while lying on the couch and watching TV. This led to a study by inMobi. Even when a desktop PC is nearby, many users prefer mobile devices. If the same content and in­for­ma­tion can’t be found on the mobile site as on a desktop site, it’s frus­trat­ing and makes the user spend extra time searching: the user has to resort to the desktop version and has to contend with difficult nav­i­ga­tion (zooming, small links, hover menus, etc.). It’s even worse if the user can’t even find a link to the desktop version. They might give up and decide to use a com­peti­tor’s site that has a mobile version. Therefore, a mobile site should have all the important content and features available that the desktop site has.

You can also use redi­rect­ing that only works for certain devices or selected mobile operating systems: check whether your redirects work as well for all popular systems (Android, iOS, Windows), and adjust your server’s con­fig­u­ra­tions ac­cord­ing­ly. You can also use Google Search Console to help you identify incorrect routing.

Correct redi­rec­tions are also important if you discover that smart­phone or tablet users are receiving 404 error messages on their mobile devices, whereas desktop users don’t have this problem and are being shown the correct page. If a mobile version of the page is available, the user should always be redi­rect­ed to it. Of course, the mobile version of the page can’t report any errors. Better than not dis­play­ing any content at all is to refer the user to the un­suit­able page even though it decreases usability somewhat.