5 Must-Have Aspects of a Mobile-Friendly Website

5 Must-have Aspects of a Mobiel-Friendly Website - Hero Image

With more and more people browsing the web on their phones, almost 49% of global website traffic in 2020 came from mobile phones. Plus, the number of mobile devices worldwide is expected to grow to 17.7 billion by 2024. 

Mobile traffic share is constantly growing

So it’s not surprising that mobile-friendliness has been a ranking factor at Google. Optimizing your website to better satisfy your mobile users can positively influence your rankings.

Google will only continue to push for mobile-friendliness when mobile-first indexing goes live in March 2021, and websites displayed in the search results will be ranked based on the content of their mobile versions.

Still, many websites offer a poor page experience to their mobile users.

A quick definition of mobile-friendliness

As the name suggests, a mobile-friendly website is a site that is optimized and designed for mobile devices. It should have content and layout that works not only on desktops but also on smaller hand-held devices. 

Mobile devices have small screens, and you can’t use a mouse or keyboard to navigate a website while on your mobile. So the text should be easy to read, navigating the site shouldn’t be difficult, links should be easily clickable. Overall, a mobile-friendly site is easy to use to the fullest extent without having to zoom in/out or adjust your settings. 

Optimizing your existing site to be mobile-friendly may seem like a chore. This is why I want to show you examples of websites that not only adhere to Google’s mobile-friendliness standards but use mobile-friendliness and mobile-specific features to their advantage. 

1. Responsive Web Design

Responsive Web Design serves the purpose of delivering one website which adapts to all screen sizes and resolutions. It allows for a quality UX, no matter how large or small the display size is.

Have a look at this responsive version of Amazon vs. how it’d look if it were non-responsive? You’d probably hit the ‘back’ button and go ahead and search for a mobile-optimized website – the competitor!

On the left, we see the responsive version of amazon.com on a mobile device, and on the right it's the non-responsive version.

Responsive Web Design is a whole new way of thinking about building websites. It’s the utmost approach to providing an enhanced user experience on a mobile device. The entire concept is built around one idea: “flexible everything.” Everything from the text, images, and buttons to divs and other elements of the page should adapt to the screen size and orientation. 

Like Bruce Lee once said: “You put water in a cup, it becomes the cup.” 

Responsive design does just that. The elements should be formless, shapeless like water. Wherever you put them, from one device to another, they should adapt accordingly. 

Let’s have a look at how Nike nailed its responsive layout by going beyond the fundamentals.

Nike’s Mobile-friendly design

Nike is famous for the iconic logo known as The Swoosh (meaning: to move quickly through air or water with a smooth, gentle sound). 

Nike’s responsive site is designed to “swoosh” through various screen sizes to best display the content and offer a consistent experience across every device.

Nike renders the full-featured website for larger screens with the top navigation menu and bigger images, while for smaller screens, it has a cleaner and more straightforward interface.

For mobile browsers, the top navigation and the side brands are hidden under the hamburger menu. What’s left on display are the essential elements – the shopping cart and the search button. 

Nike.com adapts to the screen size, changing the image, font, and other elements when rendered on a mobile device.

Nike does a great job of using flexible typography and visuals. 

Above, you can see how the font color adapts to the background color when shifted from desktop to mobile. The image is also replaced with one that fits better and loads faster.

On single product pages, while the product does most of the talking, Nike makes the information easy to digest on smaller screens with simplified design and adjusted font-size for legibility.

On a desktop, the above-the-fold area has a two-column layout – the photo grid and product details. However, on mobile, this flexible grid gets condensed to a single-column layout leaving the product images in the center of attention and the copy below it.

Nike.com's product pages are perfectly optimized towards the mobile browsers.

On top of that, images change orientation as well to fit into the smaller viewport.

Nike.com uses responsive design and changes the image orientation and size between various devices.

One unique thing that I really like about Nike’s web design is that the top right image on a single product page is actually a video and without even clicking, the image starts playing. So effortless, yet so impressive.

Nike has made its reputation as a leading sportswear company and I believe they owe this not only to their product quality but also to the beautiful web experience they provide to their users. So, when it comes to responsive design, do it like Nike. Just do it.

2. Design for thumbs and eyes

Mobile users interact with websites mostly with their thumbs. In fact, 75% of smartphone users use just their thumbs to touch the screen. This means all interactive elements on the screen should be easily clickable and ideally within the thumb zone.

Buttons, for example, should be big enough so that users can tap them easily without extra effort. You may want to diminish your buttons while adapting them to a smaller screen but this only makes them harder to click. Actually, it should work the opposite way. The smaller the screen, the bigger the buttons. Also, using padding on your buttons makes their clickable area more spacious. Google recommends at least 48 pixels of touch target including padding.

It’s probably harder to comply with this rule when it comes to inline links. Make sure there’s enough space between hyperlinks to avoid users from accidentally clicking on the wrong one. I’ve encountered this cool solution that increases the click area for inline links and to be honest, it looks pretty practical to me. 

