Free: Assessment Does your website build trust with buyers and bring in revenue?

Score My Website
Close

Free: Assessment

Does your website build trust with buyers and bring in revenue?
Take this free 6 question assessment and learn how your website can start living up to its potential.
Score My Website
Web Design  |   Marketing Strategy  |   User Experience

6 Ways Mobile Behavior is Changing Website Design & Desktop Experiences

Joe Rinaldi

By Joe Rinaldi

Feb 16, 2018

6 Ways Mobile Behavior is Changing Website Design & Desktop Experiences

“Mobile web browsing overtakes desktop for the first time!”

Two years ago that headline was plastered across some of the most popular blogs in the industry. Today, we’re still in the midst of the mobile revolution and it shows no signs of slowing down.

For the first time ever mobile browsing has begun to lead the way we design for desktops.

With adults expected to spend an average of 3 hours and 23 minutes on voice mobile media, it’s no surprise to see the features we use every day making their way over to their stationary counterparts on desktop.

Being able to understand these mobile behaviors and how to effectively implement them in your web design can make a huge impact on your sites user experience.

Using features and trends people are familiar with eliminates a lot of the guesswork someone will need to do when using your site.

I’ve compiled some of the top mobile trends below to help give you a headstart on what exactly you should look into implementing on your site.

1. Hamburger Menus

Love them or hate them, hamburger menus are one of the most noticeable elements to make the jump from mobile to desktop.

If you’re not familiar with hamburger menus, it’s the name UI/UX designers use to refer to the triple bar icon some sites use in lieu of a traditional navigation menu.   

While there’s plenty of arguments to be made for and against the use of hamburger menus, it all really boils down to the goals of your site and how you choose to implement it.

When done correctly, hamburger menus present users with a clean unobtrusive layout that lets them focus on the page's content. Hamburger menus also eliminate “decision fatigue” or “analysis paralysis” which occurs when people are presented with too many options on a page.

Below, design agency, Telepathy uses a nice combination of the hamburger menu and a traditional menu to create a clean UI.

mobile-behaviors-web-design-1

They feature the most important links in their nav bar while neatly tucking away additional links in the hamburger menu. This approach does a really nice job setting a clear path for users to follow.

2. Sticky Elements Moving to the Bottom of Pages

Sticky elements are those that appear to be “stuck” to a specific part of a page.

While these are nothing new in web design, we usually see them at the top of a page. These elements can include things like sticky headers, cookie disclaimers, or “hello” bars promoting an offer.

The growth in mobile browsing has led to people designing with a special consideration for something known as the “thumb zone.”

This refers elements of a page that are easily accessible by a user’s thumb.

With this in mind, elements began to move from the top of the page down to the bottom so they could be clicked more easily.

Facebook, for example, does a great job of designing for the “thumb zone.”

In the screenshot below you can see they moved all of their apps navigation items to bottom of the screen. This gives them more attention and makes the links easier to click.

mobile-behaviors-web-design-2

Not only does this approach give users that feeling of familiarity that I mentioned before, it also provides a less distracting way to promote a message or offer.

The typical user reads from top to bottom, so placing these elements on the bottom of a page allows people to focus on the content, then interact with it easily if they’re ready.

The example below shows how Medium uses a sticky element on the bottom of the page to show users how many free reads they have left. Users can still easily read the content, then choose to sign up if they’re ready.

mobile-behaviors-web-design-2-2   

3. Progressive Loading and Skeleton Screens

In order to combat the shorter attention span of users, we’re constantly trying to find improvements in site speed.

This is even truer when it comes to mobile, as it only takes a spotty signal and a few extra seconds of waiting for a user to lose interest and move on to the next page.

Recently on mobile, we’ve seen the use of progressive loading and skeleton screens become increasingly popular.

Progressive loading allows individual elements of a page to become visible as soon as they’ve loaded, rather than displaying everything all at once.

While the individual elements load, you’ll see a skeleton screen which is essentially a wireframe of the page. The example below is a skeleton screen from Facebook.

mobile-behaviors-web-design-3

The benefit of progressive loading and skeleton frames is that users feel like progress is being made, making the wait time feel shorter.

This trend has now made the jump over to desktop sites and has started replacing (or working in conjunction with) the age-old progress bars and spinners.

You can see sites such as Linkedin and apps like Slack already taking advantage of this technique.

mobile-behaviors-web-design-3-3

4. The Use of Emojis

Emojis burst into the phone scene in 2011 and have since become so prolific they even have their own movie.

With people peppering their texts and tweets with different emojis, it’s no surprise that marketers have taken this trend and found ways to work it into their marketing.

One area where marketers are seeing a lot of success with emojis is in email subject lines. Experian discovered that 56% of brands that used emojis in their subject line received higher open rates. Emojis help us save space in text limited areas by saying more with less.

Not only do emojis help us save space, they are easily recognizable, helping companies inject a little bit a personality and fun into their marketing.

At IMPACT we used this approach on our about us page with a friendly wave:

mobile-behaviors-web-design-4

5. Minimalism Style of Design

