Internet browsing has changed considerably over the past decade as mobile phones became an omnipresent part of our lives. According to Oberlo, mobile now represents over 50% of global traffic and continues to increase each year. If you’re hoping to retain user confidence, you’ll need to change with the times by optimizing your site for mobile.
Responsive Design
Responsive design allows a website to change its structure and appearance to match the size of a user’s screen. It provides a flexible way to deliver an optimal user experience regardless of the type of device used to access the site. Responsive design helps your site load faster on mobile, boosts your search rankings, and keeps users on your site due to the improved experience.
Check out Google’s guide to responsive design to get started on optimizing your site for mobile. You can also use Google’s Mobile-Friendly Test to see how you can better optimize your site.
Mobile Thumbnails
A thumbnail is an image with a reduced file size used as a placeholder for the full-sized content. We encounter thumbnails every day when we perform Google searches and watch videos on Youtube. Thumbnails can be used to display lots of content without increasing load speed. They create a more interactive experience for users, allowing them to digest the breadth of available content on your site without feeling overwhelmed. Thumbnails are especially useful for sites featuring an online shop or lots of video content.
Mobile Viewport
The viewport is the area of the web page visible to the user. Older websites designed their sites for desktop viewing, but the switch to mobile devices makes it necessary to provide a viewport optimized for mobile. Otherwise, users are forced to zoom and pinch in order to see the content — and will likely leave the site in frustration. However, there’s a relatively easy solution. To enable mobile viewports, simply paste the following code into your site’s header:
<meta name=viewport content=”width=device-width, initial-scale=1″>
Tap-Friendly Buttons
Few things in the digital space are more annoying than hitting the wrong button on your phone. Most of the time, this frustration leads to a user finding another site to solve their problem. But you can stop the bounce by employing tap-friendly buttons to your site.
According to research into button size and spacing, an ideal button size is between 42-72 pixels, with 60 pixels being the sweet spot. For spacing, a range of 12-48 pixels was found to be ideal for the study’s participants. The wide range gives you flexibility to experiment with different button sizes and styles.
Most importantly, sites should make sure their buttons look buttons. It may sound obvious, but it’s easy for users to confuse buttons for static content, especially if the elements are a similar size and shape.
Typically, square buttons with rounded corners elicit the most “button-like” design to which users are accustomed. Also consider adding drop shadows and other effects to draw attention even further. Whichever design your site lands on, make sure it’s consistent.
