The quality of mobile site adaptation is one of the key features in web development. Half of your customers will see the site from a smartphone or tablet. That’s why in today’s article we’ll look at 13 main requirements for mobile site adaptation. And describe them in plain language, without going into technical details too deeply.
So, for a site with a properly implemented mobile adaptation is characterized by the following features:
No horizontal scrolling
Horizontal scrolling on the site – a terrifying mauvais. First, it is inconvenient from a practical point of view. In order to see the second half of the content, you have to remember what was in the first half. Secondly, even for a user with little understanding of web development, it is a signal that the site is some kind of “pre-flood”.
There is a concise, neat menu
It is unacceptable to use bulky designs, texts should not be too long. For example, on the website of the psychological center we developed, the name of each menu item is exhausted by one word, all large:
Brevity does not exclude additional functions. For example, in the above example, it is convenient to find the information of interest on the site by using the search function.
No huge pop-ups
You should not allow a situation where a pop-up window takes up the entire screen of your mobile device. It looks very aggressive. Attempts to attract the user’s attention at any cost do not justify the hopes placed on them. Especially since displaying ads on mobile devices requires a special approach.
Simple forms are used
In general, registration forms should be simple and on desktops. The modern user does not like to fill out long forms. However, in the case of mobile devices, filling out a long form is also inconvenient. The desire to collect as much information as possible about a potential client is understandable, but there is a high risk that a person simply will not fill out a long form or will be distracted by something.
No small elements
Even the most advanced smartphones have very small screens. This practically excludes the possibility of using any too small elements in the design. After all, otherwise the user will have to strain his eyes or enlarge the text.
Remember, the average size of the fingertip is 10 mm. That is, it is difficult for us to get on the screen in small elements. Usability experts call it “fat finger syndrome”. No wonder that in the recommendations for interface developers in Android direct text recommend to make clickable elements at least 7 mm wide (or 48 pixels).
You should also take care of the ease of reading texts. For this purpose, it is desirable to adhere to the official recommendations from the developers of the most common operating systems of mobile devices – iOS and Android.
It is also desirable that the text is not completely black. Too high contrast of text and background tires the eyes. That’s why usually the texts on the sites are dark gray. Including this one, by the way.
Relative rather than absolute sizes are used
Do not specify the size of images or fonts in pixels. Otherwise it will turn out that normal for desktop images will look gigantic on a smartphone. For fonts, you should specify the size in relative values (em), and for images in percentages relative to the corresponding container.
Single-column text
Texts should be placed in a single column. Multiple columns of text should not be used, as on desktops. Otherwise it will look too small. The optimal line size is 45-60 characters.
Card interfaces are used
In this type of data presentation, the content is arranged in rectangular containers that can be moved in a different order when adapting to a particular device. True, this should not be taken as an absolute panacea. What is suitable for the aggregator site may be completely unacceptable for the original design project that claims to be refined.
Excluded unnecessary details
Mobile adaptation is disciplined in terms of site development and content completion. Because of the small screen size, the need to express your thoughts concisely and succinctly becomes even more important. Leave the most important things out, hide the rest. On desktops for this purpose are used drop-down widgets like accordion. You can experiment with them and on mobile.
You don’t have to scroll for a long time to get to the main content
One of the signs of a poorly optimized site: a bulky header takes up several screens, which the user scrolls through before getting to the main content.
The site looks decent on different versions of mobile devices
Mobile devices vary widely. The display of a website on an expensive tablet and a budget smartphone is very different. Such moments should be taken into account at the stage of mobile site adaptation.
Mobile is given due attention when speeding up the loading time
When we are approached by clients with a difficult situation on the speed of loading the site on desktops, on mobile devices it often turns out to be simply catastrophic. With a competent approach this is a solvable issue, but it is scary to imagine how many clients leave such pages for the sites of more nimble competitors.
Vector icons are used
Icons in SVG format are gaining popularity. This format uses mathematical formulas that allow you to scale images to infinity.
We recommend that you pay special attention to mobile adaptation when developing a new website or auditing an existing one. View your web resource from different devices, make sure it is properly displayed.
