Web Design

Site Speed Optimization: Testing & Measuring

Site Speed Optimization: Testing & Measuring

The Local Tampa SEO System Emblem - Spicy Nuggets Eden Ads

SPICY NUGGET
The primary purpose of optimizing the speed of your site is not getting better grades from Google. No. It is to improve the experience of visitors of your website, to accomplish the purpose of your business.
 Phil Chavanne, CTO

In this video, we show business owners how to test properly the speed at which their home page loads. Testing is done in several browsers to understand your visitors’ visual experience, then in PageSpeed Insights, the tool used by Google to measure the speed indicators called “Core Web Vitals”.

Google and Lighthouse have developed the Core Web Vitals as speed optimization benchmarks for mobile websites. Passing the Core Web Vitals is both an achievement and a necessity for business owners: Google is pressing web designers and business owners to speed up their mobile sites to improve visitors’ experience (“Customer Experience” or “User Experience”) on their site.

Google has made increasingly clear over the past 3 years that the experience offered by a website to its mobile users ought to be a core focus of businesses, and that obtaining a passing grade on the Core Web Vitals (in order words, making a site really speedy) would be a ranking factor going forward. Better speed, better ranks.

Site Speed Optimization is measured by the Core Web Vitals Score of PageSpeed insights - Eden AdsUnderlying reasons

Google’s position is reasonable in more than one way. Google does not emphasize SEO at all… but points to user experience. Many studies have shown the negative effects of a slow site on its visitor traffic:

      • Potential visitors are turned away before they even visit
      • Potential buyers abandon their shopping cart before completing their transaction
      • Visitors form a negative opinion of a company (frustration, impatience)
      • Bounce rates (single-page visits/multi-page visits) reach high levels, penalizing the Google ranking of a site
      • Visits become shallow (few pageviews): visitors don’t see enough information to form a bond with the business

Google suggests business owners to take a good look at their website and to work to help visitors accomplish quickly the purpose of their visit. (We discussed this point in a blog post about mobile-optimized sites)

In other words, to quote Google: “Making a mobile site requires prioritization. Start by working out what the most important and common tasks are for your customers on mobile.

We encourage all local businesses to test their website speed at https://developers.google.com/speed/pagespeed/insights/; or to use the free Core Web Vitals testing tool we have integrated on this website: https://edenads.com/what-we-do/#searchengine to guide you through your site speed optimization.

Note about testing

It is important that you clear your browser history and cookies before you test, because if you have been on your site before, it is likely your browser will have retained some of it in memory. Browsers do this to speed up access to websites you visit. To observe the real experience, clean up your history and cookies.

Slow site? Failing the Core Web Vitals?

If your site is slow, or fails the Core Web Vitals test, take advantage of our complimentary consultation. We offer a site speed optimization service with a goal of reaching scores of 90/100+ for both mobile and desktop.

Give us a call at (813) 940-5699.

Mobile First Sites: Designing for Outdoor Use

Mobile First Sites: Designing for Outdoor Use

The Local Tampa SEO System Emblem - Spicy Nuggets Eden Ads

SPICY NUGGET
We use our mobile phones in weird and stressful circumstances. Web designers must re-think their mobile GUIs to minimize the negative effects of external, non-controllable constraints on the browsing experience.
 Phil Chavanne, CTO

This is Part V on our series on mobile-optimized websites (aka “Mobile First Sites“). We will deal here with issues of legibility related to how mobile phones are used.

Mobile-optimized websites must be designed with the specific circumstances of their use in mind; and this is just another reason why “just responsive websites” are a thing of the past.

Mobile phones: keeping close tabs on them

Mobile phones rarely leave our line of sight, and when they do, research shows we really feel bummed out. A term was coined in the UK in 2012 to designate this fear: “Nomophobia“, a “fear of not having your phone around”.

According to a study conducted by Monash University in Australia, some 99.2% of the Australian population using mobile phones would have nomophobia (really?).  A study conducted in 2019 on a small sample of the U.S. population of university students showed that 75% of them would present moderate-to-severe symptoms of nomophobia.

 

Nomophobia and the prison of mobile phones

 

Since we apparently don’t like to be separated from our mobile phones, it is safe to assume that we use them everywhere: at home (in the weirdest places), at work (where we may not be allowed to), and everywhere in-between.

A couple of statistics clearly show this is indeed the case:

      • 70% of employees keep their phones “within eye contact” at work. [Career Builder, 2016]
      • 88% of smartphone owners use their phone while driving on average 3.5 minutes/hour every day. [Zendrive, 2021]
      • 80% of shoppers use a mobile phone in a physical store. [OuterBoxDesign]

What does this imply for web designers?

A Variety of Situations

In a previous blog post, we discussed a variety of situations in which we use our mobile phones:

      • In our vehicle
      • Out in the street
      • With and without readers
      • At the office
      • With children in tow, babies in arms
      • At restaurants, coffee shops
      • In stores
      • Etc, etc, etc.

 

Using a smart phone in many different situations: the reason why mobile first sites

 

In all these situations, we highlighted 3 external constraints impacting visual experience:

      • Lighting conditions
      • Speed of visual interaction
      • Situational stress

All 3 of these constraints are likely to cause a user to bounce off our mobile site faster than normal (not good for SEO and lead generation).

Let’s dive into each one to discuss how a Mobile First site will tackle them.

Contrast

The LED screen of a mobile phone emits a good amount of light at a short distance, but contends with a much more powerful source of light: the sun. The glare of the sunlight on a phone screen make it harder to use it outdoor. You can’t outpower the sun. You can’t count on people to use anti-glare screens on their phones either.

As a web designer therefore, if you want to ensure your Mobile First website remains legible, boost the contrast of your mobile design.

The eye and the brain perceive objects by differentiating them from their background. Shape and color are perceived almost simultaneously (See reference study). Color catches the eye but color alone does not identify the object for the brain. Contour, form, or shape does. The cleaner its contour, the more identifiable the object. Contour includes 3 dimensions, as depth defines the limits of the surface of the object.

 

visual contrast and clean edges

 

A “clean” contour means a sharp differentiation of the edge of an object from its background. As web designers we work in 2 dimensions, and add artificial shadows and a Z axis to create the illusion of depth. Sometimes we use the 4th dimension, time, with animation.

But the web is essentially two-dimensional, and flat objects can’t count on relief (3D form) to be further differentiated from their background.

The sharper their edge, the more readily identifiable objects become.

Let’s take an example. The letter “F” is shown here in 4 different ways:

 

Differences of lebility stemming from contrast between object and background

 

Obviously, #2 and #4 are more identifiable than #1 and #3. The edge of the letter is crisper, sharper, more differentiated in instances #2 and #4, and much more fuzzy in #1 and #3.

The background color does not help. We measured the contrast ratios of each set (foreground color vs. background color) using the accessibility tool offered by WebAIM:

      • #1    CR= 1.15:1
      • #2    CR= 3.99:1
      • #3    CR= 1.55:1
      • #4    CR= 6.48:1

In cases #1 and #3, the shape/contour of the letter F isn’t quite easily as perceivable as in cases #2 and #4.

The contrast ratio of #2 is about 61% that of #4. Yet both letters can be easily perceived. Their contour is clearly differentiated from the background.

If color takes a backseat to contour, it definitely accentuates contrast or decreases it. Try looking at your mobile screen in bright sunlight and reading yellow (or light grey) letters against white background. You will be fighting with a lack of contrast due to the power of the sun.

