As of this writing it’s 2018. That means this is the year we’ve got Monkey Clones, Telsa launched a car into space, and Google has decided it’s given us all enough time to get our act together and make our sites Mobile Friendly.
Back in 2015, Google had said this hour was coming. Sites that do not meet their new Mobile Friendly standards will begin to see significant penalties in their analytics and page rankings.
This was all in an effort to give an incentive to site-owners to step up and join the future. By not being Mobile Friendly you are already penalizing your business by driving customers away from your site in frustration.
The world is a big place and sadly a good ⅔ of all sites are still not Mobile Friendly. Google aims to serve the end-user first by making sure that when they search it’s going to give them a link that doesn’t waste their time.
What is Mobile Friendly?
A Mobile Friendly site is one that accepts the limitations it has by virtue of being mobile. You have just seconds to capture your viewers’ attention. You have to be clear in who you are, why we should care, and how you help to solve a problem in our lives. It is the unfortunate side effect of our fast paced world that many sites have had to become Carnival Barkers, yelling for attention with giant Playskool buttons and screaming videos. It doesn’t HAVE to be this way; Luckily we’re here to share some of our mojo with you.
You’ve heard us preach before, “Content is Key”. Many make the mistake of saying it is “King”, but the fact is your Content is the key that turns a Viewer into a Doer. Well thought-out content considers its substance in relation to its audience, its theme in relation to the message the author wants to present, as well as its placement and how it will be viewed. Your website is your brand, and it has to represent your endeavors with aplomb. Mobile Friendly means you’ve got to fit your awesome into a much smaller package with a tighter and more confident song-and-dance.
If we’re being honest, we prefer developing for the Desktop experience and even make concessions to Tablets; the extra real estate means you have more space to make a grandiose presentation. Time cares not for the whims of the craftsman, and the wise man judges the direction of the wind. Fact is, we knew this trend was coming. Some others have sought to get around this by making separate mobile sites, or redirects to mobile subdomains, but the fact of the matter is the time has run out and as Designers/Developers we need to be making all our sites Mobile First.
We said before, that good mobile sites accept their limitations. A good web des/dev will know how to make a nice looking Desktop website, but if they aren’t talking about taking a Mobile First approach with your project, then you might want to get a second opinion.
Sadly mobile isn’t “the future”; it’s “the present”, so we have to give it the attention it demands.
Site Navigation and Home Page
We’ve been saying that Mobile First demands a clear strategy, but that doesn’t mean Mobile Friendly has to be ugly. You don’t have to sacrifice quality, presentation, or craftsmanship. Think of Mobile Friendly as all the performance and efficiency of those curbside coffee huts like Dutch Bros. Small, Quick, Good.
Mobile First sites need to be a clear blue-print for how they are presented and intended to be interacted with. You have less real estate and time, so your calls to action need to be up front. Many Mobile First sites use their front page as an About page, 4-7 sections detailing who you are and why we should care, with Calls to Action all along the way.
In considering Navigation and Calls to Action, buttons need to be large enough for a device to register a viewer’s intent, rather than second guessing if they meant to click or which link was pressed. Did they want to swipe instead?
Style and Sizing
We live in interesting times. Desktop monitors are being replaced with TVs, and are getting larger. More people are viewing the web on their phones, and while phones are smaller than desktops, they also seem to only be getting bigger as few people seem to want to adopt wearables.
With mobile devices being handheld everything you do needs to be big. You need a font size that is large (we recommend 16-20px). Serifed fonts were invented because they allow they eye to read ahead faster, so we prefer them for Body Text, whereas big, bold, sans-serifed fonts are much better suited for Headers and Calls to Action. Most novels and magazines are also written with 1.5 spacing and Justified text. This makes the information into a block that is easier to digest and come back to.
Want to try designing a Mobile First website? Draw your content out on index cards. For long designs you can even tape them together like a Jacob’s ladder. You can then keep these cards together in bundles (rubber bands work well) to show how your design has evolved during the planning. Think hand-held and never be afraid to let your digital designs get physical.
Cross Platform Compatibility
Your business is your brand. Your brand is, in part: your style, colors, and presentation. So far we’ve mentioned the stratified divide between Desktop and Mobile, but the fact remains that even Mobile can be a complex design to divine as you face a wide array of mobile devices and sizes you’ll want your brand and message to stay consistent across.
To this we add that we are thankful that Mobile First normally implies a design that is Gridded and Fluid. By being laid out on a grid, we attempt to wrangle in the unknown and force the design to flow and wrap in ways that, while perhaps not identical across all devices, take charge of how that design adapts to fit the screens viewing your site.
While it’s important to make sure your Mobile Friendly site is Fluid and designed on a Grid, here are some other things you can do to help make the design cohesive across platforms:
- Pick Dark and Complementary Colors for your Brand/Campaign
- Wireframe Your Design Early
- Prototype Multiple Layouts and use Cases
- Write Your Content in Advance.
- Have Clearly Displayed and Worded Calls to Action
- Be Consistent
- Trim the Fat
Think About Speed
The final factor you should be thinking about is site Speed. This is a double edged sword. If you have a service you know your viewers need, and you know you excel at all the other Mobile Friendly considerations, you can cut some corners on speed. Mobile coverage is expanding, speeds are increasing, data limits are going up.
That doesn’t mean you should be irresponsible. If your content is long and boring, if your images are so large they take a minute per picture to load, if your servers are ancient and unresponsive to that first page-load request: you’ll drive customers away. Your website is an employee that works for you 24/7. You want them to be eloquent, good looking, friendly, and helpful.
That first impression of your site is everything. You have seconds to turn a maybe into a yes with whatever initiatives you’re planning next; site speed and responsiveness determine if viewers are going to become impatient and seek out your competition.
Mobile users are goal/task oriented. They’ve come to you for a solution to a problem and demand quick service.
It’s not Too Late
If you’ve read this and still feel overwhelmed, we can help. Here at Geeks Worldwide, we feel the most blessed when we can share in your passion for a moment. For most, managing and maintaining a site they don’t understand how to navigate or post content to is a hassel and distraction from the other work they’ve set out to do. You need a site that is both informative and represents your work with dignity. Feel free to Contact Us, so we might diagnose the key ways we can improve your site, workflow, and help you attain the fullness of your ambition.