Nyleva Corley and Michael Chang from Blackbaud presented a session on responsive web design at the #bbcon conference. They discussed why responsive design is important given rising mobile traffic, showed tools and best practices for prioritizing content and layout, and provided examples of sites they redesigned using a responsive approach. Attendees were invited to volunteer for a design slam activity and to meet with the presenters afterward at the conference booth to discuss additional questions about user experience and design.

1. 09/30/13 #bbcon 1
Homepage Design Slam
PRESENTED BY NYLEVA CORLEY, INFORMATION ARCHITECT
MICHAEL CHANG, CREATIVE DIRECTOR
#bbcon

2. 09/30/13 #bbcon 2
1. Who We Are
2. Why We’re Here
3. RWD Tools We Use
4. Our Design Examples
5. Design Slam
6. Resources
7. Meet Us at the UX/Design Booth
OUR AGENDA

3. 09/30/13 #bbcon 3
WHO WE ARE

4. 09/30/13 #bbcon 4
Michael Chang, Creative Director
• Creative strategist, leads team of designers and copywriters
• Clients include Make-A-Wish, National Association of REALTORS,
American Cancer Society, Canadian Wildlife Federation
• Best-in-Class Award from Interactive Media Awards for
UNICEF USA mobile site
• Outstanding Achievement Award from IMA for POGO website
• 15+ years in advertising, marketing and design
• michael.chang@blackbaud.com
HELLO! MY NAME IS …
Nyleva Corley, Information Architect
• Specialties: Content Strategy, Usability, Social Media
• Clients include Memorial Sloan-Kettering, Michigan Humane Society,
Common Cause, JDRF, American Jewish Joint Distribution Committee
• Speaker: SXSW Interactive
• Speaker: CASE Social Media and Community and HighEdWeb on crisis
communications
• 12 years in digital strategy for higher education
• nyleva.corley@blackbaud.com

5. 09/30/13 #bbcon 5
WHY WE’RE HERE

6. 09/30/13 #bbcon 6
IT’S A MULTI-DEVICE WORLD
Credit:
ormlondon.com

7. 09/30/13 #bbcon 7
Future proof
Browser
compatibility,
device
compatibility
SEO friendly
Single URL for
improved
analytics
Easier to
manage
Single content
base,
single code
base
Cost effective
See next slide
THE BENEFITS ARE CLEAR

8. 09/30/13 #bbcon 8
Desktop-only Mobile-only
Responsive
Design
User Experience
and Design
Web Development
QA and testing
Total
BENEFIT SPOTLIGHT: COST EFFECTIVE
2 breakpoints All breakpoints

9. 09/30/13 #bbcon 9
CAN’T IGNORE THE TRENDS
Credit: dotcominfoway.com

