How to Build a Truly Mobile-First Website

Semrush conducted an analysis based on the top 100 most visited websites in the U.S. using Semrush’s Traffic Analytics tool. Here are the two key findings:

• Mobile devices receive more website visits and unique website visitors than desktop

• Mobile usage had a higher bounce rate than desktop

The data aligns with the widespread use of mobile devices and the increasing optimization of websites for mobile browsing.

Mobile devices are often the go-to choice for accessing information, services, and entertainment instantly, as well as for quick searches and answering questions.

On the other hand, desktops, with their larger screens, are better suited for visual work, detailed analysis, and multitasking. Their multi-monitor setups and ability to handle multiple tabs simultaneously create a more seamless and in-depth product research experience.

Regardless, let's not jump to conclusions about a mobile preference without further context or user feedback.

Always review your data (e.g. Google Analytics) for more detailed insights.

We Will be Looking at Two Things:

1. Mobile-first design
2. Mobile-first indexing

Mobile-First Design

Key Idea of Mobile First

• Start Small, Then Scale Up: Instead of designing for desktop first and then scaling down for mobile, you design for mobile first and then add enhancements for larger screens.
  ​
• Progressive Enhancement: Begin with a basic, functional design for mobile devices, and then progressively add more features or layout adjustments as the screen size increases.

Why Mobile First?

• Performance: Mobile-first designs tend to be lighter and faster because they prioritize simplicity and efficiency, which is crucial for mobile devices with limited resources.
  ​
• User Experience: With the majority of web traffic coming from mobile devices, designing for mobile first ensures that the most common users have the best experience.
  ​
• Future-Proofing: As new devices with varying screen sizes emerge, a mobile-first approach makes it easier to adapt the design to different contexts.

In Traditional (Desktop-First) Design

You might write CSS for desktop and then use max-width media queries to adjust the layout for smaller screens. For example:

In a Mobile-First Approach

You start with the mobile layout and use min-width media queries to add styles for larger screens. For example:

Mobile-First Indexing

Google’s changelog on mobile-first indexing:

• May 4, 2020: Mobile-first indexing will be enabled for all websites starting September 2020.
  ​
• May 28, 2019: Mobile-first indexing is enabled by default for all new websites starting July 1, 2019.

Mobile-First Indexing Best Practices

1) Create a Mobile-Friendly Website

If you haven't already, create a mobile-friendly website so your users visiting your site through a mobile phone can have a stellar experience. There are three configurations you can choose from to create a mobile-friendly site:

• Responsive Design (Recommended):​
  Use the same HTML and URL for all devices, but adjust the layout based on screen size.
  ​
• Dynamic Serving:​
  Serve different HTML based on the user-agent while keeping the same URL.
  ​
• Separate URLs (m-dot):​
  Use different URLs for mobile and desktop (e.g., m.example.com).

2) Ensure Google Can Access and Render Your Content

• Use the same robots meta tags on both mobile and desktop versions. Avoid noindex or nofollow on mobile.
  ​
• Avoid lazy-loading primary content that requires user interaction (e.g., clicking or swiping). Google won’t index such content.
  ​
• Allow Google to crawl all resources (e.g., images, CSS, JavaScript) by avoiding disallow rules in robots.txt.

3) Maintain Consistent Content Across Desktop and Mobile

• Ensure the primary content is the same on both versions.
  ​
• Use the same headings, metadata, and structured data on both versions.
  ​
• If space is limited on mobile, consider using accordions or tabs instead of removing content.

4) Optimize Structured Data

• Use the same structured data (e.g., Breadcrumb, Product, VideoObject) on both versions.
  ​
• Ensure URLs in structured data are updated for mobile versions.
  ​
• Use Rich Result Testing Tool or Schema Markup Validator to audit your website structured data
  • ​https://search.google.com/test/rich-results​
  • ​https://validator.schema.org​

5) Optimize Visual Content

Images:

• Use high-quality images with supported formats (e.g., JPEG, PNG, SVG).
• Avoid using unsupported tags or formats (e.g., .jpg inside tags in SVG).
• Use the same alt text, captions, and filenames on both versions.
• Avoid using URLs that change frequently for images.

Videos:

• Use supported formats (e.g.,
• Place videos in easy-to-find locations on mobile pages.
• Use the same video structured data on both versions.

6) Avoid Common Errors

• Ensure both versions have the same structured data.
• Avoid using noindex on mobile pages.
• Ensure robots.txt doesn’t block important resources.
• Ensure titles and meta descriptions are present on both versions.
• Ensure mobile pages don’t return errors when desktop pages are valid.
• Avoid redirecting multiple desktop pages to the same mobile page.
• Ensure your mobile site can handle increased crawl rates.
• Ensure error page statuses are consistent across desktop and mobile.
• Avoid URL fragments (e.g., #section) on mobile, as they are not indexable.
• Ensure each desktop URL has an equivalent mobile URL.
• Use hreflang links correctly (Mobile URLs should point to other mobile URLs.)
• Use rel=canonical and rel=alternate tags correctly (Desktop URL is the canonical, and mobile URL is the alternate)

We provide a full enterprise-grade team to grow your Shopify store at a fraction of an executive’s salary.

With 7+ years of experience and 100+ profitable projects, we have proven system to help you succeed.

P.S. Let’s schedule a quick call to discuss how we can grow your Shopify store. Click here to book a time or reply "YES" to this email to get started.

Talk soon,

Derek

113 Cherry St #92768, Seattle, WA 98104-2205
​Unsubscribe · Preferences​