The minimalist style of design is based on the idea that “less is more.”

Minimalism and simplified color schemes were originally used on mobile sites in order to improve load times and avoid confusion and clutter on limited screen real estate.

Designers today are now taking this concept and expanded it to desktop sites, lead greatly by Google’s Material Design.  

Implementing minimalist design helps give your users a clear focal point for each page.

The ample white space that many minimalist sites use makes it easier for users to digest information one section at a time. It also forces us as marketers to stop and really think about what’s absolutely necessary on a page and what’s just fluff.

One of my favorite examples is the homepage of the prototyping software Marvel App.

mobile-behaviors-web-design-5

Right when you get to their homepage, you’re greeted with a bold clear statement of what their software does and how to sign up.

As you scroll through the page, the site feels very open and clean. It’s not overly text-heavy yet you’re able to get all of the necessary information you need.

6. Onboarding Experiences for SaaS

User onboarding is no longer an experience limited to just apps and mobile sites; It’s being used by companies who offer unique services or software's features that a user might not be familiar with; regardless of whether they’re on a mobile or desktop site.

Simply put, a user onboarding is a tool that introduces customers to specific elements of your services to ensure they find success it.

Some sites, such as Quora, use this strategy as a setup manual to get users up and running on their product.  

mobile-behaviors-web-design-6

Other sites, such as Duolingo, use setup their onboardings to give you gentle reminders of the different features you can use in their software.  

mobile-behaviors-web-design-6-2

These onboardings do an amazing job of reducing any friction or hesitation a user might have when first using your software.

They also give you the chance to really make a good a good first impression and delight your users right-off-the-bat.

Key Takeaway

As mobile continues to grow, we’ll likely see more and more trends like the ones mentioned above coming over to desktop sites. 

So, keep an eye on your favorite apps and websites, and brainstorm how you may be able to use a similar behavior on your website. 

Keeping an open mind to these trends can make all the difference when it comes to creating a better experience on your website.    

Free: Assessment

Does your website build trust with buyers and bring in revenue?
Take this free 6 question assessment and learn how your website can start living up to its potential.

Related Articles

Can I Use AI Tools To Build My New Website?

September 18, 2023
Vin Gaeta Vin Gaeta

What Is a 'Learning Center' and Why Does My Website Need One?

September 14, 2023
John Becker John Becker

How Much Does a Website Redesign Cost in 2023?

July 20, 2023
Vin Gaeta Vin Gaeta

Do You Need a New Website? Maybe Not

July 19, 2023
Vin Gaeta Vin Gaeta

14 Award-Winning Website Designs (& What They Did Right)

July 17, 2023
Christine Austin Christine Austin

What a New Self-Selection Tool for Your Website Will Cost

July 13, 2023
John Becker John Becker

9 Self-Selection Tools to Inspire Your Business Website

July 10, 2023
John Becker John Becker

Website Conversions in 2023 — STOP, START, KEEP

January 25, 2023
Vin Gaeta Vin Gaeta

8 of the Best Business Website Designs to Inspire You in 2023

November 17, 2022
Joe Rinaldi Joe Rinaldi

What Does a Great Inbound Marketing Website Look Like in 2023?

November 14, 2022
Joe Rinaldi Joe Rinaldi

Your 2023 Website Strategy Must Include These 6 Things

November 4, 2022
Mary Brown Mary Brown

4 Ways To Recession-proof Your Website In 2023

November 1, 2022
Marcus Sheridan Marcus Sheridan

Website Mastery: A better redesign process for your business website

November 1, 2022
John Becker John Becker

8 Best Content Management Systems for Digital Marketing in 2023

October 1, 2022
Joe Rinaldi Joe Rinaldi

12 Essential Tips for Improving Your Web Design in 2023

September 13, 2022
Christine Austin Christine Austin

23 of the Best Examples of Business Blog Design

May 30, 2022
Christine Austin Christine Austin

5 Prep Secrets for a Smoother, More Successful Website Project Plan (+ Infographic)

May 16, 2022
John Becker John Becker

Website Redesign Checklist: The 12 Crucial Steps You Need To Be Successful

February 22, 2022
Joe Rinaldi Joe Rinaldi

11 Pricing Page Examples for Business Websites (Updated for 2023)

January 18, 2022
Joe Rinaldi Joe Rinaldi

8 Crucial Elements Every Homepage Design Should Have

January 15, 2022
Joe Rinaldi Joe Rinaldi

What Makes a Good Website Design? 7 Award-Winning Examples To Be Inspired By

December 18, 2021
Joe Rinaldi Joe Rinaldi

Why Homepage Carousels Are Bad (& 3 Alternatives to Try Instead)

August 26, 2021
Joe Rinaldi Joe Rinaldi

Google Shares New Tools to Audit Website User Experience

August 12, 2021
Joe Rinaldi Joe Rinaldi

New HubSpot CMS Hub Starter Tier Released for Growing Businesses

August 6, 2021
Joe Rinaldi Joe Rinaldi

Too many internal links in content can confuse Google about site structure

July 9, 2021
Joe Rinaldi Joe Rinaldi