10 Tips To Improve Your Website Mobile Experience

Responsive design has become the new normal.

When building a new website or redesigning an existing site - especially now that mobile usage has surpassed desktop usage on a global scale - the new site has to be mobile first.

As business owners better understand the visual Instagram generation, and retailers realize more and more eCommerce purchases are happening on smartphones, they are investing in responsive, mobile first approaches to design.

The problem is that creating a responsive website is no longer enough.

To compete in today’s media-centric, information-abundant, over-crowded, always-on digital landscape, brands must move past the basicsof responsive design to craft beautiful, simple, and easy to use website mobile experiences."

That means designing specific, well-thought-out website mobile experiences that consider even the tiniest of details.

Creating a Website Mobile Experience

Here are ten things to consider when designing your website mobile experience:

1. Logo

The person your logo means the most to is you.

No one cares about your logo as much as you do and it isn’t going to convince someone to pay you on its own.

In 99% of all cases, the logo never needs to be bigger. Instead, consider displaying your logo at the smallest size possible while retaining legibility so visitors can get to the content faster.

Subscribe to the Liquid Web weekly newsletter for more ideas on how to make your WordPress site experience even better.

2. Navigation Menu

Before you stake your navigation design on the hamburger menu icon, consider whether your audience knows what it is—it could work better to use a button labeled “menu.”

Also think about what happens when the navigation menu opens and how to close it again.

• Does the menu slide in from the side or drop down?
• Does it cover the entire screen?
• Are there drop downs in the menu that are easy to access?
• Is closing the menu simple and intuitive?

3. Headlines

How many times have you visited a website and had the headline take up your entire screen? If you’re anything like me, far too many times. While giant headlines may look great on giant monitors, they have no place on mobile websites where real estate is at a premium.

Ideally, the headline should be large enough to stand out and stand apart, but small enough to allow visitors to get to the content with as little friction as possible."

4. Body Copy

When it comes to the primary content on the page, readability is of the utmost importance. It can be hard to get readability right for every situation as people view websites through numerous devices and browsers with their screens at varying levels of brightness.

Luckily there are a few solid rules of thumb to follow:

• 16pt type is fairly standard for body copy for mobile, while many websites are moving toward 18pt and 20pt sizes for large desktop screens.
• Because different typefaces, even when set to the same size, may visually look like different sizes, the size and line height will also be different.
• If the line height is too tight, it will be difficult for readers to find the start of the following line of type.
• The wider the content width (measure), the larger the type and line height must be. Ideal content widths range from 65-80 characters.
• When calculating line height, aim for 140-150% of the type size.

5. Images

When it comes to images and website mobile experiences, anything that is set to align left or right could potentially produce weird gaps of empty space alongside the image.

Consider setting all images to align center on mobile devices and whenever possible, set them to display at the full content width."

6. Buttons, Links, and Forms

Have you ever visited a website and wanted to fill out a form or click a button and couldn’t because it was too small or didn’t work right? Did you have to zoom in and try again?

That happened because the form was designed for a desktop experience.

For a superior website mobile experience:

• Make sure all links are underlined and easy to see.
• Make sure all buttons are large enough to click easily and leave enough space around them to ensure visitors don’t have trouble clicking on the right thing.
• Make sure all form fields display large enough to accommodate fingers and be filled in easily.

7. Margins And Padding

One of the fastest ways to spot an amateur developer or DIY website is by evaluating the margins and padding on a mobile devices.

Gobs of beautiful white space may look beautiful on a desktop monitor, but scrolling past big blank blocks on a website mobile experience creates a poor user experience. Similarly, wide margins and narrow content widths may simplify the design and reduce distractions on large screens, while on mobile devices, wide margins will pinch the content width and make it harder for visitors to engage with your content.

Website real estate on mobile screens is at a premium, which means you need to make use of all of the space available.

Aim to keep the content width as wide as possible and evaluate vertical margins to ensure the correct content is grouped together."

8. Footer

The footer includes content that is last in the hierarchy of website content. This means the content in the footer needs to be smaller and less pronounced than the rest of the content on the page, while still being easy to find and read.

If you implement a feature like infinite scroll, remember that visitors will not reach your footer until they run out of content unless you limit the number of posts that show at a time and use a “load more” button.

9. Moving Elements

Be careful of anything that moves or rotates.

Movements that may seem small on desktop may disrupt the website mobile experience. Features like rotating testimonials may be cool on large screens, but on mobile devices, if the testimonials aren’t all the same length, they can cause the website to “shake” or “jiggle” vertically each time the testimonials rotate.

10. Sidebar Content

Sidebars, when used correctly, can enhance a website’s user experience.

The problem is that most website owners don’t use them correctly and fail to consider what happens when the sidebar stacks underneath the content on mobile devices.

For example, if a website includes an opt-in at the end of a blog post and at the top of the sidebar, on mobile devices, visitors will see two competing calls to action right next to each other.

That is both confusing and frustrating for a visitor on a website mobile experience.

Take Your Time Developing Your Website Mobile Experience

Remember, your website needs to be beautiful, simple, and easy to use for the best possible mobile experience for visitors. As you can see, it takes a well thought out strategy to ensure this happens on both desktop and mobile, and must be considered from all angles (literally).

Discover 6 Ways to Improve Web Conversions Using Content