Mobile web design: Trends and recommendations

In 2015 Google started using Mobilegeddon, an algorithm focused on searching through mobile devices. Since then, digital marketing has seen accelerated changes in its practices.

Google’s goal was to improve the experience of the user who browses the web with his mobile device or tablet. To achieve this, the algorithm began giving mobile-optimized websites priority in the results.

From that moment on, following the guidelines of an adaptive web design became very important, especially for companies. So, if you are in the process of creating your company’s website or are planning to make changes, in this article you will find some recommendations and trends that will be very useful to you.

Trends in mobile web design

Every web design project should start with the following considerations:

  • Identify the objectives of your mobile web.
  • Define who the target audience is.
  • Understand user behaviour patterns on their mobile device.
  • Analyze what the competition proposes and how you can improve it.
  • Be true to your brand and its personality.

Mobile design trends include aspects such as user psychology, context, usability, and optimization. All of them are essential when creating your mobile website.

As you may have already imagined, a mobile website is displayed on a very small screen, compared to a laptop or desktop processor. Therefore, it is important to take into account the following factors:

  • You are working with a small and very limited space.
  • Mobile devices are frequently used for short periods and during journeys on public transport.
  • The user is distracted and often uses mobile along with a multitude of other devices while doing other things, making it more difficult to retain attention than on a normal web.
  • There is a feeling of urgency on the part of the user.
  • The contents must be impressive and easy to understand.

With this in mind, here are some of the trends you should consider:

1. Core web vitals

Core web vitals are standardized metrics that measure user experience. They focus on loading speed, interaction, and visual stability. Thanks to these metrics, the owners of the web pages can monitor the areas of opportunity, with the purpose of optimizing their content. It should be noted that these metrics can vary in each particular case and even change over time for the same website.

This is due to the way in which users use the web, what aspects are the most remarkable and what is content most attracts their attention. As these are dynamic aspects of behaviour and the relationship they have with the brand, it is best to monitor these metrics periodically.

The page load time or LCP is made up of the following elements:

  • Picture elements
  • Text blocks
  • Pictures or video banners
  • Background images

Less than 3 seconds is considered a good loading time. When this does not happen it can be due to several factors:

  • Very slow response times from the server
  • Very high render time, on user devices
  • Large images
  • Excess images
  • Excessive animations

Another indicator is page interactivity or FID, which comes from the first input delay. This metric measures the time it takes for your website to respond when a random user tries to enter. This load time includes clicks on buttons and links, videos, images and audio on the page. Interactions such as zooming and scrolling through the website are considered animations and therefore do not fall into this metric.

If your website has delays in loading the requested page information, this can lead to inconvenience and site abandonment. Therefore it is important that the FID has a response speed below 100 milliseconds.

Also, keep in mind the visual experience of the page or CLS, which stands for cumulative layout shift. This metric refers to the user’s visual experience when browsing through your web page.

When the user scrolls on the page this movement can cause changes in the layout of the images due to a delay in loading. For example, images, banners and widgets are distorted. It is very common for this to happen when the page is loading. And it is a source of displeasure on the part of users since they consider that it happens on poor-quality sites.

To perform properly, pages must have a CLS of less than 0.1. On top of that, it is very likely that users will have problems loading the page on their mobiles.

As you can see, core web vitals are very concrete indicators of experience. In addition to the metrics we’ve covered, we  also recommend that you monitor the following :

  • Speed ​​Index (SI): The time it takes for parts of a window to load.
  • First Content Paint (FCP): Time it takes for images, colour canvases, or text boxes to appear.
  • Time to Interact (TTI): The time it takes for the page to be fully interactive for the user.
  • Total Block Time (TBT): How long a page remains blocked before responding to user prompts.

2. Accelerated Mobile Pages (and new alternatives)

65% of Google searches are done on mobile devices, ahead of desktops or tablets.

AMP stands for Accelerated Mobile Version Pages, and it consists of a Google protocol that is intended to improve the loading speed of mobile websites, both on smartphones and tablets. If your website has AMP, the loading speed will be better, although this is not the only way of optimization.

Next, we will talk about load optimization paying attention to the vital website metrics or core web vitals.

There are also platforms like Prism that allow for a mobile-optimized design, without the need to implement AMPs. Even so, they continue to be an important option and one that is evolving towards even simpler solutions.

3. Chatbots with artificial intelligence

The availability of mobile devices has promoted unprecedented activity on the web. Currently, people search for results, products, and offers, almost instantly. It is enough that someone makes a recommendation for them to go to the smartphone and make a search and even a purchase.

For this reason, chatbots are a great option to be available 24 hours a day, 365 days a year & one more in case of a leap year. Although most chatbots can handle basic conversations, their capabilities have limits.

According to Scalater, “An AI-powered chatbot is a smarter, better version of regular chatbots. They use artificial intelligence and natural language processing to understand humans and their needs to bring the user to the desired result with as little effort as possible.”

Thanks to machine learning and natural language processing, AI-powered chatbots can understand the context of requests, draw on conversation history, and respond to requests more naturally and smoothly than previous generations of chatbots.

4. Dark mode on mobile

This is user experience in every sense of the word. The increase in exposure to mobile, tablet and computer screens has caused a depletion in the vision of users and an increase in concern for ophthalmological health.

The response of the technology industry has been the blue light filter in the devices, the dynamic control of the lighting and the pointing out of the potentially harmful levels not only to the brightness of the screens but also to the volume in hearing aids and the prolonged use of any technology.

Regarding web design, a dark mode is an option that reduces the amount of white on websites, with a proposal that oscillates in greys, blacks and dark tones. In fact, repeated exposure to overly white-themed websites can reduce the productivity of professionals who constantly work on computers and mobile devices.

