SlideShare a Scribd company logo
1 of 42
Download to read offline
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?
	
  	
  	
  	
   	
  	
  	
  	
  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+ 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.  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 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

More Related Content

Similar to The Rise of Mobile for Nonprofit Communication & Fundraising

The Rise of Responsive Design in Higher Ed
The Rise of Responsive Design in Higher EdThe Rise of Responsive Design in Higher Ed
The Rise of Responsive Design in Higher EdTom Thayer
 
Progressive Enchancement: Crafting a Responsive Redesign
Progressive Enchancement: Crafting a Responsive RedesignProgressive Enchancement: Crafting a Responsive Redesign
Progressive Enchancement: Crafting a Responsive RedesignKarin Tracy
 
Responsive Web Design: One Size No Longer Fits All
Responsive Web Design: One Size No Longer Fits AllResponsive Web Design: One Size No Longer Fits All
Responsive Web Design: One Size No Longer Fits AllPerficient, Inc.
 
Responsive Web Design: How the mobile web has changed the way we think and work
Responsive Web Design:  How the mobile web has changed the way we think and workResponsive Web Design:  How the mobile web has changed the way we think and work
Responsive Web Design: How the mobile web has changed the way we think and workvq20
 
Responsive Web Design
Responsive Web DesignResponsive Web Design
Responsive Web DesignJohn Nollin
 
What Lies Ahead
What Lies AheadWhat Lies Ahead
What Lies AheadMoboom
 
Two approaches to RWD: Pure & Hybrid. Brendan Falkowski
Two approaches to RWD: Pure & Hybrid. Brendan Falkowski Two approaches to RWD: Pure & Hybrid. Brendan Falkowski
Two approaches to RWD: Pure & Hybrid. Brendan Falkowski MeetMagentoNY2014
 
Responsive Design for enterprise websites by Rob Roy, Head of Digital for Tim...
Responsive Design for enterprise websites by Rob Roy, Head of Digital for Tim...Responsive Design for enterprise websites by Rob Roy, Head of Digital for Tim...
Responsive Design for enterprise websites by Rob Roy, Head of Digital for Tim...Rob Roy
 
How to Find Your Ideal Technical Responsive Design Approach
How to Find Your Ideal Technical Responsive Design ApproachHow to Find Your Ideal Technical Responsive Design Approach
How to Find Your Ideal Technical Responsive Design Approach5th Finger
 
Beyond Branding SharePoint - SharePoint and Today's Web
Beyond Branding SharePoint - SharePoint and Today's WebBeyond Branding SharePoint - SharePoint and Today's Web
Beyond Branding SharePoint - SharePoint and Today's WebEric Overfield
 
RESPONSIVE WEB DESIGN
RESPONSIVE WEB DESIGNRESPONSIVE WEB DESIGN
RESPONSIVE WEB DESIGNNAWAZ KHAN
 
SPSDFW Bottom Up SharePoint Design
SPSDFW Bottom Up SharePoint DesignSPSDFW Bottom Up SharePoint Design
SPSDFW Bottom Up SharePoint DesignDavid Broussard
 
Responsive Web Design_2013
Responsive Web Design_2013Responsive Web Design_2013
Responsive Web Design_2013Achieve Internet
 
SMM Webinar - Responsive Design
SMM Webinar - Responsive DesignSMM Webinar - Responsive Design
SMM Webinar - Responsive DesignR2integrated
 
The Lie of a Benevolent Dictator; the Truth of a Working Democratic Meritocracy
The Lie of a Benevolent Dictator; the Truth of a Working Democratic MeritocracyThe Lie of a Benevolent Dictator; the Truth of a Working Democratic Meritocracy
The Lie of a Benevolent Dictator; the Truth of a Working Democratic MeritocracyRandy Bias
 
Responsive & Adaptive Design: Delivering Websites That Delight Your Users
Responsive & Adaptive Design: Delivering Websites That Delight Your UsersResponsive & Adaptive Design: Delivering Websites That Delight Your Users
Responsive & Adaptive Design: Delivering Websites That Delight Your UsersBBDO
 

Similar to The Rise of Mobile for Nonprofit Communication & Fundraising (20)

The Rise of Responsive Design in Higher Ed
The Rise of Responsive Design in Higher EdThe Rise of Responsive Design in Higher Ed
The Rise of Responsive Design in Higher Ed
 
