Mobile optimization: How should a website look on mobile

Mobile optimization is a modern, essential technique for creating a website. A website should look perfect no matter what device it is viewed on. This is all the more important as the use of mobile devices is constantly increasing.

In 2019, according to public statistics, more than 62% of Internet traffic comes from mobile devices. Unless you are in a niche and appear very exclusive, most people who visit your website use smart phones for navigation. As a result, a non-optimized website affects your website performance but also the public’s confidence in your brand. Where else do we say that Google considers mobile optimization one of the most important SEO criteria. Another reason to pay more attention to mobile devices.

The appearance of a website on mobile

Mobile optimization involves designing the website so that it can be viewed completely and correctly from phones or tablets. To be functional is not enough, it must behave naturally. That means to be designed for both mouse navigation and tactile navigation. All items are visible without leaving the screen. Fonts need to scale in order for the text to remain legible and the images to resize. Most importantly, the website must be loaded in a timely manner on any device.

A completely different design philosophy must be applied. Content on the laptop and desktop benefits from the width of the screen, while on mobile and tablets, the distribution is made by height.

Mobile First vs Mobile Only vs Responsive Web Design

There are three design philosophies within mobile optimization. Each appeared at one stage during the popularization of mobile devices.

• Mobile Only: There are those websites that have alternatives dedicated exclusively to mobile devices. For example facebook.com and m.facebook.com. It is a popular practice at the time of the emergence of smart phones and a somewhat primitive solution. We say primitive because it requires a double volume of work to maintain two individual websites. Redirecting a user as soon as they access the page will adversely affect the SEO score of the website.
• Responsive Web Design: It is the optimal solution without increasing the work volume while still satisfying all types of devices. The mobile optimization through Responsive Web Design implies that the elements and content have to be placed or replaced depending on the resolution. That is, the website automatically adapts and molds on the device. With a few rules created in CSS, it can be a fast and efficient method of optimization. At present, it is the most popular solution
• Mobile First: A different approach that has started to become more and more popular. The mobile optimization Mobile First implies that the entire website design is designed especially for mobile. The idea is simple: by designing the website for mobile right from the start, we satisfy over 70% of traffic, while any laptop or desktop will be able to display any mobile design. Although theoretically not a bad idea, problems start to appear when someone views the website on a monitor, whether it’s at the office or at home. These people will have a “dry” design that will not benefit from the large screen size. The dilemma becomes even more pressing when we think that 4k monitors are gaining popularity. Even TVs have started to be used for online browsing, even if they are a tiny segment, almost non-existent in traffic. However, high resolution laptops are a case of real use and more and more frequent.

Before deciding on the mobile optimization philosophy, you need to analyze the target audience and their browsing habits. The real fight takes place between Responsive Web Design and Mobile First Design. Mobile Only Design brings too many disadvantages to take into account.

How is mobile optimization done

There are many aspects to consider to make sure your website looks good on any device. We will list them all without going into too much technical details:

Positions the elements according to the resolution and orientation of the device. For a screen width between 240 and 768 pixels you have the phones. Here you have to take advantage of the screen height in both portrait and landscape mode. Tablets are between 769 and 1280 pixels. With the larger screen you can distribute the content on a maximum of 2 columns in portrait mode and a maximum of 3 columns in landscape mode. Obviously, the distribution also depends on the size of the elements, but we will assume that we are talking about text and large to medium images in an airy design. The content should not exceed the visible limits of the screen. Otherwise, Google will not consider the mobile optimization.

Resize items. Buttons and images must be proportionate on the mobile. A 1400x1400px image will not fit on a phone screen. Use relative units of measure, such as % or vw. These will be resized depending on the resolution or size.

Make sure the text and headings remain visible. Usually, the text size on the phone is smaller. A 40px headline is likely to come out of the screen on mobile if the word is too long. A 25px resize would be required to maintain the look and meet the mobile optimization. Do not place text on images! It will no longer be visible when the image shrinks.

The menu is replaced with a button. It is a classic behavior, frequently encountered. The menu is only displayed when the button is pressed. Either a side container opens or it appears under the button depending on the size.

