Blog

Although mobile first is not a new concept, it has become much more important than perhaps anticipated. In fact, since July 1^, 2019, Google has been using mobile first as its default for all new web domains. Based on its name, one can easily surmise that search engines will shift towards a website designed for a mobile device first, and standard website design next.

With that in mind, websites must be designed with mobility in mind. Consider these stats:

• A study by CIODive found that up to 70% of web traffic is done on a mobile device.
• 57% of all U.S. online traffic now comes from smartphones and tablets
• People today have 2X more interactions with brands on mobile than anywhere else.
• More than 60% of B2B buyers report that mobile played a significant role in a recent purchase

Failing to design your site with mobile first can cost you a lot more than paying to have a mobile website design! This knowledge has led more companies than ever before to update their websites and embrace a mobile first approach.

So, what does it mean for Google to defer to mobile first? Ultimately, that newly registered websites will be crawled by Google’s smartphone Googlebot. The bot will index the site’s pages, understand the site’s structured data, and then show relevant previews as sites as part of the results. For sites that were established prior to July 1, 2019, the bot will evaluate them based on best practices. Site owners will be notified via the search console when the bots deem the mobile first ready.

What Does Mobile First Mean for Older Sites?

Depending on the design of your website, the results may be:

• Sites with both AMP and non-AMP versions – The mobile version of the non-AMP URL will be preferred by Google.
• Dynamic Servers – These will be prioritized based on the mobile content.
• Separate URLs for the desktop and mobile – The mobile URL will be ranked first
• Responsive website design – No change needed as the responsive and mobile site will be the same.
• Canonical AMP- No changes as each version is the same
• Desktop only – Nothing will change as there is no other site for the bot to compare it to.

Benefits of Mobile First Design

Of course, if you are planning on having a website designed in 2020, then talk to the Page Progressive website development team about mobile first design. Why? Consider these benefits-

Google Ranking

In 2010 at the Mobile World Congress, Eric Schmidt announced that mobile first would begin being implemented. Here we are a decade later, and Google is now using mobile first indexing for more than half of all webpages – and that number is only going to increase. So, having a mobile first designed site means your site will have a better SERP.

Mobile Conversions

As more and more people have mobile devices (It is predicted that by the end of 2020, that number will skyrocket to 2.8 billion), the amount of traffic you will get on those devices is only going to increase. In fact, a Google study found that over 40% of online transactions are done via a mobile device. Having a mobile first site will mean your site guests are more likely to become clients/customers.

Your Audience

Given the stats mentioned above, it is safe to say that some of your audience is going to be mobile only. A TechJury survey found that in 2019, 16% of US web users only use a smartphone. In countries in Asia and Africa, that number is even higher.

Improve Your Image

Do you want your audience to see you as modern and up to date? Then a mobile first design is a must.

If you are a start-up company and have not yet built a website, then now is the time to build a mobile first site. If you already have a desktop site, then a mobile first site needs to be at the top of your company’s To-Do List!

Elements of a Well-Designed Mobile First Website

If you are planning to design a site with mobile first in mind, then here some things to consider.

