Mobile Website Design and Performance Basics

When it comes to website design, mobile website design and performance often take a backseat to the desktop. But today with mobile internet sessions far outpacing desktop sessions, mobile website design needs to be a priority.

In this post, we’ll cover what you need to consider when designing your site for mobile.

Before we get started, however, we should put to rest any misconceptions that mobile doesn’t need to be a priority for your business. In The Ultimate Guide to Mobile SEO, we break down Google’s mobile-first indexing and how mobile search is radically changing the landscape. It is certainly worth the read!

So back to mobile website design… there are three basic types of mobile web designs:

Responsive Site

In a responsive mobile site, everything is the same as on the regular site, including URL, design, images, and HTML. The only difference is, the CSS, or cascading style sheets, which defines different rules for how the site will appear based on browser width. This basically means that the way your HTML elements are displayed on screen will vary on different sized browser windows.

Responsive Web Design + Server Side (RESS)

With this type of mobile site, your URL would be the same, but you would have different HTML and CSS when different types of devices access your site. When a site uses RESS for mobile, the server recognizes which type of device is trying to access it, and sends the appropriate information accordingly.

One major advantage to RESS is that the user experience is a lot faster than on a responsive mobile site. The average web page is over 3 MB. That can be a lot for a mobile device to handle, so the loading speed is slow. If you have a Responsive site, you may have certain images that are huge and designed for desktop. Even if the images are set to “not visible” for your mobile site, the server is still pulling all of that information and processing it. But with RESS, the server knows not to send those larger images to a mobile user.

Separate Mobile Site

Some businesses who are heavily investing in mobile SEO have a separate mobile site. The mobile site is a parallel site with a different URL. Usually, the mobile URL is a subdomain, and it looks something like this: m.website.com. This separate but connected mobile URL allows businesses to create a design specifically for the mobile experience.

Often, the entire site is parallel, so if your main domain has a page: website.com/page1, then your mobile site would have that page as m.website.com/page1. But since it’s a completely different site, designers have unlimited possibilities. Your mobile site could have completely different information from your main domain.

There are many advantages to this type of design. First, you can completely tailor your mobile site to the mobile user experience–not just the HTML and CSS, but every single aspect of your site. You may learn that mobile users of your site are seeking completely different information from desktop users. Perhaps you decide to put shorter articles on your mobile site to account for mobile users’ short attention spans. In addition, you can load only those aspect of your site that are necessary for your mobile users. Smaller images and CSS files, for example. This will lead to faster load times and a speedier user experience. You also won’t have to plan for backward capability with desktop browsers, so you can use newer, more advanced technologies, like HTML 5.

A separate mobile site can be tricky and more expensive–you have two separate sites to maintain, and you have to manage all the cross-linking and redirecting users to the mobile site. If you can afford it, it’s definitely worth it to have a professional digital agency, like White Peak, look at it.

If you do seek professional help, make sure that they are experts at web design, development AND SEO. Many website designers just build sites that look good. In The Ultimate Guide to Mobile SEO, challenges like mobile-first indexing, AMP and Facebook Instant Articles are changing everything you thought you knew about your website. If a digital agency isn’t talking to their clients about these challenges, they are not an agency worth talking to.

There are several factors to consider when designing your mobile site.

Speed

The mobile bounce rate is a lot higher than that of desktop users. This is because mobile users are less patient and more strapped for time. When users are searching for something on mobile, they normally want to find it NOW. For this reason, it’s important to design mobile sites with loading speed in mind. Use smaller images, smaller HTML and CSS code, so that the server has less information to slow down the loading time.

Call to Action

It’s not easy to click a text call to action on a mobile device. Use buttons and graphics to make it easier on your users.

Buttons and Links

Speaking of buttons, how many times have you wanted to touch a button on your phone, only to accidentally choose the button next to it? Or better yet, you have to pinch or expand the screen ten different times while using a mobile site in order to go between choosing buttons and reading the content on the page. Don’t do this to your users. Make the buttons big. Even people with small fingers can’t accurately touch a tiny button on a crowded page.

Menu Navigation

Most mobile devices are not wide enough for users to view a long list of menu items across the top of the screen. Don’t use your usual site navigation options. Instead, choose a short list of necessary menu options for the top of the screen.

Size of the Screen

Not all mobile devices are created equal. Think about the varying size of smartphones. The new iPhone 8 plus is 3.07 inches across if held vertically. When you turn it on its side, your screen width changes to 6.24 inches wide. In contrast the Samsung Galaxy s8 is 2.68 inches across, 5.68 inches if you turn it on its side.

And don’t forget about tablets. Most people hold their tablets on their sides, giving you a much wider screen to work with. On average, this ends up being about 7.5-10 inches wide. It would be impossible to optimize your site for every one of these screen sizes. What’s important, is that you use analytics to determine how most of your users access your site, and optimize the experience for those devices.

Use Schema.org Structured Data

Schema.org is a collaboration between the major search engines to help businesses provide the most important data to search engines so that they can understand your site content and place it in the appropriate search results. This is what accounts for the little snippet of information you see next to the page link in the SERP. If you’ve got a good, descriptive snippet, you’re more likely to get the right customers to click on your link.

Forms

If you have forms available on your mobile site, it is imperative that you simplify them. Use large print. Make sure every option in a menu is visible on one screen. Don’t ask for unnecessary information. Most of us have filled out at least one nightmare of a form online. If it’s a pain on a desktop, it’s nearly impossible on mobile.

Whitespace and Text

If your mobile site includes the same amount of text as your regular site, it will look crowded and difficult to read. Think about reducing the amount of text, and increasing the whitespace.

Conclusion

Mobile website design requires planning and intentionality. A well executed mobile site will distinguish you from your competition and create opportunity. Poorly executed you will lose leads, sales and revenue.

While its true that conversion rates are lower on mobile devices, visitors that start on your mobile site often come back to your desktop site later – if you’ve made a good first impression. If you haven’t had a mobile website audit, let us know. White Peak will provide you with a free mobile audit so that you know where you stand and how to take your site to the next level.