The dark mode is not just another option for users: it is the difference between a headache, eyestrain and loss of performance or optimal performance at work.

Let’s face it, using white space and very bright themes was trending ten years ago. Today a much more ergonomic idea prevails, favouring eye care, themes with neutral colours and a dark mode available to users.

5. Single Page Websites

Business pages designed for the desktop were bulky, with navigation trees that could contain multiple options, resources, images, videos, text, audio, animations, and more. That’s not counting the business blog and product landing pages or special offers.

However, mobile phones have imposed a change in the way we consult information. Very voluminous websites are not the ideal bet for the smartphone. Instead, single-page websites can now be created.

The content is displayed to the user dynamically as they navigate or click on the menu. A menu that, by itself, is very simple. This speeds up navigation and is favourable for search engines such as Google or Bing.

Recommendations for web design focused on mobile

1. Bet on simplicity

If simplicity when designing web pages is important, in a mobile web design it is an essential requirement. The goal is to create a clear and intuitive experience to captivate the user and keep her attention. This is with the aim of acquiring a trial or a license in the case of Skype.

Highlights:  A simple and clear design. The main page has enough information not to confuse the user. The CTA (Call to Action, for its acronym in English) or calls to action, are well positioned. Your menu opens and fills the screen with an arrow at the top to go back to the previous page. Your search has predictive text with flags to identify countries.

2. Choose the colour and images with the mobile screen in mind

With limited space and a distracted audience, instantly captivating the user is a challenge. One of the most effective ways to do this is through bright colours or good images.

Highlights: Airbnb always comes up in our best practice examples. We love its use of images, its simplicity, the CTA on the main page, and its integration with Google for text prediction in the search box.

3. Use buttons and calls to action (CTA)

Once you have defined the main objectives of your website, create good-sized buttons, position them in prominent places and make it clear that they are buttons. For this reason, the use of shadow or 3D effects is popular on mobile. Don’t make the user have to zoom in to click on your button or CTA.

Highlights: For an airline website, Iberia has been able to simplify its content to create an intuitive and user-friendly experience. The use of bright colours, well-sized buttons, a simple and functional home page, predictive searches and a side scroll to see prices makes it one of the best mobile-friendly airline websites we have tested.

4. Design a coherent structure and content

Many of your users will be regulars on your normal website, and one of the biggest challenges when creating mobile websites is organizing and structuring the content so that it offers an experience similar to that of your website (if not better). Designing for mobile allows you to remove unnecessary content. It is important to understand that it is not necessary to cover all the content of your mobile website, but it is necessary to ensure that it offers enough to meet the expectations of your users.

Highlights: H&M’s mobile web meets many of the best practices we’re mentioning. Simplicity, a structure very similar to your website, a clear CTA well positioned on the main page, use of contrasting colours to attract the user to the company’s objective.

5. Think about search and navigation

Good navigation and search options will help the user find what they are looking for. To achieve this you can use filters, collapsible menus and search boxes. Also, the use of predictive text in the forms will facilitate the process.

Highlights: El Corte Inglés is a complex page to adapt to mobile; its product offer is extensive. We believe that the combination of a minimalist style along with various navigation and predictive search options make it a less complex experience than other similar business models. The use of filters and categories is especially useful.

6. Use registration forms sparingly

Once again, simplification is key. Those forms with endless questions don’t work on mobile. You can make registration easy with integration with social networks. And if you have an e-commerce website, let users shop and browse as guests, don’t force people to create accounts if they don’t want to.

Here we have again the example of Airbnb which offers the user several options to register:

Highlights: The design is simple and doesn’t clutter the user with endless fields to fill out in order to make a reservation. This is an example of functionality adapted for mobile devices. And although it seems little, in reality, it makes the difference between leaving the site and continuing with the registration.

7. Follow the rules that work for you

Being different is not necessarily a good thing when it comes to web design. It is important to understand the general principles and patterns of user interface design. The user does not have the patience to learn new patterns and usually wants them to be familiar and instinctive. That is to say, what he has done in other places works in this one in particular.

A dose of experimentation and innovation is welcome, but doing too much can lead to loss of website traffic, as well as decreased engagement and online sales.

If you want to do more research on the topic, here are other resources to inspire you:

  • Google Mobile App Design  Principles
  • Pttrns
  • InspireUI

If you want to find a way to design your mobile website without complications, see the section that follows.

Take advantage of the tools of a CMS

Website’s Free CMS Software allows you to create websites very easily and without the need for web design knowledge, as the platform offers intuitive tools to achieve your purpose. It is a content manager that offers themes for web pages, dynamic content, a drag-and-drop page editor that is very easy to use and many other tools.

In addition, it has the advantage that it can be used with Free Website’s CRM or customer relationship manager, which allows you to integrate both platforms into one system capable of improving the performance of marketing, sales and customer service teams.

This software allows you to manage dynamic content such as a blog or an e-commerce site from the same platform, with the advantage that all the information remains in one place.

A CMS allows you to work with different sites, for example:

  • Business website
  • Personal website for managers and specialists
  • Business Blog
  • Online store

Thanks to the versatility offered by a CRM, a digital marketing team can launch a great strategy in a short time. And, of course, that includes websites designed for mobile.

Now that you have the trends at hand and the perfect tool to implement them,  check out the best mobile web designs for inspiration.

Leave a Reply

Related Articles

Back to top button

We need Your Help!

If you enjoy our content, please support our site by disabling your ad blocker. We depend on ad revenue to keep creating quality content for you to enjoy for free.