5 critical problems of mobile website and 15 ways how to solve them

52.02% of users are surfing internet with a mobile phone. However, mobile-first approach is still overlooked most of the time.

Most likely, over half of the visitors to your website are looking at it from mobile. On some of the projects that we had worked on, that number even went over seventy percent. Yet, the mobile versions are still approached as an afterthought all too often. Today, we'll share some friendly tips on how to make a good mobile version, take a look at the common problems and the best examples of mobile design.

Most common problems include:

  • Low page speed;
  • Overflooded main page;
  • The navigation is unclear;
  • Inconvenient to fill in the data;
  • Oversized/downsized interactive elements.

Page speed

Why does it matter?

Since July 2019, Google prioritizes sites that are well optimized for mobile. The key metric is page speed. It's important not only for the mobile version but for desktop too, a good design is when the site loads fast: if your loading time is between 1 to 10 seconds it is very likely that Google just will not index it. Failure probability will rocket up to 123%, and if you exceed 3 seconds it is still about 34%. Even if you don't rely on SEO for lead-generation, being entirely off the radar is a terrible idea.

Some tips on what to do with this:

  • Make sure that the site scores 80+ in Google Page Speed, we also follow their tips — they're not foolproof, but they're a good starting point. As an alternative, you can also use Pingdom;
  • Photos and illustrations are not that important on the mobile version, good mobile design is clean and streamlined. Everything that can be removed, we remove so as to not overload the page;
  • What cannot be removed must be compressed. We convert photos to JPG and illustrations to SVG. If it does not help we compress it even more with Figma’s TinyImape Compressor;
  • Code optimization. We build on Webflow and it has a magic "minify code" button. Once it helped to boost GPS from 60 to 91;
  • Compress animation. Again thanks to Webflow for Adobe After Effects integration. With that, we can convert animation to .json minimizing its weight to the ground.

Content layout

Why does it matter?

The faster the user can access get into the content of the website, the sooner they will be able to make a decision. Therefore, the designer has to make the content user-friendly. Some examples of not user-friendly approach:

  • Content is bulky, overburdened, overtly detailed — what might look good on desktop is often unnecessarily busy on mobile;
  • Too much air between blocks. It is unclear if it is the end or there is something further;
  • A necessity to zoom in and zoom out a lot. That's just plain annoying.

Tips on how we do it:

  • The most important thing is to use the internal/external rule. In short, the external distances between the external elements should be greater than the internal ones. As an example: the distance between the lines must be greater than the spaces in the words inside the line. On the first page of Google, you can find several useful articles on that topic.
  • Make sure that the headers are clear and stand out from the main text. More emphasis on the important parts, deemphasize the rest, and cut what you can.
  • Make sure that there is no fonts & pins parade. You may not notice it on the desktop because there is more space, but on mobile the problem easily reveals itself, so it is better not to stick to the rule — two types for headers and two styles for plain text.
  • We check whether the main text is readable. The rule of thumb is to not make the text less than 16px and the headers less than 32px.

Lead form

Why does it matter?

Extra lines lower the conversion rate and user experience. As we've mentioned earlier, the mobile version should be clean and streamlined in its visuals — just the same applies to its functionality, and even more so.

What we do:

  • Limit lead form to the maximum of three fields if that is okay for the client;
  • Break them down to several elements if the former is not an option.

Buttons & Touch elements

Why does it matter?

Website interaction should be smooth. It's terrible when you need to precisely aim at a button and a miss by a few pixels leads to unexpected results. The most outstanding worst practice in mobile design is how you buy cinema tickets. Choosing the right seat is a real pain in the fingers, and it might negatively color your whole moviegoing experience.

What we do:

  • Don't put two buttons side by side. At one of the projects, the client would insist on such a solution, we quickly checked the test page with the button location that the client wanted, called him, and asked him to get to the right one from the phone. After that, we got the go-ahead to make some nice and convenient buttons.
  • Follow recommended dimensions for the buttons. Apple recommends that touch elements be at least 44 px by 44 px.

Page navigation

Why does it matter?

If a visitor gets lost on the website or can't find the desired content, you will lose them. The same principle as with the loading speed, really — most people are only so patient.

What we do:

The most popular solution for us is the “burger” menu on the top corner of the website. However, it has two drawbacks:

  • We hide content from the user, which is always a negative;
  • It's sometimes hard to reach on big devices such as iPhone Xs Max.

A possible design solution for a website with deep navigation is to put important information in a separate menu at the bottom of the screen.

Conclusion

Different combinations of the tips and the methods described above help us in building convenient and fast mobile websites. In the entire history of Embacy, there has never been a project that had a Google PageSpeed result less than 80. Designing a mobile version is constricting, you have much smaller space to play around in, you have fewer options available for visual solutions and animations. Yet, often enough, the limitations are what drives the design further and help you get the result that you need.

Goodies

As examples of proper mobile design, some best practices, here's a selection of 15 websites with cool mobile versions.

  1. http://www.marianopascual.me we really love the desktop version of this website and did not know that the retro concept translates that well to mobile;
  2. https://samokat.ru/ stylish and hip, anything you want in 2020;
  3. https://www.idrf.online/ bright style with well-adapted CTA;
  4. https://coopywriters.ru even better on mobile;
  5. https://abuk.com.ua/ neatly arranged;
  6. https://useplink.com/en/ this is how you adapt 3D for mobile;
  7. https://emotivefeels.com/ a clear first screen of the mobile, complex in execution;
  8. https://binaryblocks.io/ unconventional approach to mobile layout design;
  9. https://www.figma.com share the desktop experience, and as a plus — you can access projects on mobile;
  10. https://crypterium.com/ light and easy to understand;
  11. https://itsnotviolent.com fast and with good visuals, animations are well optimized as well;
  12. https://www.heytempo.com bright, catchy, and easy to understand;
  13. https://www.framer.com/ another example of well-optimized animation;
  14. https://www.patreon.com/ greatly designed mobile menu;
  15. https://www.deburis.it/it-IT just look at that scroll!

Don't be a stranger

Subscribe and never miss a story

Got it! Now check your email
Oops! Something went wrong while submitting the form.

Also read

Design articles

Moodboards: Summoning a Feeling

Design articles

4 levels of design impact

Design articles

Basic Types of Logos, Their Subtypes, And How To Design The Cornerstone of Your Branding Identity

Case Stories

Heartcore: A Kind VC

embacy

Want to recieve our awesome stories?

Got it! Now check your email
Oops! Something went wrong while submitting the form.

© Embacy. 2020