going mobile: tips and tricks for mobile-friendly content
DESCRIPTION
Do you know how many of your supporters are accessing your website on mobile devices? Chances are that number is higher than you think—and on the rise. Having a mobile friendly website is a huge opportunity to connect with your supporters. So how do you do it? Join us for this webinar to learn the latest tips and tricks to create mobile friendly web content to engage your audience, even when they’re on the move.TRANSCRIPT
Finding the Sweet Spot: Ingredients for Stirring up Elevated Online Results
July 2014: Going Mobile
2
Housekeeping• Please use Q&A for questions, we have folks standing by
to monitor and respond.
• You can find the recording of today’s session at http://hello.blackbaud.com/sweetspot
3
Today’s Presenter
• Principal Information Architect
• 9 years with Blackbaud
• Specializes in User Experience for nonprofit websites
Lacey Kruger
4Blackbaud Confidential 4
5
TRUTH: Mobile is critical NOW
http://marketingland.com/report-65-of-marketing-emails-were-opened-on-mobile-devices-in-q4-2013-71387
6
Poll the audience
What did your org’s last email look like on a
mobile device?
7Blackbaud Confidential 7
Step #1: Start with your landing pages
9
Step #1: Start with your landing pagesStick the landing! Mobile-friendly emails aren’t so hot if they link to mobile-unfriendly content
Blackbaud Confidential 9
10
Step #1: Start with your landing pages
K-I-S-S• Use responsive layout for your donation form
and any other landing pages
http://getbootstrap.com/getting-started/#examples
Step #2: Follow with your emails
12
Step #2: Follow with your emails
K-I-S-S(again)
http://zurb.com/playground/responsive-email-templates
13
Step #2: Follow with your emails
https://www.emailonacid.com OR https://litmus.com/
TEST• Find a variety of devices around your office or use a
testing service like Email on Acid or Litmus
Step #3: Inventory your content
15
Step #3: Inventory your content
Create a spreadsheet with several columns:• Page ID
• Use a numbering system here for reference and to indicate hierarchy of each page
• Title • Title of each page
• URL • Link to each page for quick access
• Owner • Identify the person in your organization responsible for
creation and maintenance• Action
• Keep this content, delete it or consolidate it?
http://www.npengage.com/content-management/tackling-content-inventory/
16
Step #3: Inventory your content
http://www.npengage.com/content-management/tackling-content-inventory/
Step #4: Content sea change
18
Step #4: Content sea change
Future-proof your content• Inverted Pyramid approach• Make your point FIRST, then
follow with supporting details• “Write for the chunk”
http://www.slideshare.net/LaceyKruger/adaptive-content-for-futureproofed-world
19
Step #4: Content sea change
http://www.slideshare.net/LaceyKruger/adaptive-content-for-futureproofed-world
COPE(Create Once, Publish Everywhere)
20
Step #4: Content sea change
http://www.slideshare.net/LaceyKruger/adaptive-content-for-futureproofed-world
CMS(Content Management System)
21
Step #4: Content sea change
Step #5: Responsive Redesign
23
Step #5: Responsive Redesign
How OLD is your website?
24
Step #5: Responsive Redesign
Source: http://flickr.com/photos/69797234@N06/7203485148and http://www.bostongloble.com
2011
25
Step #5: Responsive RedesignGoing responsive with your redesign:• Saves $$• Saves TIME• Serves ALL of your constituents
http://www.npengage.com/online-fundraising/redesigning-responsive/
26
Step #5: Responsive RedesignCurrent Responsive Design Trends:• Embrace the scroll• Ditch the slideshow• LARGE images (sized accordingly for mobile)
• Donate buttonS (plural)
27
SummaryStep 1: Start with your landing pages
Step 2: Follow with your emails
Step 3: Inventory your content
Step 4: Content sea change
Step 5: Responsive Redesign
28Blackbaud Confidential 28
29Blackbaud Confidential 29
We hope to see you again soon!Join us for the next session in our series:
• Emergency Response Preparedness • Thursday August 21| 2:00PM ET• http://hello.blackbaud.com/sweetspot
thank you.