Living in a Mobile Design World: How to Design to Fit

person looking at design on a mobile phone

When Google made the switch to mobile-first indexing for new sites in July, it was following through on a policy set in motion back in 2015. Then it was a shift to a mobile-friendly ranking strategy that many called “mobilegeddon.” The approach gave a ranking boost to mobile-friendly pages and set the fear of Google into webmasters far and wide. Would they lose ranking? Would poor design crush good SEO? Then, as now, Google’s overall goal was to acknowledge how more and more people search: on mobile devices. That’s when mobile design turned critical.

With mobile in mind, designers had to pivot to conform. They still do. If you design for digital, think mobile first in all you do.

Use Responsive Design

Whether you choose adaptive or responsive design, the point is the same: make sure that what you create can seamlessly shift from desktop to laptop to tablet to any size screen on any mobile device. For most designers, responsive design trumps adaptive. It is technically easier to implement and less labor-intensive. And it displays the copy and design elements you intend for the user in the way you want them to appear.

Pay Attention to Navigation

It’s a small screen so use concise navigation that prioritizes functionality. Use analytics to determine how users actually interact with your site, not the way you think they should. Place the most popular items at the top, right. Minimize the number of tabs and clearly label everything. And make sure links are visually prominent and distinctly actionable.

Choose Placement Wisely

From images to CTAs to that magical form you want users to fill, consider where each item should appear. Heatmapping can help you track the data you need to make optimizations, but from the beginning, think mobile—and vertical. Because as easy as it may seem, most users—especially millennials—won’t turn their phones 90 degrees to view your designs, no matter how awesome they may appear horizontally.

Think Concisely

Whether it’s copy or images, opt for uncomplicated. Images with too many details will get lost in the small space of a mobile phone. Taglines need to be clear and concise. Even branding and logos need to look good on a small screen.

Create Short Forms

Have you ever started to fill out a website form and then got stymied by dropdowns to the point where you dropped off? Long, cumbersome forms are always a bad idea. But especially for mobile, you need to think of the user experience. Less is more.

Optimize Images

One way to take a negative hit to rankings is to have a slow load speed. And for impatient, on-the-go mobile users, this is truer than ever. That’s why you need to optimize images in your design. Choose the right combination of file format and compression to produce quality images that load quickly.

Beware of the Buttons

Learn more. Apply Now. Short and to-the-point copy is better for mobile buttons, but it’s not just the number of words; it’s also the size of the button that matters. If you make it too small, clumsy thumbs are going to miss the mark. But the size depends on the phone. For example, while 30 x 30 pixels is a good guideline, iPhone guidelines recommend 44 x 44 pixels.

Test

Even the best laid plans can go wrong when they go live. That’s why testing is a necessity. Test on your dev site and then use actual mobile devices to make sure everything looks and acts the way you want. Once it’s live, test for site speed and SEO elements. And continually review it to optimize as things change—because they always do.

If you’re ready to go mobile first, the designers at ESM Digital can help you get there. Give us a call and we’ll take a look at your current site. We can tweak, fix or overhaul. What do you need?

~Linda Emma