This front-end solution highlights links on a mobile device and makes it easier to click them.

Let’s not forget the comfort for the eyes is also crucial. The text on the screen should always be large enough to read comfortably. I know I’m stating the obvious but believe me, I’ve been to so many mobile sites where I had to zoom in or scroll left/right to read something – haven’t you? That’s frustrating. Therefore you want to make sure that the content is truly optimized for mobile and is always legible so users don’t have to squinch.

Now, let me show you how Etsy nailed the rule of thumb (and eyes.)

Etsy’s thumb-and-eye-friendliness

Etsy is an eCommerce website where you can buy and sell handmade and vintage items. Once you land on the mobile website, a big search bar on the top welcomes you – making it so effortless to search just with one finger. Etsy also uses enough space between hyperlinks hence they do not cram into each other which makes them easily clickable.

Etsy.com has large images with links to category pages on a mobile device.

Scrolling down the homepage, users can view trending items hand-picked by the editors. These thumbnail images have plenty of finger room for easy tapping, which is great for on-the-go mobile users.

Etsy.com has very large, easily clickable links to editor's choice products.

Etsy’s reading experience is consistent across all devices. The multi-column layout of text converts into a single-column layout on the mobile. This leaves the key content in the center of the screen. The earthy tone of the background and padding around the text is a true relief for the eyes. See for yourself how easy it is to digest the text perfectly fit the screen size.

Etsy.com changes the layout on a mobile device to better display large text elements.

I also like that the footer menu on Etsy is simplified when it comes to mobile. This feature declutters the footer links, giving you some space and an option to view more if you wish.

Etsy.com uses a dropdown menu in the footer on a mobile device, while on desktop, there's a full menu in the footer.

For a mobile website that has so many images and text and so perplexing, using Etsy is surprisingly easy and painless. Etsy is all about vintage, but the way it appeals to your fingers and eyes is so contemporary.

3. Simplify – Less is More

By nature, mobile devices do not offer as much real estate as the desktop to work with – there just isn’t enough space. That means, you should simplify your design on the mobile to create the best possible experience for your users – so to say ‘eliminate the unnecessary and let the necessary speak’.

While desktop menus can take up the whole top bar on the screen or may have expanded drop-down options, obviously this can not be the case on smaller mobile screens. Hence, hiding the navigation menu is a great way of keeping layouts simple. This is typically done by using a hamburger menu where either a simple drop-down menu covers the main content or a menu expands and overlays the entire screen.

There are many ways to show a menu on a mobile. Options include hamburger menus and dropdowns.

BBC uses a drop-down menu hidden under the ‘More’ button while H&M prefers an overlay menu under the burger icon which fills up the whole screen. Either way, the homepage is decluttered from all the links thus leaving more space for the prioritized content that delivers maximum value for the users.

While simplified menus carry mobile browsing a step further, it’s best when they’re supported with a simple and effortless search feature that allows users to find anything they want without a hitch. This will also diminish your need to rely on a large and complex menu. 

When it comes to simplifying, go beyond just the menus and also evaluate the forms on your site. Are you asking for too much information on a small screen that is harder to type on? Users may tend to fill out those long forms on a computer as the screen is larger and it’s much easier to type. But believe me, nobody wants to spend too much time writing unnecessary details with a tiny keyboard. In fact, 28% of shoppers abandon their carts due to long forms and confusing checkouts. 

28% of users abandon their carts because the checkout process is too long or complicated.

So, keep your forms short and simple, just ask for the necessary information. Also, keep the text fields and buttons large enough.

Now, let me offer you some pizza from an elegantly simplified menu on Dominos.com.

Domino’s simple mobile layout

Domino’s mobile website has thought through everything to make ordering on-the-go super simple for users. The main navigation menu is hidden under the burger icon (a pizza icon would be innovative though 😄) simplifying the content on the page.

Domino's take advantage of a hamburger menu to simplify the page layout on a mobile device.

While, on the desktop view, users are given two options to start their order- delivery or carry out, this is simplified for the hangry mobile users as a big single button. Domino’s actually does an excellent job of highlighting its CTA buttons by making them large and red, you just can’t miss them.

Domino's optimized its CTA on mobile to be more appealing.

Scrolling down the homepage, the most important links are simplified into five menu options, each of which fits impeccably on the screen and has an apparent destination. 

The whole process of step-by-step ordering, from adding items to your cart to the checkout, is truly easy and functional. Domino’s also raises the bar with the mobile ordering bot named Dom, which makes the whole ordering experience much simpler for users.

Domino's uses the chatbot on mobile devices in a really satisfying way.

Alright, so pizza is on the house and “You got 30 minutes”, go ahead and check whether you provide a simple yet effective design for your mobile users.

4. Make your CTAs stand out

Mobile users want information quickly and you want conversions. The best way to meet these mutual goals is to put all the important information right in front of their eyes.

