Time To Go For Mobile First Web Designs

mobile-first design is an approach in which web designers start product design for mobile devices first. Responsive web design is a web design method that enables web to fit the screens of different devices automatically

We are well into 2022 and We can see that there are still a huge number of small businesses throughout USA that have not had their websites re-engineered for the now dominant smartphone-mediated economy.

Rather, they still have the older style website themes that work great on desktop browsers, but which become microscopic and virtually unusable on smartphones such as the Apple iPhone and Samsung range of devices. A quick glance at the example below demonstrates clearly what I mean.

When your website is not mobile responsive, this proves quite costly from a business point of view for two (2) main reasons. Firstly, non-responsive websites receive poor Google ranking for mobile searches.

What this means is that when people perform searches using the Google search engine using their smartphones, it’s only those websites that are mobile responsive that will get high rankings in the results. Google even tells the user which websites in the list are mobile responsive by displaying the mobile-friendly tag in their listings.

On the other hand, if your website is not mobile responsive, then it will receive much lower rankings for mobile searches, which for all intents and purposes means you won’t get any of this traffic at all. This is particularly bad when you take into account that the vast majority of Google searches are conducted on mobile devices now.

Secondly, non mobile responsive websites make for a very poor user experience for your visitors, i.e. your potential customers. Unfortunately, this poor experience almost always leads these people to quickly give up on your site and try their luck elsewhere, never to return.

The effects of all of this are already being felt by those businesses with non-mobile responsive websites. When people come to me for help in this situation, they all say fairly much the same thing; that their website inquiries have dropped to almost nothing over the past six to nine months and they have no idea why. Sadly, these businesses are hurting badly from a financial perspective because of this mobile dilemma.

So to assist you to re-engineer your own business website to be fully supportive of the now dominant smartphone-mediated economy, I present to you this five (5) point action list.

1. Perform Google’s mobile-friendly website test

Google’s Mobile-Friendly Website Test will tell you in just a matter of moments whether it views your website and mobile-friendly or not. Simply go to the Mobile-Friendly Website Test web page, enter your business website address, and click the Analyze button. In a matter of moments, you’ll know where you stand.

If your result is the green Awesome message, then this is great news because it means that Google sees your website as mobile-friendly which is a positive thing from a ranking point of view. Just be aware that the test is applied to the entered web page only, so you may want to also test a range of other pages to ensure your whole website is in fact mobile-friendly, especially key landing pages.

However, if you get something similar to the result above, then you’ve got serious issues from a business point of view. If this is indeed the case, then it’s time to approach your web developer as a matter of urgency and get her to apply a mobile responsive theme ASAP.

2. Perform Google’s mobile speed test

If your website is mobile responsive, that’s a major plus for your website in the smartphone-mediated economy, however, you’re not out of the woods yet. The next thing to check is loading speed, which we want to be as fast as possible. This is for two (2) reasons:

1. Higher page load speeds have a beneficial impact on your Google search engine rankings
2. Higher page load speeds are appreciated greatly by your website visitors who don’t want to be kept waiting for the information or resources they’re looking for.

Once again using a free Google tool to determine the loading speed of your website, go to Google’s PageSpeed Insights web page, enter your website address, and click the Analyze button.

What I generally aim for here with my client sites is a rating of 70/100 or above. If you can get 80/100 or higher, this is even better. If you’re below 50/100, then this is not so great.

Be advised however that getting page load ratings of 80 or above is very hard to achieve, especially when you are using WordPress. By the time you added a theme and half a dozen plugins, all of which require a fair share of server resources for their JavaScript and CSS processing requirements, then page load times are impacted quite considerably.

However, as long as you are hovering on or about 70/100, this seems to be more than satisfactory from Google’s point of view and your search rankings won’t be impacted negatively. It’s also fast enough for all but the most impatient of website visitors I’ve found.

If however, your page lad speed ranks are very low, then it is once again reason to contact your website developer to jump in and speed things up considerably.

Summary Ok, so that’s the technical aspect of checking your website’s ability to participate effectively in the mobile-mediated economy. In part 2 of this article, I will address the critical issue of getting all key web page elements on the ‘first screen’.

In part 1 of this series of how to fully engage with the now dominant smartphone-mediated economy, I explained how to use a number of free Google tools to check if your website’s theme was indeed mobile responsive and that its loading speed was of an acceptable rate. In Part 2 of this series, I will discuss the all-important concept of designing key web pages for the smartphone's first screen.

3. Get everything important into the first screen

What I’ve noticed in almost all cases when I examine a client’s website for the very first time is that even if it is fully mobile responsive and is acceptably fast loading, there is still a huge issue that gets in the way of turning visitors into conversions. This issue, which largely goes unnoticed, even by some experienced web developers, is failing to have all the most important content and action items displayed on the “first screen”.

The first screen is the section of a web page a smartphone user sees when it first loads before they do any scrolling. The image below shows the first screen of my website on my iPhone 6+S, which I must note, is one of the larger smartphone screen sizes on the market at the time of writing.

Now here’s the thing; there are two things that you can safely assume about smartphone users when they are looking for products, services or information online:

1. They’re in a hurry to have their specific need or want to be satisfied as quickly as possible
2. They won’t tolerate being forced to search for the information action items they need almost immediately

Therefore, whenever I design websites or those of my customers, I work very hard to keep at least three (3) essential elements on the first screen:

Summary

So when designing the key landing pages for your business website, therefore, it is essential that you check it at each stage of development on a smartphone rather than on your PC. This is because even though a landing page may appear to be great when viewed on a PC, this is no way that translates to how it will look on a mobile device.

4. Keep textual content compelling but brief

There are many kinds of business websites that don’t have to do too much to get their visitors to take action, e.g. dentists, doctors, plumbers, electricians, etc. However, there are just as many others whose visitors will not arrive in the mindset required to take action be it making a phone call, completing a form, sending an email, or signing up for a free trial.

In fact, many such visitors may require quite a bit of convincing before they’re willing to perform even a low-risk action such as providing their email address in return for a free report. In most cases, this convincing will have to be achieved through the persuasive use of textual content.

However, writing textual content intended for consumption on smartphones is no easy task! The key is to give the reader as much first-screen information as possible and to avoid them having to scroll, swipe, or tap to get the entire key message of the page concerned.

Summary

Getting all essential parts of the key message of a web page on a smartphone’s first screen is a tough job for anyone, and this includes experienced web content authors. However, with patience and persistence, and through an iterative process of editing and checking, you’ll hone the ideal heading and opening paragraphs perfect for consumption on smartphones.