Progressive Enchancement: Crafting a Responsive Redesign
Progressive Enchancement: Crafting a Responsive RedesignProgressive Enchancement: Crafting a Responsive Redesign
Progressive Enchancement: Crafting a Responsive Redesign
 
Responsive Web Design: One Size No Longer Fits All
Responsive Web Design: One Size No Longer Fits AllResponsive Web Design: One Size No Longer Fits All
Responsive Web Design: One Size No Longer Fits All
 
Responsive Web Design: How the mobile web has changed the way we think and work
Responsive Web Design:  How the mobile web has changed the way we think and workResponsive Web Design:  How the mobile web has changed the way we think and work
Responsive Web Design: How the mobile web has changed the way we think and work
 
Responsive Web Design
Responsive Web DesignResponsive Web Design
Responsive Web Design
 
What Lies Ahead
What Lies AheadWhat Lies Ahead
What Lies Ahead
 
Two approaches to RWD: Pure & Hybrid. Brendan Falkowski
Two approaches to RWD: Pure & Hybrid. Brendan Falkowski Two approaches to RWD: Pure & Hybrid. Brendan Falkowski
Two approaches to RWD: Pure & Hybrid. Brendan Falkowski
 
Webinar presentation-startups and mobility
Webinar presentation-startups and mobilityWebinar presentation-startups and mobility
Webinar presentation-startups and mobility
 
Responsive Design for enterprise websites by Rob Roy, Head of Digital for Tim...
Responsive Design for enterprise websites by Rob Roy, Head of Digital for Tim...Responsive Design for enterprise websites by Rob Roy, Head of Digital for Tim...
Responsive Design for enterprise websites by Rob Roy, Head of Digital for Tim...
 
How to Find Your Ideal Technical Responsive Design Approach
How to Find Your Ideal Technical Responsive Design ApproachHow to Find Your Ideal Technical Responsive Design Approach
How to Find Your Ideal Technical Responsive Design Approach
 
Beyond Branding SharePoint - SharePoint and Today's Web
Beyond Branding SharePoint - SharePoint and Today's WebBeyond Branding SharePoint - SharePoint and Today's Web
Beyond Branding SharePoint - SharePoint and Today's Web
 
RESPONSIVE WEB DESIGN
RESPONSIVE WEB DESIGNRESPONSIVE WEB DESIGN
RESPONSIVE WEB DESIGN
 
SPSDFW Bottom Up SharePoint Design
SPSDFW Bottom Up SharePoint DesignSPSDFW Bottom Up SharePoint Design
SPSDFW Bottom Up SharePoint Design
 
Responsive Web Design_2013
Responsive Web Design_2013Responsive Web Design_2013
Responsive Web Design_2013
 
Nitishreys
NitishreysNitishreys
Nitishreys
 
SMM Webinar - Responsive Design
SMM Webinar - Responsive DesignSMM Webinar - Responsive Design
SMM Webinar - Responsive Design
 
Rwdprocess
RwdprocessRwdprocess
Rwdprocess
 
The Lie of a Benevolent Dictator; the Truth of a Working Democratic Meritocracy
The Lie of a Benevolent Dictator; the Truth of a Working Democratic MeritocracyThe Lie of a Benevolent Dictator; the Truth of a Working Democratic Meritocracy
The Lie of a Benevolent Dictator; the Truth of a Working Democratic Meritocracy
 
Responsive & Adaptive Design: Delivering Websites That Delight Your Users
Responsive & Adaptive Design: Delivering Websites That Delight Your UsersResponsive & Adaptive Design: Delivering Websites That Delight Your Users
Responsive & Adaptive Design: Delivering Websites That Delight Your Users
 
Responsive web design
Responsive web designResponsive web design
Responsive web design
 

More from JeffTe

Boston Forum: Day of Giving Top 10 Tips
Boston Forum: Day of Giving Top 10 TipsBoston Forum: Day of Giving Top 10 Tips
Boston Forum: Day of Giving Top 10 TipsJeffTe
 
Digital Life Hacks: Clark university - Reunion and Events in Blackbaud NetCo...
Digital Life Hacks: Clark university  - Reunion and Events in Blackbaud NetCo...Digital Life Hacks: Clark university  - Reunion and Events in Blackbaud NetCo...
Digital Life Hacks: Clark university - Reunion and Events in Blackbaud NetCo...JeffTe
 
