One visitor out of five to the Environmental Defense Fund’s (EDF) website is accessing the site through a mobile device and one-quarter read emails and follow links to the site from their phones and tablets.
With that much mobile traffic, it’s no surprise that managers of the New York City-based nonprofit redesigned the website to be more accessible to smartphone and tablet users, according to Kira Marchenese, EDF’s senior director of digital platforms and strategy.
A report by digital analysis firm comScore in Reston, Va., from September 2012 showed that an estimated 120 million Americans own smartphones, just more than half of all mobile phone subscribers. According to Tom Sather, senior director of email research for Return Path in New York City, the number of people reading emails on mobile devices jumped 300 percent between October 2010 and October 2012 and outnumber those reading emails on computers.
A Return Path analysis showed mobile accounted for 37 percent of email opens, more than webmail like Gmail (30 percent) and desktop clients such as Outlook (33 percent).
The need to make it easy for donors and constituents to access your website away from their desktops or laptops will only get more urgent. Fundraisers will have to work especially hard to keep up with the new ways donors interact with their websites and emails.
With most smartphones and tablets having a touch screen, “There’s a shift in the design community toward a user interface that’s more gestural and less visual,” said Ryan Phillips, a designer and developer with SW Creatives in Silver Spring, Md., which caters exclusively to nonprofits. Gestural design, designing sites specifically to be pinched, poked and prodded on a touch screen, is beginning to gain traction in design communities, and even EDF had to scramble to catch up.
“When we were building (the new site), we didn’t have to worry about (gestural design) at all,” said Marchenese. “We haven’t taken the next step.” Marchenese mentioned perhaps adding functionality that allows mobile users to flip through a photo slideshow on the website, “but my guess is people aren’t expecting” heavily gestural mobile sites, she said. “They’ll be pleasantly surprised if things behave differently.”
An accessible level of design is making your organization’s site mobile-friendly, taking in the margins, trimming down the content, resizing images.
A more comprehensive mobile optimization method is responsive design, which changes the look and layout of a website based on, and responding to, the size of the user’s screen. Responsive design is complicated, but at its heart lies two core concepts: fluid grids and media queries. Fluid grids are proportions that measure in pixels how much space a given element of a web page or email, such as an image or a column of text, takes up as compared to the full page or email. The screen size might change, but elements on a fluid grid will resize according to their proportions.
Another element is media queries. The queries, basically if-then statements, give a maximum pixel size, called a breakpoint, and any screens that fall below that maximum get a certain view. For example, you could make a two-column email into one column if the screen width is less than 500 pixels. Common screen widths include: 1824 pixels (a large desktop or laptop); 1024 px (iPad in landscape mode); 768 px (iPad in portrait mode); 480 px (iPhone in landscape mode); and 320 px (iPhone in portrait mode).
Emails are much easier than websites to responsively design. Other than some desktop clients, pretty much every email application on a mobile device uses HTML.
World Wildlife Fund (WWF), with U.S. headquarters in Washington, D.C., has tried both approaches, said Diane Querey WWF’s website director. A website redesign in 2008 did not address mobile users, as there weren’t enough to show up in the site’s analytics. In 2010, Querey and her team noted that 1.5 percent of the website’s traffic was from mobile devices.
“We looked at the site on mobile devices, and it looked terrible,” she said. “It was a terrible user experience.”
Querey and her web team set to work on a separate, mobile-friendly version of the more popular sections of the website. She called it “an improvement” for mobile users, but it still wasn’t perfect. WWF had to update both sites every time a change was made, and only a portion of the web pages was mobile-friendly. The rate of mobile users jumped to 3 percent in January 2011, and one year later it had more than tripled, coming in at 10 percent in January 2012.
“The latest version was launched on August 27, 2012, and it’s a responsive site,” said Querey. “It adapts to the device the user is on.” Mobile traffic was at 18 percent through the first half of January 2013, and more smartphones and tablets are being released each month.
“I knew that with seeing such a wide variety of mobile devices, there’s no way to just have a desktop site and mobile version. The only way I saw was to do a design that was responsive so that no matter what device comes along, it should look good,” Querey said.
A complete, responsive redesign of the website might be the way to go for large nonprofits with big budgets and lots of web traffic, but it’s not right for every organization. Managers at nonprofits strapped for cash should think about at least optimizing their emails for mobile, as well as particular pages that often get linked in emails. “Even if you’re not going to necessarily do your entire website, at least do your donation page,” said Jared Seltzer, co-founder of Washington, D.C., firm Rad Campaign.