Design for Mobile First, Then Optimize For Desktop. Here’s Why. 

design for mobile

Design for mobile, don’t just optimize for mobile on your site. Why? Because you’re leaving money on the table. 

Read on for 5 tips on how to design your site, funnel, and ads for mobile so that you’ll sell more and be seen as a professional.

In solo Episode 86 of the Marketing Matrix Podcast, I share why it’s crucial to design for mobile, especially for your funnels, and give you tips on how to make a killer mobile experience for your customers.

Here are some of the most notable takeaways:

Why You Need to Design for Mobile

When you are creating your site or working with a website designer, most times your site and funnel will be designed for desktop, and then optimized for mobile.

Guys—with 95% of your ad traffic on mobile (and this number continues to grow), you need to design for mobile.

People are no longer signing up for your webinar and blocking off time in their calendar to attend the event. They’re consuming your content immediately on their phones. This behavior changed the industry indefinitely.

If your site isn’t designed for mobile, you risk losing customers because they’re more impatient on their phones. If your site doesn’t load right away or looks odd, your customer will abandon your site immediately.

Here are five ways to design for mobile.

Design for Mobile in a Single Column

On desktop, your site often gets designed in multiple columns. For example, you’ll have an image on one side and then a submission form on the other side, or something like that.

But with mobile, those columns can get jumbled and the images and content blocks end up being placed randomly. This doesn’t make for a smooth user experience.

Design in a single column to ensure it shows up exactly how you want it to on a phone.

Use Less White Space

When designing for desktop sites, the name of the game is white space.

But on mobile? The screen is tiny. You have less real estate, and when white space shows up on mobile, it causes people to feel like your information is disorganized. Therefore, people will bounce.

To fix this:

  • Decrease padding between blocks of text
  • Decrease padding sizes overall
  • Get rid of your giant logo on mobile (it’s wasted real estate—and no one cares about your logo after they click on your ad)

Look Closely At Your Headlines

There are two factors to consider here. First is font size. Make sure it is designed to look correct on mobile devices. Quite often, you might have a few words in a very large font size with the rest of the headline smaller, but on mobile this will look wonky.

Next, your super long headline on desktop will not work on mobile. You have to shorten it. Be clear, be succinct, and leave space for your sub headline and your call to action.

Focus On The Order Of Your Elements

When designing mobile-first, the order of the elements on your page matter. It has to make sense and make sure it flows. Otherwise, people will leave your site.

If you have a headline, a sub-head, a video, and a call to action, it doesn’t necessarily matter which goes first, but you have to make sure it makes sense to your customer and that it flows for your particular offer.

Get the CTA Above The Fold

Your call to action (CTA) button on mobile should be visible without the customer having to scroll. But why?

There are much higher opt-in rates when the CTA button is above the fold.

If you do enough indoctrination in your ad, by the time people come over to your site they’re ready to take action to opt into whatever you’re offering.

Remember to design for mobile first. It will save you money. (And it will make you more money.) It will save you grief. And it will save you from being the laughing stock amongst your community.

Design for Mobile First, Then Optimize For Desktop. Here’s Why. 

Leave a Reply

Your email address will not be published. Required fields are marked *

Scroll to top