Why Your Wix Website has to be Mobile Friendly

No matter what platform your current or future website is built on, you’ve probably been told multiple times that it has to be mobile friendly.

On average, most people spend around five hours a day on their phone. While this is great for you because customers can reach you directly from their phone, it’s a bad thing if your website is not mobile friendly.

Below, we’re going to discuss best practices for mobile web design and how to use them in your Wix website. We’ll also talk about Wix’s mobile features and how to use them.

Mobile Web Design Tips

1. Responsive Design

Almost all of us can recall a time where we navigated to a mobile website and either couldn’t read the text, couldn’t easily navigate, or had to enlarge text to read it. Most of us have clicked away after just a few seconds, frustrated at the poor mobile web design.

Luckily there’s Wix Mobile, a tool that allows you to change the design of your site.

Wix Mobile Editor:

Wix features a mobile editor. This tool enables you to design a totally unique, mobile-friendly website. You can l get additional information about the mobile editor and its features here.

The Mobile Editor Allows You to:

• Choose your colors, orientation, animation, etc. for a truly custom menu.

• Hide elements, which we’ll discuss more later.

• Alter orientation, text size, and color.

• Enlarge buttons.

• Include the Mobile Action Bar, which is a one-click button that links items like social media channels, your location, phone number or email, etc.

Ultimately, you want your mobile users to be able to easily navigate your website and read text without adjusting the view or enlarging text. You’ll also want to ensure that they don’t have to change the landscape view by turning their phone to view elements that are off-screen.

1. Easy-to-Use Menu

Your mobile website menu should be very similar to your desktop menu in terms of color and font. The key difference is that it’s a button users click to see the entire menu.

Menu Button

You’ll want to make it clear to visitors on where and how to view the menu. Generally, most people will look for the menu in either the top right or left corner. Some websites have the menu in the middle of a page, which is acceptable so long as it’s intuitive and easily found.

A teaching moment here: This type of menu is usually referred to as a hamburger menu as most look like the one below:

Since we’re talking about general rules to follow with menu buttons, let’s also discuss best practices for a drop-down style navigation menu. We suggest making text slightly larger than your desktop size. It’s easier for users to select the menu item they want rather than clicking on one they don’t a million times.

Here’s What You Can Do in Wix:

• Change color, orientation, and the font size of menu items.

• Choose whether you want the menu to appear from either the right or left side of the screen. You can even have it completely fill a phone screen.

• Create a custom menu with different symbols or colors and even add animation!

1. Clickable Links and Buttons

Before you start creating your mobile site, you’ll want to do a quick check of your desktop and make sure all links are working. Even if you’re sure they are, double check.

Links

Any desktop external links or links that redirect users to other pages will work on your mobile site. There’s no need to re-link anything.

We recommend that the font size for links be larger, making it easier for users to select it. We’ll talk more about larger font sizes in a moment.

Phone Numbers

The Wix editor allows you to link phone numbers, making it accessible from both the mobile and dekstop site. This allows users to call the number just by clicking on it.

It’s really easy to set up:

1. Highlight the phone number that you want to link.

2. Copy the phone number.

3. Select the chainlink button.

4. Click on the ‘Phone Number’ button.

5. Paste the text and select ‘done’.

That’s it! Simple right?

Buttons

Finally, we recommend making mobile buttons larger. Sizes are easily adjusted within the Wix Mobile Editor. They don’t need to be huge, but you want them to be easily found and clickable.

1. Utilize Larger Font

Trying to click on or read something from a small phone screen can be tricky, so it’s recommended to slightly increase text.

For desktop sites, the smallest recommended text size is 16 px. On phones though, you’ll want text to be between 17 px to 20 px depending on which font you use.

The Wix Mobile Editor also allows you to change the alignment of text, which you may want to consider as you’re changing font size. You’ll want to play around with text as you’re designing as what you had on a desktop site may not look as good on a mobile site.

Another rule to follow is to test the changes you’ve made on your own phone. Text that looked big enough in the Mobile Editor may be too small for mobile sites.

1. Stay Away from Pop-Ups AKA Lightboxes

I don’t recommend pop-ups (Wix calls them Lightboxes) on your mobile site. Oftentimes, they’re incredibly frustrating for users and create significant navigation problems.

However, if you do decided to include Lightboxes, there’s a few rules you should follow:

• Adjust the size of the Lightbox window from the Wix Mobile Editor. You don’t want it to be bigger than a phone screen.

• Make it very simple for users to close the window. This is incredibly important as users can get annoyed or frustrated if they can’t close a pop-up without zooming in or clicking the button several times. Make sure to test this from a mobile device.

1. Go Easy on the Content

One of the most useful features within Wix Mobile Editor is that you can hide things.

While it might sound strange to hide things at first, consider the following. A desktop website that is content heavy should have a mobile site that is light on content. Most mobile users aren’t doing deep research or reading through entire websites. They’re looking to find accurate information as quickly as possible.

Here’s a few things you can hide:

• Repeat call to action buttons or strips

• Logos that are placed around your site, like in the footer, or a few badges or certificates.

• Buttons or menu options in the footer.

• Elements or items that are not mobile-friendly, like images, lines, shapes, etc.

The above are just examples. There are many additional things you can hide to lessen the amount of content on your mobile site.

How to Hide Elements with the Wix Mobile Editor

Hiding an item within the Mobile Editor is simple. Just click on the item or element you want to hide and select “Hide” from the left-hand sidebar menu. To unhide this item, select “Hide” from the sidebar menu and select the element you want to show.

This is just some of what’s inside the Wix Mobile Editor. To see everything it has to offer, download it and give it a try yourself.