Responsive Design

Share this on:


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.

Depending on the audience, some nonprofit organizations are seeing as much as 40% of their website traffic coming from mobile phones, and 50% of their email recipients opening emails from a phone. This is particularly true of organizations who serve youth, minorities or lower-income populations.

So what if your website was built before 2012 and isn't mobile-friendly? What if your email designs are itty-bitty and hard to read on a phone? You're likely to see less engagement, fewer views and clicks, and less time spent on your site.

If you're feeling resistant to 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, monogramming "BFF" on your sweaters.

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 instead:

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 40 or 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?  


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 article on how the human eye reads websites for some interesting insights. 

Content Reanalysis

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

  1. Define your core mobile messaging. Begin by trimming ALL of the fat and boiling your organization down to one or two core messages and a call to action.
  2. Map your information. From there you 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, you'll want to add them. Mobile users engage much more with visuals than text, and it's a great way to tell your story quickly and make a lasting impression. A brilliant way to start off a mobile website experience is with a 30-second video explaining what you’re all about, front and center.

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. Keep it short. 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 to grasp and act. Easily clickable big buttons for those of us with sausage fingers who have trouble pushing small buttons are a must.
  4. Minimalist layout. We’re designing at a much smaller canvas size for mobile. This means a clean and uncluttered screen.
  5. More white space. Less design is more with mobile. Don't overdo the cutesy design stuff. Keep it simple and use white space to demarcate different ideas.
  6. Avoid serif fonts, they’re more difficult to read on small screens.

Think Mobile for Email Too

All of the above guidelines should also be applied to your email marketing.

A recent study by Moveable Ink's U.S. Consumer Device Preference Report found that 65% of emails are opened on a mobile device. So your emails must also be short, sweet and interesting with a clear call to action.

Your newsletter, too, should be single column, succinct, interesting 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 bosom pals.