Make your call to actions such as ‘order now’ or ‘learn more’ etc. eye-catching and compelling on mobile with large buttons and vibrant colors. Do not hide them in a place where users have to scroll through. Mobile users are notoriously known for their short attention spans, so nudge them along through the conversion process by creating actively persuasive yet intuitive CTAs.

Ryte.com has clear CTA buttons that guide the mobile user throughout the buyer's journey.

Ryte has clear CTA buttons throughout the homepage.

No matter how successful your mobile website or your business is, people will still have problems and will want to contact you. So do not add to their misery by making it harder to reach you.

Ensure your telephone number, email address, and social media profiles are easily accessible wherever a customer may seek support such as navigation menus, product pages, FAQ, Help content, and of course – checkout.

If your budget allows, it’s a great solution to add a live chat which makes it fast and easy to contact a representative. An astonishing 46% of customers prefer live chat to email and social media.

Live Chat is the leading digital content method.

For a better mobile experience, adding clear CTAs and customer support information is something that shouldn’t be disregarded.

Now, let’s talk about Tesla. Because clearly there’s never enough talk about Tesla.

Tesla’s fantastic CTAs

Apart from creating the future of electric cars, one thing Tesla knows very well is how to sell them. If you are checking the mobile website of Tesla, you may already be thinking of buying one. But once you’re there, you instantly get a vigorous message in your head that screams “Buy me!”. 

As soon as you land on the homepage, you are prompted to ‘Order Now’ or ‘Learn More’ about the product. 

Tesla.com has subtle CTAs that stand out on a mobile.

And it doesn’t end here. As you scroll down the page, every product appearing on the screen has its own customized CTA buttons.

Every product page on tesla.com has customized CTAs that are appealing to the customer.

The automotive giant keeps doing this on single product pages as well. Every section on the page has explicit call-to-actions that take you on a short ride to learn more or order the product. 

5-aspects-mobile-friendliness - 21-tesla_descriptions

To cap it off, a pop-up appears on the top of the page and gives you the option to, guess what (yeah, you got it right!), ‘order now’ 🙂 But this time you also get to test drive the car.

5-aspects-mobile-friendliness - 22-tesla_cta_popup

Tesla gets the bonus for having a live chat option for fast-delivery of customer support. 

5-aspects-mobile-friendliness - 23-tesla_chat

It also has a whole separate support page divided into dedicated sections. A search bar on the top makes it much easier to find what you’re looking for. Trending topics save you time for your quick questions. The page even provides you with video guides designed for specific product features. If you still can’t find what you’re looking for in the support resources, you can always contact customer support directly or via the chatbox.

5-aspects-mobile-friendliness - 24-tesla_footer

As Musk says, ”When something is important enough, you do it even if the odds are not in your favor…” What is more important than turning your users into your customers and keeping them happy? 

5. Leverage Mobile Features

Smartphones are intuitive to use by nature.

Because of their touch screens, they have some advantages over the desktop. For example, they let you swipe up to see more or click to call.

A mobile-friendly website should also adapt to the capabilities of the device. So why not take advantage of the mobile hardware and do something more than ‘make everything fit’?

For example, phone numbers and email addresses can be inserted in a button or some clickable area on the mobile, and once clicked, they can automatically prompt to make a call or connect to the email app. Likewise, instant photo sharing on social media or coding your social media icons to be directly opened in the app would be practical solutions. Typing requirements can also be reduced by using biometric ID, QR code reading or card scanning, etc.

One more thing to consider would be micro-interactions for mobile web design which are getting more popular nowadays. They are the small responses and behaviors providing micro feedback based on the user’s action. In fact, we use them on a daily basis without even noticing. A few examples would be: pull to refresh or reload the page, swipe left/right to clear a notification, a progress bar showing the download process, animated emojis, etc. All of this can save you space on mobile by hiding a few action items using gestures and finger moves.

If you haven’t already, start making use of the functionalities mobile devices offer, and this will immensely improve both your UX and the way users communicate with your site.

COTE NYC – Click to Call

Cote is a Korean steak house in New York with a Michelin Star. It’s a very popular modern restaurant, and their website reflects that. If you want to call them, just tap on the phone number and you’ll be directly taken to the dialing screen. No pen or paper needed, no need to remember the number either. 

https://www.cotenyc.com/

FACEBOOK – Micro-interactions

One of the most powerful micro-interactions out there is the animated emoticons Facebook uses. Just hold the ‘Like’ button for more than a second and you suddenly have 6 different options to engage with the post.

Facebook's micro-interactions

Takeaway

These 5 aspects are essential if you want to have a mobile-friendly website that is fully compatible with the mobile-first world we’re living in. Hopefully, some of the examples I shared have given you the inspiration to reinvent your mobile website.

You probably get at least half of your traffic from mobile. If you do not optimize for your mobile users, not only are you behind the curve but you’re also missing out on chances to get more traffic. So jump on the bandwagon now and offer your users that great mobile experience they’re looking for. Just remember, no matter what device they’re using, always maintain a seamless look and feel throughout your website.