A presentation I gave recently at a Higher Education forum at Emmanuel College in Boston, MA on March 26th 2014

1. Communicating Effectively Across Devices
With Responsive Website Design
presented
by
Tom
Thayer

2. 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.

3. 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. 4/21/14
4
OUR COMBINED EXPERIENCE

5. 4/21/14
5
WHAT’S UP OUR SLEEVES?

6. 4/21/14
6
TODAY’S DISCUSSION
What is Responsive Web Design?
Why Everyone Should Be Using RWD
How and Why We Should Go Beyond RWD Trends

7. 4/21/14
7
TODAY’S DISCUSSION
What is Responsive Web Design?
Why Everyone Should Be Using RWD
How and Why We Should Go Beyond RWD Trends

8. 4/21/14
8
WHAT IS RESPONSIVE WEB DESIGN?
CONTENT
<!-- HTML -->
STYLE
/* CSS */

9. 4/21/14
9
WHAT IS RESPONSIVE WEB DESIGN?
WEBSITES!

10. 4/21/14
10
css
WHAT IS RESPONSIVE WEB DESIGN?
css
SINGLE
SOURCE
CONTENT

11. 4/21/14
11
WHAT IS RESPONSIVE WEB DESIGN?
BREAKPOINTS
980px+ 768–979px 320–767px

12. 4/21/14
12
WHAT IS RESPONSIVE WEB DESIGN?
Ethan Marcotte

13. 4/21/14
13
TODAY’S DISCUSSION
What is Responsive Web Design?
Why Everyone Should Be Using RWD
How and Why We Should Go Beyond RWD Trends

14. 4/21/14
14
WHY GO RESPONSIVE?
Everyone else is doing it…

15. 4/21/14
15
WHY GO RESPONSIVE?
Source:
StatCounter

16. 4/21/14
16
WHY GO RESPONSIVE?
Source:
StatCounter
61%
9.4%
2012
15.2%
2013

17. 4/21/14
17
WHY GO RESPONSIVE?
Source:
Google
Because Google says so…

18. 4/21/14
18
WHY GO RESPONSIVE?
Our users deserve better!

19. 4/21/14
19
USER CENTERED DESIGN
WANTS NEEDS
LIMITATIONS
Hi, I’m the user.!

20. 4/21/14
20
WHAT THE USER WANTS
1. Clear Messaging
2. Consistency
3. Connection
4. Context
5. Guidance
I want stuff.!
( sort of )*

21. 4/21/14
21
WHAT THE USER NEEDS
1. Interactions
2. Transactions
3. InformationsI need, therefore I use.!

22. 4/21/14
22
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.!

23. 4/21/14
23
USER CENTERED DESIGN
WANTS NEEDS
LIMITATIONS
(quality
experience)
(few
and
focused)
(varied,
complicated,
somewhat
predictable)

24. 4/21/14
24
USER CENTERED DESIGN
WANTS
NEEDS
LIMITATIONS

25. 4/21/14
25
HOW RWD GIVES THE USER WHAT THEY WANT
A Quality Experience
• Readable Content
• Reformatted Branding
• Mobile Navigation
• Mobile Specific Content

26. 4/21/14
26
HOW RWD GIVES THE USER WHAT THEY NEED
• Interactions
• Transactions
• Informations
Needs: Few and Focused

27. 4/21/14
27
HOW RWD HANDLES USER LIMITATIONS
Varied Limitations
• Remove Distractions
• One-Handed Operations
• Limit Form Fields
• Flat Designs
• Simple Conversion Paths
• Valid Code
• Simple Operations

28. 4/21/14
28
HOW RWD HANDLES USER LIMITATIONS

29. 4/21/14
29
TODAY’S DISCUSSION
What is Responsive Web Design?
Why Everyone Should Be Using RWD
How and Why We Should Go Beyond RWD Trends

30. 4/21/14
30
BEYOND RESPONSIVE WEB DESIGN

31. 4/21/14
31
BEYOND RESPONSIVE WEB DESIGN

32. 4/21/14
32
BEYOND RESPONSIVE WEB DESIGN
Source:
Luke
Wroblewski

33. 4/21/14
33
BEYOND RESPONSIVE WEB DESIGN
Source:
uxmaDers.com

34. 4/21/14
34
BEYOND RESPONSIVE WEB DESIGN
Source:
Luke
Wroblewski

35. 4/21/14
35
BEYOND RESPONSIVE WEB DESIGN
Source:
uxmaDers.com

36. 4/21/14
36
BEYOND RESPONSIVE WEB DESIGN
Source:
Luke
Wroblewski

37. 4/21/14
37
BEYOND RESPONSIVE WEB DESIGN
BLACKBAUD’S
MOBILE TAPS
INITIATIVE
49% OF EMAIL IS"
READ ON MOBILE