In WW I, French soldiers where doning light blue uniforms. German soldiers uniforms were dark green-brown. Guess who was killed more easily against the muddy backdrop of the terrain in Northern France?

Here is an example of the impact of color on legibility:

 

Example of the impact of color on contrast and legibility

 

The 4 letters present the following contrast ratios:

      • #1   2.51:1
      • #2   1.37:1
      • #3   6.38:1
      • #4   1.31:1

Letters #1 and #3 are sharply differentiated against their background, but “red bleeds over green” and the contour of the letter F in #1 isn’t as sharp as in #3. Although #2 and #4 have almost the same contrast ratio (1.37:1 vs. 1.31:1) and their edges are still well defined against the white backdrop… green stands out better against white than light grey against white.

Color accentuates or decreases differentiation between foreground and background.

It can make the contour of an object appear more fuzzy when the background color blends into the object color.

A good illustration of this phenomenon is the difficulty facing graphic artists when they need to separate two objects of similar color, like a black tire against the asphalt of the road.

 

Illustration of the lack of visual contrast at the contract patch of the tire and the asphalt

 

The designer of a Mobile First site will take contrast into consideration in the very early phase of the design, when defining the color palette of the site, the color of the fonts and the color of the background.

This is one of the reasons why the “Mobile First” philosophy changes design habits: designers can’t just design for the desktop and “hope for the best” for the mobile site. On mobile, tested in various conditions, the resulting website may be very difficult to read, and ultimately call for a redesign.

Size and separation of design elements

Speed of visual interaction is the second external constraint bearing on mobile site design.

We often use our mobile phones in situations where time is a factor: looking for an emergency plumber; finding quickly the location of a restaurant when driving to the place; answering text messages as the red light turns to green; comparing online prices when we are in a store; etc.

Considering time is of the essence, a mobile-optimized website will have certain qualities: it will download fast, clearly show where to find relevant information, and display such information to make it easy to interface with it.

We wrote about the topics of mobile speed and information hierarchy earlier in our series on Mobile First sites, and we also discussed graphical user interface, notably in relationship with the tools we use to interact with phones: our fingers, mainly.

Although our fingers are pretty good at macro motions, they can be clumsy when the design objects display on the surface of a mobile screen are small and too close together. So the size factor plays a role in the legibility and usability of a mobile phone interface.

Mobile usability is impacted by the degree of separation and proximity of design elements.

Too close to each other, desgn objects can’t be handled easily. Too far from each other, their functional relationship may become difficult to grasp quickly. We’ll discuss this specific aspect in a later post.

Google’s engineers have worked to make designers more aware of the separation/proximity issue: the Google Search Console sends us messages to warn us that elements are too close to each other, and urges us to take action (under penalty of seeing our rankings fall off the sky).

 

Google Search Console Design Warning

 

Because Google only identifies these issues programmatically (algorithmically, without human intervention), the warnings are not always right. But they deserve a look, if only to make sure our mobile site is indeed usable as intended.

Compounding ergonomic issues, the speed at which we have to make choices — because of the circumstances in which we use our mobile phone — makes usability a real problem when design elements are too close to each other, or not contrasted enough to easily recognize them and their function.

Lastly, for those of us who are 40 and over, if we consult our mobile phone in our car or even in the street, chances are we don’t wear readers… which makes interacting with bad design a real source of frustration. Again, contrast, size, and degree of separation of the design elements will impact mobile user experience in a variety of unfavorable situations.

An example from the real world 

We are in a car, and looking for “Chinese restaurants near me” to select one based on description, proximity, and reviews. We are using Google Maps, the absolute best finder of “Chinese restaurants near me” ever devised on the web. It’s a last-minute decision, and we are near closing time. The car is stopped; we are good drivers, we are not driving and reading our phone at the same time.

This is what Google Maps shows us. Considering the above, what would you change in this GUI to make it more usable?

 

Searching for a Chinese restaurant on Google Maps - Busy GUI            Finding information about a selected Chiense restaurant on Google Maps - WTMI

 

Spoiler alert: If you have followed the explanation above, you’ll probably have answered that the elements are too small and too close to eath other.

And you would be right!

There are several other issues with this GUI design, but we keep our powder dry for another blog post.

Situational Stress

We all have been in situations where we had to make decisions under immediate stress. The hormonal secretions caused by stress (“fight or flight”) have an effect on our vision. A well-researched aspect of this issue is the “tunnel vision” effect that sets in when we drive at high speed. Tunnel vision is a focusing of the field of vision and a decreasing of peripheral vision. When we have “tunnel vision”, we are less able to see things around.

Stress also creates “mental chaos”, a temporary incapacity to focus on a task. If you have ever been trying to help someone in accomplishing a technical task requiring a lot of attention under stressful conditions, you have a representation of what “mental chaos” or “mental dispersion” is.

Tech support hotlines are manned up with staffers who, beyond their technical savvy, can also tolerate intense emotional behaviors: angry or tearful callers who don’t know what they are looking at, and won’t easily look where you want them to look to resolve the situation they call for.

 

stress and emotional outbursts

 

Since we use our mobile phones in all kinds of situations we probably shouldn’t, or simply under unfavorable circumstances and pressed by time constraints, we are liable to miss some of the clues the website we are looking at is giving us. This is particularly true of graphical user interfaces with small, low-contrast objects.

One such instance is “neumorphic design”: beautiful design, but very difficult to read on a mobile phone.

 

neumorphic interface objects

 

Not being able to see or find what we need when we need it (in a hurry) induces more stress and frustration. Chances are we take it out on the website and bounce off really quick, with a bad experience.

Never mind that this bad experience is, to a large degree, due to our specific browsing circumstances. We will assign the blame to the website.

For the sake of their clients, therefore, web designers must conceive mobile GUIs that minimize the incidence of situational stress.

IN Summary

External constraints such as sun light, stress, and speed of interaction impact visitors’ browsing experience. In turn, this experience affects their behavior vis-à-vis the website they visit.

A mobile GUI that is not calibrated for outdoor use and ignores those external constraints will lead to the premature loss of potential leads… A situation which stands at the wrong end of your client’s expectations.

Mobile First sites are designed from the ground up with the external constraints of outdoor use in mind.  

Mobile First Sites: Flow vs. Interruptions

Mobile First Sites: Flow vs. Interruptions

The Local Tampa SEO System Emblem - Spicy Nuggets Eden Ads

SPICY NUGGET
What do your visitors expect? Being able to quickly find relevant information to make a decision. That simple.
— Phil Chavanne, CTO

In Parts I, II and III of our series on mobile-optimized websites (‘Mobile First Sites”), we covered the expectations laid on your mobile website by Google and your visitors. These include speed, ease of use (GUI), and information hierarchy.

In this Part IV, we will briefly cover the topic of obstructions and interruptions.

First, let’s circle back briefly to the purpose your visitors pursue when they land on your site.

Why Are They Here?

Unless you are running an ecommerce site, or your business pertains to an industry where visual content is a deciding factor (e.g. painters, hairdressers, jewelers, etc.) it is safe to assume that your visitors will only have a brief interaction with your site. On most websites we have optimized, or designed and built in the past 20 years, the average visit would last 2 to 4 minutes. Visitors would see 2 to 5 pages, and leave.

Your visitors’ main purpose when they come to your site is to get to the information they need, quickly. They won’t dwell much more than 90 seconds on any single page. They will form a general impression of your credibility, and make 1 decision out of 3 possible ones: (1) contact you for more information; (2)  make a note to return later, after seeing other similar sites or when they are more advanced in their decision process; (3) leave to never return.