David Kilmer: Raiser's Edge NXT Overview for HIgher Ed Forum
David Kilmer:  Raiser's Edge NXT Overview for HIgher Ed ForumDavid Kilmer:  Raiser's Edge NXT Overview for HIgher Ed Forum
David Kilmer: Raiser's Edge NXT Overview for HIgher Ed ForumJeffTe
 
The Science of Philanthropy
The Science of PhilanthropyThe Science of Philanthropy
The Science of PhilanthropyJeffTe
 
EduVentures: Tapping the Social Funnel for Development_June 2016_Simmons College
EduVentures: Tapping the Social Funnel for Development_June 2016_Simmons CollegeEduVentures: Tapping the Social Funnel for Development_June 2016_Simmons College
EduVentures: Tapping the Social Funnel for Development_June 2016_Simmons CollegeJeffTe
 
Crowdfundamentals: What your nonprofit needs to know about today's crowdfunding
Crowdfundamentals: What your nonprofit needs to know about today's crowdfundingCrowdfundamentals: What your nonprofit needs to know about today's crowdfunding
Crowdfundamentals: What your nonprofit needs to know about today's crowdfundingJeffTe
 
2015 Blackbaud UNH Higher Ed Forum - Chuck Longfield
2015 Blackbaud UNH Higher Ed Forum -  Chuck Longfield2015 Blackbaud UNH Higher Ed Forum -  Chuck Longfield
2015 Blackbaud UNH Higher Ed Forum - Chuck LongfieldJeffTe
 
Online Engagement 202
Online Engagement 202Online Engagement 202
Online Engagement 202JeffTe
 
Crowdfundamentals: what your nonprofit needs to know about today's crowdfunding
Crowdfundamentals: what your nonprofit needs to know about today's crowdfundingCrowdfundamentals: what your nonprofit needs to know about today's crowdfunding
Crowdfundamentals: what your nonprofit needs to know about today's crowdfundingJeffTe
 
Understanding Young Alumni
Understanding Young AlumniUnderstanding Young Alumni
Understanding Young AlumniJeffTe
 
Can Crowd Funding Work in Higher Ed?
Can Crowd Funding Work in Higher Ed?Can Crowd Funding Work in Higher Ed?
Can Crowd Funding Work in Higher Ed?JeffTe
 
Blackbaud Data Quality Scorecard
Blackbaud Data Quality ScorecardBlackbaud Data Quality Scorecard
Blackbaud Data Quality ScorecardJeffTe
 
Blackbaud Interactive - Engaging Young Alumni
Blackbaud Interactive - Engaging Young AlumniBlackbaud Interactive - Engaging Young Alumni
Blackbaud Interactive - Engaging Young AlumniJeffTe
 
Taking NetCommunity to the Next Level
Taking NetCommunity to the Next LevelTaking NetCommunity to the Next Level
Taking NetCommunity to the Next LevelJeffTe
 
21 Tips for Engaging Alumni Through Social Media by John Haydon
21 Tips for Engaging Alumni Through Social Media by John Haydon21 Tips for Engaging Alumni Through Social Media by John Haydon
21 Tips for Engaging Alumni Through Social Media by John HaydonJeffTe
 
Net community for higher education site examples
Net community for higher education   site examplesNet community for higher education   site examples
Net community for higher education site examplesJeffTe
 
DonorCentrics Reporting Examples for The Raiser's Edge
DonorCentrics Reporting Examples for The Raiser's EdgeDonorCentrics Reporting Examples for The Raiser's Edge
DonorCentrics Reporting Examples for The Raiser's EdgeJeffTe
 
The Juilliard School Before & After Blackbaud Interactive Design Project
The Juilliard School Before & After Blackbaud Interactive Design ProjectThe Juilliard School Before & After Blackbaud Interactive Design Project
The Juilliard School Before & After Blackbaud Interactive Design ProjectJeffTe
 
Emmanuel College Before & After NetCommunity
Emmanuel College Before & After NetCommunityEmmanuel College Before & After NetCommunity
Emmanuel College Before & After NetCommunityJeffTe
 
Reporting Options in RE
Reporting Options in REReporting Options in RE
Reporting Options in REJeffTe
 

More from JeffTe (20)

Boston Forum: Day of Giving Top 10 Tips
Boston Forum: Day of Giving Top 10 TipsBoston Forum: Day of Giving Top 10 Tips
Boston Forum: Day of Giving Top 10 Tips
 
