The document discusses responsive web design and how to go beyond it to better meet user needs across devices. It introduces responsive design, which uses fluid grids and breakpoints to automatically reformat web content for different screen sizes. The speaker advocates for responsive design because mobile usage is rising and it provides a better user experience across devices. However, the speaker also argues that designers should go beyond responsive frameworks to create device-optimized experiences through techniques like touch targets and reducing taps. The overall message is that responsive design is important but designers must deeply understand user needs and limitations on each device type.

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
WHAT’S UP OUR SLEEVES?

7. 4/21/14
7
HOW OUR TEAM WORKS
DISCOVERY RESEARCH
CONTENT STRATEGY
ARCHITECTURE
DESIGN

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

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

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

11. 4/21/14
11
WHAT IS RESPONSIVE WEB DESIGN?
CONSTYLEWEBSITES!

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

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

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

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

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

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

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

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

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

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

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

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

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

25. 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.!

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

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

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

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

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

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

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

33. 4/21/14
33
USER CENTERED DESIGN
WANTS NEEDS
LIMITATIONS
(quality
experience)
(few
and
focused)
(varied,
complicated,
somewhat
predictable)
WE FIGHT FOR THE USER

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

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

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

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

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

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

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

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

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