no pop-ups on mobile first sites On average, returning visitor traffic represent 12% to 20% of your total visits. We have seen websites with 25% returning visitors, but these are rare cases among local businesses. Some popular restaurants fall into this category as diners may frequent them a couple times a month, and return to their site to order online or book a reservation.

Unless your business is a total star in your community, only 1% to 5% of people who visit your site will make contact with you.

In all, about 85% of your total visitor traffic will leave and never return, or only return years later when the need arises again. The question then becomes: “How do you make sure you don’t waste the opportunity” to get the 15% right now or on their immediate return.

Mobile First sites are designed from the ground up to take care of this issue.

Flow vs. Interruptions & Obstructions

The “greased chute” is an old technical term in mountain forestry that designates the trough along which logs are placed to toboggan their way from the high forest to the valley. Greasers were the people in charge of making sure the log chute would be greased enough that the logs would not jam along it.

 

greasing the log chute

Worker greasing the log chute – Photo courtesy of npshistory.com

 

The expression was appropriated by direct response copywriter Joe Sugarman, to describe the way good copywriting leads readers smoothly from the headline of the copy to the order form. To “grease the chute” is to help readers’ eyes and mind through the marketing copy, all the way to the purchasing decision.

In the newspapers world, just as in web design and in any visual medium engaged in marketing something, the path of least resistance offered to the viewer’s eyes is called the eyetrail. Design elements are positioned on the page or on the screen in a way that engages the eye to discover more of the content, poster, image, all the way to the call to action. The eyetrail of a web page is an element of the greased chute; it is not the totality of the greased chute.
Both terms relate to the same concept: flow. The opposites of flow are obstructions and interruptions. Both are impediments that bother or prevent your visitors to complete their intent.

      • Obstructions are impediments that slow down the flow
      • Interruptions are obstructions that stop the flow

The most infamous, most ubiquitous type of nasty interruptions on the web are pop-ups (called interstitials by advertising agencies). Pop-ups are probably the most hated interruptive contraption ever invented by man to disturb, bother, impede and stop flow. They are downright obnoxious, annoying, irritating… In one word, distasteful.

Pop-ups on mobile are even worse that on desktop because they tend to cover the entire viewport (the surface of your mobile device screen), and they are often difficult to get rid of (when the feature that closes them is hidden by some other elements of design, or when it is too small to be obvious).

These pop-ups are the hallmark of inexperienced web designers, who are either too lazy to test their client’s sites on various mobile devices, or just too dumb to realize that they are turning visitors off and away.

I hear some say: “You’re full of it. Pop-ups are good, we need to create an email list.” Oh yeah? Read on.

Do you see ANY of these pop-ups on Amazon.com? NO. Don’t you think these guys know a few things about ecommerce?

One of the stupidest kind of pop-ups we see over and over is the “Newsletter Subscription” pop-up that opens up 5 seconds after you enter an ecommerce site. You haven’t had time to start looking at the products on display, the store immediately taps you for your email address. Really? This is as tasteful as going on a first date, and 5 minutes into it, asking your date if she/he’d care to sleep with you.

newslettter subscription pop-upPop-ups are downright nasty, but they are not the only obstructions and interruptions found on websites.

Examples of Interruption and obstructions on websites:

      • Heavy photos that take long to download on mobile sites (obstruction)
      • Buttons that are not easily clickable (obstruction)
      • Pages that don’t open (interruption)
      • Pages and links giving 404 —page not found— errors (interruption)
      • Survey requests appearing during the checkout process (interruption)
      • Ads embedded in the copy of a blog post (obstruction)
      • YouTube 6-second ads (interruption)
      • YouTube double-ads at the beginning of a new video (obstruction)
      • Ads at the beginning of a newscast on a mainstream media video feed (obstruction)
      • Subscription request preventing reading an article on the newspapers website (interruption)
      • Photos that move up and down the screen of a mobile device when you scroll down (obstruction)
      • Social media bookmarking icons that come over the side of the viewport on mobile devices (obstruction)
      • Etc, etc, etc…

There is no shortage of obstructions and interruptions on websites. The less you have on your site, the better the experience you offer your visitors.

Google Just Hates That Sh*t

Now, you didn’t think that Big G would let it slide when your antiquated mobile site rudely interrupts your visitors’ progress with a screen-wide pop-up?

In case you haven’t noticed (or been living under the proverbial rock), Goog is on a war path against mobile unfriendliness.

Google objects to pop-upsHere are some specific references published by Google against the use of pop-ups in mobile sites:

        • Some examples of malicious behavior include:
          Injecting new ads or pop-ups on pages, or swapping out existing ads on a webpage with different ads; or promoting or installing software that does so.

https://developers.google.com/search/docs/advanced/guidelines/malicious-behavior?hl=en

        • Try to avoid interstitial pages, ad pop-ups, or other elements that interfere with your content. In some cases, these distracting elements may be picked up in the preview of your page, making the screenshots less attractive.

https://developers.google.com/search/blog/2010/11/instant-previews?hl=en

        • Step 1: Stop frustrating your customers
          • Remove cumbersome extra windows from all mobile user-agents | Google recommendationArticle
            • JavaScript pop-ups that can be difficult to close.

https://developers.google.com/search/blog/2013/12/checklist-and-videos-for-mobile-website?hl=en

        • To improve the mobile search experience, after January 10, 2017, pages where content is not easily accessible to a user on the transition from the mobile search results may not rank as highly.
          Here are some examples of techniques that make content less accessible to a user:

          • Showing a popup that covers the main content, either immediately after the user navigates to a page from the search results, or while they are looking through the page.
          • Displaying a standalone interstitial that the user has to dismiss before accessing the main content.

https://developers.google.com/search/blog/2016/08/helping-users-easily-access-content-on?hl=en

Hard to justify the use of pop-ups on a mobile first site after reading these references… If you don’t get the hint, it’s time to buy a new pair of glasses or change your hearing aid.

How to Circumvent the Issue?

Building up a double opt-in email list is a good idea. Offering people to enter their mobile phone number to joint a VIP list benefiting from exclusive discounts is an absolute great idea. Getting people to follow your brand on social media, yes of course.

How do you make these opportunities known to people when you can’t rudely interrupt their visit on your mobile site with a nasty “Sign Up For Our Newsletter!” pop-up?

Glad you asked. May we suggest some possibilities?

12 ways to avoid nasty pop-ups and such obstructive/interruptive BS on your site:
Ways to avoid interruptions and obstructions on a website

      • Add a List Subscription item in your menu
      • Make a text-based offer with a clickable link inside your pages
      • Blend your offer with your copy, thereby achieving “flow”
      • Add your call-to-action at the end of the page or blog post
      • When people order, add the call-to-action in the email you send them
      • Add a field to type in an email address to get an additional discount inside your shopping cart
      • Add the call-to-action as a thank-you page right after the order is paid for in the checkout process
      • Offer it on your points of presence in social media
      • Add a discreet but visible “Follow Us” button inside your pages, in a non-obtrusive position
      • Slowly slide in a low-height “mat” at the bottom of a page, in a color contrasting with the background
      • Use an overlaid text message button such as the one offered by Leadferno
      • Add a “Quizz” or “Free Drawing” in your menu
      • Etc.

As you can see there is no shortage of design possibilities, and all of these are much, much, much better than loud, nasty interruptions.

A last advice from Google:

Help your site’s visitors to complete their objectives. They may want to be entertained by your blog posts, get your restaurant’s address, or check reviews on your products. Design your site to help make it easier for your customer to visit your site and complete a task.

