Google frequently updates its ranking algorithm, with Core Web Vitals playing a key role in these changes. Given that more global web traffic now comes from mobile devices rather than desktops, having a fast-loading mobile website that utilizes mobile first design is crucial for maintaining good search rankings.
While speed is essential for SEO, it’s not the sole factor. Balancing speed with conversions is important, which involves enhancing your E-A-T (Expertise, Authority, and Trustworthiness) to prove your credibility. Additionally, Google has introduced a new Site Speed Comparison tool called Sandbox, which shows site speed metrics based on specific search terms. All of this can be impacted by the websites layout, hierarchy, and how you design it – which includes mobile first design.
Let’s get into the dangers of mobile first design, and suitable alternatives.
Should I build a mobile first designed website?
Since Google ranks websites based on their mobile view, it might seem logical to design the mobile version of a site first. However, we argue that prioritizing mobile first design could negatively impact your overall website performance, and here’s why…
While it’s important for a website’s desktop and mobile designs to align, they should not be identical. Each version requires a tailored design approach to optimize conversions on both platforms. Mobile users often experience slower internet speeds and are usually using their phones to pass the time while waiting. Therefore, your website should cater to these conditions by loading quickly, providing concise content, and offering a streamlined user experience.
Desktop users typically have more time and faster internet connections, and they often come to your website with a specific goal in mind. To make a strong impression, your desktop site should showcase a memorable brand personality and incorporate psychological triggers, with a well-structured visual hierarchy to persuade and motivate action. This can be reflected on mobile devices without prioritizing mobile first design.
Mobile first design can complicate things in the long run. It’s generally more challenging to expand a simplified mobile design into a fully featured desktop version than it is to streamline a comprehensive desktop design for mobile. Mobile first design often leads to a desktop version that appears plain and lacks essential psychological drivers and brand personality.
With mobile first design, fitting in brand elements, trust signals, and proof elements such as images and videos can be challenging due to load time constraints. Consequently, if the desktop site is merely a scaled-up version of the mobile design, it may end up looking bland and lacking in critical conversion elements and brand identity.
This begs the question: how are you supposed to design a website to look as good on mobile as it does on desktop?
Designing on desktop, whilst having mobile in mind
We always start by designing the desktop view first as opposed to mobile first design. This approach allows us to incorporate brand personality and essential conversion elements while establishing you as a trusted authority. However, we keep the mobile experience in mind throughout the desktop design process. When designing the mobile version, our focus shifts to balancing speed and conversions, creating a user experience that aligns with users’ intentions and short attention spans. Effective UX design on mobile requires a thoughtful approach.
Not all industries see equal traffic on mobile versus desktop. For example, Google Analytics often reveals that many of our clients—particularly those in services or education sectors—still receive more desktop traffic. Thus, investing in a strong desktop design over mobile first design is crucial. A poor user experience on either desktop or mobile can hinder your ability to convert visitors into leads or sales, so it’s essential to optimize both versions with their unique needs in mind.
For desktop, we design your website with several key strategies to maximize your results:
- Lead with Value: Ensure your website highlights the value you offer, provides helpful content, and establishes your authority.
- Persuasive Copywriting: Craft compelling copy that resonates emotionally with visitors, clearly demonstrates how you solve their problems, and outlines the consequences of not choosing you.
- Showcase Benefits: Emphasize the benefits of your offer and position your customers as the heroes, with your brand as their trusted guide. Our design enhances your copy with social proof and credibility-boosting elements, using psychological drivers to build trust.
- Appealing Design: Select a color palette and images that resonate with your target audience. Employ a modern, clear layout that’s easy to navigate.
- Visual Hierarchy: Create a design with an effective visual hierarchy to encourage visitors to take action, whether it’s opting in, making a purchase, or getting started.
How can I optimise my website for mobile devices?
Instead of thinking about mobile first design, why not think about how you can optimize your desktop design for mobile. Here’s some tips:
Streamline content and optimize load times
Mobile users have shorter attention spans, making it crucial for your site to load within 1-3 seconds to retain visitors. Achieving both fast load times and high conversion rates requires careful consideration of what to simplify or remove. If it doesn’t impact conversions, we will:
- Replace background images with flat colors if the design remains visually appealing.
- Resize images to match the smaller dimensions used in the mobile view.
- Reduce the vertical height of certain elements and sections to minimize scrolling.
- Eliminate elements or sections that aren’t essential for conversions.
- Swap image slider testimonials for static ones.
Optimizing images for mobile
To enhance your website’s speed, ensure that images aren’t larger than necessary. For example, avoid uploading a 1000 x 1000 pixel logo if it only displays at 200 x 200 pixels on the site. Using formats like SVG can significantly reduce file size and boost speed compared to PNG or JPG files. Developers should resize images specifically for mobile-responsive views.
Tip: Use a tool like Kraken.io to compress all images and further reduce file sizes.
Optimizing videos for mobile
Videos can significantly slow down your website, especially on mobile devices. To improve load times, consider displaying an image placeholder instead of the video itself. When the user presses the image, the video will then load. This approach prevents the video from slowing down the initial page load.
Effective mobile call to actions (CTAs) to boost conversions:
- Sticky CTAs: Position a sticky CTA at the top or bottom of the webpage, ensuring it remains fixed and visible as users scroll. This keeps the button accessible at all times, encouraging action no matter where visitors are on the page.
- Contrast CTAs: Make your CTA button stand out by using a color that contrasts sharply with the surrounding elements. Avoid using ghost buttons, which can easily blend in and be overlooked.
- Click to Call: Implement a “click to call” CTA, allowing users to dial your business with a single tap—one of the most effective mobile CTAs.
- Text Us: Leverage the underutilized “Text Us” CTA, offering another convenient way for customers to reach out.
- Pre-Populated Fields: Guide users through forms by displaying example text in fields (e.g., “Name: John Doe”), making it easier for them to understand what information is needed.
Avoid dark backgrounds on mobile
White text on a dark background can be hard to read in outdoor lighting. Whenever possible, opt for dark text on a light background to enhance readability.
eCommerce tips for mobile:
- Keep the search box in the sticky top navigation bar.
- Use accordion menus for product categories.
- Ensure the CTA stays above the fold by placing part of the product description below it, preventing it from being pushed down.
- Use arrows instead of thumbnails to display additional product images.
- Position the CTA at the top of the checkout page, ideally within the sticky header.
How to get amazing and affordable responsive design
Getting your design to look as good on mobile as it does on desktop (or vice versa) without using mobile first design is no easy task. Even with the tips we’ve provided in this post, it can be hard to build a website where all elements are responsive, including the header, footer, and other aspects.
That’s why we recommend contacting NEO Web Agency for all of your web design needs. They are one of the most respected design firms with happy customers all over the world. All of their websites are guaranteed to be built responsively, and they undercut the market everytime, sometimes by over 50%! So, what are you waiting for, hit the button below to find out how NEO can help your business:
Your next steps:
- Test your website’s speed using Google’s Page Speed Insights Tool.
- Apply the tips mentioned above.
- Test the speed again using the same tool, aiming to reach the green zone or as close as possible. However, be cautious not to remove too many sections or elements if it negatively impacts conversions. Striking the right balance between speed and conversion is key.
While I’m no Steve Jobs, I hope I’ve encouraged you to ‘Think Different’ about your website design. Don’t simply follow the trend of mobile first design or neglect the desktop view altogether!