April 11, 2013

Responsive Mapping Techniques And Mobile Geolocation

By now, you may be tired of hearing about how important it is to think about “mobile”.

For one thing, it’s a huge topic. Do you need to think about mobile marketing? SMS fundraising? Responsive design vs. a dedicated mobile site?

The answer is, of course, “Yes.” But then you get into problems of time, scale, and cost, because really, mobile needs to be thought of holistically, not in some piecemeal, “Oh, the Red Cross raised a lot of money, so we should do a mobile fundraising campaign, too” kind of way.

Just for fun, let’s review the numbers, because they’re becoming more compelling all the time. Up to 23% of all web traffic flows through mobile devices already. According to Pew, of American adults:

  • 26% own an e-reader
  • 31% own a tablet computer
  • 87% have a cell phone
  • 45% have a smartphone

Barring a Revolution, those numbers aren’t going down anytime soon. Have you looked at your own mobile traffic recently? If that’s dropping quarter-over-quarter, you may be doing something wrong.

All of this was just a long-winded way of saying that content delivery in the future will happen less and less through a traditional web browser and you need to prepare now.

To capture the impulse to give, you need to deliver your message to your constituents where they are — and increasingly, where they are is anywhere.

As you think about how to integrate your mobile marketing tactics with your mobile fundraising campaigns, don’t forget about program delivery. The tiny supercomputers people carry in their pockets open up new ways for you to serve your mission, particularly when it comes to using maps.

Now, before you curse us for adding one more thing to suss out of the Gordian Knot that is mobile strategy, rest assured that it’s getting easier. There are plenty of great examples of nonprofits using mobile mapping technologies in ways that will inspire you to push our collective abilities even farther as you map out your overall mobile roadmap.

There are three ways you can combine mobile devices with mapping technologies:

  • to collect and aggregate data;
  • to display maps; and
  • to deliver program.

Collecting Data

Setting aside the inherent privacy concerns — which is tough, since one ThinkShout staffer, worried about content delivery, once checked his wife’s location to see if she had left the burrito shop with lunch — you can think of your mobile as a personal locator. What Apple did with “Find My iPhone”, you can do for your fieldwork.

Ushahidi brought this technology into the public consciousness when it mapped post-election fallout in Kenya in 2008 by soliciting reports from mobile phones, but the technology can be applied to any number of cases. To wit:

Displaying maps

Simply displaying a map embedded into your website seems like the simplest case of employing mobile mapping technology, right?

During a recent conversation with a pet hospital about their website, including its potential mobile functionality, the topic quickly turned to audience: Did they know the primary reason people visited their website from a mobile device? The suspicion was that directions (and a map) to the hospital because a pet needed urgent care was the primary driver of mobile traffic, so it would make sense (if proved true) to put that right up front on any mobile site they worked on.

The problem is, it can be tricky to embed mobile-friendly maps into a website. Brad Frost lists four reasons for this:

  • Cramped screen space: because the mobile browser takes up additional screen real estate.
  • Frame Inception: “An iframe exists within a page which exists within a browser which exists within the mobile operating system.”
  • Superior native experience: dedicated mapping apps are more robust than an embedded map.
  • Performance overhead: with bandwidth is still limited for mobiles, pages need to remain lightweight.

Maybe embedding maps isn’t easy after all. The solution? Static images.

Wait, what? Static images? Don’t worry, it’s cool: you can use Google’s Static Maps API to embed a map into your website for full-size browsers, but display a static image on mobile devices, which then links to your phone’s default mapping application. That’s some geeky goodness!

(Hopefully, the animal hospital would take things one step further, using location services to collect a mobile visitor’s current location, and then link that to the best driving directions to the hospital.)

Delivering Program

The next step up would be to develop responsive code that functions well in a mobile browser to deliver on program goals, as the Intertwine Alliance did here in Portland. The Intertwine Alliance was focused on increasing visitation to regional parks and trails in the Portland metro area. This goal had a twofold approach: to allow advanced planning through desktop displays and to give visitors at the park tools for locating trailheads from their mobile devices.

The responsive map interface, built with Leaflet, custom MapBox tiles, and Drupal, also incorporates HTML5 browser location detection to help visitors find parks near their current location.

MapBox is an excellent tool for map development. Focused on user experience, MapBox takes a design focus to mapping that is powered by OpenStreetMaps. This focus on the the front-end also translates into the tools provided to get users started. With well-documented training, the barrier to entry in publishing beautiful maps and getting started with their custom tile development tool, TileMill, has been dramatically lowered.

For responsive implementation, you should get familiar with Leaflet, an open source JavaScript library. For technologists unfamiliar with Leaflet, the site also hosts many tutorials for making the most of mobile-friendly, interactive maps.

Combining all of these tools, and in partnership with OpenPlans and Substance in developing and launching TheIntertwine.org, we were proud to launch a beautiful and useful tool to promote the civic engagement in Portland area trails and parks. We were also especially happy to hear that the site won a national award presented by American Trails!

Given all the free and Open Source tools available — for a more complete overview, be sure to check out the previous article “Terms and Trends in DIY and Open Source Online Maps” by Sean Larkin — we look forward to seeing what you come up with.

How are you using mapping technologies with mobile devices? Let us know by commenting below!

Like what you're reading?
Sign up to receive the latest articles and updates on nonprofit tech from NTEN and its community of experts.


Betsy Ensley
Betsy Ensley is the Director of Professional Services at ThinkShout, Inc. Passionate about process improvement, Betsy develops efficient systems to help focus on what we do best -- collaborating with clients to deliver streamlined solutions using open source technology.
Brett Meyer
Brett built his first website in 1996 and has been actively involved in Internet development ever since, with particular focus on project management, user experience, and analytics. A stint in the Peace Corps, working at a radio station in rural West Africa, brought him into the nonprofit world. Prior to ThinkShout, Brett spent 6 years at the Nonprofit Technology Network (NTEN), serving as its Communications Director; while there, he helped NTEN grow its community from a few thousand to more than 50,000 participants and found a calling in helping cause-driven organizations use technology to better meet their missions. Outside of work, Brett spends more time than he'd care to admit playing and watching soccer, but he does find time to cook several times a week and to escape on backpacking trips with his wife Melissa, where they work on their photography portfolios. He's also an excellent source for beer or restaurant recommendations in the Portland area.
Interest Categories: Mobile
Tags: mobile advocacy