The Rise of Mobile for Nonprofit Communication & Fundraising
description
Transcript of The Rise of Mobile for Nonprofit Communication & Fundraising
![Page 1: The Rise of Mobile for Nonprofit Communication & Fundraising](https://reader034.fdocuments.in/reader034/viewer/2022051818/54b767764a79595f038b457d/html5/thumbnails/1.jpg)
Communicating Effectively Across Devices With Responsive Website Design presented by Tom Thayer
![Page 2: The Rise of Mobile for Nonprofit Communication & Fundraising](https://reader034.fdocuments.in/reader034/viewer/2022051818/54b767764a79595f038b457d/html5/thumbnails/2.jpg)
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.
![Page 3: The Rise of Mobile for Nonprofit Communication & Fundraising](https://reader034.fdocuments.in/reader034/viewer/2022051818/54b767764a79595f038b457d/html5/thumbnails/3.jpg)
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
![Page 4: The Rise of Mobile for Nonprofit Communication & Fundraising](https://reader034.fdocuments.in/reader034/viewer/2022051818/54b767764a79595f038b457d/html5/thumbnails/4.jpg)
4/21/14 4
OUR COMBINED EXPERIENCE
![Page 5: The Rise of Mobile for Nonprofit Communication & Fundraising](https://reader034.fdocuments.in/reader034/viewer/2022051818/54b767764a79595f038b457d/html5/thumbnails/5.jpg)
4/21/14 5
WHAT’S UP OUR SLEEVES?
![Page 6: The Rise of Mobile for Nonprofit Communication & Fundraising](https://reader034.fdocuments.in/reader034/viewer/2022051818/54b767764a79595f038b457d/html5/thumbnails/6.jpg)
4/21/14 6
WHAT’S UP OUR SLEEVES?
![Page 7: The Rise of Mobile for Nonprofit Communication & Fundraising](https://reader034.fdocuments.in/reader034/viewer/2022051818/54b767764a79595f038b457d/html5/thumbnails/7.jpg)
4/21/14 7
HOW OUR TEAM WORKS
DISCOVERY RESEARCH
CONTENT STRATEGY
ARCHITECTURE
DESIGN
![Page 8: The Rise of Mobile for Nonprofit Communication & Fundraising](https://reader034.fdocuments.in/reader034/viewer/2022051818/54b767764a79595f038b457d/html5/thumbnails/8.jpg)
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
![Page 9: The Rise of Mobile for Nonprofit Communication & Fundraising](https://reader034.fdocuments.in/reader034/viewer/2022051818/54b767764a79595f038b457d/html5/thumbnails/9.jpg)
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
![Page 10: The Rise of Mobile for Nonprofit Communication & Fundraising](https://reader034.fdocuments.in/reader034/viewer/2022051818/54b767764a79595f038b457d/html5/thumbnails/10.jpg)
4/21/14 10
WHAT IS RESPONSIVE WEB DESIGN?
CONTENT <!-- HTML -->
STYLE /* CSS */
![Page 11: The Rise of Mobile for Nonprofit Communication & Fundraising](https://reader034.fdocuments.in/reader034/viewer/2022051818/54b767764a79595f038b457d/html5/thumbnails/11.jpg)
4/21/14 11
WHAT IS RESPONSIVE WEB DESIGN?
CONSTYLE WEBSITES!
![Page 12: The Rise of Mobile for Nonprofit Communication & Fundraising](https://reader034.fdocuments.in/reader034/viewer/2022051818/54b767764a79595f038b457d/html5/thumbnails/12.jpg)
4/21/14 12
css
WHAT IS RESPONSIVE WEB DESIGN?
css SINGLE SOURCE
CONTENT
![Page 13: The Rise of Mobile for Nonprofit Communication & Fundraising](https://reader034.fdocuments.in/reader034/viewer/2022051818/54b767764a79595f038b457d/html5/thumbnails/13.jpg)
4/21/14 13
WHAT IS RESPONSIVE WEB DESIGN?
BREAKPOINTS
980px+ 768–979px 320–767px
![Page 14: The Rise of Mobile for Nonprofit Communication & Fundraising](https://reader034.fdocuments.in/reader034/viewer/2022051818/54b767764a79595f038b457d/html5/thumbnails/14.jpg)
4/21/14 14
WHAT IS RESPONSIVE WEB DESIGN?
Ethan Marcotte
![Page 15: The Rise of Mobile for Nonprofit Communication & Fundraising](https://reader034.fdocuments.in/reader034/viewer/2022051818/54b767764a79595f038b457d/html5/thumbnails/15.jpg)
4/21/14 15
WHAT IS RESPONSIVE WEB DESIGN?
BREAKPOINTS
980px+ 768–979px 320–767px
%
![Page 16: The Rise of Mobile for Nonprofit Communication & Fundraising](https://reader034.fdocuments.in/reader034/viewer/2022051818/54b767764a79595f038b457d/html5/thumbnails/16.jpg)
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
![Page 17: The Rise of Mobile for Nonprofit Communication & Fundraising](https://reader034.fdocuments.in/reader034/viewer/2022051818/54b767764a79595f038b457d/html5/thumbnails/17.jpg)
4/21/14 17
WHY GO RESPONSIVE?
Everyone else is doing it…
![Page 18: The Rise of Mobile for Nonprofit Communication & Fundraising](https://reader034.fdocuments.in/reader034/viewer/2022051818/54b767764a79595f038b457d/html5/thumbnails/18.jpg)
4/21/14 18
WHY GO RESPONSIVE?
Source: StatCounter
![Page 19: The Rise of Mobile for Nonprofit Communication & Fundraising](https://reader034.fdocuments.in/reader034/viewer/2022051818/54b767764a79595f038b457d/html5/thumbnails/19.jpg)
4/21/14 19
WHY GO RESPONSIVE?
Source: StatCounter
61%
9.4%
2012
15.2%
2013
![Page 20: The Rise of Mobile for Nonprofit Communication & Fundraising](https://reader034.fdocuments.in/reader034/viewer/2022051818/54b767764a79595f038b457d/html5/thumbnails/20.jpg)
4/21/14 20
WHY GO RESPONSIVE?
Source: Google
Because Google says so…
![Page 21: The Rise of Mobile for Nonprofit Communication & Fundraising](https://reader034.fdocuments.in/reader034/viewer/2022051818/54b767764a79595f038b457d/html5/thumbnails/21.jpg)
4/21/14 21
WHY GO RESPONSIVE?
Our users deserve better!
![Page 22: The Rise of Mobile for Nonprofit Communication & Fundraising](https://reader034.fdocuments.in/reader034/viewer/2022051818/54b767764a79595f038b457d/html5/thumbnails/22.jpg)
4/21/14 22
USER CENTERED DESIGN
WANTS NEEDS
LIMITATIONS
Hi, I’m the user.!
![Page 23: The Rise of Mobile for Nonprofit Communication & Fundraising](https://reader034.fdocuments.in/reader034/viewer/2022051818/54b767764a79595f038b457d/html5/thumbnails/23.jpg)
4/21/14 23
WHAT THE USER WANTS
1. Clear Messaging 2. Consistency 3. Connection 4. Context 5. Guidance
I want stuff.!
( sort of )*
![Page 24: The Rise of Mobile for Nonprofit Communication & Fundraising](https://reader034.fdocuments.in/reader034/viewer/2022051818/54b767764a79595f038b457d/html5/thumbnails/24.jpg)
4/21/14 24
WHAT THE USER NEEDS
1. Interactions 2. Transactions 3. Informations
I need, therefore I use.!
![Page 25: The Rise of Mobile for Nonprofit Communication & Fundraising](https://reader034.fdocuments.in/reader034/viewer/2022051818/54b767764a79595f038b457d/html5/thumbnails/25.jpg)
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.!
![Page 26: The Rise of Mobile for Nonprofit Communication & Fundraising](https://reader034.fdocuments.in/reader034/viewer/2022051818/54b767764a79595f038b457d/html5/thumbnails/26.jpg)
4/21/14 26
USER CENTERED DESIGN
WANTS NEEDS
LIMITATIONS
(quality experience) (few and focused)
(varied, complicated, somewhat predictable)
![Page 27: The Rise of Mobile for Nonprofit Communication & Fundraising](https://reader034.fdocuments.in/reader034/viewer/2022051818/54b767764a79595f038b457d/html5/thumbnails/27.jpg)
4/21/14 27
USER CENTERED DESIGN
WANTS NEEDS LIMITATIONS
![Page 28: The Rise of Mobile for Nonprofit Communication & Fundraising](https://reader034.fdocuments.in/reader034/viewer/2022051818/54b767764a79595f038b457d/html5/thumbnails/28.jpg)
4/21/14 28
HOW RWD GIVES THE USER WHAT THEY WANT
A Quality Experience • Readable Content • Reformatted Branding • Mobile Navigation • Mobile Specific Content
![Page 29: The Rise of Mobile for Nonprofit Communication & Fundraising](https://reader034.fdocuments.in/reader034/viewer/2022051818/54b767764a79595f038b457d/html5/thumbnails/29.jpg)
4/21/14 29
HOW RWD GIVES THE USER WHAT THEY NEED
• Interactions • Transactions • Informations
Needs: Few and Focused
![Page 30: The Rise of Mobile for Nonprofit Communication & Fundraising](https://reader034.fdocuments.in/reader034/viewer/2022051818/54b767764a79595f038b457d/html5/thumbnails/30.jpg)
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
![Page 31: The Rise of Mobile for Nonprofit Communication & Fundraising](https://reader034.fdocuments.in/reader034/viewer/2022051818/54b767764a79595f038b457d/html5/thumbnails/31.jpg)
4/21/14 31
HOW RWD HANDLES USER LIMITATIONS
![Page 32: The Rise of Mobile for Nonprofit Communication & Fundraising](https://reader034.fdocuments.in/reader034/viewer/2022051818/54b767764a79595f038b457d/html5/thumbnails/32.jpg)
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
![Page 33: The Rise of Mobile for Nonprofit Communication & Fundraising](https://reader034.fdocuments.in/reader034/viewer/2022051818/54b767764a79595f038b457d/html5/thumbnails/33.jpg)
4/21/14 33
USER CENTERED DESIGN
WANTS NEEDS
LIMITATIONS
(quality experience) (few and focused)
(varied, complicated, somewhat predictable) WE FIGHT FOR THE USER
![Page 34: The Rise of Mobile for Nonprofit Communication & Fundraising](https://reader034.fdocuments.in/reader034/viewer/2022051818/54b767764a79595f038b457d/html5/thumbnails/34.jpg)
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
![Page 35: The Rise of Mobile for Nonprofit Communication & Fundraising](https://reader034.fdocuments.in/reader034/viewer/2022051818/54b767764a79595f038b457d/html5/thumbnails/35.jpg)
4/21/14 35
BEYOND RESPONSIVE WEB DESIGN
![Page 36: The Rise of Mobile for Nonprofit Communication & Fundraising](https://reader034.fdocuments.in/reader034/viewer/2022051818/54b767764a79595f038b457d/html5/thumbnails/36.jpg)
4/21/14 36
BEYOND RESPONSIVE WEB DESIGN
![Page 37: The Rise of Mobile for Nonprofit Communication & Fundraising](https://reader034.fdocuments.in/reader034/viewer/2022051818/54b767764a79595f038b457d/html5/thumbnails/37.jpg)
4/21/14 37
BEYOND RESPONSIVE WEB DESIGN
Source: Luke Wroblewski
![Page 38: The Rise of Mobile for Nonprofit Communication & Fundraising](https://reader034.fdocuments.in/reader034/viewer/2022051818/54b767764a79595f038b457d/html5/thumbnails/38.jpg)
4/21/14 38
BEYOND RESPONSIVE WEB DESIGN
Source: uxmaDers.com
![Page 39: The Rise of Mobile for Nonprofit Communication & Fundraising](https://reader034.fdocuments.in/reader034/viewer/2022051818/54b767764a79595f038b457d/html5/thumbnails/39.jpg)
4/21/14 39
BEYOND RESPONSIVE WEB DESIGN
Source: Luke Wroblewski
![Page 40: The Rise of Mobile for Nonprofit Communication & Fundraising](https://reader034.fdocuments.in/reader034/viewer/2022051818/54b767764a79595f038b457d/html5/thumbnails/40.jpg)
4/21/14 40
BEYOND RESPONSIVE WEB DESIGN
Source: uxmaDers.com
![Page 41: The Rise of Mobile for Nonprofit Communication & Fundraising](https://reader034.fdocuments.in/reader034/viewer/2022051818/54b767764a79595f038b457d/html5/thumbnails/41.jpg)
4/21/14 41
BEYOND RESPONSIVE WEB DESIGN
Source: Luke Wroblewski
![Page 42: The Rise of Mobile for Nonprofit Communication & Fundraising](https://reader034.fdocuments.in/reader034/viewer/2022051818/54b767764a79595f038b457d/html5/thumbnails/42.jpg)
4/21/14 42
BEYOND RESPONSIVE WEB DESIGN
BLACKBAUD’S MOBILE TAPS INITIATIVE
16 MAXIMUM TAPS
49% OF EMAIL IS" READ ON MOBILE