HomeBlogHow To Make The Mobile Version Of The Site Right: Best Practices With Examples
How To Make The Mobile Version Of The Site Right: Best Practices With Examples
Mobile devices are changing business. They are constantly evolving and the requirements for website design and development are constantly updated. How to adapt design elements and content, which development method is better to choose? Told in this article.
Responsive design, adaptive design or mobile first?
Despite the fact that mobile applications are very popular and services are invested in their development, every site should have a mobile version. The share of mobile commerce continues to grow. In addition, many users, before downloading the application, get acquainted with the product through the mobile version.
In this regard, most product companies use the “mobile first” approach when developing designs. That is, when developing an interface, first of all, a mobile version of the interface is created, then for large displays: tablets, laptops, PCs.
To better understand this approach, let’s look at two others:
1. Responsive Web Design
One design layout adapts to different device screens. All content, all images and blocks automatically resize thanks to flexible layout, site grid, css media. There is only one version of the site, but you need to check whether the elements are displayed correctly when adding, updating, etc.
Advantages:
There are many responsive design templates.
SEO friendly.
Ease of implementation.
Flaws:
Elements can move.
Advertising may be lost.
Loading on the mobile version is longer.
Do you have an idea? We have a solution!
We'll develop modification of any complexity on the CS-Cart
Different layouts are used to adapt to different screens. The site identifies from which device the user enters and redirects to the desired version of the site. Templates depend on screen widths, typically 320px, 480px, 760px, 960px, 1200px and 1600px. Development may not be required for all options, but only for current devices.
Advantages:
The ability to create the best user interface for the right devices.
High site loading speed.
More control over design elements.
Flaws:
More development time required.
The appearance of devices with new screens means the need to develop new patterns.
Difficulties with SEO optimization.
3. Mobile First Design
Mobile First is based on progressive promotion. First, a small screen version is developed, with the most basic features and capabilities. And then we add and extend features to the base version.
Advantages:
User-friendliness. The custom path is created to fit the small screen constraints.
Fast loading pages. Since only the most important content is placed, the images are smaller, there are no “crutches” for adaptation, the code is lighter.
Good ranking. Since 2016, Google has introduced a new Mobile First Index website analysis algorithm that analyzes the usability of a website in mobile versions.
Flaws:
Development time and cost. A separate layout is created for each screen.
Minimalism in visual design. All content will have to be adjusted to the small screen, no complex animations, long and large texts, all focus is on targeted actions. On a desktop, this may look too simple.
3 Approaches to Mobile Development
How to check that the pages of your site meet the requirements of search engines? You can use the Google Mobile-Friendly Test service, it will show whether the page is convenient on mobile devices or what is wrong with it. If you need to check the entire site, then it is better to use Google Search Console. There you will find a description for each page, which detracts from the site’s usability for mobile visitors.
What to consider when designing a mobile version
We have compiled the basic rules for developing a mobile version of the site. Regardless of which development approach you choose.
1. Hierarchy of content
The smartphone screen can be divided into zones of perception, the main attention falls on the central part, where the most important elements should be located.
Central part for the most important content.
Space above and below the main content for secondary content.
The very top of the screen for unimportant information and items.
There is also a rule of “thumb”, since most people only touch the display with it. Depending on how most people hold their smartphone, there are areas that are easy and hard to “get to”.
Use easily accessible areas and place important content in the right places
2. Content Width
The narrow screen of mobile devices does not allow you to swing in the design of the pages. Browsing pages is carried out up and down – this is convenient and expected for the user. Avoid horizontal scrolling, fixed width elements are more likely to cause this error. Try to put text in one column, so it’s easier to manage limited space on a small screen.
The smaller the screen, the fewer columns can be effectively mirrored
3. Convenient font
To prevent the user from having to zoom in or out, use an appropriate font size. The minimum size of the body text can be between 16px and 18px:
Apple recommends 17px in the Human Interface Guidelines.
Google at Material Design recommends 16px.
But if the letters are very thin, you can do 18px. Choose fonts that scale well and are in the same family. For example, Noto Serif and Noto Sans, the creators make sure that they blend well with each other. To select fonts, you can use the Fontpair and Fontjoy services. Do not use more than 3 types on the site, this will slow down the site loading.
More doesn't mean better. Maintain balance and harmony in the display of text
4. Menu dimensions
If on a PC a wide navigation bar with a second submenu does not cause difficulties for the user, then in the mobile version it will be extremely inconvenient. The menu is hidden in the hamburger icon, it slides out of the sidebar and can occupy part of the screen or the whole – this has become the golden rule. If the menu includes many sub-items, it is better that the new list appears on top of the previous one. Don’t forget to make the menu sticky so that the user doesn’t have to scroll to the top of the page to return to the directory.
Make the menu compact
5. Cut down on secondary content
On the PC version, you can describe the characteristics in detail, with many photos, but the information on the mobile version should be concise. For example, additional information can be collapsed into a “+” sign, if the user wants to learn more, he will expand the text. Consolidate repetitive content such as testimonials. Arrange them in a carousel to leave room for more important information.
Pop-ups cause irritation even on a PC, but in the mobile version they can simply block everything and the user will leave the site. Minimize pop-ups or avoid them entirely.
Testimonials, banners, additional descriptions, lineups are secondary content that can be hidden
6. Make the connection visible
If a visitor is looking for your contact information, they either want to buy your product, or they already bought the product and are having problems. In both cases, the opportunity to communicate with a company representative should be simple yet clear. According to statistics, 84% of buyers consider “customer service” to be a key factor in their purchase.
The mobile version has an advantage in terms of communication methods, because. you can instantly go to the desired messenger, send a message or make a call.
Chats, instant messengers, callback - it's easier to do it through the phone
7. Tailor forms to fill out
In the mobile version, there are no tools that simplify interaction with forms: hot keys, dragging files from different windows, plugins, and so on. The user, for registration and purchase, most often enters the same information. Use it for autofill.
Prescribe a template if there are strict rules for filling or immediately take into account the case of the text.
You can use social media profiles to access the site.
Minimize the number of fields as much as possible.
Examples of good mobile design
Instagram
It started with a mobile version and for a long time existed only in phones. But due to numerous requests, a PC version appeared, which practically does not differ in design from the mobile one. Instagram has kept it simple by adhering to the Mobile Only rule as new features continue to roll out.
It offers a convenient service for its articles: a popular topic is displayed on the main page, which excites readers more. The font size in the article is 18px. As soon as the article is scrolled to the end, the service immediately offers the next one. Thus reducing the bounce rate.
Aviasales and Ostrovok
The service for finding tickets and hotels around the world pays great attention to both the application and the mobile version of the site. After all, when traveling, you may not always have a laptop at hand. The most important information “search for tickets” is located on the start page. You can select an airport using auto prompts, and it is enough to enter a city and even just a country.
You can switch from searching for a ticket to searching for a hotel in one click, while the service, after choosing a ticket, will ask if you need a hotel. The most important buttons are large and bright. And additional information (articles about places and cities) is listed in the slider.
Rive Gauche
Their mobile version is made according to the rules of thumb. Catalog, shopping cart, payment details are located in the bottom menu. There are a lot of subcategories in the menu, so deepening into the catalog is changing whole pages. Secondary information about the product: description, reviews, composition, application are hidden under the checkmarks.
Top 14 Marketplaces for Selling Digital Products:… Explore lucrative opportunities to sell digital content. Uncover the most profitable platforms for turning your digital creations into successful ventures
How To Make The Mobile Version Of The Site Right: Best Practices With Examples
Mobile devices are changing business. They are constantly evolving and the requirements for website design and development are constantly updated. How to adapt design elements and content, which development method is better to choose? Told in this article.
Responsive design, adaptive design or mobile first?
Despite the fact that mobile applications are very popular and services are invested in their development, every site should have a mobile version. The share of mobile commerce continues to grow. In addition, many users, before downloading the application, get acquainted with the product through the mobile version.
In this regard, most product companies use the “mobile first” approach when developing designs. That is, when developing an interface, first of all, a mobile version of the interface is created, then for large displays: tablets, laptops, PCs.
To better understand this approach, let’s look at two others:
1. Responsive Web Design
One design layout adapts to different device screens. All content, all images and blocks automatically resize thanks to flexible layout, site grid, css media. There is only one version of the site, but you need to check whether the elements are displayed correctly when adding, updating, etc.
Advantages:
Flaws:
2. Adaptive Web Design
Different layouts are used to adapt to different screens. The site identifies from which device the user enters and redirects to the desired version of the site. Templates depend on screen widths, typically 320px, 480px, 760px, 960px, 1200px and 1600px. Development may not be required for all options, but only for current devices.
Advantages:
Flaws:
3. Mobile First Design
Mobile First is based on progressive promotion. First, a small screen version is developed, with the most basic features and capabilities. And then we add and extend features to the base version.
Advantages:
Flaws:
How to check that the pages of your site meet the requirements of search engines? You can use the Google Mobile-Friendly Test service, it will show whether the page is convenient on mobile devices or what is wrong with it. If you need to check the entire site, then it is better to use Google Search Console. There you will find a description for each page, which detracts from the site’s usability for mobile visitors.
What to consider when designing a mobile version
We have compiled the basic rules for developing a mobile version of the site. Regardless of which development approach you choose.
1. Hierarchy of content
The smartphone screen can be divided into zones of perception, the main attention falls on the central part, where the most important elements should be located.
There is also a rule of “thumb”, since most people only touch the display with it. Depending on how most people hold their smartphone, there are areas that are easy and hard to “get to”.
2. Content Width
The narrow screen of mobile devices does not allow you to swing in the design of the pages. Browsing pages is carried out up and down – this is convenient and expected for the user. Avoid horizontal scrolling, fixed width elements are more likely to cause this error. Try to put text in one column, so it’s easier to manage limited space on a small screen.
3. Convenient font
To prevent the user from having to zoom in or out, use an appropriate font size. The minimum size of the body text can be between 16px and 18px:
But if the letters are very thin, you can do 18px. Choose fonts that scale well and are in the same family. For example, Noto Serif and Noto Sans, the creators make sure that they blend well with each other. To select fonts, you can use the Fontpair and Fontjoy services. Do not use more than 3 types on the site, this will slow down the site loading.
4. Menu dimensions
If on a PC a wide navigation bar with a second submenu does not cause difficulties for the user, then in the mobile version it will be extremely inconvenient. The menu is hidden in the hamburger icon, it slides out of the sidebar and can occupy part of the screen or the whole – this has become the golden rule. If the menu includes many sub-items, it is better that the new list appears on top of the previous one. Don’t forget to make the menu sticky so that the user doesn’t have to scroll to the top of the page to return to the directory.
5. Cut down on secondary content
On the PC version, you can describe the characteristics in detail, with many photos, but the information on the mobile version should be concise. For example, additional information can be collapsed into a “+” sign, if the user wants to learn more, he will expand the text.
Consolidate repetitive content such as testimonials. Arrange them in a carousel to leave room for more important information.
Pop-ups cause irritation even on a PC, but in the mobile version they can simply block everything and the user will leave the site. Minimize pop-ups or avoid them entirely.
6. Make the connection visible
If a visitor is looking for your contact information, they either want to buy your product, or they already bought the product and are having problems. In both cases, the opportunity to communicate with a company representative should be simple yet clear. According to statistics, 84% of buyers consider “customer service” to be a key factor in their purchase.
The mobile version has an advantage in terms of communication methods, because. you can instantly go to the desired messenger, send a message or make a call.
7. Tailor forms to fill out
In the mobile version, there are no tools that simplify interaction with forms: hot keys, dragging files from different windows, plugins, and so on. The user, for registration and purchase, most often enters the same information. Use it for autofill.
Examples of good mobile design
Instagram
It started with a mobile version and for a long time existed only in phones. But due to numerous requests, a PC version appeared, which practically does not differ in design from the mobile one. Instagram has kept it simple by adhering to the Mobile Only rule as new features continue to roll out.
McKinsey
It offers a convenient service for its articles: a popular topic is displayed on the main page, which excites readers more. The font size in the article is 18px. As soon as the article is scrolled to the end, the service immediately offers the next one. Thus reducing the bounce rate.
Aviasales and Ostrovok
The service for finding tickets and hotels around the world pays great attention to both the application and the mobile version of the site. After all, when traveling, you may not always have a laptop at hand. The most important information “search for tickets” is located on the start page. You can select an airport using auto prompts, and it is enough to enter a city and even just a country.
You can switch from searching for a ticket to searching for a hotel in one click, while the service, after choosing a ticket, will ask if you need a hotel. The most important buttons are large and bright. And additional information (articles about places and cities) is listed in the slider.
Rive Gauche
Their mobile version is made according to the rules of thumb. Catalog, shopping cart, payment details are located in the bottom menu. There are a lot of subcategories in the menu, so deepening into the catalog is changing whole pages. Secondary information about the product: description, reviews, composition, application are hidden under the checkmarks.
Subscribe to stay up-to-date!
I want to be notified about ecommerce events.
Subscribe to stay up-to-date!
I want to be notified about ecommerce events.
More articles from this category