Last month, after several frustrating attempts to order hamburgers online with my phone, I gave up and decided to order a pizza instead, from a place with a working app. Unlike the burgers’ site– which cut off text and loaded really slowly– the pizza delivery site was easy to navigate and place my order. After a few clicks, minimal scrolling, and a short wait, a large pie with my favorite toppings was waiting for me at my doorstep.
Although you likely understand the importance of having a responsive website, you may not be familiar with how to adjust your site for different screen sizes. Consumers today spend over 3 hours every day on their smartphones and Google now uses the mobile version a website for indexing and ranking. If you want to keep your customers, it is crucial to ensure that your website is optimized for mobile devices like phones and tablets.
In this post, we will review 5 important mobile-friendly features that every website should have.
Responsive Site Design
Since users are now accessing your website on a variety of devices and screen sizes, your site needs to provide a great user experience on all of them. A responsive website design automatically adjusts the layout based on a user’s screen size so that the content is always clear and responds well to the expected interaction (e.g. tapping on phone, mouse clicks on desktop).
Most mobile sites use a hamburger menu, or a three-lined-menu, that opens when a user clicks. Since smartphones have limited space, hamburger menus are an ideal way to keep your menu visible while not obstructing the rest of the page. The mobile navigation should be vertical, and you need to make sure to leave enough space between the menu items so users do not accidentally click on the wrong link, which is easy to do with scrolling fingers.
Clear Call to Action(CTA)
A CTA helps users understand what action to take on your webpage. Popular CTAs include buttons such as “buy now”, “contact us”, or “make an appointment”. It is important to make sure your buttons are not too small, or they will be difficult to click on with the touch of a finger.
It is also important to make sure your buttons do not take up too much space on smartphone screens. One way to do this is to use sticky navigation and place the button inside. Sticky, or fixed, navigation refers to a menu that is locked into place, so that it does not disappear when someone scrolls down the page. Placing a button inside your sticky menu ensures that your button remains visible even as users move around your webpage.
Clickable Phone Number
If you are selling a product or a service, it is important for users to know how to contact you. Clickable phone numbers allow site visitors to easily reach you without having to fill out forms, which could be cumbersome on a mobile screen. Phone numbers on mobile sites should be clearly a “click to call” action, integrated seamlessly with the calling capabilities of a phone.
Your phone number should be easily visible at all times. Putting your number either in the footer or the main navigation helps increase the number of contacts and purchases on your website.
In addition to a clickable phone number, if you own a physical storefront, you may also want to include a clickable map to make it easier for people to find you. For example, a Waze button will open up Waze on mobile devices to get directions to your storefront or physical location.
All forms on your site should be short and require visitors to fill out only the minimum information necessary, especially on mobile devices. It is recommended to show users how many steps they have to take in order to complete the form so that they don’t get discouraged halfway. Forms fields also must be big enough for users to click easily with their thumbs.
How Can I Tell if My Site is Mobile-Friendly?
In order to ensure your site is fully responsive, you will need to test it on a variety of devices. But if you are like most small business owners, you most likely do not have the budget to purchase the gamut of devices for a real-world test.
Luckily, there are several tools on the web that allow you to test your site display on a variety of screen sizes.
You can also use your web browser to preview your site on different devices. Here is how to use the Inspect settings on Chrome Developer Tools.
- Open your website in Google Chrome.
- Right-click on your webpage. You will see a navigation menu.
- From the right-click menu, click Inspect Element. The Chrome Developer Tools window will open.
- Click on “Toggle Device Toolbar”. This will take you to the screen emulator.
- Using this screen emulator, you can view device-specific versions of your website.
In order to ensure that your site is mobile-friendly, your site will need to have a responsive site design, mobile menu, clear call to action, clickable phone number, and functional forms. You can test your site’s responsiveness with various online tools as well as Google’s Inspect Element.