Five Tips for Better Mobile Websites
More and more users are navigating the Web with their smartphones or tablets. In Germany, the share of mobile surfers in the total volume is currently at about 42 percent (as of 10/2017), and the trend is rising. It is therefore all the more important to adapt to the changing environment as operator of a website and to offer websites optimized for mobile devices. Here are five tips to overcome the challenges of designing a mobile-friendly platform and avoid potential pitfalls.
1. Reduce the file sizes
The less data has to be transferred from the server to the device, the faster the page is displayed to the users. Especially with the often slower transfer rates on the move, this can make a decisive difference: According to a Google study, about 50% of all mobile users break off the loading of a website after just three seconds of waiting time. But even in the ranking of the search engine Primus Google has another advantage, as the loading speed is also included in the calculation of the placement. How to optimize a website effectively, Google reveals with the analysis tool Page Speed Insight.
2. Manual browser switch instead of a responsive layout
This error is still being made on many mayor platforms like Bild.de or Focus Online: After the page is loaded for the most part and the content already appears on the screen, a script slides in between asking if you want to keep the default layout or want to switch to the mobile layout. Such manual browser switches confuse the users unnecessarily, delay access to the content and also ensure higher termination rates (here you can refer to the mentioned in point one Google study). Better is a responsive layout, which automatically adjusts the screen resolution and does not require any interaction on the part of the user.
3. Avoid using overlay popups
Overlay popups are often a nuisance due to small buttons, long loading times or unnecessary content, especially in the mobile environment. It does not matter whether you want to make users like their own Facebook presence or sign up for a newsletter: even if they work for these purposes, overlay pop-ups inhibit interaction with the content of the website and, through their obtrusive form, have little confidence in it. Indeed, according to a study, perceived trustworthiness correlates strongly with the willingness to buy from a provider, follow his advice, or disclose personal information. Therefore, it is advisable to integrate pop-up content into the layout to give users a user experience without artificial hurdles.
4. Use the entire display surface
It’s all too tempting to point out your own app or social sharing features using fixed areas at the top or bottom of the site. In combination with a menu bar at the top and the area used by the browser and OS, the content on smartphones is in some cases less than 50% of the available display space. Less space for content means that the flow of reading is unnecessarily inhibited and you are in a dilemma: Is the body text readable, i.e. big enough, just a few lines fill the entire screen area. However, the use of much smaller fonts is not an option, since legibility also suffers here. Avoid this dilemma by eliminating fixed areas, these can also be placed over the header (App-Link) or under an article (Social Media Sharing) and create more space on the display.
5. Test your layout
A central point is and remains an extensive testing of a mobile website on different devices and browsers. Tools like Ghostlab or Browserstack can be very helpful here, but the self-testing of a platform still show the smallest differences in layout and function. Points that may be relevant when testing a mobile website include:
- How fast does the site load on different high-performance devices? (Bullet point system resources)
- Is interruption-free navigation / scrolling also possible on older devices?
- How fast does the page load on slower (2G, 3G) connections? (Always keep in mind the 3 second rule)
- Is navigation easy? (For example, are links recognizable as links?)
- Are the possibly used icons self-explanatory?
- Are all texts easy to read?
- Is it easy to zoom in on the page?
- Can processes such as registrations, comments or purchases be completed on all devices until the end?