Mobile-optimizing your WordPress site—the easy way
You’ve survived Mobilegeddon (both the first wave and the second). You’ve schooled yourself in responsive web design and worked tirelessly to ensure your WordPress site looks great on desktop, laptop, smartphone, and whatever newfangled technology is around the corner.
Nice work. But simply resizing your images and adjusting breakpoints isn’t enough to check the “mobile-friendly” box anymore. You need to think about how your visitors use and interact with your site. To quote the straight-shooting Brad Frost, “[they] don’t give a shit if your site is responsive”—they just want something they can navigate with their thumbs.
We’ve been thinking about this stuff a lot lately, having just launched our first “mobile-first” Shopify theme, Handy, and we wanted to share our top “for users, by users” tips for enhancing your WordPress site’s mobile experience. After all, shopping isn’t the only thing people do on their phones these days—they’re reading blogs, looking at websites, and, yes, trying to find the perfect designer for their next big project.
If you want to be in the running, here are a few things you should consider:
Simplify your menus and navigation
The three-click rule states that website visitors should be able to find the information they’re looking for in three clicks or less. That means keeping things simple where your site navigation is concerned. An encyclopedic mega-navigation might look alright on your iMac, but pull it up on your phone and… oof! Cut down the number of items in your navigation, shorten visitors’ paths to your content, and they’ll be tapping like and swiping right every time.
Reform your forms
“Hooray! A form!” said no one ever. To up your chances of getting people to stick around and fill out your form, only include fields that are absolutely necessary. For example, if you’re trying to get them to sign up for your newsletter, all you really need is their email address. (When is the last time you used names, countries and birth dates in your email marketing?) Make sure to leave plenty of space around your form fields, and if you must have a multi-page form, use a progress bar.
Use large text and images
One of the cardinal sins of mobile web design is using text and images too small to decipher. Visitors shouldn’t have to pinch and zoom to see your content (and you know what? They won’t). To keep mobile visitors engaged, keep font sizes large and legible and images big and beautiful (but also optimized so they don’t obliterate your users’ data plans). And think long and hard before you publish that 3,000-word blog post—nobody’s reading your long-winded diatribe on their phone.
Put yourself in your users’ shoes
The thought of making your entire website mobile-friendly can sound like a real pain in the left brain (that’s the technical side) but it doesn’t have to be. Instead of poring over style sheets and stressing over breakpoints, take some time to look at your site from your mobile users’ point of view. Does it load quickly? Is it accessible with the touch of a finger? Is your text large, legible, and to-the-point?
If you can answer yes to the questions above, you’re off to a great start. Keep your mobile users at the front of every design decision you make, and you’ll stay ahead of the pack.