fb-icon
In this article

Mobile first website design vs desktop first

Google keeps changing its ranking algorithm, taking into consideration these Core Web Vitals.

A fast loading website on mobile is important for rankings since more website traffic globally is now viewing websites on mobile devices instead of on desktops.

We understand the importance of speed on mobile for SEO ranking however, we also know that speed isn’t everything for rankings, so you need to balance speed with conversions, which is all about building your E-A-T by proving that you’re an Expert and raising your Authority & Trustworthiness.

Google has a new Site Speed Comparison tool called Sandbox that displays the site speed value based on search terms.

Should you start with a mobile-first design?

Because Google ranks websites based on the mobile view, it seems logical to think that you should design the mobile view of a website first.

However, we believe that designing the mobile version first could harm your overall website results, and here’s why…

While a website’s desktop design and mobile design need to be coherent, that doesn’t mean they’re one and the same. In fact, they need to have two different design approaches in order to achieve conversions on both versions.

When people are out and about using their mobile phones, their internet speed may be slow. They are usually filling in time while waiting for something else, so your website needs to give them the experience to reflect their situation by having it load fast, with abbreviated and concise content with a simplified user experience.

Desktop users usually have more time and faster internet. They also often have a goal they’re trying to solve a problem, and your website could be their destination so it needs to be designed to impress your visitors by having a memorable brand personality, plus it should have all the psychological drivers, designed with the right visual hierarchy to persuade entice to take action.

Designing for mobile first before the desktop version makes it more difficult in the long run. It’s harder to expand on a simple design and content (mobile-to-desktop) than it is to simplify a desktop design (desktop-to-mobile).

Designing for mobile first usually results in the desktop version looking very plain and lacks the psychological drivers and brand personality.

When you’re designing for a smaller canvas (mobile), it’s difficult to include brand elements, trust elements & proof elements, including images, photos, and videos, because it all adds to the load time. Then, if the desktop version is designed to match the mobile version, it usually looks quite bland and is missing all the conversion elements and brand personality.

So, what is the best way to design a website to get the best results and look great on both mobile and desktop?

Our answer is…

Design for desktop first, while thinking about mobile at the same time!

We always design the desktop view first, so that we can add brand personality and include all the conversion assets and psychological drivers that position you as the trusted go-to authority, but we always have the mobile view in mind while we’re designing the desktop version.

When we design the mobile version, we need to balance conversions with speed and design it in a way that caters to their intent and limited attention span. So we need to be clever with the UX on mobile.

Not all industries are equal online. Check your Google Analytics and you may be surprised to find that you still get more traffic on desktop. I know we do, and so do the majority of our clients that offer services, or education.

So it makes a lot of sense to invest in your website’s desktop design!

Websites with a bad user experience on desktop or mobile can prevent a visitor from turning into a hot lead or a sale. So we need to optimize the mobile and desktop in different ways.

For desktop, here’s how we design a website to give you the best chance of boosting your results:

  • We need to make sure you lead with value, have helpful content and we must showcase your authority.
  • We need to make sure the copywriting is persuasive & hooks people emotionally, explains clearly how you solve your prospect’s problems, and what the implications are if they don’t choose you.
  • We need to display the benefits of your offer and we need to position your customers as the hero and your brand as their guide. Our conversion-focused design enhances the copywriting plus we use social proof and credibility boosting elements throughout the site using psychological persuasive drivers that help build trust.
  • We use a color palette and images to appeal to your target market, with a modern design layout that is clear & easy to navigate.
  • We make sure the design has the right visual hierarchy to entice your visitors to take action. (Opt-in &/or buy, get started, etc.)

How to optimize your website for mobile:

Reduce content & remove sections
Given the shorter attention span of mobile phone users, it’s essential to have the mobile site load within 1-3 seconds, or you will lose your visitors.

The goal is to have it load fast AND convert, so it can be a balancing act of what to simplify or remove. So if we think it won’t reduce conversions we will:

  • Replace background images with a flat color, if it still looks good.
  • Recode images at the smaller dimensions that appear on the mobile view.
  • Reduce the amount of vertical height of some elements & sections to save scrolling.
  • Remove some elements & sections altogether, if we think it won’t reduce conversions.
  • Replace image slider testimonials with static testimonials.

Images on Mobile
One key to speeding up your website is to make sure images aren’t unnecessarily large. Don’t upload a 1000 x 1000 pixel logo if the logo is only 200 x 200 pixels on the site. Some image formats such as SVG will reduce the file size and improve speed, compared to a PNG or a JPG file. Developers should recode smaller images for mobile responsive views.

Tip: Reduce the file size of all images using a tool like https://kraken.io

Videos on Mobile
Videos can slow down the speed of the desktop version of your website, and they are even slower to load on the mobile version of your website. So a pro tip is to display an image of the video on the page, then when pressed, have it load the video. That way, when the page loads it isn’t slowed down because it doesn’t have to load the video.

Call to Actions (CTA) to boost conversions on mobile:

Sticky CTAs: A sticky CTA should be positioned at the top or at the bottom of the web page. And it should not move when scrolling up or down the web page. This means the button is always in view & accessible, regardless of where the visitor has scrolled to the page.
Contrast CTAs: Your CTA button needs to stand out and attract attention. To achieve that, the button should be in a color that contrasts with the color surrounding it. Avoid ghost buttons.
Click to call: One of the most effective calls-to-action you can use is ‘click to call,’ which lets customers dial the business with one click.
‘Text Us’: is an amazing underused CTA on mobile.
Pre-populated fields: Display example text on the form fields of your forms (e.g. Name: John Doe) so that customers are guided as to what they should write.