Keep a sufficiently large distance between the elements with interactions. Do not place too close to two buttons or two items with links. Also make sure they are large enough to be easily used. Imagine a user with thicker fingers using your website.

Do not use items that do not resize or hide them on the phone. Here the mobile optimization has in particular view the tables. Depending on the screen size and word length, only a certain number of columns will fit on the screen. Maximum 4. If you really need it, you can keep the tables only on desktop and use lists on mobile or similar placement. Also, if you use Popup windows, make sure they can be easily and quickly closed.

Provide download links for embedded PDF documents. Although most browsers can play a document directly on the website page, on mobile the situation is not as cheerful. Even if you use a library or a module that displays as much as mobile embedding, browsing will be poor. Display a download link on your mobile. Thus the document is downloaded to the device and viewed with a native, optimized application.

Make use of the benefits of the device. Also part of mobile optimization is to make the most of the mobile device. For example, for carousels replace the arrow navigation with horizontal gestures on the screen.

Consider the target audience. This is not a technical criterion, but more philosophical and optional. Frequently, those who use the mobile devices are on the move, on the bus, on the subway, in a waiting room, sometimes even in the bathroom. Therefore, the time for reading is short. Use short, clearly segmented paragraphs so that the reader can easily return to the text without losing or forgetting its progress.

Navigation must be intuitive and natural on mobile. Users should not spend time looking for browsing methods but enjoying the content offered.

Uses compatible multimedia formats. Although modern phones and tablets can play a wide variety of audio and video formats, some formats are not yet or will never be compatible. A good example would be Flash elements or embedded pdf documents.

Sacrifice content, not the audience. If something does not conform to mobile optimization or the page becomes too long for touch scrolling, remove the content. The purpose is to satisfy the audience and increase your website traffic. Not to expose blocks of text and images for personal use only.

Optimize loading speed. A final but extremely important aspect. If a page takes too long to load, it will drive away a lot of visitors. A useful guide can be viewed here.

Google and Mobile Optimization

In 2015 Google launched a Mobile Friendly Update also called Mobilegeddon or Mobilepocalyse. It is an update to the search algorithm and a threat to non-optimized websites. In short, if a website does not comply with the mobile optimization, it does not appear on the mobile search results pages or has a very bad position. The pages are targeted. A page failing to conform will not penalize the whole website, just the page.

How is the verification done? Google frequently accesses your website through a robot and simulates a mobile device. It checks whether:

• The items come out of the screen.
• The text can be read.
• The loading speed is good.
• The buttons are far enough away
• It is easy to navigate

Fortunately Google has provided a tool for checking the optimization available here. Just enter the URL of the page you want tested.

Modern Web Design in mobile optimization

Web design is a constantly redefining art. It has no time to reach his full potential because something new always comes up. Born in the 90s, it switched from square monitors, poor internet and low resolutions to wide monitors, optimal internet and high definition resolutions in the 2000s. In 2010 it was reborn again with the launch of HTML5 and mobile optimization standards.

These changes can be, and often are frustrating. Evolution not allowing us enough time for improvement. So, now that we have many design techniques and styles, we don’t have enough space to expose them. As good as the design of a website is on a wide display, the equivalent on phones will be much lower. The visual impact has much to suffer from the lack of space. An impressive animation can lose detail when it is shrunk.

Who has to suffer? The end user, because he receives a standard, uniform and mediocre experience regardless of the website. The artist because his masterpiece will not be appreciated by the general public. Finally, the owner of the website because the means to attract attention are fewer.

Who has to win? People who do not have time for art. Business oriented people, who want flexibility and accessibility. People who are looking for the service or product and do not have time to admire the website. Time is essential for a large segment of people. They use phones and they do it many times on the go. Even in the absence of mobile devices, they would not have paid proper attention to the artistic techniques used.

What to do? The solution is simple! Use mobile optimization to satisfy all demographic segments. Delivers exceptional desktop experience and seamless mobile functionality.

Let’s create the ideal website together! Send us a message and we will contact you!