Digital Life Hacks: Clark university - Reunion and Events in Blackbaud NetCo...
Digital Life Hacks: Clark university  - Reunion and Events in Blackbaud NetCo...Digital Life Hacks: Clark university  - Reunion and Events in Blackbaud NetCo...
Digital Life Hacks: Clark university - Reunion and Events in Blackbaud NetCo...
 
David Kilmer: Raiser's Edge NXT Overview for HIgher Ed Forum
David Kilmer:  Raiser's Edge NXT Overview for HIgher Ed ForumDavid Kilmer:  Raiser's Edge NXT Overview for HIgher Ed Forum
David Kilmer: Raiser's Edge NXT Overview for HIgher Ed Forum
 
The Science of Philanthropy
The Science of PhilanthropyThe Science of Philanthropy
The Science of Philanthropy
 
EduVentures: Tapping the Social Funnel for Development_June 2016_Simmons College
EduVentures: Tapping the Social Funnel for Development_June 2016_Simmons CollegeEduVentures: Tapping the Social Funnel for Development_June 2016_Simmons College
EduVentures: Tapping the Social Funnel for Development_June 2016_Simmons College
 
Crowdfundamentals: What your nonprofit needs to know about today's crowdfunding
Crowdfundamentals: What your nonprofit needs to know about today's crowdfundingCrowdfundamentals: What your nonprofit needs to know about today's crowdfunding
Crowdfundamentals: What your nonprofit needs to know about today's crowdfunding
 
2015 Blackbaud UNH Higher Ed Forum - Chuck Longfield
2015 Blackbaud UNH Higher Ed Forum -  Chuck Longfield2015 Blackbaud UNH Higher Ed Forum -  Chuck Longfield
2015 Blackbaud UNH Higher Ed Forum - Chuck Longfield
 
Online Engagement 202
Online Engagement 202Online Engagement 202
Online Engagement 202
 
Crowdfundamentals: what your nonprofit needs to know about today's crowdfunding
Crowdfundamentals: what your nonprofit needs to know about today's crowdfundingCrowdfundamentals: what your nonprofit needs to know about today's crowdfunding
Crowdfundamentals: what your nonprofit needs to know about today's crowdfunding
 
Understanding Young Alumni
Understanding Young AlumniUnderstanding Young Alumni
Understanding Young Alumni
 
Can Crowd Funding Work in Higher Ed?
Can Crowd Funding Work in Higher Ed?Can Crowd Funding Work in Higher Ed?
Can Crowd Funding Work in Higher Ed?
 
Blackbaud Data Quality Scorecard
Blackbaud Data Quality ScorecardBlackbaud Data Quality Scorecard
Blackbaud Data Quality Scorecard
 
Blackbaud Interactive - Engaging Young Alumni
Blackbaud Interactive - Engaging Young AlumniBlackbaud Interactive - Engaging Young Alumni
Blackbaud Interactive - Engaging Young Alumni
 
Taking NetCommunity to the Next Level
Taking NetCommunity to the Next LevelTaking NetCommunity to the Next Level
Taking NetCommunity to the Next Level
 
21 Tips for Engaging Alumni Through Social Media by John Haydon
21 Tips for Engaging Alumni Through Social Media by John Haydon21 Tips for Engaging Alumni Through Social Media by John Haydon
21 Tips for Engaging Alumni Through Social Media by John Haydon
 
Net community for higher education site examples
Net community for higher education   site examplesNet community for higher education   site examples
Net community for higher education site examples
 
DonorCentrics Reporting Examples for The Raiser's Edge
DonorCentrics Reporting Examples for The Raiser's EdgeDonorCentrics Reporting Examples for The Raiser's Edge
DonorCentrics Reporting Examples for The Raiser's Edge
 
The Juilliard School Before & After Blackbaud Interactive Design Project
The Juilliard School Before & After Blackbaud Interactive Design ProjectThe Juilliard School Before & After Blackbaud Interactive Design Project
The Juilliard School Before & After Blackbaud Interactive Design Project
 
Emmanuel College Before & After NetCommunity
Emmanuel College Before & After NetCommunityEmmanuel College Before & After NetCommunity
Emmanuel College Before & After NetCommunity
 
Reporting Options in RE
Reporting Options in REReporting Options in RE
Reporting Options in RE
 

Recently uploaded

world Tuberculosis day ppt 25-3-2024.pptx
world Tuberculosis day ppt 25-3-2024.pptxworld Tuberculosis day ppt 25-3-2024.pptx
world Tuberculosis day ppt 25-3-2024.pptxnaveenithkrishnan
 
