際際滷

際際滷Share a Scribd company logo

The Rise of Mobile for Nonprofit Communication & Fundraising

J
JeffTe

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 of 42
Download to read offline
Communicating E鍖ectively 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-Pro鍖ts: 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 WHATS UP OUR SLEEVES?
4/21/14 6 WHATS UP OUR SLEEVES?
4/21/14 7 HOW OUR TEAM WORKS DISCOVERY RESEARCH CONTENT STRATEGY ARCHITECTURE DESIGN
4/21/14 8 TODAYS 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 TODAYS 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? CONSTYLEWEBSITES!
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+ 768979px 320767px
4/21/14 14 WHAT IS RESPONSIVE WEB DESIGN? Ethan Marcotte
4/21/14 15 WHAT IS RESPONSIVE WEB DESIGN? BREAKPOINTS 980px+ 768979px 320767px %
4/21/14 16 TODAYS 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, Im 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. InformationsI 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 Speci鍖c 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 TODAYS 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 TODAYS 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 BLACKBAUDS MOBILE TAPS INITIATIVE 16 MAXIMUM TAPS 49% OF EMAIL IS" READ ON MOBILE

More Related Content

The Rise of Mobile for Nonprofit Communication & Fundraising

  • 1. Communicating E鍖ectively 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-Pro鍖ts: 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 WHATS UP OUR SLEEVES?
  • 6. 4/21/14 6 WHATS UP OUR SLEEVES?
  • 7. 4/21/14 7 HOW OUR TEAM WORKS DISCOVERY RESEARCH CONTENT STRATEGY ARCHITECTURE DESIGN
  • 8. 4/21/14 8 TODAYS 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 TODAYS 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+ 768979px 320767px
  • 14. 4/21/14 14 WHAT IS RESPONSIVE WEB DESIGN? Ethan Marcotte
  • 15. 4/21/14 15 WHAT IS RESPONSIVE WEB DESIGN? BREAKPOINTS 980px+ 768979px 320767px %
  • 16. 4/21/14 16 TODAYS 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, Im 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 Speci鍖c 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 TODAYS 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 TODAYS 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 BLACKBAUDS MOBILE TAPS INITIATIVE 16 MAXIMUM TAPS 49% OF EMAIL IS" READ ON MOBILE