https://developers.google.com/search/mobile-sites/get-started?hl=en

 

The philosophy of Mobile First is to help your visitors have a great experience on your mobile site.
Don’t ruin this experience with nasty interruptions and irritating obstructions.
Instead, make sure everything flows. Grease the chute.

 

Free Independent Evaluation

Eden Ads is a full-service digital marketing agency in Tampa, FL. Our team offers qualified local businesses a unique opportunity to have their website and digital marketing/advertising campaigns fully evaluated under multiple aspects:

 

 

  • ROI of Google Ads campaigns
  • Finding where you waste money in your Google Ads campaigns
  • ROI of Facebook campaigns
  • Search engine position checks on your 2 or 3 main keywords
  • General SEO-readiness
  • Adequacy of mobile design
  • Google speed scoring of your mobile website
  • Alignment of your site with Mobile First Sites guidelines

 

 

This free independent evaluation can reveal weaknesses that hurt your site and prevent it to get to the top of search results. It can also highlights design issues blocking it from converting more visitors into leads. Call our web consultants today at (813) 940-5699 to request a free independent evaluation, and discuss your most pressing needs.

If you’re want results, speak with one of our Marketing Consultants to find out how we can help you! Call us at (813) 940-5699 or make contact with our team via our secure online form.

Mobile First Websites: Graphical User Interface (GUI)

Mobile First Websites: Graphical User Interface (GUI)

Spicy Nugget symbol

SPICY NUGGET
A “responsive” replica of your desktop site is a sorry excuse for a mobile site. ‘Mobile First’ sites are purpose-built… or they don’t generate the leads and sales you need.
— Phil Chavanne, CTO

In Part I of this series about mobile-optimized sites (“Mobile First sites”), we alluded to the rules mobile sites must conform to in order to find grace in the eyes of Google. In Part II, we looked at the need for speed as browsing and searching happen increasingly on mobile devices, and consumers prefer speedy sites.

In this new part, we’ll discuss how the design (GUI) of a mobile site contributes to its usability, the quality of a user’s experience, and beyond, its conversion rates.

Graphical User Interface & Responsiveness

Anyone who lived on the web longer than in the last 10 years will remember the clunky mobile interface of websites made only for desktop. Web designers didn’t anticipate the mobile revolution and were slow to catch up with it. iPhone was “something for Apple apps”. In the late part of the first decade of the new millennium, Flash was still at the top of what could be done with a website, and with the advent of broadband, the canons of web design favored screen-wide images, animated text over hero shots, and video served from regular hosting servers.

As a result of the design trends of the times, mobile users were saddled with websites that had to be resized with 2 fingers, and constantly re-centered with 1 finger to be read in the viewport of an iPhone 4. Loading times were horrendously long, unless you were browsing an old site hard-coded in HTML. But then again, the look and “mobile-readiness” of these sites were questionable, at best.

By 2010, it had become obvious that mobile users’ experience was crying for a long-overdue change. And then, just like that, the next revolution in design happened.

WordPress theme creators started to code themes to be resized on a mobile screen to keep them legible, and avoid the “2-finger spread” and the “1-finger drag”. The responsiveness discontinuity started with these 2 imperatives: keep the text legible by keeping the font size as was set for desktop, and organize the design elements always visible in the mobile viewport without forcing users to drag the design back to center.

 

Mobile First Sites and Graphical User Interface (GUI) Issues with Finger Motions

 

The verticalization of design was a complete innovation for the industry, and so was the advent of WYSIWYG page builders. The new capacity of WordPress to recalibrate the front-end to make it display in a legible format, coupled with its ease of use and its document management capability, imposed it as the obvious replacement for the best site builder software of the mid-2000s, Adobe’s Dreamweaver.

For web designers, the new slew of responsive WordPress themes was a killer sales tool. Local business websites started to look awesome again, and thanks to a vibrant developer community, WordPress quickly expanded its already predominant market share, dwarfing all the other content management systems combined. Drupal and Joomla didn’t even stand a chance.

The discontinuity stopped there, however, at “mobile responsiveness”.

Responsiveness: Useful… but incomplete

In fact, responsiveness as both a coding and design concept has not much evolved since its early days. Mobile-responsive themes adapt to more screen sizes and more devices than in 2012. New plugins have been developed to make building a WordPress mobile site even easier.

In 2015 Google came out with AMP, a development framework designed to speed up mobile sites. AMP HTML was a rudimentary language, with a limited number of expressions, difficult to implement with a sophisticated graphical user interface (GUI). It took years to mature, and caused a lot of grief in the web design community. Its birth and maturation take place in the stream of incremental changes aiming at  sculpting the web for mobile browsing.

 

Accelerated Mobile Pages AMP logo 400px

 

As imperfect as their approach to the new mobile web paradigm has been, Google has played a critical role in moving the developer community forward towards better mobile sites. By way of example, Google’s engineers have kept offering testing tools to the community, to validate their code. Google adopted WebPageTest.org to offer practical diagnostic solutions to bottlenecks and code optimization issues.

From “mobile responsiveness”, Google gradually transitioned to “mobile friendliness”. The Google Search Console is the testing framework in which this evolution is taking place.

User interface issues

Inevitably, the quest for better mobile usability led designers, developers, WordPress theme creators, and Google engineers to work on the GUI of mobile sites.

 

Using a smart phone in many different situations

 

Mobile browsing occurs in a variety of situations that have little in common with the environment in which desktop browsing usually happen. Think about it: where and how you do consult your smart phone?

    • In your car, quickly, at the red light (hopefully)
    • Out in the street, night and day (when a glaring sun reflects off your screen and blinds you) 
    • With and without your readers (if you are 40+)
    • At the office, between 2 tasks (surreptitiously, as The Man doesn’t like it) 
    • With your baby in your arms (who’s the focus of your attention?)
    • At the restaurant, in a fully lit or a dark intimate setting (ah, those pesky neon lights reflecting off your screen)
    • On motorcycle handlebars, glance by glance, to follow map directions (high vibrations and traffic dangers don’t make for comfy reading)
    • Under the rain, looking for directions (trying to protect your expensive iPhone from the shower)
    • Etc…

In all these situations, at least 3 external constraints impact your visual experience:

    • Lighting conditions
    • Speed of visual interaction
    • Situational stress

These constraints will translate into a set of specific design issues:

    • Is there enough contrast between the design elements to allow a quick read in all type of lighting?
    • Are the design elements big enough that they can be read at a glance, with and without readers?
    • Are the design elements well-differentiated and their individual function recognizable at a glance through color coding?
    • Are the design elements grouped by functional types that are easy to understand?

Mobile First Website - Graphic User Interface

 

Likewise, because the conditions under which you search and browse on a mobile device can be less-than-ideal, the ergonomics of a mobile website will affect the quality of your interaction with it.

The set of external hindrances at play comprises:

    • Small viewport size (until they invent the holographic phone)
    • Interactivity tools (fingers + voice + stylus, vs. mouse pointer)
    • Situational stress

From this set of hindrances arises a new set of graphic user interface issues:

    • Is there enough space between the elements of design to enable a clumsier interaction? (Your fingers are not as accurate as a mouse)
    • Is there too much space between the elements of design to enable quick decision-making without forcing you to move the site up and down? (Value-destructive interaction)
    • Are design elements big enough to enable a simple interaction? (Don’t you hate those extra-small buttons?)
    • Are design elements quick to respond to interaction? (Or do you need to tap twice to get a response from the site?)
    • Are design elements uselessly “floating” in the viewport? (Forcing you to re-center them left and right in a wasteful interaction)
    • Does the general page design create “reflows” forcing you to wait to interact with the site or even impeding your interaction? (E.g. bothersome ads that change the position of design elements)
    • Does the design give you a visual feedback of your interaction? (E.g. color change when tapping on an element, audible or haptic signals)

