Going Mobile: Tips and Tricks for Mobile-Friendly Content
-
Upload
lacey-kruger -
Category
Design
-
view
49 -
download
2
description
Transcript of Going Mobile: Tips and Tricks for Mobile-Friendly Content
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.