It’s pretty clear that the online tide is going mobile and not turning back as more and more people visit websites, open emails, and use social media from their mobile phones or tablets.

Mobile is now driving over 56% of all web traffic, and 66% of all email is opened on a phone or tablet. That means well over half of all page views are seen from a device much smaller than a desktop. If those numbers aren’t a wake-up call to make your web site mobile-friendly, what will be?

Designs not tailor-made to mobile are often hard to read and navigate on a small screen. This leads to less engagement, fewer views and clicks, and less time spent on your site.

 

Rather than resist the mobile drift, consider this as one of those inevitable changes that opens up an exciting new chapter of your online life. Before long, you and Mobile might even be skipping through meadows together, sharing inside jokes, and laughing about your past reluctance to implement these brilliant, rewarding changes.

But how exactly do you buddy up to Mobile? Well, you’re going to have to begin with a sure-fire come-on called Responsive Design.

 

Responsive Design

Responsive Design is a web design technique that makes your website design adapt to the screen size of the device on which it’s being viewed. So the same website can look very different on a big desktop computer than it does on an iPhone. Or a tablet.

Here’s an example of a responsive design site we developed for NMAEYC. Note how the design displays differently on each screen size.

NMAEYC Responsive Design Site

While there are other strategies for going mobile such as apps, plug-ins and separate mobile websites, here is why we staunchly favor responsive design:

1. Cost

Responsive design creates a single system that works on a multitude of mobile platforms, whereas individual apps must be painstakingly customized for each.

For example: You would need to build at least three apps for the most popular mobile platforms right now (iOS, Android and Windows Phone). This is a time-intensive and costly process that will continue to rack up more expense as you attempt to stay au courant with the ever-changing mobile technology.

2. Updates

As new mobile platforms become popular, new apps must follow. As existing mobile platforms are upgraded, the apps must also be upgraded. It’s a veritable cluster cuss. With responsive design there is only one system to upgrade and much less frequently.

3.  Search Engine Optimization

With a responsive design approach, each page has only one destination (URL). Once you get into mobile apps, however, visits and incoming links are spread among apps and not concentrated within the website itself. If mobile traffic is diverted to separate apps, the website is deemed less relevant by the search engines and search engine rankings could suffer.

So that’s why Upleaf is firmly in the camp of responsive design.

If however you have 50% of your website traffic coming from mobile, and you need a quick solution while you gather funds for a responsive redesign, there are some less-than-optimal (but still better than  mobile-less) solutions like a mobile plug-in.

What Does a Mobile Redesign Involve?

Self-Assessment

First let’s gauge just how far behind your organization is falling. Look at your Google Analytics. If your organization receives 15% of your traffic from mobile, you should make the transition to mobile within the next year. If 25% or more of your visits come from mobile, make your mobile conversion top priority and switch ASAP. ­­­­­­

How? Mobile compatibility is not just about remodeling your website, you need to rethink content, structure, and design. Check out this great article on how the human eye reads websites for some interesting insights on understanding user habits.

Content Reanalysis

First and foremost you need to reconstruct your content to work on a smaller screen size. This means:

  1. Keep it Simple. Trim ALL of the fat and boil your organization down to one or two core messages and a call to action.
  2. Map your Information. Rethink your content architecture—what information should appear first? How should it all stack and flow together? This is even more important for the mobile experience.
  3. Visual content. If you don’t have a lot of photos or videos on your site, add them. Users remember 80% of what they see versus just 20% of what they read. Great visuals are a powerful, effective way to tell your story quickly and make a lasting impression.

Once you have your core content, message and calls to action identified and mapped, you can work closely with your web developer to build out a responsive design website.

Clean Visual Experience

Now let’s take a look at how we communicate with mobile. There’s a different cadence and form to our speech patterns online, moving from large screens to mobile. Here’s the basic grammar you’ll need to speak the new lingua franca.

  1. Entice. Your webs­­­ite, email and social media content should capture the user’s attention immediately— intriguing headlines, timely and compelling content, colorful images and video are essential.
  2. Concise. Mobile users have much less patience to wade through thick text. Get to the point.
  3. Buttons. Include clear calls to action using big buttons to encourage further engagement. Remember you have just a few seconds to grab someone’s attention as they scroll across your content on their phone. Make it easy for users to grasp your message and click.
  4. Minimalism. We’re designing at a much smaller canvas size for mobile. This means a clean and uncluttered screen.
  5. White Space. Less is more with mobile. Don’t overdo the cutesy design stuff. Keep it simple and use white space to demarcate different ideas.

Think Mobile for Email Too

The number of email users is estimated to grow 16% in 2017 so don’t neglect the above guidelines when it comes to your email marketing as well.

Keep emails short, sweet and interesting with a clear call to action.

Messages should be single column, succinct, and visually appealing. We recommend no more than four lines of text for each snippet. Again, your blurbs should link back to fuller articles on your website where you can be more verbose.

Bottom Line

Clarity. Fluidity. Simplicity. Enticement. Make these your watchwords in chumming up to Mobile. Once you have the great icebreaker of responsive design in place, the two of you are destined to become the best of friends.