Mobile optimization - customize your site for all your devices

1. Why do I need a mobile optimization ?

How many of your customers surf on mobile devices (mobile phones, tablets)? You should get to the bottom of this question. A mobile optimized website not only convinces your visitors, but is also an advantage for your Google ranking.

For you, this means that you should primarily deal with the issue of responsiveness for two reasons: Usability and search engine optimization.

2. Where can I see how my website currently looks on different devices ? What do I have to keep in mind ?

2.1 Switch view

To see what your website currently looks like on the various devices, you can simply switch to the appropriate view. Simply click on the PC, Tablet and Mobile View icons in the top left corner of the title bar.

The preview views are not always 100% accurate, since the font size in the browser, the font selected in the browser or general features of the browser can lead to different results. 

For security reasons, you should therefore ideally always access the website from a real end device after major changes.

2.2 What did I have to consider in general ?

The doo website editor makes most adjustments for an optimal display on mobile devices itself. For example, whenever someone enters a website, doo automatically queries the respective device (especially the size and available resolution of the device) and adjusts the website automatically to the required specifications.

It is important that not everything is or can be adjusted automatically. For example, it is advisable to manually adjust banners, menu bars (especially for mobile phones) and oversized text fields as well as images for the respective page. Please note that changes apply to all devices except in a few exceptional cases. For optimal results you have to copy elements and show or hide them on different devices.

3. How do I choose a suitable website design ?

3.1 Superordinated website design/layout

To set an overall design for your website and devices, click on "Design" in the left main menu and then on "Site layout".

Here you can now select different designs that have an effect on the menu and navigation structure. The structure for PC and Tablet is very similar and if the same design is selected here, changes are automatically applied to both views.

An exception is the mobile phone - here the design is always to be considered completely separately.

3.2 Menu and navigation structure mobile phone

For the mobile phone view, there are most of the design choices - these primarily affect the placement of the navigation bar here.

Changes in the header or footer are not transferred from PC/Tablet to mobile phone, and also not the other way around. This means that for mobile navigation all changes must be made directly in the mobile view. It is recommended to work with other, smaller versions of images or logos than on the other pages.

A lateral navigation structure is also recommended, which is only opened by clicking, since mobile phone screens are usually much too small for strips in headers or footers, which can lead to confusion.

It should also be noted that an intelligent menu/navigation structure is only possible via the higher-level design and not via inserting the navigation bar element.

4. How to optimize my site for mobile devices ?

4.1 Hide elements on different mobile devices 

You want to edit an element (text field, image, etc.) because it does not look as you had hoped on one of the mobile devices, but do not want the changes to affect all mobile devices?

The solution is simple, but requires some steps:

• Copy the desired element
• Reinsert it above or below the original element
• Right-click on one of the elements, go to "Hide on Device" and select the device(s) where you want to hide the element.
  
• Now go to the second element and adjust the devices on which it should be visible accordingly.
  

Now you can change the view in the title list as usual and adapt the respective element perfectly to the respective end device without the changes affecting the other views.

4.2 General design tips & tricks
Ideally, banners and images of different sizes are used for each view (with the help of the "Hide" function), since only then can an optimal result be definitively guaranteed.

The exact size specifications can be found directly in the doo website editor.

Instead of large text fields, which look good on PC and Tablet view but not on the mobile phone view, you can simply work with pictures and a stored text.