In the past couple of years, the Google Search Console has started to integrate programmatic tools designed to send you alerts (“mobile usability issues“) about perceived design flaws of your mobile site.

 

Google Search Console Alert on GUI issue

 

These alerts are not always accurate (far from it), but they call your attention to potential design hindrances that may impact user experience. Since Google never wastes a good opportunity to threaten you with de-ranking (“We recommend that you fix these issues when possible to enable the best experience and coverage in Google Search“), it’s a good rule of thumb to login to the Search Console and have a look at what their programmatic tool has to say.

This effort takes place in the framework of the “mobile-friendly” site, a design step-up from the “mobile responsive” site.

Mobile-friendly sites

“Mobile-friendly” is an expression coined by Big G a couple years ago to designate websites that comply with a set of guidelines:

    1. Measure the effectiveness of your website by how easily mobile customers can complete common tasks
    2. Select a mobile template, theme, or design that’s consistent for all devices

The task-oriented approach is the core of Google’s user interface design guidelines. The goal of your design is to help visitors accomplish their purpose in the shortest time possible, with the minimum number of steps, and with the greatest ease. All this in a format that is consistent across platforms. Measure and optimize.

In this approach we find commonalities with the philosophy of “lean manufacturing” pioneered by Toyota: measure and optimize your process to consume the least possible materials and energy (incl. human labor), eliminate re-work (or waste, “muda” in Japanese), bring in your materials and subsystems only as you need them, and detect/remedy quality issues as they happen (to avoid more “muda“).

Google’s approach to mobile-friendly sites is holistic in nature: align all elements of your system under a single goal of serving your customers well. Anything that does not concur to this objective is to be removed from the system.

One of the key concept behind the making of a mobile-friendly site is the hierarchization of information. As Google puts it:

“Making a mobile site requires prioritization. Start by working out what the most important and common tasks are for your customers on mobile.”

Information hierarchy

The fundamental differences in browsing experience between desktop sites and mobile sites make it necessary for web designers to organize the information presented to visitors in a different way.

The design concept dubbed “responsiveness” never included information hierarchy. Based on our experience, only web designers close to their local clients actually observed they could not show on a mobile site all that they could show on a desktop.

When local users shop for a plumber, an HVAC company or a restaurant, they typically have 5+ options to choose from within a 10 mile radius, and way more in a big city. They don’t like wasting time in navigating a complicated site.

 

Complex website navigation bad information hierarchy model

 

On the other side of the ledger, local businesses can’t afford wasting leads. They are keenly aware of the calls they get, and they watch their pennies: if their website doesn’t generate business, they are quick to fire their web team. This explains why local web designers are usually a step ahead of Google insofar as the best way to present important information first. There are “the quick”, and then there are “the dead”.

Some of the issues that need to be planned out when designing a mobile site:

    • What services do people most often look for when they need a plumber? An HVAC company? A mechanic? How to display these services on a mobile site so they can be accessed with 1 single click?
    • Do visitors expect to find specials and coupons on a site they visit? If so, where to present them?
    • What do visitors have to do to find your phone number and call? Do they have to go up and down the home page trying to locate your number? Or do you show it so obviously that no one could miss the call button?
    • It is important or not to display a map with your business on it? Should this map be interactive?

All these issues relate to the hierarchy of information presented on the site. What to present, where to present it, how to present it.

 

Information hierarchization involves making choices in the way core information is presented, or omitted, or moved to the bottom of the menu.

In other words, it is counter-productive to show on a mobile site everything you show on a desktop site, and in the same order. Your visitors will leave in droves before they even interact twice with your mobile site.

As designers, we have to be careful to not misinterpret Google’s concern with “skinny” mobile content. Google states: “Don’t get caught in the trap of only creating a mobile-formatted site that doesn’t provide the full functionality [of the desktop site].”  Yes, Google will penalize skinny content. But they won’t penalize a site because its mobile menu is organized differently from its desktop menu. However, if your desktop site has a blog, this blog’s better be present on your mobile site.

Mobile-First sites are mobile-optimized

Google does not instruct designers as to where and how the information should be presented on a mobile site. Each client has different needs, and this is the designer’s job to define these needs correctly, and hierarchize information according to a workable model. The model just has to work for end-customers AND for Google.

This is the reason why we believe Google’s concept of “mobile-friendly sites” falls a tad short of what really needs to be done on a mobile site to make it efficient for both users and search engines.

At Eden Ads, we have pushed the mobile-friendly concept a bit further, to create mobile-optimized sites:

    • Optimized information hierarchy
    • Optimized ergonomics & graphical user interface
    • Optimized speed
    • Optimized schema mark-up for local search
    • Optimized page tagging for search engines
    • Optimized conversions

The process through which we go to design an optimized mobile size requires studying your business with you, defining what your visitors expect, what your customers buy, what offers are necessary to clinch a deal, etc.

The philosophy of Mobile First is not an after-thought, but a carefully prepared planning process
that will make your mobile site a great weapon in your lead generation arsenal.

Don’t build a mobile replica of your desktop site. That won’t generate the leads and sales you need.

Free independent evaluation

Eden Ads is a full-service digital marketing agency in Tampa, FL. Our team offers qualified local businesses a unique opportunity to have their website and digital marketing/advertising campaigns fully evaluated under multiple aspects:

    • ROI of Google Ads campaigns
    • Finding where you waste money in your Google Ads campaigns
    • ROI of Facebook campaigns
    • Search engine position checks on your 2 or 3 main keywords
    • General SEO-readiness
    • Adequacy of mobile design
    • Google speed scoring of your mobile website

This free independent evaluation can reveal weaknesses that hurt your site and prevent it to get to the top of search results. It can also highlights design issues blocking it from converting more visitors into leads. Call our web consultants today at (813) 940-5699 to request a free independent evaluation, and discuss your most pressing needs.

If you’re want results, speak with one of our Marketing Consultants to find out how we can help you! Call us at (813) 940-5699 or make contact with our team via our secure online form.

Mobile First Websites: The Need for Speed

Mobile First Sites: The Need for Speed

Spicy Nugget symbol

SPICY NUGGET
The mobile web is replacing the desktop web in browsing & buying habits. Speed and downloading time directly impact your website capacity to make your phone and cash register ring.
— Phil Chavanne, CTO

In Part I of this series about the design of mobile optimized websites, we explored “the lay of the Googleland”, i.e. the new rules for mobile sites as a function of changing expectations by visitors and evolving requirements by Google.

In this new instalment, we will look at the all-important criterion of speed, and its impact on search engine optimization and visitors’ reactions to your site.

First, let’s take a quick trip to memory lane to understand where we come from…

Google’s romance with mobile sites

Google’s infatuation with speedy mobile sites is hardly a historical factor: by this, we mean that Big G did not concern itself with mobile site speed until some time in 2015.

Up until a few short years ago, Google was actually much more concerned with mobile content than with mobile speed. Web designers at the cusp of technology had foreseen the mobile (r)evolution and pruned down the mobile version of their clients’ websites to give visitors a better User eXperience (UX) through faster speeds on slow mobile networks (2G, 3G, even early 4G). But never mind, folks, Google’s engineers were warning designers that they “had to provide mobile users an experience as rich as that provided to desktop users”… or else.

