Optimizing the mobile website What to watch out for [+ infographic]

In the old days of the internet, before the mobile website existed, web designers always had to make sure that their pages weren’t too heavy and could be displayed on all screens. This not only meant doing without one or the other technology, but also that the page width was based on the width of the screen resolution 800 × 600 still used by many servers and also had to be very careful that not too many and not too large images were used.

Over time, Internet access became faster, the screens wider and some technologies such as Java and Flash established themselves, which one could then assume to be normally available.

Now that web designers have been able to afford to create more opulent websites for a number of years, there is now an opposing trend: As more and more people have smartphones and other mobile devices, websites are being viewed with such devices more and more frequently. Since these are less powerful than today’s common PCs and laptops and their associated screens, the designers of Internet sites now have to worry about whether their work is displayed correctly and, above all, legibly for all viewers.

EXTRA: Mobile Conversion – 4 Strategies for Optimization

Smartphone or laptop: how does the visitor view your website?

First of all, you should determine whether the visitor is using a smartphone or a similar mobile device. In this case, he can then namely be forwarded to a version of the website that has been specially optimized for mobile devices, which can then be optimized specifically for such without any lazy compromises.

Advantages of an optimized version of your website:

  • Visitors from mobile devices can access all information
  • Visitors to desktop PCs or laptops are offered a website that uses the current technical possibilities of landline access and modern desktop computers.

Short loading time: More important than ever!

Particularly annoying with mobile surfing is the low transmission speed, which is actually available. The providers of mobile tariffs advertise smartphones with decent transmission speeds. On closer inspection, however, one finds that the specified high values ​​always only apply to a certain – in many cases ridiculously small – data volume, which of course is quickly used up. Then it continues for the rest of the month at a pace reminiscent of the times of the analog modems.

Since the “weight” of a website is largely determined by the number and size of the images on it, this is an important starting point for optimizing a website for mobile devices.

Since smartphones have a very small screen, the dimensions of images must of course be selected correspondingly smaller. This will automatically make the files smaller. In addition, if the image is smaller, it is less noticeable that the quality has deteriorated due to higher JPEG compression.

Google test: how fast is your website?

Google Tool: “Test My Site”

This free offer from Google checks the speed of your website on mobile devices and gives tips for optimization.

Who reads long texts on the cell phone? – No one!

While text is not an excessive factor in the amount of data that must be transferred to display a page, it does play a role in optimizing a website for smartphones. Most people are reluctant to read long texts on the screen. Of course, this is especially true for the small screen of a smartphone. Therefore, you should not only make sure that the size of the characters matches the size of the screen, but also that texts are not too long.

Audio files are also relatively large.

Therefore, you should also avoid sound effects and background music on pages for mobile devices.

EXTRA: Relevant content – the ranking criterion for Google

Are usability functions used sensibly?

Many of the technologies we use on websites today don’t work on smartphones. Above all, Flash does not work on the iPhone, iPad or iPod. If this technology is used, for example to display videos, Apple users are automatically excluded.

It must also be noted that mobile devices are typically not operated with a mouse but with a touchscreen. Therefore, for example, Hoover effects are pointless. The drop-down menus that are widespread today are also unsuitable for mobile devices. Instead, use traditional link bars.

Our book tip for the topic:

Responsive web design: concepts, techniques, practical examples

Hardcover: 524 pages Publisher: Rheinwerk Computing Edition: 3 (May 29, 2017) Price: € 39.90 Rated 5 stars at Amazon View now!

Google: The basic rules for mobile web design

https://www.slideshare.net/slideshow/embed_code/40242420 Principles of Mobile Site Design by Google from Burak Bakay

Don’t forget to adapt the layout!

Different screen formats of the end devices

When it comes to the layout of the pages and the navigation, mobile devices tick differently: While the screens of modern desktop PCs are wider than they are high, the display of a smartphone is portrait format. Therefore, the three-column layout that is widespread today is by no means suitable for such end devices.

The latest technology standards

As far as interactive pages are concerned, one should stick to the age-old rule for technical systems, which says that the complex technology should always be installed in the control center so that the users of the system can get by with the simplest possible devices. This means that PHP or CGI should be used instead of Java Script or Java if scripts are required.

 

Conclusion: The mobile website is not a trend

Designing websites for mobile devices does indeed impose a number of annoying restrictions on network users. Nevertheless, as a web designer you can hardly avoid checking websites to see whether they also reach mobile surfers, as surfing with mobile devices has become very important. A version that is correctly displayed on both a desktop PC and a smartphone will therefore always be more or less a minimal version.

Leave a Reply

Your email address will not be published. Required fields are marked *