Mobile friendly - How do I create a mobile optimized website?

Today, it is no longer enough for a website to somehow display itself on the desktop of a mobile device. Visitors who visit a website from their tablet or smartphone expect an experience just as brilliant as when browsing from their home PC. That's why mobile website builder has become so popular.

illustration frau tippt auf handy um eine website zu besuchen

In addition, Google has been including the optimization of websites for mobile devices in its rankings since the beginning of the year. This means that Google gives more importance to websites that are displayed correctly on a wide variety of devices and are consequently called up more frequently from these devices. The reward is a better ranking in the search results.

Websites that are not "mobile friendly", on the other hand, have to make do with a lower ranking. In extreme cases, they may even disappear from the search results altogether.

Important features of optimized websites for mobile devices

With regard to the optimization concept and programming of websites that are to run perfectly on tablets and smartphones, the following special features must be taken into account:

  • The displays of mobile devices are comparatively small.

  • Navigation is not done with the mouse, but by touchscreen.

  • As a rule, the Internet connection is slower on the move than on a home computer.

  • Depending on the end device, plug-ins such as Java or Flash may either be switched off or not available from the outset.

Therefore, not only in the interest of good Google acceptance, but also in terms of user-friendliness, it is important that the website versions for mobile devices are reduced to the essentials, lean and clear.

illustration frau wählt app auf handy aus

Essential points for mobile website optimization

Layout:

The design of the Head (header area) including the logo must be implemented in such a way that it looks good on a small display. In order to maintain the requirement for easily readable text, the font of text contributions must not be too large, but also not too small. A single-column, linear layout from top to bottom is generally recommended.

Photos, images, graphics: The dimensions or file sizes are to be adapted to the longer loading times. This means: small, yet easily recognizable representations are preferred.

Website content:

The focus is on content, clear presentation and added value for the visitor. Everything that exclusively benefits the site operator, such as tracking scripts or advertising, should be reduced to a minimum. It is best to disable these features altogether. Also unimportant accessories, such as background sound or animations rob memory space, increase loading times and should therefore be omitted.

Navigation:

Menu bars should be placed above the content for space reasons and reduced to the most important items. Because the end device is operated via touchscreen and not with the mouse, nesting and fold-out menus do not work. Therefore, in the spirit of "mobile friendly", it is better to do without hover effects altogether.

Source code:

To optimize loading times, the HTML code should be written as leanly as possible. If the mobile website cannot do without CSS and Javascript, it is highly advisable to outsource these features to an external file.

Mobile friendly - automatic optimization for everyone

Anyone who thinks that optimizing websites for cell phones, tablets and the like requires special training and a great deal of expertise is mistaken. There are now ingenious construction kits on the Internet, with the help of which private and commercial homepages can be created completely from scratch, sometimes free of charge, and immediately optimized for the various display sizes of mobile devices.

Even the mobile friendly optimization of already existing websites is possible without any special programming knowledge. After completion, all versions are guaranteed to be Google optimized, so that nothing stands in the way of a good ranking.

The procedure is very simple:

  1. Call up the website of the construction kit on webme.com

  2. Enter your own e-mail address.

  3. Set and enter password.

  4. Choose the name of the homepage.

  5. Log in

  6. Select design template.

  7. Upload individual content, such as logo, photos, videos.

  8. Set fonts.

  9. Done.

  10. The optimization for smartphone, tablet & Co. runs automatically in the background, SEO included. Experts also speak of "Responsive Design" in this context.

Ready to start your own website?