Over the decade since the release of the smartphone, the web has undergone a massive upheaval. What began as an edge case, the mobile website, has come of age. Now mobile web traffic has surpassed desktop traffic. That represents a significant change in the way you must think about your presence online.
Because most websites are completely created and edited in a desktop environment, the tendency is to think of your website as existing in the desktop realm, with the mobile experience as a secondary, less-important option for smartphones. That thinking is wrong. Your mobile website is now your primary website.
That means it’s time to rethink the mobile experience of your site. Here’s where to start:
1. Don’t make a separate mobile website.
Mobile device sizes are ever increasing. Your user’s mobile experience could be anywhere from a four-inch legacy mobile phone to a tablet approaching the size of a desktop. Though you may be interested in creating an app for your church, the remedy for your website clearly isn’t creating more and more versions.
To address this situation, several companies have developed platforms that are mobile responsive. They automatically choose from a range of image, text and menu sizes based on the size of the device used to view the site. If the device is a large tablet, your site will appear in a layout much more like a traditional desktop site; whereas, if someone logs on from a smaller screen, it will present a version that looks more like a typical mobile website. And, if someone browses with one of those in-between sizes, they will get the best of both worlds.
All the leading web providers (like Wordpress) have options or plug-ins that will make your site mobile responsive, and your site is automatically mobile responsive if it is hosted on Squarespace. If you are stuck in the world of two distinct experiences, your first step needs to be investigating what it will take to bring your site into the mobile-responsive world.
2. Preview your site on mobile devices.
Entering into the mobile-first mindset is hard because you will most likely be editing and updating your site in a desktop environment. However, sometimes what you create in the desktop environment will be less than optimal when your users visit the page on their mobile device.
Avoid this misstep by keeping a couple devices handy while working on your website. At every step of the way, take out a smaller smartphone and a mid-sized tablet and preview the content there. Even with mobile-responsive sites, you can notice that the way a heading is spaced or how a title breaks might change so much between versions that you will want to edit the content so that it’s flattering on all devices.
3. Simplify menus.
Menus are major pain points for mobile users. If you have a menu system that was built for the desktop, then it is completely untenable in a mobile site. If you need to simplify, use these basic principles as a guide:
- Menus should not go more than two levels deep.
- Make each level contain less options that can be displayed on an average smartphone screen.
- Move any necessary deeper layers into the content area by making a page with links and descriptions.
This approach means that you will need to get creative in moving things around, combining pages or pruning pages that aren’t getting much traffic and cluttering up your navigation. Just know that if users feel like they can’t easily find what they need, they will leave your website.
4. Design for touch.
People are using their clumsy fingers to navigate between pages, so designing for the precision of a mouse is antiquated. This means you have to increase the size of your touch targets.
Make sure that fonts, buttons, images and white space between menu items are sized so your finger can touch one element at a time. It’s extremely frustrating when you unintentionally click the wrong link because everything is small.
Whenever possible, make sure your links contain more than one word so that the target is large enough for people to feel it is easy to tap.
Online forms are another pain point in the mobile experience. Though it is important to design these with large touch targets as well, the main pain point for online forms in mobile comes from the keyboard.
Few people enjoy typing on a phone keyboard. Wherever possible, simplify your form. If that is not possible, try to move to options that require less typing. Instead of a short answer field, give them several selectable options and add an “other” with comment section for those who want to be more specific. You can also check out these other ways to save time and money using online forms.
The future is clear: Fewer and fewer people will be viewing your site through desktop-class web browsers. The time is now to make sure you begin looking at your mobile site as your primary website to ensure that your users have the best experience possible.
When Jeremy and his wife are not playing with their four children, he oversees youth and college ministries and leads the evening worship service at Christ UMC in Mobile, Ala. Jeremy is an author of several books and resources that you can find at JeremyWords.com or follow him on Twitter!