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 common problems

  • Low page speed
  • Over Flooded main page
  • Navigation is unclear
  • Inconvenient to fill the data in
  • Oversized/downsized interactive elements

Page speed

Why it matter?

Since July 2019 Google prioritises sites that are well optimised for mobile. The key metric - page speed. Moreover, if your loading time is between 1 to 10 seconds it is very likely that google will not index it. Failure probability will rocket up to 123% if you exceed 3 seconds it is still about 34%.

What do we do with this

  • Make sure that site scores 80+ in Google Page Speed, we also follow their tips. As an alternative you can use Pingdom
  • Photos and illustrations are not that important on the mobile version. Everything that can be removed, we remove so as not to 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 optimisation. We build on Webflow and it has 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 minimising its weight to the ground :)

Content layout

Why it matters?

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

  • Content is bulky
  • Too much air between block. It is unclear if it is the end or there is something further.
  • Need to zoom in/out alot.

What do we do

  • The most important thing is to use the internal/external rule. In short term, 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 headers are clear and stands out of the main text. More emphasis on important, less or remove on the rest.
  • 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 reveals, 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. A simple rule: we don't make text less than 16px and headers less than 32px

Leadform

Why it matters

Extra lines lower the conversion rate and user experience.

What do we do

  • Limit lead form to 3 fields if it is okay for a client
  • Breakdown to several pieces if former is not an option.

Buttons & Touch elements

Why it matters?

Site interaction should be smooth. It is bad when you need to aim at a button and a miss of a few pixels leads to unexpected results.

The most outstanding worst practise is how you buy cinema tickets on a mobile. Choosing the right placement is a real pain in the …. fingers :)

What do 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, the buttons became convenient.
  • Follow recommended dimensions for the buttons. Apple recommends that touch elements be at least 44 px by 44 px.

Page navigation

Why it matters

If the user gets lost on the site or can't find the desired content, we will lose him.

What do we do

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

  • We hide content from the user
  • It is hard to reach it on big devices such as iPhone Xs Max.

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

Conclusion

Different combinations of the methods described above help us in building convenient and fast mobile sites. In the entire history of Embacy, there has never been a client that had a Google PageSpeed result less than 80

Goodies

A selection of 15 website with cool mobile versions.

  1. http://www.marianopascual.me We really love the desktop of this site, and did not know that the retro concept translates that well to mobile
  2. https://samokat.ru/ Stylish, hipstery, anything you want in 2020
  3. https://www.idrf.online/ Bright style with well adapted CTA
  4. https://coopywriters.ru Even better on movile
  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. Plus - 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 Brigh, catchy and easy to understand
  13. https://www.framer.com/ Another example of well optimized animation.
  14. https://www.patreon.com/ Look at that menu!
  15. https://www.deburis.it/it-IT 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

Case Stories

Think32: Distinct And Particular

Design articles

Why do we make websites on WebFlow?

Design articles

5 reasons why we love to use line illustration

Design articles

4 levels of design impact

embacy

Want to recieve our awesome stories?

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

© Embacy. 2020