5 secret tips to make Mobile Shopping Banners that rock.

Mind the Aspect Ratio1.

Desktop banners tend to be wide and relatively short.

very wide

short

But your mobile screen is very different from your desktop’s.

Things are smaller,

And horizontal space is limited.

Do not use desktop aspect ratios for mobile banners.

x

1:2is a good aspect ratio for your mobile homepage banner.

X

2X

512px

1024px

Crunch homepage banners are usually 1024 x 512px.

1:2is a good aspect ratio for your mobile homepage banner.

Change the ratio if you need to.

Just make sure your banner makes sense and looks good.

This is okay. Better than okay. This is actually awesome.

But this is just wrong.This is okay. Better than okay. This is actually awesome.

Get to the point.2.

Remember.

On mobile, space is sacred. And scarce.

Remember.

Don’t clutter it up with unnecessary text.

Keep your copy short, and just get to the point already.

On mobile, space is sacred. And scarce.

What’s going on here!? Nevermind. *scrolls away*

Sexy phone. Young & Powerful. And cheap! *clicks*

What’s going on here!? Nevermind. *scrolls away*

Make it big.3.

Once you’ve trimmed out all the unwanted text,

take what’s left and make it large.

Teeny tiny type is invisible on mobile.

14 - 16pxis the minimum recommended font size for body text on mobile banners.

24 - 32pxusually works well for banner headings.

{ This could change, depending on the font used, the length of your copy, etc. }

Nobody can read this. Nobody.

Nobody can read this. Nobody. But this is crystal clear.

Keep a clear CTA.4.

If your banner is clickable, it needs a clear Call To Action.

Don’t confuse people. Tell them exactly what to do.

If your banner is clickable, it needs a clear Call To Action.

Do I get to learn more about this? Or

buy it? Should I click on it? Who knows.

*scrolls away*

Ah! I can preorder this. Let’s

check it out! *clicks*

Do I get to learn more about this? Or

buy it? Should I click on it? Who knows.

*scrolls away*

Follow these simple rules of good design.

5.

Use the same fonts you’re using across your site. Use the same

styles for all buttons. Keep colors in the same space.

Consistent design is good design.

Rule #1 - Be Consistent.

Use the same fonts you’re using across your site. Use the same

styles for all buttons. Keep colors in the same space.

Consistent design is good design.

Contrast can be tricky. Too high, and you’ll hurt my eyes. Too

low, and I won’t see it. Things should be clear without being loud.

Rule #1 - Be Consistent.

Rule #2 - Keep an eye on contrast

Use the same fonts you’re using across your site. Use the same

styles for all buttons. Keep colors in the same space.

Consistent design is good design.

Contrast can be tricky. Too high, and you’ll hurt my eyes. Too

low, and I won’t see it. Things should be clear without being loud.

Stop assaulting my eyes!

Rule #1 - Be Consistent.

Rule #2 - Keep an eye on contrast

Rule #3 - No stretched images. No pixellated images. Ever.

Pro-tipsBONUS

{ For when you’ve aced the basics. }

Make banners at 2x the size you need, so they render well on

high definition devices too.

In Photoshop CC’s ‘Save for Web’ screen, click on the dropdown

next to ‘Presets’ and look for ‘Optimize to file size.’ Now set a max

size, and Photoshop will automatically cap image quality

accordingly.

If your banner has mostly flat colors, gif maybe a better format for

you. It allows you to limit the number of colors and massively save

on file size.

Tip #1 - Prepare for retina

Tip #2 - Control file size with this little-known Photoshop feature.

Tip #3 - Export simple images as gifs instead of jpegs.

So, show the mobile web some love.

Follow these simple guidelines, make better homepage banners,

and go kill it.