Avoid dark backgrounds on mobile
White text on a dark background is difficult to read outdoors. Instead use dark text on a light background, as much as possible.

eCommerce tips for mobile:

• Keep the search box in the sticky top nav-bar
• Use accordion menus for categories.
• Keep the CTA above the fold.  Move part of the product description under the CTA so it doesn’t push the CTA below the fold.
• Use arrows instead of thumbnails to show the other product images.
• Checkout page needs the CTA at the top of the page (Preferably in the sticky header).

 

Your Action Steps:

  1. Test the speed of your website using Google’s Page Speed Insights Tool
  2. Implement our tips above
  3. Use the same tool again to test the speed. The goal is to get into the green or as close as possible. Don’t remove too many sections or elements though if it reduces conversions. It’s a balancing act to get the speed fast while still maintaining conversions.

I’m no Steve Jobs however, I hope that I’ve helped you ‘Think Different’ about your website design and don’t follow the masses by designing the mobile-first or discarding the desktop view altogether!

To see how we can help you improve your website that performs well on desktop and mobile, book a complimentary Strategy Call here.

About The Author

Greg Merrilees

Greg Merrilees is the Founder & Director of Studio1Design.com, a world-leading website design, and branding agency based in Australia who design really, really, good-looking websites that convert for clients all around the world.

Unlock Your Hidden Revenue With Our NEW Revenue Booster Tool

Ready to take your website
and brand to a whole new level?

When we custom-design your website it will give you the best chance to convert more of your visitors into hot leads and sales. You get unlimited design revisions, as we have done for over 2000 clients worldwide.

You may also like…

Here’s What Our Happy Clients Say:

Hollywood Producer _of Pretty Woman & Under Seige
“I’m a filmmaker. NOT a designer, not a web designer and certainly not a landing page expert.

“You and your business deserve the best, so if you’d rather not waste time and money on lesser branding, websites or landing pages, take my word for it…

Studio1 is simply ‘as good as it gets’. Full stop!”
Gary Goldstein
Gary Goldstein
Hollywood Producer
of Pretty Woman & Under Seige
Voice of Yoda, and_Muppets Characters
“Working with Studio1Design was terrific! Greg and his team are total professionals.

They were sensitive and alert to our schedule throughout, proactively providing creative ideas and responding to our adjustments. The design team turned things around with impressive speed.

As a result, we got the website up in record time and hit our targets.”
d10e2f8575aedc749c6949d48d88694d-min
Frank Oz
Voice of Yoda, and
Muppets Characters
Flavored PB Co.
“We had many reviews of our website and it’s off the charts of how good it looks!

There have been numerous people saying that it’s the best website they’ve ever seen. And the conversion rate on it after everything was done is huge!

“Our business is only 3 years old, which is when Studio1 designed our website, and we are on course to be doing around 5 million this year just in online sales.”

We know that your designers know what they are doing. Highly recommended!”
Matt Mcalister
Matt Mcalister
Flavored PB Co.

Here’s What Our Happy Clients Say:

Is your website designed to convert?

If not, take our quiz now to discover 50 things to boost your website’s conversions across six vital areas that could be costing you thousands…

Privacy Policy

This following document sets forth the Privacy Policy for the Studio1 Design website: Studio1Design.com. Studio1 is committed to providing you with the best possible customer service experience. Studio1Design is bound by the Privacy Act 1988 (Crh), which sets out a number of principles concerning the privacy of individuals.

Collection of your personal information
We collect Non-Personally Identifiable Information from visitors to this Website. Non-Personally Identifiable Information is information that cannot by itself be used to identify a particular person or entity, and may include your IP host address, pages viewed, browser type, Internet browsing and usage habits, advertisements that you click on, Internet Service Provider, domain name, the time/date of your visit to this Website, the referring URL and your computer’s operating system.

Free offers & opt-ins
Participation in providing your email address in return for an offer from this site is completely voluntary and the user therefore has a choice whether or not to disclose your information. You may unsubscribe at any time so that you will not receive future emails.

Purchases through this website
For access to our design services & for our customer support you are required to submit personally identifiable information. This may include but not limited to a unique username and password, address and phone number. We do not store any of your payment processing details when you make a purchase on this site. All secure payments are processed via Paypal. Paypal is a trusted & secure payment gateway.

Cookie Based Retargeting & Marketing
From time to time some of our advertising campaigns may track visitors to this website for the purpose of display advertising. If this is a concern to you should turn off third-party cookies in your web browser.

Sharing of your personal information
Your personal information that we collect as a result of you purchasing our products & services, will NOT be shared with any third party, nor will it be used for unsolicited email marketing or spam. We may send you occasional marketing material in relation to our design services.

Changes to this Privacy Policy
Studio1 Design reserves the right to make amendments to this Privacy Policy at any time. If you have objections to the Privacy Policy, you should not access or use this website. You may contact us at any time with regards to this privacy policy.

3D-EBOOK-min

Is Your Website
Designed To Convert?

Download our proprietary 10-point conversion checklist to discover the most important quick wins to boost your website’s performance & to get it working hard for you…

We Only Send You Awesome Stuff =)

Ready to Join a
World-Class Design Team?

Fill out the form below so we can get to know you better