7 Elements of Exceptional Mobile-Friendly Website Design Jessica Lunk There’s an old saying that my family has passed down from generation to generation: “You can always tell a website’s age by the look of its mobile site.” It’s a trite old-world European saying, but it’s true. If you can scroll an awkward 20 pixels to the right, the site probably hasn’t been made within the last three years. (Or it has, but by someone who learned how to code in the mid-2000s.) There are a few ways you can design a mobile site, and your method of choice should boil down to your online goals. With mobile accounting for anywhere from 30 to 50 percent of all web traffic, and most Google searches done there as well, it’s not a decision you should make lightly. You can either make a responsive website—one that works on either desktop, mobile or tablet screens perfectly—or create a different site that registers when your visitors find you on their mobile devices. Responsive sites are more in vogue these days because they’re more affordable, easier to manage and capitalize on your content in a more contained way. Mobile-specific sites tend to be better for companies with an audience who expect something, who simply wants a stripped-down version of the main site. If usability and speed are your top concerns, it’s something to consider. Regardless of which approach you take, there are a few key design elements to take into consideration. These are irrespective of how your site is built and what its function is—these are universal design elements to ensure you have the most mobile-friendly website design in 2017. Focus on Clear CTAs The biggest problems with mobile design tend to stem from clutter. There’s a reason most mobile sites tend to simply be black text on a white background—it’s clean, easy to read and immediately understandable. If your website is dependent on calls to action (CTAs), make them clear, legible and visible. Use an attractive, on-brand color for buttons, and use a font size that people could read while riding the bus—which is probably where they’ll be when they find your website. Keep in mind finger sizes, too. Nothing is more obnoxious in mobile design than trying to click a link that’s too small to actually click. Think About How We Hold Our Phones By and large, people are right handed. (Sorry, lefties.) And mostly, we hold our phones in one hand. That means anything in the top-left hand corner is almost certainly going to be out of reach for people, unless they use both hands or are diehard fans of the tiny iPhone 4. Most navigation menus are in the top left corner, largely because they’re only needed occasionally when the user needs to navigate away to another section. Search buttons are more commonly used, which is why they (generally) appear in the top right corner. If you have picture links on the same line as text, those pictures should appear on the right hand side, closest to the thumb. Keep these ideas in mind when deciding where to place certain objects, particularly CTAs and other elements you want to see enjoy a high click rate. Navigation is Key There are a few different types of mobile navigational bars. The three stacked bars—the hamburger, as it’s called—is the most popular, even making its way onto desktop sites to ensure a clean responsive design that’s brand-consistent across all platforms. You might have a header menu that disappears into a hamburger at a certain screen size, or some combination of toggles (a hamburger, or a three-dot icon) that pull up different menus. The trouble with overloading this is that users may not know how to find the content they’re looking for. On widescreen desktops and laptops, sidebars were once an easy fix to this, but with the verticalization of screens, sidebars are often disregarded entirely, streamlining the design even more. A good rule of thumb is to use sidebars as ancillary benefits if you use them at all. Don’t depend on them for conveying important information. Typography Matters Take careful time when deciding on a font that looks good when small. Generally, font sizes will be between 16 and 20 pixels, with ample room to breathe between lines and margins that don’t make the font feel cramped. Serifs are uncommon for body text in the digital sphere because of how much harder they are to read; this is particularly true in mobile design. Make Brand Continuity a Priority Above all, don’t just design something you think looks cool—design something that looks like your brand. Logos, colors and fonts are all elements that shouldn’t change too drastically just because you’re on a different screen. Responsive design makes this easy since it’s literally the same website appearing on a different screen. The big takeaway should be to be wary of drastically changing your mobile design just to fit in with conventional mobile design—think of it as simply another element of your overall brand strategy. Build Your Marketing Stack Build Your Stack