Since Google was threatening us with SEO penalties if we did not cram mobile versions with the same information as the desktop versions, we had to find ways to display volumes of information in ways that would make sense for mobile visitors, and avoid cluttering our mobile real-estate with irrelevant data.

 

Mobile First websites - Bad GUI

 

Google did not focus on speed until late in 2016, well after social media platforms had changed mobile user’s browsing habits to “infinite scrolling”, and 6+ months after Bing released a watershed study on the browsing habits of local visitors: this study clearly showed visitor traffic to local businesses’ websites had reached 50% of their total traffic. Google was completely missing the mobile revolution, just as it had totally missed the social network revolution with the constraints imposed on its Google+ platform (letting Facebook run circles around them).

That blindness was all the more strange since Google has invented the concept of “local search results” back in 2006, way-way-way before anyone else had a clue it would become THE way for small local businesses to be discovered in search results (on an equal footing with the big players). It goes to show Big G is not a monolithic beacon of light: rather, it looks like a bunch of disrelated units that don’t act in sync. Some of its teams are freakin’ brilliant, others are as tone-deaf as bricks.

Speed is Google’s new black

Be it as it may, Google’s local search team (today, “Google My Business”) must have woken up from deep slumber one day and realized that mobile search had become a thing. They published a short paper backing up Bing’s previously published research: mobile browsing accounted for over 50% of the visitor traffic received by local businesses.

Suddenly the Google engineering team started to observe mobile users’ habits, “discovering” in the process that the vast majority of mobile sites would take 10-15 seconds to download on a mobile home screen. (We had been aware of the issue since… 2012).

Having decided that speed was the new black, Big G announced its next move way in advance, to give webmasters, theme authors and plugin developers time to adjust their speed specs. The next major algorithm update related to mobile speed was rolled out between June 2018 and early 2019.

Mobile First indexing

First question: What is it?

In Google’s own words:

“Mobile-first indexing means Google predominantly uses the mobile version of the content for indexing and ranking. Historically, the index primarily used the desktop version of a page’s content when evaluating the relevance of a page to a user’s query. Since the majority of users now access Google Search with a mobile device, Googlebot primarily crawls and indexes pages with the smartphone agent going forward.”

 

Googlebot crawling mobile site

 

There are 2 important parts to this explanation:

  • “Google predominantly uses the mobile version of the content for indexing and ranking”
    This means that the positions of your website in the search engine result pages (SERPs) are primarily determined by its mobile version.
  • “Googlebot primarily crawls and indexes pages with the smartphone agent”
    This means that the Googlebot that scouts your site is specifically designed to look at it with the “eyes” of a smart phone. In other words, if it’s slow on a mobile network, you will be penalized in the search results.

In implementing Mobile First Indexing, Google continued to insist that mobile sites that did not mirror their desktop content would risk a traffic loss (stemming from a deranking).

Make sure that your mobile site contains the same content as your desktop site. If your mobile site has less content than your desktop site, consider updating your mobile site so that its primary content is equivalent to your desktop site. You can have a different design on mobile to maximize user experience (for example, moving content into accordions or tabs); just make sure that the content is equivalent to the desktop site, since almost all indexing on your site comes from the mobile site.

WARNING: If it’s your intention that the mobile page should have less content than the desktop page, you can expect some traffic loss when your site is enabled mobile-first indexing, since Google can’t get as much information from your page as before. Instead of removing content, consider moving content into accordions or tabs to save space.

Source: Google

NOTE: The last advice consisting in tucking content in accordions and tabs may sound “thoughtful” but that’s not the way mobile users browse content. If you want your content discovered on mobile, make it obvious and don’t resort to complex navigation schemes like tabs that are unwieldy in the small viewport of a smart phone.

In any case, if you were not aware that “mobile first” had become the new indexing standard of Google, and your mobile site matters very much, consider yourself updated. What’s next?

Core Web Vitals

Google is in a long-term effort to reduce the total processing power required from its server infrastructure to index the web and serve it to Google users. From a financial standpoint, indexing and handling trillions of pages and exabytes of data (that’s 1 000 000 000 000 000 000, or 10.18 Bytes) requires a huge quantity of processing power and electricity. Big G, as the energy-conscious business it portrays itself to be (or maybe more prosaically, as a profit-conscious business) is on a crusade to decrease its power usage.

To this end, holding web designers accountable for how speedily their mobile sites perform is a great idea. Reduce the weight (in KB) of your pages, shorten the distance it takes to reach the website (via content distribution networks), minimize the number of HTTP calls to your server, and simplify/minify your stylesheets and JS, and your site will be much faster to crawl and much faster to serve. Your visitors will love, Google will love, everybody wins. That’s basically the rationale behind the new kids on the block: the Core Web Vitals.

 

Core Web Vitals: Mobiel First Site Speed Measurements

 

The Core Web Vitals are a new series of speed indicators Google announced back in November 2020 and tested before rolling their implementation out at end-May 2021.

What does Big G have to say about this?

Page experience is a set of signals that measure how users perceive the experience of interacting with a web page beyond its pure information value. It includes Core Web Vitals, which is a set of metrics that measure real-world user experience for loading performance, interactivity, and visual stability of the page.

OK, so in simple terms, Google measures how fast your mobile site is, how long it takes your visitors to be able to interact with it, and how much unwanted motion the design of your mobile pages imposes on your visitors. Yes, nobody likes a page that’s slow to download, that forces users to wait until its clickable buttons become clickable, and that continues to move after it’s fully downloaded.

The Core Web Vitals were rolled out at the end of May 2021 in some markets, a bit later in others. Google had warned web designers that speed would now be a ranking factor. They didn’t lie. Slow websites have taken a hit. Faster websites have been positively impacted. We did before/after tests in several markets, and there is little doubt that today, speedy sites do better in the search results.

But just how fast?

The common answer you’ll find around the web to this question would be 3.0 seconds. But that’s not the case.

The 3.0 second target was the 2018 figure given by Google at the time they were preparing to roll out Mobile First Indexing.  As they observed that an average website was still taking 10-15 seconds to download, Google’s engineers set 3.0 seconds as the new normal. Above that number, penalties would start applying. The 3 sec rule became a popular number and the industry started to work towards that number to improve their positions in the search results.

In reality, the Core Web Vitals are a more complex set of targets. The sum total boils down to a couple of scores (mobile and desktop), but these are calculated based on the actual Core Web Vitals.

There are the 3 performance indicators your site needs to match. Here is what Google states:

The page [i.e. your site] provides a good user experience, focusing on the aspects of loading, interactivity, and visual stability:

 

(Source: Google)

As you can see in the timings, there is no mention of a “3.0 seconds” target — even if, once again, this target is a good number to aim at for both search engine rankings and user experience.

 

Mobile First Mobile Optimized Website - Core Web Vitals scoringGoogle has made several tools available to mesure your website performance, and understand where it may need help. The simplest testing tool to use is Page Speed Insights.

  • If your website’s Core Web Vitals are already measured by Google, the results you will get from the testing tool will be real results (“field” results) gathered in the past 28 days. The scoring will also show if your website passes or fails the Core Web Vitals.
  • If your website’s Core Web Vitals are not already measured by Google (for instance, your site doesn’t have any significant traffic or it is not connected to the Google Search Console), the Page Speed Insights test will give you “lab data” (not “field” data), i.e. a snapshot of your site performance. The scoring system will show you where the problems are. There is a difference between “field data” and “lab data”, but you will get a great indication of how speedy your site is, and a series of recommendations to bring it up to snuff, on all Core Web Vitals.

