4 Steps to get Your Small Business Website Ready for Mobile First Index

With Google’s upcoming switch to mobile-first indexing due mid-year, it is time to boost your business with the creation of a mobile-friendly website. Consider the following four tips for optimizing your website on any device in time for the shift to mobile first.

UNDERSTAND THE SWITCH TO A MOBILE FIRST INDEX

Google uses your desktop content to determine your website’s ranking for both desktop and mobile, meaning your rankings now depend on how your content appears on a desktop rather than on mobile devices. But since more people now access the internet with their mobile devices than from a desktop, Google has officially decided to rank websites based on mobile content. If your website does not have a responsive layout, has a slow loading speed or poorly designed navigation and content, your ranking is likely to decrease if you don’t optimize your site for mobile before the shift.

TEST AND ACCELERATE LOADING SPEED

Recent studies indicate that  47% of consumers want a web page to load in two seconds or less, and 40% of viewers leave a website if the loading process takes three seconds or longer. These statistics, along with Google’s announcement that mobile page loading speed will be a crucial factor for determining rankings after the switch, should be enough to make every business owner double-check their website’s mobile loading time. Determine the loading speed of each of your website’s pages with the use of Google ToolsChrome User and Page Speed Insights.

If you need to accelerate your loading speed, the following methods are among those most recommended:

  • AMP: The Accelerated Mobile Pages Project — AMP is an open-source enterprise that employs pared-down HTML to load your website’s pages quicker than standard HTML. This, in conjunction with Google storing your content in its buffer storage, helps to enhance your website’s loading time.
  • Progressive Web Apps — PWAs are options for those who don’t want to move to the AMP project. PWAs react quickly to user communications and load rapidly, making them a viable alternative to the AMP.
  • PWAMP — PWAMP is a mixture of PWA developed on AMP, JS, CSS, and HTML, but sites using PWAMP might not certify as fast as AMP pages do. However, PWAMP pages are still speedy and offer the same advantages as PWAs.

PUT THE SPOTLIGHT ON USER EXPERIENCE

A typical error that businesses tend to make is adapting their desktop websites to mobile while still behaving as if mobile is simply an addition to the desktop site. To achieve high rankings after the switch, companies must prioritize mobile by making adjustments based primarily on mobile users’ experience. Ask yourself the following questions about your mobile website users:

  • Navigation — What does it look like and how easy is it to maneuver? Is it simple enough for users to navigate back to where they have just been?
  • Clarity — How easy it is to find important information? Are my title pages clear? Is my contact information easily accessible?
  • Consider pop-ups — Is it easy to close pop-ups? Should I reduce pop-ups altogether?
  • Font — How big is my font size? How big should it be?

With these considerations in mind, you are ready to move to the final step of preparing your site for mobile.

OPTIMIZE YOUR DESIGN AND CONTENT

After closely analyzing your website based on the above questions, optimize and design your content for mobile with a focus on creating the best mobile user experience possible. There are many things you might want to reorganize about your design and content, but here are some of the most basic changes to make:

  • Responsive web design — Google recommends the responsive web design, which is a design approach with the goal of optimizing the appearance and functionality of a site on an assortment of different devices and screen sizes.
  • Use drop-down menus — Google stated it would not penalize websites for shielding their content behind drop-down menus if the content loads at the same time as the page, so feel free to incorporate drop-down menus reasonably when constructing your mobile site.
  • Don’t use Flash — Most mobile users cannot see Flash content, so avoid it altogether and use Java or HTML instead to add those engaging components to your site.
  • Make sure content is easy to read — Make your content easy to read on small screens; provide a few links in longer portions of text, so users can easily get where they want to go and use headers to divide your content and make your pages look neater.
  • Make text size and touch screen abilities easy to click on — Ensure your website is “tap friendly” by making your tap points the proper size and leaving ample space between the clickable components.

 

Looking for interactive – mobile-first for your business, consult with our expert! Contact us today!

