BLOG

Mobile-First Web Design: Why You Should Start Small

Posted by Mary Ann Hegvold on August 30, 2016

mobile-first-web-design2.jpg

Mobile websites have come a long way over the past few years! Remember when we used to have to create a separate, less robust version of our main website with separate code? It was a bit of a Google Analytics nightmare to track what was viewed most and the mobile version didn't always include the information you really needed. Today, it's all in one set of code with the standardization of responsive design. And that's great! But what is the experience really like? Did the web designers layout a plan that had the mobile user in mind? Did the web developers test everything in a touch format vs using a mouse?

In May of 2015 Google announced that searches via a mobile device outpaced desktop. And we're seeing that today with use of the websites we manage. If the mobile users don't outpace the desktop, they're typically pretty close. 

This means that we have to approach web design and development differently so we can offer an excellent experience to everyone and not leave mobile to an afterthought. This process is called mobile-first web design. We start with deciding what the website will look like in it's smallest version and from there we can add and enhance all the way up to the way it looks on a wide screen monitor.

Here are three things we're sure to pay attention to while working on a client's website. If you don't have these mobile-friendly website features already it might be the next thing you consider for your website.

1) Menus must be usable on mobile

IMG_8230.pngProbably the most significant thing to consider is the menu. If that doesn't work right in a touch screen format, you're not going to have people stick around very long! Consider what to do if you allow for a submenu to appear on "hover over" on the desktop. That now has to be become a "touch" for mobile. 

And make sure the font and spacing is large enough that when touch what you want that you're not also touching a few things at once.

And to make the mobile view as simple as possible we combine any smaller, top level nav that is sometimes present with the main nav so that all the options are in one place. In this example, the patient portal is part of the full menu on mobile versus a button at the top of the screen on the desktop version.

2) Don't forget your calls to action

IMG_8231.pngTry to keep your phone number and any other calls to action (request a quote, request an appointment, etc) very close to the top. But as people scroll you don't want to make the visitor to scroll back up to get your information. A good option is to keep your call to action present at all times at the bottom of the screen once they've scrolled past your initial view as seen here.

If your call to action is for a free download, such as an ebook, be sure you have it set up where they can receive that content via email and not only on their phones. If their only option is to save the PDF to their phone, it can get a little complicated.

If you allow them to view the content right away, after completing a lead collection form (right?), then be sure you have it set up to also email them so that they can print it out or read it on a larger screen later.  

3) Make sure the phone number is touchable

Mobile-first-web-desgin.pngHave you ever been looking for a phone number while using your phone's browser, only to find it and then not be able to touch the number to make the call? Frustrating, especially for Android users whose phones don't try to make phone numbers touchable to place the call. You either have to write it down or you have to ask your friend, child or colleague to help you remember the digits while you quickly flip to your keypad and type them in before something else blocks them out of your memory. It's such a simple thing to do, but it gets overlooked. 

If you don't get the call box popup on your mobile view, I'd say start there with things to fix today! You don't want that to be the reason someone gives up before getting a hold of you!

And of course there's not just the consideration of what makes a good experience for people, you also need to remember that Google requires you to have a mobile-friendly website to be eligible to show up in mobile search results. Given that there are more mobile than desktop searches, it's something you don't want to be left out of! If your site doesn't automatically resize itself as the examples show in this article do, you'll want to get that addressed right away. A separate mobile site doesn't qualify by Google's requirements either. For more information read our blog: How to Be Sure You Have a Mobile-Friendly Website. If after you have a look at this you decide it's time to reconsider your website, we encourage you to take the mobile-first web design approach.

And if you'd like to have a free website and marketing assessment to be sure your website meets mobile requirements or if you'd like to talk about how to create a better experience for your visitors, please let us know. 

New Call-to-action

Topics: Web Development, Website Design