Correlation to user experience

There is a variety of statistics quoted on the web purporting to show a correlation between speed, user experience, and user behavior.

One of these is an Amazon paper published in 2009 showing the theoretical impact on revenues of a 100-millisecond delay in page loading time. Another paper widely quoted was published by CDN provider Akamai in 2017 exploring the impact of a 1-second delay on conversion rates (buyers/visitors ratio). Yet another one is a discussion that took place at a Web 2.0 conference in 2006 where then-Google VP Marissa Mayer described how a 0.5 second latency in search results negatively impacted search traffic.

All these “magic numbers” are to be taken with a grain of salt: the websites that quote them usually don’t dig into the conditions of the studies, and raw numbers can’t be properly interpreted without background data. Furthermore, how relevant today are studies published in 2006 or 2009?

More to the point is a paper published by audit and accounting firm Deloitte, quoting in part Google’s numbers, a section of which we reproduce here. The following table shows the change in user experience and behavior as loading time increases. For practical purposes, a delay in loading time does not seem to impact user behavior until the 1-second mark.

 

 

The scope and results of this study leave little interpretation to error. Based on a very large sampling (7.4 million user sessions) over 4 different industries (Retail, Travel, Lead Generation, Luxury), the researchers draw several key conclusions: An improvement of website speed by 0.1 second on mobile devices will favorably impact key metrics:

  • Visitors progress further along the sales funnel (from browsing to checking out)
  • Pageviews per session increased (depth of visits)
  • Conversion rates (buyers/visitors) improved (*)
  • Transaction values ($/buyer) improved

(*) Excepted in the lead generation industry where mobile conversion rates decreased.

 

As the mobile web gradually replaces the desktop web in searching, browsing, and buying habits, speed becomes a critical factor in the capacity of your website to make your phone ring, and transform visitors into buyers.


Free independent evaluation

Eden Ads is a full-service digital marketing agency in Tampa, FL. Our team offers qualified local businesses a unique opportunity to have their website, their SEO and their digital marketing/advertising campaigns fully evaluated under multiple aspects:

  • ROI of Google Ads campaigns
  • Finding where you waste money in your Google Ads campaigns
  • ROI of Facebook campaigns
  • Search engine position checks on your 2 or 3 main keywords
  • General SEO-readiness
  • Adequacy of mobile design
  • Google speed scoring of your mobile website

This free independent evaluation can reveal weaknesses that hurt your site and prevent it to get to the top of search results. It can also highlights design issues blocking it from converting more visitors into leads. Call our web consultants today at (813) 940-5699 to request a free independent evaluation, and discuss your most pressing needs.

If you’re want results, speak with one of our Marketing Consultants to find out how we can help you! Call us at (813) 940-5699 or make contact with our team via our secure online form.

Mobile First Websites: A New Quality Label

Mobile First Websites: A New Quality Label 

 

The lay of the (Google)land

There are 7 rules to creating a killer “mobile first” website:

  1. Design it for Mobile First
  2. Favor speed, speed, speed
  3. Offer a simpler GUI
  4. Display only what’s necessary
  5. Avoid bothersome interrupts
  6. Design it for outdoor use
  7. Make it accessible to the sight-impaired

In this new series of technical articles, we will explore each one of these rules and their accompanying challenges.

Let’s start with an observation that is quickly becoming a truism…

Responsiveness is an outdated concept

Most website templates on the market have been designed and coded “for desktop first”. Their mobile versions follow the rules of responsiveness: (a) verticalize content, (b) resize containers and images, and (c) display legible fonts on a variety of mobile devices.

That was excellent web design in 2012. Good in 2014. Passable in 2016. Kind of sucky in 2018. Unacceptable in 2021.

Mobile design has evolved with usage and usability.

Usage? In most B2C industries, smart phone browsing has become the #1 access method to a business site.

Usability? People use their phones in tricky situations that require good design ergonomics. Outdoors, where sunlight flattens contrast. In their car, where speed of display and convenient access to buttons are essential. At work, for private purposes, where quick in-and-out interaction is the rule.

Simply verticalizing a desktop site — the barebone answer of responsive websites to the constraints of smart phone display — violates most of the new norms of usage and usability.

Responsive design has become woefully inadequate, and creates significant hindrances to consumer interaction.

Design for mobile first

Because smart phone browsing is now the #1 way to access information anywhere, anytime, web designers starting from a blank slate must now “think mobile first”.

 

Designing a site starting with the mobile site

 

The notion of “designing for mobile before desktop” sounds counter-intuitive, but it is only counter-habitual. In fact, mobile-first design forces both designers and clients to think of what is most important to visitors, pare down less important information, and articulate a website structure along these lines.

Perfection is achieved not when there is nothing more to add, but when there is nothing else to remove.
French pilot and writer Antoine de St Exupéry, author of The Little Prince

 

Designing for mobile first is an exercise in simplification.

It starts with a simple question: “What is most relevant to my visitors?“. This calls for information prioritization, and sometimes hard choices. What goes on the home screen of mobile first websites is almost never what the run-of-the-mill responsive version of a desktop site would show smart phone users.

Unique ergonomic challenges

Once these choices are made, the designer will works with ergonomics in mind. Mobile devices present some unique challenges compared with computer monitors:

    • A much smaller screen surface makes miniaturization a must
    • Bare-hand input (vs. digital pointers) makes precision interaction more difficult
    • The form factor can hinder interaction
    • Limited light output is easily overpowered by ambient light
    • A glossy screen surface further decreases legibility

 

Ergonomics impacts usability, and usability impacts both top and bottom lines.

ergonoimics impacts usability and top and bottom lines

 

Designers have to have a good understanding of usability rules to lay out a mobile graphic user interface that makes sense to the eyes, hands and fingers of most visitors. We will cover these in detail in a later instalment.

The need for speed

Speed means even more for mobile users than for desktop visitors. Smart phone users consult their phones in situations that require quick glances and fast downloads.

The fact mobile infrastructure is going 5G alleviates speed bottlenecks as 5G capability is rated to be up to 20x faster than 4G LTE. This said, low-speed cable is almost as fast as theoretical 5G speed, and with download speeds of 50-100 MB/s high-speed cable smokes 5G in households paying for the extra bandwidth.

The need for speed is nothing new. Back in 2018, the rollout of “Mobility First” — Google’s paradigm-changing indexing method — showed Big G was dead-serious in following up the early warnings it had given web designers as early as 2016.

Mobility First” revolutionized the way Google indexes websites by giving priority to speedy mobile sites in its result pages. From June 2018 on, mobile user experience became a primary factor in the way Google evaluates the performance of websites. (More about this and the next major algorithm update rolled out by Google in May 2021 in another instalment of this series.)

The need for speed is not just user-led: it’s also Google-pushed. The “lay of the Googleland” affects in a big way the design decisions webmasters must make when creating mobile first websites, and the building process they follow.

 

The need for speed means designing faster mobile first websites

“Designed For Mobile”: a new quality label

The paradigm shift in browsing habits started in 2011, when sales of mobile devices started to overtake sales of laptops and home PCs, has ratcheted up to a point today that makes desktop websites less crucial than in the past for local businesses.

