Put Mobile Design First

Make sure your website works best when it’s viewed on a smartphone.

Your website is mobile-friendly, but is it also mobile first?

Just being mobile-friendly is not enough anymore, says Robert Sanchez, CEO of Digital Empathy, a veterinary marketing and web-design firm.

“Now 70% to 80% of all web traffic is taking place on smartphones, so we need to think ‘mobile-first,’ ” says Sanchez. “That means that we should first build a website with the goal of making it look great on a mobile device, and then make sure it adapts and plays nice with larger screens.”

Top tips from Sanchez on designing a mobile-first website:

1. Add a sticky phone button. Include a “sticky button” (one that doesn’t disappear when the user scrolls) for your phone number. This should be a small phone icon that, when clicked, pulls up the dialer pre-populated with your phone number. Position it in the lower right-hand corner of the screen. “There should always be a phone button in view, so people can call you at any moment,” says Sanchez. “You’re creating the path of least possible resistance to becoming a client.”

2. Create navigation with mobile in mind. Design the menu that appears after clicking the three-line “hamburger menu,” the main entry port to navigating your site on a mobile device. Often, a mobile menu slides out and takes up a portion of the screen. Instead, Sanchez recommends making the menu take up the entire mobile screen, with large, centered text and an attractive, not-too-busy background that provides good contrast to the text, keeping it easily legible.

Besides that, make your site scroll-intensive rather than page-intensive, he recommends. “On a phone, it’s a lot easier to scroll up and down than it is to click around to different pages,” says Sanchez. “In particular, you want a longer homepage that gets into your story, so people feel they’re getting to know you.”

3. Focus on first impressions. Especially for mobile searches, it’s crucial to create a strong and memorable first impression with your homepage.

Incorporate these elements:

• A media-rich background. Overlay the introductory text on top of a high-quality photo or HTML5 video.
• A killer tagline. In four to eight words, encapsulate what your practice is all about. Sample taglines Sanchez has helped clients develop include: “Caring Hearts, Capable Hands” and “Every Pet Like Our Own.”
• Sections that echo the theme of the tagline. Divide the copy that follows into four to six clear sections that appear as the user scrolls down, each showcasing something unique and special about your practice. Each section should have header and a short paragraph of text, and each can also incorporate a photo or other graphic element.

“If you do these three things well,” says Sanchez, “you’re going to create a great mobile experience that really helps you stand out.”