Homepage Design Slam

1,415 views
1,299 views

Published on

bbcon 2013

Published in: Technology, Business
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,415
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
14
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Homepage Design Slam

  1. 1. 09/30/13 #bbcon 1 Homepage Design Slam PRESENTED BY NYLEVA CORLEY, INFORMATION ARCHITECT MICHAEL CHANG, CREATIVE DIRECTOR #bbcon
  2. 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. 3. 09/30/13 #bbcon 3 WHO WE ARE
  4. 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. 5. 09/30/13 #bbcon 5 WHY WE’RE HERE
  6. 6. 09/30/13 #bbcon 6 IT’S A MULTI-DEVICE WORLD Credit: ormlondon.com
  7. 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. 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. 9. 09/30/13 #bbcon 9 CAN’T IGNORE THE TRENDS Credit: dotcominfoway.com
  10. 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. 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. 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. 13. 09/30/13 #bbcon 13 BOUNCE RATE TRENDS mobile tablet desktop Organization B: Hospital
  14. 14. 09/30/13 #bbcon 14 RWD TOOLS WE USE
  15. 15. 09/30/13 #bbcon 15 PRIORITIZATION Content Audit
  16. 16. 09/30/13 #bbcon 16 PRIORITIZATION Sitemap
  17. 17. 09/30/13 #bbcon 17 PRIORITIZATION Page Description Diagrams
  18. 18. 09/30/13 #bbcon 18 LAYOUT Layout Patterns include: Credits:LukeWroblewski,JoshuaJohnson http://bit.ly/wZCiPcandhttp://bit.ly/HeOmq0
  19. 19. 09/30/13 #bbcon 19 LAYOUT Layout Patterns include: Credits:LukeWroblewski,JoshuaJohnson http://bit.ly/wZCiPcandhttp://bit.ly/HeOmq0
  20. 20. 09/30/13 #bbcon 20 LAYOUT Layout Patterns include: Credits:LukeWroblewski,JoshuaJohnson http://bit.ly/wZCiPcandhttp://bit.ly/HeOmq0
  21. 21. 09/30/13 #bbcon 21 LAYOUT Layout Patterns include: Credits:LukeWroblewski,JoshuaJohnson http://bit.ly/wZCiPcandhttp://bit.ly/HeOmq0
  22. 22. 09/30/13 #bbcon 22 LAYOUT Layout Patterns include: Credits:LukeWroblewski,JoshuaJohnson http://bit.ly/wZCiPcandhttp://bit.ly/HeOmq0
  23. 23. 09/30/13 #bbcon 23 LAYOUT Navigation Patterns include: Credit:BradFrost http://bit.ly/zwyv2dandhttp://bit.ly/QsaFk5
  24. 24. 09/30/13 #bbcon 24 LAYOUT Navigation Patterns include: Credit:BradFrost http://bit.ly/zwyv2dandhttp://bit.ly/QsaFk5
  25. 25. 09/30/13 #bbcon 25 LAYOUT Navigation Patterns include: Credit:BradFrost http://bit.ly/zwyv2dandhttp://bit.ly/QsaFk5
  26. 26. 09/30/13 #bbcon 26 LAYOUT Navigation Patterns include: Credit:BradFrost http://bit.ly/zwyv2dandhttp://bit.ly/QsaFk5
  27. 27. 09/30/13 #bbcon 27 LAYOUT Navigation Patterns include: Credit:BradFrost http://bit.ly/zwyv2dandhttp://bit.ly/QsaFk5
  28. 28. 09/30/13 #bbcon 28 LAYOUT Navigation Patterns include: Credit:BradFrost http://bit.ly/zwyv2dandhttp://bit.ly/QsaFk5
  29. 29. 09/30/13 #bbcon 29 LAYOUT Navigation Patterns include: Credit:BradFrost http://bit.ly/zwyv2dandhttp://bit.ly/QsaFk5
  30. 30. 09/30/13 #bbcon 30 LAYOUT Wireframes
  31. 31. 09/30/13 #bbcon 31 OUR DESIGN EXAMPLES
  32. 32. 09/30/13 #bbcon 32 CMS REDESIGN Current project
  33. 33. 09/30/13 #bbcon 33 PEER-TO-PEER REDESIGN Site launches tomorrow (10/1)
  34. 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. 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. 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. 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. 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!

×