What is Responsive Web Design?

responsive website

Have you asked yourself, “What is responsive web design?” Responsive web design is an approach whereby a designer creates a web page that “responds to” or resizes itself depending on the type of device it is being seen through.  That could be an oversized desktop computer monitor, a laptop or devices with small screens such as smartphones and tablets.

Responsive Web design has become an essential tool for anyone with a digital presence. With the growth of smartphones, tablets and other mobile computing devices, more people are using smaller-screens to view web pages.

These websites have to also consider the mobile-first index just announced by Google in April 2018. As more small businesses increase their mobile presence, their website, eCommerce, Google Business page, social media pages and other assets have to be easily accessible across all devices.

WHAT IS RESPONSIVE WEB DESIGN?

The purpose of responsive design is to have one site, but with different elements that respond differently when viewed on devices of different sizes.

Let’s take a traditional “fixed” website.  When viewed on a desktop computer, for instance, the website might show three columns. But when you view that same layout on a smaller tablet, it might force you to scroll horizontally, something users don’t like. Or elements might be hidden from view or look distorted.  The impact is also complicated by the fact that many tablets can be viewed either in portrait orientation or turned sideways for landscape view.

On a tiny smartphone screen, websites can be even more challenging to see. Large images may “break” the layout. Sites can be slow to load on smartphones if they are graphics heavy.

However, if a site uses responsive design, the tablet version might automatically adjust to display just two columns. That way, the content is readable and easy to navigate. On a smartphone, the content might appear as a single column, perhaps stacked vertically.  Or possibly the user would have the ability to swipe over to view other columns.  Images will resize instead of distorting the layout or getting cut off.

The point is: with responsive design, the website automatically adjusts based on the device the viewer sees it in.

HOW DOES RESPONSIVE WEB DESIGN WORK?

Responsive sites use fluid grids. All page elements are sized by proportion, rather than pixels. So if you have three columns, you wouldn’t say exactly how wide each should be, but rather how wide they should be in relation to the other columns. Column 1 should take up half the page, column 2 should take up 30%, and column 3 should take up 20%, for instance.

Media such as images is also resized relatively. That way an image can stay within its column or relative design element.

RELATED ISSUES

Mouse v. touch: Designing for mobile devices also brings up the issue of mouse versus touch.  On desktop computers, the user normally has a mouse to navigate and select items.  On a smartphone or tablet, the user mostly is using fingers and touching the screen.  What may seem easy to select with a mouse, may be hard to select with a finger on a tiny spot on a screen. The Web designer must take “touch” into consideration.

Graphics and download speed: Also, there’s the issue of graphics, ads and download speed. On mobile devices, it may be wise to display fewer graphics than for desktop views so that a site doesn’t take forever to load on a smartphone.  Larger ad sizes may need to be exchanged for smaller ads.

Apps and “mobile versions”:  In the past, you might have thought about creating an app for your website — say an iPad app or an Android app.  Or you would have a mobile version specifically for BlackBerry.

But with so many different devices today, it’s getting harder to create apps and different versions for every device and operating platform.

WHY SMALL BUSINESSES NEED TO SWITCH TO RESPONSIVE WEB DESIGN

More people are using mobile devices. A recent Pew study 77 % of Americans now own smartphones in 2018 which is up from just 35% in Pew Research Center’s first smartphone ownership survey carried out in 2011.

Check your traffic and you might just be shocked at how many visitors are getting to your website through mobile devices.  (In your Google Analytics, select “Audience” on the left side, then “Mobile” to see what proportion of traffic is from mobile devices. You can even drill down to see which devices are sending the traffic.)

Responsive design templates are everywhere now, for purchase.  If, for instance, you have a WordPress site you can visit a reputable template gallery such as ThemeForest and search for “responsive WordPress themes.”  Purchase one for under $50. We, Atlive Tech Lab, can then customize it for your logo and brand.