Some statistics reflect this trend:

      • According to Statista.com, mobile browsing accounted for 53% of all pageviews in the U.S. in 2017.
      • Even in the B2B sector, a recent study published by Smart Insights show that 50% of inquiries were made through smartphones in 2021. In 2020, during the Covid lockdowns, this number even reached 70%.
      • At the local level, Google had published a report a couple years ago showing that more than half of all search queries where done from a mobile device. A recent study by Hitwise puts this figure at nearly 58%.

 

Mobile design is the new black: “Designed for Mobile”, the new quality label.

Designers and clients must adapt to this trend. The process through which a new website is created and coded must change to meet the expectations of consumers, professional buyers, and… Google.

In the next instalments we’ll detail the approach and creative decisions our design team implements to achieve the new standard of the “Mobile First Websites”.

 

Mobile First Websites

 

Free independent evaluation

Eden Ads is a full-service digital marketing agency in Tampa, FL. Our team offers qualified local businesses a unique opportunity to have their website and digital marketing/advertising campaigns fully evaluated under multiple aspects:

      • ROI of Google Ads campaigns
      • Finding where you waste money in your Google Ads campaigns
      • ROI of Facebook campaigns
      • Search engine position checks on your 2 or 3 main keywords
      • General SEO-readiness
      • Adequacy of mobile design
      • Google speed scoring of your mobile website

This free independent evaluation can reveal weaknesses that hurt your site and prevent it to get to the top of search results. It can also highlights design issues blocking it from converting more visitors into leads. Call our web consultants today at (813) 940-5699 to request a free independent evaluation, and discuss your most pressing needs.

If you’re want results, speak with one of our Marketing Consultants to find out how we can help you! Call us at (813) 940-5699 or make contact with our team via our secure online form.

Best Landing Pages Do THIS (Duh!)…

Spicy Nugget: ANATOMY OF GREAT LANDING PAGES

 

“Remember: You have 2 seconds with your customer—don’t blow it.”

Adam A. Sene, CEO

Best practices for landing pagesHere’s the hard, bitter truth about landing pages—short is sweet, and if you’re one of those people who love a 12,000-word landing page then, I’m sorry, we can’t be friends.

(No, but really.)

We live in a world where e-commerce thrives, so I’ll just ask you: How many times have you bought a bathing suit from China or a jar of gummy supplements from a landing page that had endless content?

No. You usually click through and the opportunity to buy is either right there or, if it isn’t and things are too complicated, you just left. Am I right?

Advertising is inherently rude, and the internet is inherently bored and impatient. Don’t let your ego or your inner Mr. Polite get in the way and let you think that fancy words and long descriptions belong first. You have 2 seconds. Tell the person what you want them to do! Go ahead, say it!! Now!!! ‘Buy My Damn Product!’

This is a law, not an opinion or a philosophy. This is hard-earned user experience data from years of testing, lost money a little blood and quite a bit of sweat.

For the guy who has no time, the best landing page produce CONVERSIONS. (Duh.)

For the guy who has a little more time, let’s start by covering our basics on what makes “the best landing pages” the actual best, shall we?

What is a landing page?

A landing page is a web page, usually belonging to or associated with a complete website belonging to a brand (but not always), whose sole job it is to convert a visitor or customer into a lead or sale without other navigation to other website pages.

How should it be designed?

Though there are varying opinions as to length, calls to action, aesthetic, etc., the overarching fact is that these pages should be as simple and easy to follow as possible, as these are the ones PROVEN to convert leads or purchases. The option to buy or submit a form or call (whatever the most desired action would be for that page) should be immediately visible above the fold on all devices.

Anything else?

Well yes, since you asked. The over-arching idea should be that within 1-2 seconds of “landing” on the page, the visitor knows exactly what product/service is being sold, what he is expected to do on that page and how to do it.

Landing Page Priorities

Priority #1: Above all priorities when developing this type of page, your first and foremost goal is to appeal the impulse shopper and make sure they have a quick and easy way to convert.

Hold your horses there, self-righteous SEO people. (That was a joke.) Of course you can add more content and satisfy the more shrewd shopper by providing additional content, keywords, photos or whatever you want—just put it below the fold.

The internet is full of busy people who only have time to SCAN the internet’s mere 1.7 billion websites. People that will spend the time to read about your product/service are few and far between. They typically arrived on your site directly, via a referral or organically.

Traffic from ads is fleeting and impulsive. You interrupted whatever it was that they were doing (browsing Facebook, watching a video, etc.) with your ad, and now you have only a few seconds to make an impression. Hurry up, jeez!

Other landing page contents may run something like this, in order of their importance:

Attractive image visually showing that the viewer is in the right place. If you’re selling something, an image of your product should be immediately visible. Other images that positively reinforce your product/service can be used too. If you’re a lawn service, show a beautiful lawn. If you’re selling lotion, you may show an image with a woman with nice skin and a container of the lotion you’re selling.

1. A headline reaffirming that they’re in the right place. E.g. “Perfectly Maintained Lawns,” or “Amazing Moisturizer for Beautiful Skin.”

2. A crystal clear call-to-action: e.g. Purchase, Add to Cart, Buy Now, Sign Up, Get Started, Free Samples, Get a Consultation, etc.

3. A brief description of the product/service.

4. A few bullet points of benefits or “pain points” that are addressed by the product/service, such as:

  • Weekly and bi-weekly mowing plans
  • Includes our 100% non-toxic grass treatment
  • Hassle free, dependable service

5. More stuff that builds trust, i.e. positive reviews, accolades, certifications, badges, trust symbols, endorsements, past clients, etc.

6. Everything else that can be used to satisfy the more shrewd shoppers, i.e. active ingredients, detailed descriptions, company history, etc.

Watch What the Titans Are Doing

The world’s largest brands spend thousands and thousands of dollars and countless man hours analyzing user experience data and doing testing of their digital assets to gauge performance. So, if you sell products online, look at what the biggest online retailers are doing. What do Apple, Nike, Amazon and Walmart do?

If you’re selling subscriptions, what do the biggest subscription services do? Netflix, Disney+, Amazon Prime, etc. All of this will chalk up to vital research and survey data you should take into consideration.

With regard to your competitors, unless they are obviously many times more successful than you, who cares what they’re doing? And even when they are more successful, take your observations with a grain of salt. The fact that they’re doing something doesn’t tell you that it’s working. It might just tell you that some corporate leech is playing company politics and trying to please a suit by being adventurous with their nephew’s idea. (Probably a true story.)

The latest spin-the-wheel popup may be a thing of the past in a few months. Go ahead and test it if it pleases you, but remember that longevity and sustained campaigns tell you more about your competitor’s performance than does the simple fact of what they’re doing that you think looks cool.

Landing Pages for eCommerce vs. Lead Generation

For e-commerce, a well-designed product page is usually a sufficient landing page.

For sales pages geared towards lead generation, minimal-to-no navigation should be present on the page to avoid directing traffic to other pages that are less likely to convert. In other words, remove your main menu from the top to keep Wandering Wanda from leaving your page and instead floating onto your Blog or Company Bios page (where there ain’t nothin’ good happening!)

Lead gen pages typically can benefit from a live chat option as well. Adding Facebook Messenger to your site is free and a great way to capture leads in real time.

Here are a few examples of landing pages that don’t suck. See if you can spot why we like them!

Need Help With Your Landing Pages?

A sizable chunk of Eden Ads’ team consists of seasoned web developers, writers, data analysts and user experience (UX) experts whose combined experience across makes us uniquely qualified to help you create a landing page that looks sharp, fits the aesthetic you’re going for and, above all, CONVERTS. Connect with us online or give us a call at (813) 940-5699!

Call Now Button