With each passing year, the smartphone becomes more and more popular. As a digital culture, we’ve all grown accustomed to our handheld devices wearing ALL the hats. We use our smartphones to wake us up, remind us of meetings, organize our day, take photographs, capture video, and provide us with entertainment. In the past two years, one cellular activity that has greatly increased among smartphone users is accessing the internet. What used to be slow to load, hard-to-read, and a little bit shady is becoming more accessible every day.

This rising trend in mobile internet activity only means one thing: making your website accessible has never been more important than it is now. Your readers, clientele, and followers will all appreciate you bridging the gap. However, if your website’s mobile capabilities aren’t up to snuff, your clientele could start to feel neglected. An awful mobile site is actually worse than not having one at all. Let’s look at how you can fix that and regain the loyalty of your users.

The Mobile Site Vs. The App

As a refresher, we recommend pulling up a hugely popular website like Gmail on your phone. Gmail, for example, immediately gives mobile users the option to either download its application or continue to its mobile site. So what’s the difference and which one should you focus on? Let’s take a look…

Mobile site: The responsive design that uses the same elements from the desktop version but in denser form. It’s basically a smartphone-sized version of a website, formatted to fit the proper screen.

Mobile app: The enclosed system that functions from the same online database but without any code of its desktop counterpart. It downloads its architecture locally right to your device.

Responsive design: The version that puts the device to work, adjusting the size and orientation of a site’s interface on the fly. This version is easiest for a user to access and navigate, no matter where they’re viewing your pages.

Think of it like this; a website on your desktop is a film you’re watching at the theater, a mobile site is that film in DVD form, and a mobile app is having that film performed live, only for you. The level of accessibility and ease increases with each level of closeness to its source. Now that you’re up to speed, let’s find what we can fix up and make better about your mobile presence.

How to Tell if Your Mobile Site is Busted

A mobile site is crafted to fit the smaller screens of smartphones and tablets. It can be easily accessed with any device’s browser. The best way to tell if your mobile site is unsound is to pull it up with a smartphone. If you don’t have a smartphone or tablet you can use Screenfly. With Screenfly, you simply type in the URL to find out how your site looks on any screen size (even the itty bitty ones).

Once you’ve smoked out your website on a mobile device, answer the following questions:

• Does the website take a moment or two to reload and position itself on the screen?
• Does it resemble a shrunken version of its desktop-sized self?
• Is it almost too tiny to read or decipher?
• Are any images taking up the entire screen?
• Is it difficult to zoom in and out or scroll?
• Is the option to choose a ‘readable’ version of the website missing?
• Are the buttons too tiny for an adult finger to gauge and click?

The 4 Principals of a Well-Designed Mobile Website

If you answered yes to any of the questions above, your website is BUSTED. But don’t throw all your hard work in the fire just yet. There is definitely a method to this mobile madness and we’re here to help.

Now that you’ve discovered the flaws in your website’s mobility, there are some principles you should heed for the future. Following these three rules will lead you to the cellular calm you’ve been looking to achieve:

1. Think Responsively

It’s twice the work to make a separate website for the desktop and for mobile. Really— you’d have to code two separate websites. The clever thing to do would be to make it responsive. That means it’s all the same elements, coming from the same source files, but the site reorients to fit your screen size. Images and text move around, videos squeeze down their dimensions, and a header menu might turn into a simple icon. Designing and coding it this way is easier for both you and visitors. They’ll get the same quality experience whether on desktop, phone, tablet, or TV.

2. Deliver Clickable Quarters

There is nothing quite as annoying as trying to browse a mobile site with discouragingly small links. Imagine a far-sighted person’s frustration here. As a legitimate rule, all clickable areas should measure at least 45×45 pixels, or roughly the area taken by your finger when you press on the screen. This doesn’t mean you have to strip the site of smaller icons, however. Just make those clickable areas bigger by increasing the padding (your website provider will know what to do). Remember that viewers come in all sizes and so do their fingers.

3. Cast Out the Clutter

If a user is lurking around your site for more than 30 seconds, one can presume they’re on a mission to find a piece of information or complete a specific action. Don’t make it hard on them.  The desktop version of your website may look gorgeous, but it’s unnecessary to try and preserve all of those design features in its mobile form. Be liberal in your choice of what to ditch. Mobile internet users won’t have the patience to wait for that beauty to load or to sift through superfluous features.

4. Perfect the Toggle Menu

One of the biggest mistakes a mobile site can make is neglecting its toggle menu. This menu is your northern star. It’s your Southern Cross, your beacon of Gondor! If you make a mess of its display, users will be lost. It’s tricky to get all of those elemental menu items in one place but it’s absolutely possible and we believe in you. So make a toggle menu. It can be of the three-line-icon-activated variety or one that’s hidden until the screen is swiped. All that matters is that you have a menu in place to help users navigate their way around your site with the ease of a child’s curio.

There you have it: the basics to fixing your mobile site. Additionally, you should know that once you’ve taken care of these bits, the curation never really ends. Like with any great website, keeping it alive is an ongoing process. There will always be more specific details to tackle, like margin width, responsive units for measurements, and line height. First, use the advice we’ve listed to get a better grip on your portable presence. The rest will undoubtedly fall into place.

Header image by Paul Sableman on flickr. Embedded image by Melissa Galle.