Reading time: 6 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.
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.
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.
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.
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.
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:
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.
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.
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?
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…
Kierszek 4b
05-510 Konstancin-Jeziorna
KRS: 0000919071
NIP: 1231499649
REGON: 389838888
Email: kontakt@jmpublicity.pl
© JM Publicity sp. z o.o. | Polityka prywatności