Making your membership site work on every phone

Picture a member of a yoga studio's online class library. She unrolls her mat in the living room, props her phone against a water bottle and opens your site to find tonight's class. If the login box is tiny, the class list needs pinching and zooming, and the video will not go full screen, the session starts with frustration instead of calm. She may not complain. She may simply use your site less.

Many members reach membership sites mainly on their phones, often in the in-between moments of the day: on a commute, in a waiting room, standing in a kitchen. Designing for phones is not about shrinking the desktop site. It is about making sure the things members actually do on a phone are easy to do there.

Know what members do on their phones

People use phones differently from laptops. On a phone, members tend to:

• Check what is new, read a short post or reply to a forum thread
• Watch or listen to a lesson, often with the phone propped up or in a pocket
• Log in after tapping a link in an email
• Look something up quickly, such as a pose sequence or a recipe

They are less likely to fill in long forms, compare detailed tables or work through a complex course dashboard. Your mobile design should make the first list effortless and the second list at least possible. If your analytics tool shows device types, check which pages get the most phone visits. Those are the pages to get right first.

Make everything easy to tap and read

The most common mobile problems are simple and fixable:

• Tap targets. Buttons and links need to be large enough for a thumb, with space between them. Two small links sitting side by side almost guarantee mis-taps.
• Text size. Body text should be comfortable to read without zooming. If you find yourself pinching to read a paragraph, so are your members.
• Width. Nothing should force sideways scrolling. Wide tables, large images and embedded content are the usual culprits.
• Pop-ups. A pop-up that covers the whole screen and has a tiny close button is far more annoying on a phone than on a desktop. Use them sparingly, and not at all for logged-in members.

Most modern themes handle the basics automatically, using what is called responsive design, where the layout adapts to the size of the screen. But content you add yourself, such as tables pasted into a page or images uploaded at huge sizes, can still break the layout. Check your real pages, not just the theme's demo.

Simplify menus, home screens and logins

On a phone, your main menu usually collapses behind a single icon. That is fine, as long as the items inside it are short, clearly labeled and not buried several levels deep. If you have already trimmed your menu using the approach in navigation that helps members find what they need, you will find this much easier.

Think about the member home page too. On a phone, only the first screen or so is visible without scrolling, so put the most useful thing there: the next class, the latest post or where the member left off. A welcome banner that fills the screen pushes all of that out of sight.

Login deserves special attention. Make sure the login form works with the phone's password manager and autofill, that the password field has a show-password option, and that the email field brings up the email keyboard. Each of these saves a moment of irritation every time someone signs in.

Handle video, audio and downloads with care

Lessons are often the heart of a membership, and phones are where many of them get watched. Check that videos:

• Fit the width of the screen and can go full screen
• Keep playing reliably when the phone is rotated
• Have captions available, which also helps members watching without sound
• Start from a clear play button, not one hidden among other controls

Downloads are trickier. A PDF designed for printing on letter-sized paper can be almost unreadable on a phone. Where a resource is mostly read on screen, consider putting the content on a web page and offering the PDF as an optional printable copy. For the yoga studio, a pose sequence works far better as a page with one pose per section than as a dense two-page handout.

Remember that search engines look at the phone version

There is also a search reason to take mobile seriously. Google mainly uses the mobile version of a page when deciding how to index and rank it, so public pages that are cramped, slow or missing content on phones can struggle in search. Make sure your public articles, sales page and free resources contain the same content on mobile as on desktop, and that nothing important is hidden on smaller screens. Speed matters too, and oversized images are a frequent cause of slow mobile pages.

Test on real phones, regularly

Resizing your desktop browser window gives you a rough idea, but nothing replaces using the site on actual phones. Borrow a couple of devices from friends or family, ideally an older, smaller phone as well as a newer one, and run through a short checklist. Here is an example for the yoga studio:

1. Tap the link in the latest member email and log in. Did autofill work?
2. Find tonight's live class from the member home page in three taps or fewer.
3. Play a recorded class, rotate the phone, then go full screen.
4. Open the beginner pose guide. Can you read it without zooming?
5. Post a reply in the forum and attach a photo.
6. Go to your account page and find where to update your card.
7. Visit the public sales page and join from start to finish.

Note every moment where you hesitated, zoomed or mis-tapped. Those moments are your to-do list.

Your first mobile improvements

• Check your analytics for the ten pages that get the most phone visits.
• Run the test checklist above on at least two real phones.
• Fix anything that causes sideways scrolling, starting with tables and oversized images.
• Enlarge small buttons and space out links that sit close together.
• Turn your most-used printable PDF into a readable web page.
• Repeat the phone test every time you change your theme or add a new type of content.

Members will rarely thank you for a site that works smoothly on their phone. They will simply use it more, which is exactly the point.