Niche Domination Prodigy Review Plus Bonus
Niche Domination Prodigy Review Plus BonusNiche Domination Prodigy Review Plus Bonus
Niche Domination Prodigy Review Plus BonusSkylark Nobin
 
TYPES AND DEFINITION OF ONLINE CRIMES AND HAZARDS
TYPES AND DEFINITION OF ONLINE CRIMES AND HAZARDSTYPES AND DEFINITION OF ONLINE CRIMES AND HAZARDS
TYPES AND DEFINITION OF ONLINE CRIMES AND HAZARDSedrianrheine
 
A_Z-1_0_4T_00A-EN_U-Po_w_erPoint_06.pptx
A_Z-1_0_4T_00A-EN_U-Po_w_erPoint_06.pptxA_Z-1_0_4T_00A-EN_U-Po_w_erPoint_06.pptx
A_Z-1_0_4T_00A-EN_U-Po_w_erPoint_06.pptxjayshuklatrainer
 
Zero-day Vulnerabilities
Zero-day VulnerabilitiesZero-day Vulnerabilities
Zero-day Vulnerabilitiesalihassaah1994
 
Benefits of doing Internet peering and running an Internet Exchange (IX) pres...
Benefits of doing Internet peering and running an Internet Exchange (IX) pres...Benefits of doing Internet peering and running an Internet Exchange (IX) pres...
Benefits of doing Internet peering and running an Internet Exchange (IX) pres...APNIC
 
LESSON 5 GROUP 10 ST. THOMAS AQUINAS.pdf
LESSON 5 GROUP 10 ST. THOMAS AQUINAS.pdfLESSON 5 GROUP 10 ST. THOMAS AQUINAS.pdf
LESSON 5 GROUP 10 ST. THOMAS AQUINAS.pdfmchristianalwyn
 
WordPress by the numbers - Jan Loeffler, CTO WebPros, CloudFest 2024
WordPress by the numbers - Jan Loeffler, CTO WebPros, CloudFest 2024WordPress by the numbers - Jan Loeffler, CTO WebPros, CloudFest 2024
WordPress by the numbers - Jan Loeffler, CTO WebPros, CloudFest 2024Jan Löffler
 
Bio Medical Waste Management Guideliness 2023 ppt.pptx
Bio Medical Waste Management Guideliness 2023 ppt.pptxBio Medical Waste Management Guideliness 2023 ppt.pptx
Bio Medical Waste Management Guideliness 2023 ppt.pptxnaveenithkrishnan
 
Computer 10 Lesson 8: Building a Website
Computer 10 Lesson 8: Building a WebsiteComputer 10 Lesson 8: Building a Website
Computer 10 Lesson 8: Building a WebsiteMavein
 
Introduction to ICANN and Fellowship program by Shreedeep Rayamajhi.pdf
Introduction to ICANN and Fellowship program  by Shreedeep Rayamajhi.pdfIntroduction to ICANN and Fellowship program  by Shreedeep Rayamajhi.pdf
Introduction to ICANN and Fellowship program by Shreedeep Rayamajhi.pdfShreedeep Rayamajhi
 
LESSON 10/ GROUP 10/ ST. THOMAS AQUINASS
LESSON 10/ GROUP 10/ ST. THOMAS AQUINASSLESSON 10/ GROUP 10/ ST. THOMAS AQUINASS
LESSON 10/ GROUP 10/ ST. THOMAS AQUINASSlesteraporado16
 
Check out the Free Landing Page Hosting in 2024
Check out the Free Landing Page Hosting in 2024Check out the Free Landing Page Hosting in 2024
Check out the Free Landing Page Hosting in 2024Shubham Pant
 
Presentation2.pptx - JoyPress Wordpress
Presentation2.pptx -  JoyPress WordpressPresentation2.pptx -  JoyPress Wordpress
Presentation2.pptx - JoyPress Wordpressssuser166378
 
Vision Forward: Tracing Image Search SEO From Its Roots To AI-Enhanced Horizons
Vision Forward: Tracing Image Search SEO From Its Roots To AI-Enhanced HorizonsVision Forward: Tracing Image Search SEO From Its Roots To AI-Enhanced Horizons
Vision Forward: Tracing Image Search SEO From Its Roots To AI-Enhanced HorizonsRoxana Stingu
 

