5 crucial problems of websites on mobile devices and 15 ways to solve them
52.02% of users are surfing the internet on a smartphone. Still, the mobile-first approach is overlooked most of the time. To be honest, we have the same issue in Embacy. We leave only a couple of days for a mobile version, so we have a checklist for making it nicer in a short amount of time.
Most common problems are:
- Low page load speed
- Too much stuff on the main page
- Navigation is unclear
- It’s hard to fill the information in and it sucks
- Oversized/downsized interactive elements
Page speed
Why it matters?
Since July 2019 Google prioritizes sites that are well optimized for mobile. The key metric is page speed. If your loading time is between 1 to 10 seconds the chance of rejection grows by 123%. Even if it’s 3 seconds this probability grows by a third.
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.
- Images are not that important on the mobile version. Everything that can be removed. And we hide a lot of stuff 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 TinyImage Compressor.
- Code optimization. We build sites 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 and it weights almost nothing :)
Content layout
Why it matters?
The faster the user can read through the website, the sooner he will make a decision. Designers have to make the content user-friendly. Some examples of not user-friendly approach:
- Content is bulky
- Too much air between blocks make it unclear if it is the end of a section or there is more stuff
- User needs to zoom in/out a lot.
What do we do
- The most important thing is to use the internal/external rule. Basically, the distances around 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 search, you can find several useful articles on that topic.
- Make sure that the headers are clear and stand out compared to the body text. More emphasis on important, remove what doesn’t matter that much.
- Keep the number of text styles down. You may not notice it on the desktop because there is more space. On mobile devices, you can face this issue more frequently. Don’t make more than two types of headers and two styles for plain text.
- We check whether the main text is readable. A simple rule: we don’t make the text less than 16px, and headers less than 32px.
Lead form
Why it matters
Extra fields lower the conversion rate and worsen the user experience.
What do we do
- Limit lead form to 3 fields if it is okay for a client
- Break it down into steps if reducing fields is not an option
Buttons and touch elements
Why it matters?
Interaction with a website should be effortless. It sucks when you need to aim for a button and miss it by a few pixels.
The most outstanding worst practice is how you buy cinema tickets on a mobile device. Choosing the right seat is a real pain in the …. fingers :)
What do we do
- Don’t put two buttons side by side. On one of the projects, the client would insist on a solution like this. We quickly made an interactive prototype with the button location that the client wanted. Then, we called him and asked to get to the right one from the phone. After that, we went back to better button placement.
- Follow the 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 the “burger” menu at the top right or left corner. This has at least two drawbacks:
- We hide content from the user
- It’s hard to reach it on big devices like iPhone Xs Max
There is a solution for websites with many pages. Put important information in a separate menu at the bottom of the screen, like in apps.
Conclusion
Different combinations of the methods described are helping us build fast and easy to use mobile sites. In the entire history of Embacy, there has never been a client that had a Google PageSpeed result of less than 80.
Goodies
A selection of 15 websites with cool mobile versions.
- marianopascual.me we love the desktop of this site, and did not know that the retro concept translates that well to mobile
- samokat.ru stylish, hipstery, anything you want in 2020
- idrf.online bright style with well adapted CTA
- coopywriters.ru even better on movile
- abuk.com.ua neatly arranged
- useplink.com/en this is how you adapt 3D for mobile
- emotivefeels.com a clear first screen of the mobile, complex in execution
- binaryblocks.io unconventional approach to mobile layout design
- figma.com share the desktop experience. And you can access projects on mobile.
- crypterium.com light and easy to understand.
- itsnotviolent.com fast and with good visuals. Animations are well optimized as well.
- heytempo.com bright, catchy and easy to understand
- framer.com another example of well-optimized animation.
- patreon.com look at that menu!
- deburis.it/it-IT look at that scroll!
