Agencja reklamowa – strony www, aplikacje, video, kampanie 360

Agencja reklamowa - strony www, aplikacje, video, kampanie 360

How to create mobile-optimized websites

Reading time: 8 min

The principles of creating websites “for mobile devices” have been a topic discussed for years, but from my experience working in various advertising agencies, I know that teams do not necessarily follow them. Theoretically, “mobile first” is as popular a term as “Content is King”, but it often remains just a theory.

In the article below, I will introduce you to the world of designing for mobile devices and tell you what these rules result from.

Why design with mobile users in mind

First, let’s define the mobile market. Research shows that the share of the mobile market in sales on the retail e-commerce market has increased globally from 67.2% in 2019 to 72.9% in 2022. This means that approximately three quarters of all transactions concluded on the retail e-commerce market -commerce, takes place via smartphone.

How to create mobile-optimized websites
The second very important issue is that over 60% of Poles use smartphones at least 5 hours a day, which is very likely to be where we will find them, and the overall share of mobile devices in Poland is 66% (source).

How to create mobile-optimized websites – where to start

I have always believed that everything is relative and only when we put a fact or a number in a specific context, we get a clear and clear picture that can be analyzed. Therefore, in order to define specific guidelines for designing for mobile devices, it is necessary to understand the context of the “mobile world”.

First of all, we should start by understanding the environment we are in and its characteristics.

The specificity of mobile devices causes some limitations. These may include, for example, issues such as: small screen dimensions, lack of precision of the mouse cursor, lack of the so-called “hover” which, when moved with the cursor, would allow displaying a hint about what is hidden under a given element or even pop-up notifications which, in the event of a poorly designed interface, often cause user irritation.

The second important category is the context of using mobile devices. We usually use smartphones when we are in a hurry, running or in other circumstances that cause us to be distracted. In such a case, there is no question of comfort and full concentration. The use of mobile devices also means that we spend most of our time with a smartphone in public places, among other people, and this also affects the way we use these devices.

The third key aspect is technological limitations beyond smartphones themselves. Problems with mobile network coverage and limited, more or less, Internet packages mean that websites load slowly, it is often difficult for us to determine whether there has been any interaction with the website at all, and users who are outside the Wi-Fi network often look with horror at the launches. video materials automatically or they “get hot” when they suddenly realize that they have been browsing TikTok or Instagram for several hours, while the smartphone has not connected to the home Wi-Fi.

Less is better

When following the design guidelines for mobile devices, you should pay attention to several key issues and, what is very important, understand that the success of designing according to the mobile first principle depends on the entire team. Starting from copywriting, through UX and design, ending with coding.

The first key aspect is the hierarchy of content and elements. Before we start designing the website and writing content, we should carefully consider its entire structure. Consider which elements are necessary and which do not necessarily have to be on mobile devices. Mobile users have limited time and attention span, so you need to provide them with key information, not necessarily a long story.

Jak tworzyć strony zoptymalizowane pod kątem urządzeń mobilnych

The second important issue is the simplicity and intuitiveness of navigation and interaction. Buttons on mobile devices should be large and intuitive enough for the user to know at first glance that a given element will trigger this or that interaction. It is also important that they are placed in places where no notification will be displayed unexpectedly.

Certainly many of you have also had situations that I encounter on a regular basis. You may have “tapped” something, but you don’t really know whether it had any interaction, whether something happened and what will happen next… Therefore, it is worth additionally marking this interaction, for example by adding a loading icon or a wide and noticeable progress bar.

Another important element is clear typography. Mobile devices are small, so we need to make it easier for users to read the content. Choose the right font size, set large line spacing, appropriate contrast and provide plenty of light, i.e. appropriately sized margins and paddings separating paragraphs and other page elements. Since we are talking about typography, it is also worth mentioning the arrangement of the text. Remember to avoid using centered texts, especially if they are longer.

Compact content

As I mentioned above. The key to properly designing websites for mobile devices is to define the right hierarchy, but does this mean that we should remove certain content completely? Not at all. We can hide them on mobile devices in several ways or rebuild them so that they do not make the page too long.

We can, among other things:

  • Block certain content from being displayed at lower resolutions
  • Swap the order of page elements
  • Hide the content under the “read more” button and expand it only to those who want it
  • Elements with a lot of photos, testimonials, opinions, testimonials, examples, etc. can be converted into horizontally scrolling carousels

When performing the above activities, we must remember what is the key – readability and transparency. Therefore, when using, for example, “load more” buttons, make sure that the message on the button clearly shows the user what will happen.

Jak tworzyć strony zoptymalizowane pod kątem urządzeń mobilnych

Keep the media under control

The weight and format of the images used on the website are a very important aspect. It has a key impact on the speed of website loading, which is extremely important in the case of mobile devices. Therefore, when designing a website, it is worth not only focusing on its perfect appearance in terms of content, UX and design, but also focusing on the proper preparation of assets for the front-end developer.

Example: a PNG file actually has the best quality, and at the same time weighs the most because it is not compressed. The question is, is this quality always so important? If we have texts on the graphics, yes, because compression will deteriorate readability, but if we save a photo or other graphics without texts as jpg, will we really lose so much quality? I don’t think anyone will notice this, and the profit in the form of a lower file size will be significant.

Fortunately, in this case, there are many inexpensive tools that can help us in this regard.

The proportions of the images are also important. When designing for desktop devices, we have become accustomed to wide panoramic images. Mobile devices, unlike them, are vertical, and therefore, widescreen graphics will be illegible and will not add much to the website apart from delaying its loading. When creating graphics for a mobile website, remember to prepare them in square or vertical formats.

Another medium increasingly used on websites is video. For mobile devices, it has two key drawbacks that should be kept in mind.

Large weight = large data transfer, and users of mobile devices away from Wi-Fi networks do not like this. Therefore, video materials should not start automatically.

Using a smartphone is usually associated with public spaces or (let’s be honest) being at work. Therefore, video materials from the machine should be muted. A good practice is to prepare a film with subtitles, which will allow you to watch it without having to turn on the sound.

Efficiency is the key to success

All research and analyzes show that each additional second of website loading above 2.5-3 seconds results in a noticeable reduction in conversion. Therefore, the main goal of creating a website for mobile devices, apart from its transparency in the UX area, should be efficiency. High efficiency means high conversion.

Low efficiency may spoil the work of the entire team, and it does not mean that the developer is to blame for the low level of responsibility. Why? This is due to a number of actions and omissions at every stage of work. Therefore, as I have already mentioned, the work of the entire team is important.

And what causes low efficiency?

  • Slow server and database response
  • Long loading of JS, CSS scripts, etc.
  • Unthought-out format and weight of images and videos
  • Loading too much content

Mobile first = team work + understanding the mobile world

This headline is probably the best summary of the article. A website optimized for mobile devices requires the work of the entire team, understanding the world we move in and adapting to its rules and principles.

By the way, does this only apply to the mobile world? In my opinion, proper understanding of the world we move in, the users we speak to and the service or product we promote should always be an inherent and key element of design. Well, I could write a separate chapter about this…

Agencja reklamowa - strony www, aplikacje, video, kampanie 360