Back to Learning Center
Subscribe
Join 40,000+ sales and marketing pros who receive our weekly insights, tips, and best practices.
Thank you! You have been subscribed.

Free Guide: The Ultimate Inbound Marketing Strategy Playbook 2021

Read it now Subscribe
Join 40,000+ sales and marketing pros who receive our weekly insights, tips, and best practices.
Thank you! You have been subscribed.
Learning Center
Learning Center
Close
The IMPACT Learning Center

Free resources to help you master inbound marketing and They Ask, You Answer

Access the Learning Center

Access the Learning Center

Access the Learning Center
learning_center_grey__What is They Ask, You Answer-v2-black

What is They Ask, You Answer

What is <span>They Ask, You Answer</span>
Articles, Podcasts, & Updates

Articles, Podcasts, & Updates

Articles, Podcasts, <span>& Updates</span>
Free Courses & Certifications

Free Courses & Certifications

Free Courses & <span>Certifications</span>
On-Demand Keynotes & Sessions

On-Demand Keynotes & Sessions

On-Demand <span>Keynotes & Sessions</span>
Events
Events
Close
IMPACT+ Membership
IMPACT+ Membership
Close
Services
Services
Close
Navigation_8_2021_taya

They Ask, You Answer Coaching & Training

They Ask, You Answer Coaching & Training
They Ask, You Answer Workshop

They Ask, You Answer Workshop

They Ask, You Answer Workshop
Navigation_8_2021_workshop

Inbound Marketing Services

Inbound Marketing Services
Navigation_8_2021_website design - monitor

Website Design & Development

Website Design & Development
Navigation_8_2021_hubspot implementation

HubSpot Training & Implementation

HubSpot Training & Implementation
Navigation_8_2021_virtual selling

Virtual Sales
Training

Virtual Sales <br>Training
Navigation_8_2021_swell - paid ads

Paid Search & Social Services

Paid Search & Social Services
Become a Certified Coach
Become a Certified Coach
Close
The Ultimate Inbound Marketing Strategy Playbook 2021
Free Inbound Marketing Playbook
View The Ultimate Inbound Marketing Strategy Playbook 2021
Covers-FINAL

Free Guide:

Take your inbound strategy to the next level

  • Master the 7 principles of highly effective inbound marketing
  • Dramatically improve your inbound sales
  • Get more buy-in at your company

6 Ways Mobile Behavior is Changing Website Design & Desktop Experiences

By Joe Rinaldi

Joe Rinaldi also recommends this free guide: The Ultimate Inbound Marketing Strategy Playbook 2021.

6 Ways Mobile Behavior is Changing Website Design & Desktop Experiences Blog Feature

“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.

Free Guide: The Ultimate Inbound Marketing Strategy Playbook 2021

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.    

Covers-FINAL
Covers-FINAL

Free Guide:

The Ultimate Inbound Marketing Strategy Playbook 2021

Take your inbound strategy to the next level

  • Master the 7 principles of highly effective inbound marketing
  • Dramatically improve your inbound sales
  • Get more buy-in at your company

Topics:

Web Design
Mobile Optimization
User Experience
Published on February 16, 2018

Recent Articles

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

By John Becker on November 22, 2021
6 min read

9 Crucial Elements Every Homepage Should Have [+Video]

By Ramona Sukhraj on October 21, 2021
6 min read

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

By John Becker on October 14, 2021
7 min read

7 Self-Service Tools on Business Websites to be Inspired By

By Kimberly Marshall on September 29, 2021
7 min read

Google Shares New Tools to Audit Website User Experience

By Paul D. Grant on August 12, 2021
3 min read

New HubSpot CMS Hub Starter Tier Released for Growing Businesses

By Paul D. Grant on August 6, 2021
4 min read

ICYMI: Digital Marketing News Update for July 26, 2021

By Liz Moorehead on July 26, 2021
6 min read

ICYMI: Digital Marketing News Update for July 19, 2021

By Liz Moorehead on July 19, 2021
6 min read

What the Heck is Going on With All the Google Updates? (Content Lab, Ep. 54)

By Liz Moorehead on July 15, 2021
1 min read

8 Best Business Website Designs (Updated for 2021)

By Sam Lauron on July 15, 2021
5 min read

ICYMI: Digital marketing news update for July 12, 2021

By Liz Moorehead on July 12, 2021
5 min read

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

By Liz Moorehead on July 9, 2021
5 min read

Google July 2021 core update rolling out over next 2 weeks

By Liz Moorehead on July 2, 2021
4 min read

6 tips for building a great diversity and inclusion page (+examples)

By Ramona Sukhraj on June 29, 2021
7 min read

Google punts third-party cookie ban to 2023 for 'responsible planning'

By Liz Moorehead on June 25, 2021
6 min read

8 types of website performance metrics you should look at on a monthly basis

By Mary Brown on June 24, 2021
11 min read

Finally, Google page experience core update is rolling out

By Liz Moorehead on June 18, 2021
3 min read

8 business blog design examples that keep readers engaged

By Steve Polito on June 16, 2021
6 min read

5 ways you can use the StoryBrand framework to make a better website

By John Becker on June 14, 2021
5 min read

What is a Featured Snippet? [Definition + Examples]

By Kevin Church on June 10, 2021
4 min read

Google June 2021 core update live, July core update coming

By Liz Moorehead on June 4, 2021
3 min read

Google's June page experience core update will be mobile first, then desktop

By Liz Moorehead on May 21, 2021
3 min read

Every website agency talks about strategy; How is IMPACT different?

By John Becker on April 19, 2021
5 min read

The psychological meaning of shapes in logo design [Infographic]

By Ramona Sukhraj on April 17, 2021
1 min read

Why is growth-driven website design so freaking expensive?

By Daniel Escardo on April 14, 2021
5 min read