the rise of responsive design in higher ed
DESCRIPTION
A presentation I gave recently at a Higher Education forum at Emmanuel College in Boston, MA on March 26th 2014TRANSCRIPT
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
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 7
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 8
WHAT IS RESPONSIVE WEB DESIGN?
CONTENT <!-- HTML -->
STYLE /* CSS */
4/21/14 9
WHAT IS RESPONSIVE WEB DESIGN?
WEBSITES!
4/21/14 10
css
WHAT IS RESPONSIVE WEB DESIGN?
css SINGLE SOURCE
CONTENT
4/21/14 11
WHAT IS RESPONSIVE WEB DESIGN?
BREAKPOINTS
980px+ 768–979px 320–767px
4/21/14 12
WHAT IS RESPONSIVE WEB DESIGN?
Ethan Marcotte
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
4/21/14 14
WHY GO RESPONSIVE?
Everyone else is doing it…
4/21/14 15
WHY GO RESPONSIVE?
Source: StatCounter
4/21/14 16
WHY GO RESPONSIVE?
Source: StatCounter
61%
9.4%
2012
15.2%
2013
4/21/14 17
WHY GO RESPONSIVE?
Source: Google
Because Google says so…
4/21/14 18
WHY GO RESPONSIVE?
Our users deserve better!
4/21/14 19
USER CENTERED DESIGN
WANTS NEEDS
LIMITATIONS
Hi, I’m the user.!
4/21/14 20
WHAT THE USER WANTS
1. Clear Messaging 2. Consistency 3. Connection 4. Context 5. Guidance
I want stuff.!
( sort of )*
4/21/14 21
WHAT THE USER NEEDS
1. Interactions 2. Transactions 3. Informations
I need, therefore I use.!
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.!
4/21/14 23
USER CENTERED DESIGN
WANTS NEEDS
LIMITATIONS
(quality experience) (few and focused)
(varied, complicated, somewhat predictable)
4/21/14 24
USER CENTERED DESIGN
WANTS NEEDS LIMITATIONS
4/21/14 25
HOW RWD GIVES THE USER WHAT THEY WANT
A Quality Experience • Readable Content • Reformatted Branding • Mobile Navigation • Mobile Specific Content
4/21/14 26
HOW RWD GIVES THE USER WHAT THEY NEED
• Interactions • Transactions • Informations
Needs: Few and Focused
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
4/21/14 28
HOW RWD HANDLES USER LIMITATIONS
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
4/21/14 30
BEYOND RESPONSIVE WEB DESIGN
4/21/14 31
BEYOND RESPONSIVE WEB DESIGN
4/21/14 32
BEYOND RESPONSIVE WEB DESIGN
Source: Luke Wroblewski
4/21/14 33
BEYOND RESPONSIVE WEB DESIGN
Source: uxmaDers.com
4/21/14 34
BEYOND RESPONSIVE WEB DESIGN
Source: Luke Wroblewski
4/21/14 35
BEYOND RESPONSIVE WEB DESIGN
Source: uxmaDers.com
4/21/14 36
BEYOND RESPONSIVE WEB DESIGN
Source: Luke Wroblewski
4/21/14 37
BEYOND RESPONSIVE WEB DESIGN
BLACKBAUD’S MOBILE TAPS INITIATIVE
49% OF EMAIL IS" READ ON MOBILE