3 Key Components to Smart Mobile Design

There’s this famous story about an architect who designed this library. It was perfect. But every year, the whole thing would sink a couple inches into the ground. Eventually, the building was condemned. He forgot to account for the weight of the books.”

—Kourtney Kang, How I Met Your Mother

You did it! You finished your website, optimized your content, and laid it out for the world to see. You take a moment to pause, feeling an enormous sense of relief as you peruse every page of your newly published website. Then, you log off for the night. All appears to be well as you continue forth to focus on your business and wait for those traffic stats to rise. Yet despite all your hours of preparation and time, the analytics show only a marginally higher number of visits than before you published all those updates. Confused, you whip out your own mobile device to take a look at the website … when suddenly it hits you.

You forgot the books.

Why Smart Mobile Design is Key to Marketing Success

As you focus on the work itself, it is absolutely crucial to understand not just who your audience is, but how they might eventually find you. The term “mobile-first” has been a common and unavoidable term in marketing and graphic design since 2015. This was when mobile SEO began to outnumber sites whose layouts were made for desktop computers. No matter how cool or alluringly streamlined your desktop designs turned out to be, none of it will make a lick of difference if 80% of your audience is unable to appreciate all the work you put into it.

If creating a mobile-friendly version of your website sounds unnecessary, we invite you to take a moment to think about something: When was the last time you used technology for networking, news, or online shopping? Was it using your smartphone? Do your family and friends spend more of their time on a desktop or on their mobile devices?

It’s incredible to think of just how many people use their phones these days. As a business owner and entrepreneur, it would be irresponsible to overlook this fact. This is why here at Two Trees, we want you to keep a few things in mind when you create your mobile-friendly website.

1. One-Handed Accessibility

Back in the old days, when flip phones and smaller screens were the coolest, most people could easily reach every part of their mobile screen with their thumb. One-handedly. This concept is now something of a fantasy as most smartphones today have evolved to have 6-inch screens on average. Making it almost impossible to use one of these devices without both hands. Because of this, the primary focus of mobile-first now includes a more sophisticated sensitivity to the edges and corners (also known as “stretch points”) of the screen. This also includes the lower corners (i.e. the “thumb zone”) on each device.

When your original desktop design resizes to fit the screen of your mobile device, you’ll notice that the whole thing gets squashed down to fit, which forces your viewer to navigate using both hands and squint while reading. This is unnecessarily counterintuitive, since a good mobile-first design should easily cater to one-handed users.

It all begins with one-handed accessibility. While it’s true that long-tail keywords will absolutely help your audience to find you, most people will just as soon be scared off if your website is difficult to navigate.

2. Speed and Simplicity 

No matter what your technological preferences typically are, we can all agree that slow connections suck. Almost nothing will make someone click “back” faster than having to wait more than a couple minutes for a page to load. The secret, as some say, begins with simplicity.

The more you simplify the content of your website, the less digital clutter there will be to slow down the loading process. You may be thinking: “Does this mean I need a minimalistic approach to my design?” Not necessarily.

A simplistic mobile design should still convey all the main points: company info, CTAs and more. But a mobile-first design should be like a concise yet functional echo of the desktop design. Use of images can also play a part in slower loading speeds, which is why so many designers use optimized JPEG and PNG files on mobile sites.

Functionality is key. And no one will care about how “cool” your site looks if it takes too long to load in the first place.

3. JavaScript, You Must Have 

Avoiding JavaScript on mobile sites is one of the biggest mistakes people can make. Over the last few years, mobile devices have evolved into perfect little pocket computers. They’re now powerful enough to manage more complex web programming languages flawlessly. If you’ve never implemented it before, JavaScript can do incredible things for your website, often allowing for a more dynamic and interactive user experience.

However, when you do choose to implement the use of JavaScript, it must be SEO-friendly. This will allow for server-side code that’s easiest for Google to index. If implemented correctly, this will allow SEO to work in your favor unlike ever before.

As mobile users quickly become the most dominant audience, the most important factor is simplicity. Keep it simple. The best mobile websites take only a second to load, while also offering the user immediate access to all relevant info. And now that you have counted the books, it’s only a matter of time before those stats begin to grow.