Recently uploaded (15)

world Tuberculosis day ppt 25-3-2024.pptx
world Tuberculosis day ppt 25-3-2024.pptxworld Tuberculosis day ppt 25-3-2024.pptx
world Tuberculosis day ppt 25-3-2024.pptx
 
Niche Domination Prodigy Review Plus Bonus
Niche Domination Prodigy Review Plus BonusNiche Domination Prodigy Review Plus Bonus
Niche Domination Prodigy Review Plus Bonus
 
TYPES AND DEFINITION OF ONLINE CRIMES AND HAZARDS
TYPES AND DEFINITION OF ONLINE CRIMES AND HAZARDSTYPES AND DEFINITION OF ONLINE CRIMES AND HAZARDS
TYPES AND DEFINITION OF ONLINE CRIMES AND HAZARDS
 
A_Z-1_0_4T_00A-EN_U-Po_w_erPoint_06.pptx
A_Z-1_0_4T_00A-EN_U-Po_w_erPoint_06.pptxA_Z-1_0_4T_00A-EN_U-Po_w_erPoint_06.pptx
A_Z-1_0_4T_00A-EN_U-Po_w_erPoint_06.pptx
 
Zero-day Vulnerabilities
Zero-day VulnerabilitiesZero-day Vulnerabilities
Zero-day Vulnerabilities
 
Benefits of doing Internet peering and running an Internet Exchange (IX) pres...
Benefits of doing Internet peering and running an Internet Exchange (IX) pres...Benefits of doing Internet peering and running an Internet Exchange (IX) pres...
Benefits of doing Internet peering and running an Internet Exchange (IX) pres...
 
LESSON 5 GROUP 10 ST. THOMAS AQUINAS.pdf
LESSON 5 GROUP 10 ST. THOMAS AQUINAS.pdfLESSON 5 GROUP 10 ST. THOMAS AQUINAS.pdf
LESSON 5 GROUP 10 ST. THOMAS AQUINAS.pdf
 
WordPress by the numbers - Jan Loeffler, CTO WebPros, CloudFest 2024
WordPress by the numbers - Jan Loeffler, CTO WebPros, CloudFest 2024WordPress by the numbers - Jan Loeffler, CTO WebPros, CloudFest 2024
WordPress by the numbers - Jan Loeffler, CTO WebPros, CloudFest 2024
 
Bio Medical Waste Management Guideliness 2023 ppt.pptx
Bio Medical Waste Management Guideliness 2023 ppt.pptxBio Medical Waste Management Guideliness 2023 ppt.pptx
Bio Medical Waste Management Guideliness 2023 ppt.pptx
 
Computer 10 Lesson 8: Building a Website
Computer 10 Lesson 8: Building a WebsiteComputer 10 Lesson 8: Building a Website
Computer 10 Lesson 8: Building a Website
 
Introduction to ICANN and Fellowship program by Shreedeep Rayamajhi.pdf
Introduction to ICANN and Fellowship program  by Shreedeep Rayamajhi.pdfIntroduction to ICANN and Fellowship program  by Shreedeep Rayamajhi.pdf
Introduction to ICANN and Fellowship program by Shreedeep Rayamajhi.pdf
 
LESSON 10/ GROUP 10/ ST. THOMAS AQUINASS
LESSON 10/ GROUP 10/ ST. THOMAS AQUINASSLESSON 10/ GROUP 10/ ST. THOMAS AQUINASS
LESSON 10/ GROUP 10/ ST. THOMAS AQUINASS
 
Check out the Free Landing Page Hosting in 2024
Check out the Free Landing Page Hosting in 2024Check out the Free Landing Page Hosting in 2024
Check out the Free Landing Page Hosting in 2024
 
Presentation2.pptx - JoyPress Wordpress
Presentation2.pptx -  JoyPress WordpressPresentation2.pptx -  JoyPress Wordpress
Presentation2.pptx - JoyPress Wordpress
 
Vision Forward: Tracing Image Search SEO From Its Roots To AI-Enhanced Horizons
Vision Forward: Tracing Image Search SEO From Its Roots To AI-Enhanced HorizonsVision Forward: Tracing Image Search SEO From Its Roots To AI-Enhanced Horizons
Vision Forward: Tracing Image Search SEO From Its Roots To AI-Enhanced Horizons
 

The Rise of Mobile for Nonprofit Communication & Fundraising

  • 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