Mobile First Design Considerations; As Told By a Non-Designer

Have you ever been frustrated by a website that was just too hard to use on your mobile device?

Can you recall what interactions you found the most frustrating?

Chances are you were viewing a site that was not designed for a sophisticated or fluid mobile experience. Even as little as 10 years ago, most websites were generally designed for desktop or laptop viewing only. Smart phones weren't widely adopted yet, and even for early smart phone adopters the experience was often too clunky to make mobile browsing worth the hassle. Now, it's hard to fathom popular public-facing websites where mobile traffic does not make up the bulk of site visits. This huge increase in mobile browsing has forced web creators to consider a mobile-first approach. Mobile-first design takes the most difficult experience to design and develop, and tackles it first, making sure the most crucial functions and features are considered in a users' experience of the site. Then, the experience is expanded on or added to as the screen size gets larger. There is an alternate design strategy called graceful degradation, however, I won't talk about it in this article because it focuses more on handling old websites' failures on mobile devices instead of creating stellar new designs that look great on mobile.

Less is more.

Sometimes large photos or graphic components on a site can get in the way of a user's ability to connect with your content. Large, flashy assets might jazz up your site on a monitor, but could make mobile interaction torturous. If your content is lengthy and verbose, it can easily be overwhelming for a user who's just looking for some good key points and a treetop view. A snippet in your site that may have had them sharing a link to your content on social media can easily be overlooked in a sea of excess content. Additionally, to help connect with customers and snag attention, make sure you have put thought into your content hierarchy and menu styles. It can be exhausting to dig through menus and screens to find phone numbers, hours, or pricing for business establishments. Not being able to easily find essential information can quickly deter users and have them searching find an easier to use site.

Make interaction easy.

If you are like me and have fingers that don't exactly touch the display with surgical precision, you probably understand why it would be a wise idea to enlarge your touch targets, buttons, hyperlinks and CTA's for mobile usability. When the user has to zoom in on a mobile display just to have confidence they're tapping the right area of the screen, it not only distracts them from your content but can prevent a positive experience with the site altogether. Try gathering user feedback as well as checking out current trends, best practices, and design principles to nail down the best sizing.

No substitute for the real thing!

Finally, make sure to use a physical device to test and experience your site. Emulators and services that render your site in multiple different browsers and devices can sometimes fall short of the real thing, making it imperative you do not blindly trust what you see while using these tools. Don't just assume your site will look great on a Galaxy s8- when in doubt, try it out! As someone who has developed for, tested, and used many different devices, I can say that there are discrepancies between an emulated experience and the real one. More than likely there will be challenges that will need addressed. Do your research and find out which browsers and devices are popular among your user base or check out analytics on your current site if you have them.

Mobile first means user friendly.

While these represent only a handful of suggestions to consider when you're creating a mobile-friendly site, they can help you achieve a big win if you come up with a strategy to appropriately address them. Take your personal experience with mobile friendly or un-friendly sites and remember your highlights and pain points. Repeat the things that worked great and don't let yourself fall into the same traps with the things that worked poorly. Ask your co-workers and users for feedback. What looks good on paper may not translate to a device the way that you thought it would so budget in time for revisions and tweaks. Remember what your goals are for the site and design around them. Your goals could include conversions, purchases, easily found information about your business, consumption of your brilliant content....whatever your goals are, there are strategies and tons of answers for how to achieve them, you just need to know which questions to ask!