13 Ways To Raise Your Mobile Content Game

We recently analyzed data from more than 200 million visitors to our eCommerce customers’ sites, and found that 27% of site visits came from people shopping on smartphones and tablets.

For some countries, such as Brazil, nearly half of all eCommerce traffic came through mobile devices. It’s now a reality that every company and publisher on the web needs a mobile web strategy.

So here are 13 tips for optimizing your content for mobile site visitors.

1. Use placeholder text on common form inputs

On small forms where context is obvious, use placeholder text instead of labels (e.g. login forms, search boxes or address forms).

On the other hand, if the user needs a label to understand what the context of the input is, don’t rely on placeholder text. Make sure the label is always present, even after they’ve inserted content.

2. Less is more

Entering information into forms is much harder on a mobile device, right? So, ratchet down required fields to a bare minimum. Or, better yet, don’t include form inputs you don’t require.

Ask your users to enter the information later or omit it altogether.

3. Place labels above form inputs

When you use labels they should be placed above form elements. Using top-aligned labels ensures that if the mobile browser zooms in on the input, the user doesn’t lose the context of the input.

4. Make sure that text is always text

No image-based text. Nope, none. Learn to use CSS as it’s meant to be used because different screen dimensions and display densities will wreak havoc on your text if you flatten it into an image. Added benefits to using text for text include accessibility, performance, graceful degradation and general usability.

Services like TypeKit, FontSquirrel and Google Web Fonts make is easy to design beautiful text.

5. Keep headings shorter than short

Headings that wrap over more than two lines push your content down the page and often out of frame for users. Keep them short, focused and descriptive without telling the whole story.

Like in this example below, while it probably looks fine on the desktop, that’s a mighty long heading for a smartphone.

6. Declare your font size in pixels for perfect control

We recommend you use pixels (px) for font size because it offers absolute control over the text. In addition, we recommend using a unit-less line-height because it doesn’t inherit a percentage value of its parent element. Instead, it’s based on a multiplier of the font-size. Regarding font size, we recommend at least 14 px.

Even if that seems really big, it’s the right thing to do. The only time to go smaller (and just to a minimum of 12 px) is on very precise labels for forms.

7. Treat your content like it’s a king

Think long and hard about the job of each page. Then make sure that all the content on that page helps your users accomplish that job.

Simple beats pretty. Simple also tends to be pretty.

8. Keep copy short

Be brief. Be brilliant. Be gone.

9. Save time with font-based icons

We ❤ icons! They spice up your designs. To avoid managing a sprite sheet with both retina assets and smaller icons, opt for a font-based icon set like: Font Awesome; glyphish; iconsweets; or symbolset or you can always make your own.

10. Images need love too

Images tell a story and should be carefully resized to ensure that their story translates seamlessly onto a new screen size. Avoid simply sizing down images.

The context has changed and so the images should too if you expect them to properly tell their story.

11. Go easy on the images

Drop your gradient images and buttons and make them lovely with CSS. Mobile devices support some of the most advanced CSS functions of any browsers so pretty much anything you want to do in imagery you can do with styling.

Additional benefits includes: better scaling, better load times, happier users. Yays! all around.

12. Use some asset management magic

Generate retina icons and use the CSS background-size attribute to size them down for non-retina devices. They’ll still look great and won’t take up that much more space than the smaller versions.

13. Don’t make passwords more tedious than they have to be

If you require a password for an account login, show some mercy and make the password login process as easy as possible.

That means giving users the option to show or unmask the password so the most recent character entered is showed to them.