the rise of mobile for nonprofit communication & fundraising

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