10. 09/30/13 #bbcon 10
CAN’T IGNORE THE TRENDS
Credit: Blackbaud’s August 2013 The Next Generation of American Giving report
(https://www.blackbaud.com/nextgen)

11. 09/30/13 #bbcon 11
TRAFFIC TRENDS
mobile
tablet
desktop
Organization A: Animal Welfare
Mobile + Tablet Traffic
Total Site Traffic
20.69%2011-
2012
34.61%2012-
2013

12. 09/30/13 #bbcon 12
TRAFFIC TRENDS
mobile
tablet
desktop
Organization B: Hospital
Mobile + Tablet Traffic
Total Site Traffic
14.08%2011-
2012
21.32%2012-
2013

13. 09/30/13 #bbcon 13
BOUNCE RATE TRENDS
mobile
tablet
desktop
Organization B: Hospital

14. 09/30/13 #bbcon 14
RWD TOOLS WE USE

15. 09/30/13 #bbcon 15
PRIORITIZATION
Content Audit

16. 09/30/13 #bbcon 16
PRIORITIZATION
Sitemap

17. 09/30/13 #bbcon 17
PRIORITIZATION
Page Description Diagrams

18. 09/30/13 #bbcon 18
LAYOUT
Layout Patterns include:
Credits:LukeWroblewski,JoshuaJohnson
http://bit.ly/wZCiPcandhttp://bit.ly/HeOmq0

19. 09/30/13 #bbcon 19
LAYOUT
Layout Patterns include:
Credits:LukeWroblewski,JoshuaJohnson
http://bit.ly/wZCiPcandhttp://bit.ly/HeOmq0

20. 09/30/13 #bbcon 20
LAYOUT
Layout Patterns include:
Credits:LukeWroblewski,JoshuaJohnson
http://bit.ly/wZCiPcandhttp://bit.ly/HeOmq0

21. 09/30/13 #bbcon 21
LAYOUT
Layout Patterns include:
Credits:LukeWroblewski,JoshuaJohnson
http://bit.ly/wZCiPcandhttp://bit.ly/HeOmq0

22. 09/30/13 #bbcon 22
LAYOUT
Layout Patterns include:
Credits:LukeWroblewski,JoshuaJohnson
http://bit.ly/wZCiPcandhttp://bit.ly/HeOmq0

23. 09/30/13 #bbcon 23
LAYOUT
Navigation Patterns include:
Credit:BradFrost
http://bit.ly/zwyv2dandhttp://bit.ly/QsaFk5

24. 09/30/13 #bbcon 24
LAYOUT
Navigation Patterns include:
Credit:BradFrost
http://bit.ly/zwyv2dandhttp://bit.ly/QsaFk5

25. 09/30/13 #bbcon 25
LAYOUT
Navigation Patterns include:
Credit:BradFrost
http://bit.ly/zwyv2dandhttp://bit.ly/QsaFk5

26. 09/30/13 #bbcon 26
LAYOUT
Navigation Patterns include:
Credit:BradFrost
http://bit.ly/zwyv2dandhttp://bit.ly/QsaFk5

27. 09/30/13 #bbcon 27
LAYOUT
Navigation Patterns include:
Credit:BradFrost
http://bit.ly/zwyv2dandhttp://bit.ly/QsaFk5

28. 09/30/13 #bbcon 28
LAYOUT
Navigation Patterns include:
Credit:BradFrost
http://bit.ly/zwyv2dandhttp://bit.ly/QsaFk5

29. 09/30/13 #bbcon 29
LAYOUT
Navigation Patterns include:
Credit:BradFrost
http://bit.ly/zwyv2dandhttp://bit.ly/QsaFk5

30. 09/30/13 #bbcon 30
LAYOUT
Wireframes

31. 09/30/13 #bbcon 31
OUR DESIGN EXAMPLES

32. 09/30/13 #bbcon 32
CMS REDESIGN
Current project

33. 09/30/13 #bbcon 33
PEER-TO-PEER REDESIGN
Site launches tomorrow (10/1)

34. 09/30/13 #bbcon 34
VOLUNTEERS FOR DESIGN SLAM
Please be respectful and nice.
The egg timer rules.
See us afterward in the “Strategic & Creative Services” Booth for Q&A.

35. 09/30/13 #bbcon 35
By focusing on prioritization and layout — and using the tools,
patterns and best practices we’ve shared with you today —
Responsive Web Design is within your
organization’s reach.
THE TAKEAWAY

36. 09/30/13 #bbcon 36
Our faves
• “The Elements of Content Strategy” by Erin Kissane, @kissane
• “Content Strategy for Mobile” by Karen McGrane, @karenmcgrane
CONTENT STRATEGY RESOURCES

37. 09/30/13 #bbcon 37
Our faves
• “Responsive Web Design” by Ethan Marcotte, @beep
• “Mobile First” by Luke Wroblewski, @lukew
• http://bradfrost.github.io/this-is-responsive/patterns.html
• http://foundation.zurb.com
• http://getbootstrap.com
RWD RESOURCES

38. 09/30/13 #bbcon 38
Want to chat more about your Interactive needs and UX/Design?
Meet Nyleva and Michael in the
“Strategic & Creative Services” Booth!
Location: Across from Booth #105
Time: 3:00 – 4:00 EST
THANK YOU!