the rise of mobile for nonprofit communication & fundraising
DESCRIPTION
From Blackbaud's Higher Ed Forum in Boston, Tom Thayer's presentation cites stats & trends about the growth of mobile devices in our daily lives.TRANSCRIPT
Communicating Effectively Across Devices With Responsive Website Design presented by Tom Thayer
4/21/14 2
THE RISE OF MOBILE IN HIGHER ED
Tom Thayer Interactive Services Principal
Experience With Non-Profits: 10+ years Experience in Higher Ed: 2+ years
Areas of Expertise: Web Design, Web Development, Content Strategy, Project Management, Content Management Systems,
Digital Asset Management, Digital Strategy etc.
4/21/14 3
WHO IS BLACKBAUD INTERACTIVE?
• Data Geeks • Designers • Digital Strategists • Fundraising Pros • Information Architects • Content Experts • P2P Specialists • Researchers • Storytellers • Marketing Pros • Web Gurus
4/21/14 4
OUR COMBINED EXPERIENCE
4/21/14 5
WHAT’S UP OUR SLEEVES?
4/21/14 6
WHAT’S UP OUR SLEEVES?
4/21/14 7
HOW OUR TEAM WORKS
DISCOVERY RESEARCH
CONTENT STRATEGY
ARCHITECTURE
DESIGN
4/21/14 8
TODAY’S DISCUSSION
What is Responsive Web Design? Why Everyone Should Be Using RWD
How and Why We Should Go Beyond RWD Trends
4/21/14 9
TODAY’S DISCUSSION
What is Responsive Web Design? Why Everyone Should Be Using RWD
How and Why We Should Go Beyond RWD Trends
4/21/14 10
WHAT IS RESPONSIVE WEB DESIGN?
CONTENT <!-- HTML -->
STYLE /* CSS */
4/21/14 11
WHAT IS RESPONSIVE WEB DESIGN?
CONSTYLE WEBSITES!
4/21/14 12
css
WHAT IS RESPONSIVE WEB DESIGN?
css SINGLE SOURCE
CONTENT
4/21/14 13
WHAT IS RESPONSIVE WEB DESIGN?
BREAKPOINTS
980px+ 768–979px 320–767px
4/21/14 14
WHAT IS RESPONSIVE WEB DESIGN?
Ethan Marcotte
4/21/14 15
WHAT IS RESPONSIVE WEB DESIGN?
BREAKPOINTS
980px+ 768–979px 320–767px
%
4/21/14 16
TODAY’S DISCUSSION
What is Responsive Web Design? Why Everyone Should Be Using RWD
How and Why We Should Go Beyond RWD Trends
4/21/14 17
WHY GO RESPONSIVE?
Everyone else is doing it…
4/21/14 18
WHY GO RESPONSIVE?
Source: StatCounter
4/21/14 19
WHY GO RESPONSIVE?
Source: StatCounter
61%
9.4%
2012
15.2%
2013
4/21/14 20
WHY GO RESPONSIVE?
Source: Google
Because Google says so…
4/21/14 21
WHY GO RESPONSIVE?
Our users deserve better!
4/21/14 22
USER CENTERED DESIGN
WANTS NEEDS
LIMITATIONS
Hi, I’m the user.!
4/21/14 23
WHAT THE USER WANTS
1. Clear Messaging 2. Consistency 3. Connection 4. Context 5. Guidance
I want stuff.!
( sort of )*
4/21/14 24
WHAT THE USER NEEDS
1. Interactions 2. Transactions 3. Informations
I need, therefore I use.!
4/21/14 25
HOW THE USER IS LIMITED
1. Distractions 2. Environment 3. Input Methods 4. Disabilities 5. Time / Patience 6. Knowledge 7. Ability 8. Etc…
Help me, help you.!
4/21/14 26
USER CENTERED DESIGN
WANTS NEEDS
LIMITATIONS
(quality experience) (few and focused)
(varied, complicated, somewhat predictable)
4/21/14 27
USER CENTERED DESIGN
WANTS NEEDS LIMITATIONS
4/21/14 28
HOW RWD GIVES THE USER WHAT THEY WANT
A Quality Experience • Readable Content • Reformatted Branding • Mobile Navigation • Mobile Specific Content
4/21/14 29
HOW RWD GIVES THE USER WHAT THEY NEED
• Interactions • Transactions • Informations
Needs: Few and Focused
4/21/14 30
HOW RWD HANDLES USER LIMITATIONS
Varied Limitations • Remove Distractions • One-Handed Operations • Limit Form Fields • Flat Designs • Simple Conversion Paths • Valid Code • Simple Operations
4/21/14 31
HOW RWD HANDLES USER LIMITATIONS
4/21/14 32
TODAY’S DISCUSSION
What is Responsive Web Design? Why Everyone Should Be Using RWD
How and Why We Should Go Beyond RWD Trends
4/21/14 33
USER CENTERED DESIGN
WANTS NEEDS
LIMITATIONS
(quality experience) (few and focused)
(varied, complicated, somewhat predictable) WE FIGHT FOR THE USER
4/21/14 34
TODAY’S DISCUSSION
What is Responsive Web Design? Why Everyone Should Be Using RWD
How and Why We Should Go Beyond RWD Trends
4/21/14 35
BEYOND RESPONSIVE WEB DESIGN
4/21/14 36
BEYOND RESPONSIVE WEB DESIGN
4/21/14 37
BEYOND RESPONSIVE WEB DESIGN
Source: Luke Wroblewski
4/21/14 38
BEYOND RESPONSIVE WEB DESIGN
Source: uxmaDers.com
4/21/14 39
BEYOND RESPONSIVE WEB DESIGN
Source: Luke Wroblewski
4/21/14 40
BEYOND RESPONSIVE WEB DESIGN
Source: uxmaDers.com
4/21/14 41
BEYOND RESPONSIVE WEB DESIGN
Source: Luke Wroblewski
4/21/14 42
BEYOND RESPONSIVE WEB DESIGN
BLACKBAUD’S MOBILE TAPS INITIATIVE
16 MAXIMUM TAPS
49% OF EMAIL IS" READ ON MOBILE