Most small businesses and designers fully understand the importance of an excellent mobile design. Some would even argue for a mobile-first approach, worrying more about ranking as one of the best mobile websites than about desktop versions. Of course, we believe both are important, but for this article we’ll focus on who is doing mobile really well.
According to Statista, mobile is about 50% of all internet traffic globally. The number remained around 50% between 2017 and present day, but expect to see it slightly tick upward and more people gain faster connectivity via 5G. Making sure your site adapts to mobile users is one of the top things you can do to reduce your bounce rate.
Studying the best mobile websites gives you an edge over other designers. You’ll understand what works well and what doesn’t. You’ll be able to grab user attention and keep it. You won’t make the same mistakes others have made, because you’ll know how the top companies keep people engaged.
What Makes a Good Mobile Website?
At least 37% of Americans get online via their smartphones, getting rid of full-size computers and using their pocket devices 100% of the time. You can ensure you meet their needs by sticking to good mobile UX practices, such as fast load times, responsive images and simpler forms. Simplify your navigation for better usability, and cut unnecessary clutter.
One of the top ways to learn how to create an amazing site for smaller screens is by studying the best mobile websites around. We’ve taken time to look at some top contenders and come up with a few examples. We’ll explain what these companies did right with their designs and how you can repeat their efforts.
Desmos offers a graphing calculator and tools for students and teachers. We adored the desktop site, but were super excited when we pulled up the mobile site to discover the exact same features and look but responsive to a smaller screen.
The best mobile websites use fonts that adapt well to smaller text without running letters together. We also pulled up the calculator to see how hard it was to use on a small touch screen and found it very intuitive and user friendly. This is a tool students can easily access and use in a classroom or at home.
2. La Dispensa di Andrea e Gregorio
La Dispensa di Andrea e Gregorio repeats the same look as the desktop version. One thing we really love about their mobile response is the hamburger menu. It isn’t just a standard, straight line icon, though. They take the lines and curve them slightly to add a bit of depth and interest.
The curves are repeated in elements in the image, such as the bottles. The best mobile sites do think a bit outside of the box. They also match user expectations at the same time.
3. Spring Invest
Spring Invest has one of the best mobile websites we’ve ever seen. It works even better than their desktop version. In addition to a nice hamburger menu with only two lines, the logo converts nicely on a smaller screen.
One thing that particularly impressed us was how their animations work just as well, if not better, on mobile than on our PCs. The overall look is clean, uncluttered and gives us confidence they likely know what they’re doing with finances. Anything you can do to gain consumer confidence is a design plus.
Datagrid is an interesting selection in the list of best mobile websites. At first, the site seems ultra simple with just a gray background. It is a little slower to load than some sites, likely due to all the animations and the ticker at the bottom of the page.
Other than the animations, the site is fairly simple. You land on a single page and clicking on the hamburger menu takes you to the next selection with two options. What you can learn from the datagrid website is that you don’t have to create a complex mobile one. You can stick to the basics and people may appreciate it more.
Keep in mind that people accessing your site via mobile may only have a few minutes for research. They will skim over things and try to find the information they need quickly.
5. Sweet Paradise
Sweet Paradise offers gift cakes but their site is quite interesting. If you go to their desktop site, you’ll see a QR code, encouraging you to use their mobile site. If you go to their mobile site, the page has some beautiful images of holiday cakes and a large call to action (CTA) button that reads, “Gift Your Cake.”
The company seems to prefer its customers use mobile as much as possible and pushes them toward their mobile site, which admittedly is quite well designed and easy to use.
Keyword: best mobile websites +2
6. Richard Sancho
Richard Sancho’s website is the perfect example of how to create first for mobile and then adapt it to desktop devices. When you pull up this best mobile website example, you’ll see that the smartphone version adapts to the screen size easily.
The background color is subtle but morphs and changes behind the slightly transparent headline. When you scroll down, you get the same options on mobile as you do on the desktop. Everything is easy to access with your thumbs or forefinger.
Top Tips for the Best Mobile Websites
Brands revamp frequently, so pay attention to your favorite companies and how they handle their mobile websites. Take note of what you love and what you hate, so you can repeat the things that work for them and avoid the mistakes.
With a little attention to detail and some surveys of your customers, you should have both a mobile and desktop version to your site that meets client expectations and helps drive conversions.