Mobile has its own rules!

If you’ve been watching how mobile sites are evolving, you probably already know that simply translating 1:1 content from desktop to mobile won’t ensure good success with visitors. Mobile has its own set of rules, and we’ve put together the most important ones below to help you design for it!

Not everything is important

Visitors to a website via a mobile device are probably not so much interested in aesthetics as in content and specific information. They want answers in just a few moments: what products or services you sell/offer, where, what the prices are, how to get in touch and how to get there. They are not interested in long and tedious descriptions that require a few seconds of scrolling, so remember to adjust the content of your website accordingly, i.e:

• shorten or omit some of the less relevant content – users will decide if this amount of information is relevant to them, or if they prefer to move to sub-pages and search for more information,
• do not use large photos or sliders – this will allow you to get to the information faster and not waste space that could be used in a better way,
• “Trim down” forms – when designing the mobile version of your site, make sure you only ask for the most important information on the form.

Simplicity is the key

While on a desktop, animations, transitions and other variety increase the level of positive perception, on a mobile device you need to remember to keep it in moderation and give up on some elements.

Sometimes it is enough to remove unnecessary images, reduce the number of animations and increase the interlinearity to make the whole look much better. At the same time, we must remember that both mobile and desktop versions should have a similar overall appearance – the user needs to know what page they are on, regardless of the device they are using.

Intuitiveness

Users are accustomed to certain features and behaviours on websites. For example, scrolling up and down seems to be a natural movement as opposed to horizontal scrolling, which has recently gained popularity.

The same goes for the menu – a vertical menu with a full-width drop-down is now a standard to which most of us are accustomed. Try not to add too much variety to this element – in this case, the simpler the better.

Also ensure that when a user clicks on the logo, no matter what subpage they are on, they can return to the home page.

Don’t forget about the search engine either – place it at the top of the page in a prominent position, rather than in a drop-down menu.

Smartphone use has made some functions redundant, for example, arrows suggesting scrolling are increasingly abandoned – users will intuitively use finger swiping.

Speed

I’m sure you’ve turned a page off if it took a few seconds to load. Mobile users are more impatient and expect to get information as quickly as possible. That is why you need to take care of proper compression of images.

By speed we also mean how quickly you can get to some information, i.e. the aforementioned search engine, but also adding the possibility of filtering products.

Checklist

Finally, we have prepared a checklist for you regarding the mobile version of the website, so make sure that your project meets all the requirements before coding:

• Can a user reach contact information in less than 3 clicks?
• Is the font size adjusted so that all information is legible?
• Is it possible to return to the home page from each subpage with a single click? (e.g. by clicking on the logo)?
• Are the CTA buttons larger than on the desktop version?
• Is the contact form on the website short?
• Are the photos on the page not displaying full screen?
• Does the website not have pop-ups with newsletters/promotions that take up the whole screen?
• Does the product page have filters to narrow searches?
• Does the page scroll vertically?
• CDo the font and background colour contrast sufficiently? https://contrastchecker.com/ – you can check it here