1. Contact Info – Make it simple for guests to contact you. Have your contact in an easy to find place. Beyond contact info, make it easy for your guests to contact you via a live chat or a chatbot to your website.
2. Verify the Mobile Version – If you have a separate URL for the desktop version of your site from that of your mobile version, then you need to verify the URL in your Google console.
3. Data – Be sure to use meta data and structured data so that Google’s bots can establish context, and show your site in search results. Ideally, you need to use the same tags on your mobile site as you do for the desktop version else Google bots may fail to crawl your site.
4. URLs – Be it pictures or videos, you need to certain that the URLs stay the same every time your page loads. Failing to do this prevents Google from being able to process and index your resources correctly. As per Google’s own admission, “If your site is using different image URLs for the desktop and mobile site, you might see a temporary image traffic loss while your site transitions to mobile first indexing.”  This why consistency in URLs is vital.
5. Click-to-Call – Ideally key data such as inventory, business hours, prices should be listed. However, if you opt not to do that then you must have an easy to find Click to Call button so people can get the info they need quickly.
6. Click to Scroll – This means setting up navigation buttons that can be clicked so users can get to a longer scrolling page. A study by String Automotive did their own A/B testing for their mobile landing page and found that adding click-to-scroll functionality reduced their bounce rate by 37%.
7. Call to Action – The Call to Action should go at the top of the mobile first designed web page, as users still spend the majority of the time at the top of your page before actually scrolling down. You should also consider adding a second CTA button about midway down on the page as a reminder.
8. Sticky Headers and Footers – Despite the smaller screen mobile offers, it is still vital that you keep your CTA and any navigation tools easily found as this improves user experience and keeps them from leaving your mobile site for another vendor.
9. White Space – White space has already proven to be valuable on a desktop-focused website, ad it is just as important on a mobile first designed site. On mobile sites the white space makes your site look modern, makes it easier to read the words and touchscreen interactions are less likely to result in accidental clicks.
10. Use High Contrast – In a mobile first design, contrasting colors not only aids in page optimization but since people use their devices everywhere and natural light can make viewing difficult having a high contrast site will make it easier for viewers to see and read. This contrast is also a critical part of your mobile first graphics. Be sure that the images you use incorporate as many of the following aspects as possible:
    1. Vivid colors
    2. Strong typographical elements
    3. Geometric shapes and abstract patterns
    4. Gradients and duotones
    5. Real photographs
    6. When possible, hand-drawn illustrations and designs
11. Forms – Be sure that any forms you include on your mobile site are designed with mobile first in mind. We have all experienced trying to fill out a mobile form that was not cooperative. It leaves us frustrated and perhaps caused us to leave the site without making a purchase. Be sure that any forms on your mobile site are designed to be used with ease on any mobile device!
12. Single Columns – Most mobile devices are not designed to work well with columns of information as there simply isn’t enough room. Stick to a single column design unless adding the occasional misaligned column helps add a bit of interest and helps grab the guests’ attention.
13. Speed Matters – Your mobile site needs to load quickly otherwise guests leave, and many will not return. The best ways to ensure your site loads quickly is with a Content Delivery Network (CDN), by talking to your host provider about upgrading your hosting plan, and by minimizing the number of videos and images.
14. Media – As referenced above, the number of media items on your mobile first focused site can affect speed, but they can also determine if a guest stays on your site. Many mobile users are limited by cellular data or are going to be on WiFi. Minimizing videos and excessively large picture files makes your mobile site more user friendly. When you do use videos on a mobile site, don’t set them up as autoplay, as this can distract the user from your CTA. It is also important that videos use the same structured data on the mobile version as is used on the desktop version of your site!
15. Shorter Copy – Unlike the desktop version of your website, your mobile site doesn’t need excess text. Yes, you still need to provide the crucial information but look for ways to streamline things. A few approaches to streamlining are using bullet points and keeping paragraphs and sentences short. The biggest thing to keep in mind is that you need to be consistent in what you say on your mobile site and the desktop version of your site!
16. Simplicity – Beyond having white space and single columns there are a few other aspects your mobile first site needs. These are:

• • Fewer pages than your desktop site
  • A better search feature so people can find what they need
  • Clean lines and wide borders
  • A simple font that is easy to read

Mobile First Puts the Audience First

Many of the actions mentioned come down to a single factor – the user! No matter what features you incorporate into your mobile first design remember that it is all about the audience! Take time to think about what matters to you when you visit a mobile site and be sure to include those features on your own mobile site.

These elements will go a long way towards making your mobile site everything your guests are looking for, thus helping to convert them from visitors to consumers. As you plan your mobile first designed site incorporate as many of these features as possible. The Page Progressive team will be happy to help you determine which ones will benefit you the most and can even identify other areas that can make your site more mobile first friendly.

As part of the process of finding out what elements are best for your mobile first site, it is recommended that A/B testing be included. No matter how carefully a mobile first website is designed there will always be room for improvement. A/B testing will establish what approaches are working best for you so that you can ultimately have a mobile first site that is efficient and converting guests into satisfied customers.

While mobile first indexing may not affect every site, it is important that you do your part to see that your company’s website implements the correct features and coding to help it do well with search ranking. Of course, if you feel that your site could benefit from a re-design then don’t wait.