This article was updated on August 30, 2021.

Unless you’ve been cave-dwelling for the last few years, you know that mobile web design has become a mission critical for many businesses.

From smartphones and tablets to voice assistants, your customers expect a speedy, intuitive experience — no matter how they find you online. But what does that entail for companies with existing websites? Do you need to invest in new website development and design? Just a refresh for mobile?

Do you have a bad website that needs a redesign right away? Yikes!

The Forge and Smith team has been crafting mobile-friendly websites for many years, and we’re happy to share our insights on all things mobile. Let’s start with the basics: what’s the difference between mobile design and regular web design, and how does it impact your business?

What is Mobile Web Design?

“Mobile web design is about ensuring your content is accessible to the greatest number of users. That’s what’s critical to a website’s success and effectiveness,” says Forge and Smith founder and lead strategist Shawn Johnston.

When it comes to creating websites for optimal user experiences on mobile devices, there are two key industry terms that you should understand before you plan a project: responsive web design, and mobile-first design. These are different approaches to creating a mobile web design.

Mobile and responsive web design have many things in common:

• Both are made better if you’ve done plenty of audience research before you approach design
• Both require a strong information architecture for all of your content
• Both need you to make logical choices when it comes to menu placements and options, scrolling vs. clicking, and content relationships
• Both depend on a harmony between UI and UX design in order to succeed

Now let’s look at the differences.

What is responsive web design?

Responsive web design is a design and development technique that aims to give users the optimal experience on as many devices and browsers as possible.

The responsiveness is achieved through coding that allows your site’s creative elements to shift and adapt, rendering images, copy, and navigation to suit the visitor’s reading environment. This practice came about through the increasing popularity of smartphones, and the addition of tablets.

Responsive web design has gone through best practice changes as the landscape of devices has grown.

“Originally, the industry assumed that mobile users were ‘on the move’ and wanted less information,” says Johnston. “What we learned pretty quickly, though, is that users were more than willing to sacrifice screen space for convenience.”

User research and industry data showed that while users were moving rapidly to mobile searches — whether done on the town or on the couch — they still wanted thorough answers.

“The new challenge became ‘how do we make the whole site experience more accessible on smaller screens’? Enter responsive web design, and all of the ensuing revolutions to make content fully fluid through interface design.”

Looking for deeper insights? Check out Website Navigation: UX Design Best Practices.

All Forge and Smith web design projects have been responsive since 2011. We’ve observed that most small and medium B2B companies still prefer responsive web design, as data shows that significant portions of their audiences are searching and accessing their sites on desktops.

Our approach on these websites is to plan, design, and build for the desktop experience, and then effectively design an optimal mobile experience at the end of the build.

What is mobile-first web design?

Mobile-first web design is another design and development practice that many companies, particularly those in B2C industries, are seeking. In this method, a website is planned and crafted for mobile devices first, with the desktop design coming last.

If user research and audience data indicate that the majority of your site’s visits are coming from phones and tablets, mobile-first design might be right for your business. After all, any website design or redesign should be driven by your users.

“I’m a big believer in progressive enhancement — building mobile first and adding code on the way up to the desktop experience,” says Johnston. “However, we’ve found the majority of our clients aren’t yet placing priority on mobile. Desktop design gives them a fuller appreciation for the aesthetic.”

Does your business need to be thinking mobile-first? What are the other contributing factors to how you should weigh mobile design vs. desktop design? User insights aside, we of course have to consider the priority on everyone’s minds: what does Google want?

Mobile design and SEO: Google’s mobile-first indexing

“Google has shifted the playing field towards mobile, so it’s not like they’ve left us a choice! Yes, we will obey, benevolent overlords,” Johnston jokes. He is of course referring to Google’s mobile-first indexing.

Google will now “use the mobile version of [a] page for indexing and ranking, to better help our – primarily mobile – users find what they’re looking for.”

What does that even mean?

Google has a single index of content, which is what it checks and selects from to display search results. Since 2015, Google has been increasing the ranking of mobile-friendly websites in mobile searches. After all, it’s no benefit to Google or the person doing the search if a clunky, slow-loading website is their number-one option.

Your website and its pages are catalogued and shown to users as the last indexed version — that is, the last version that was crawled and put into Google’s massive database.

When ranking search results, search engines like Google take hundreds of factors into consideration. SEO is about understanding and utilizing as many of these ranking factors as possible to give your website its best chance at being discovered.

Key takeaways in mobile optimization:

• Desktop content will continue to be indexed and appear in search results
• Data shows that mobile searches have overtaken desktop, and will continue to rise
• Mobile-friendly websites get an added SEO boost from on-page and user behaviour ranking signals
• Site speed matters! Page load speed is a significantly heavier ranking factor as of 2021

“Another contributing factor to the change in mobile design has been the rise of social networks. Not just as places to connect or to share what I had for breakfast, but as legitimate search engines,” says Johnston.

“Few people use social media while sitting a desk; we do this from our phones throughout the day. Clicking through to websites from that content is yet another opportunity for mobile web to create engagement and accessibility.”

From adopting voice search SEO and social media SEO into your strategy, to ensuring a seamless mobile user experience, it always comes down to accessibility for your target audience.

What can you expect in a mobile design project?

If you’re planning a website redesign, or a fresh build with mobile-first prioritization, you’re probably wondering exactly what that looks like. What will the project entail, from a business perspective?

Before you throw up your hands at your desktop-driven website and run full steam ahead into a mobile web design project, consider your audience’s needs — and your existing site. As mentioned, your website is still being indexed by Google and other search engines. Can small changes to improve its responsiveness and load times give it the boost it needs?

Don’t miss our complete guide to What Makes a Great Website – UX design tips!

Mobile-first and responsive web design engagements with an agency will look and feel similar as far as budget, scope, communications, and timelines, but there are some key differences. The biggest comes down to your page element options, both the layouts and the creative content.

“Back before mobile, we worked with fixed dimensions. We could force layouts to do what our clients wanted,” says Johnston. “It lead to a lot of ‘decorative’ elements, like fancy textures and embellishments — anyone remember paper and thumb tack designs?

“With mobile, we have to ensure a page design is fluid both horizontally and vertically, a big reason for the rise of flat design. We rely on coding designs, rather than heavy images.”

The need for the best possible speed performance drives creative in mobile designs, but it does come with some limits.

“Every image, icon, and font being loaded must have a purpose that’s absolutely necessary for the user experience, because it all adds to your overall page load times. Gone are the days of designing for solely for ‘beauty’; the web is now about accessible content.”

This means that creative choices made by preference rather than user insights and site performance are a big no-no. Embedded animations and video are used more sparingly, and always optimized for the speediest performance through compression and coding.

“Personally, I think this has made websites better all around, forcing designers to consider experience and legibility over more self indulgent design,” Johnston notes. “As Jeffrey Zeldman wrote, ‘design without strategy is just decoration’.”  

Want to ask us even more questions about mobile design, and how it impacts your digital strategy? Reach out! This is our passion — making the Internet better, one website at a time. Forge and Smith is recognized as one of the Top Mobile Web Design Companies on DesignRush.