Lessons Learned from Responsive Design
Download as PPTX, PDF0 likes652 views
This document discusses lessons learned from implementing responsive web design (RWD) for various nonprofit organizations. It provides four key lessons: 1) Assess website designs and objectives through annual post-season reviews; 2) Engage audiences by building for their attention spans, simplifying calls-to-action, and facilitating sharing; 3) Focus on creating and optimizing content; 4) "Open your (web) horizons" by prioritizing mobile access, using techniques like media queries and fluid designs, and testing across environments. Case studies are presented on how the American Diabetes Association, National Kidney Foundation, World Wildlife Fund, and Be The Match applied these lessons in their RWD implementations.
Lessons Learned from Responsive Design
- 1. QUESTION: What separates a design that is trendy compared to a design that is useful?
- 2. It’s a RWD DUEL, Y’ALL! TEAM LORETTA TEAM BRAD TEAM LORETTA TEAM DOLLY DOLLYPARTONENTERTAINMENT.COM BRADPAISLEY.COM
- 3. • 61% they will leave if they can’t find what they need • 48% feel the company doesn’t care for their business 61% will leave if they can’t find what they need 48% feel the company doesn’t care for their business BUT… • 67% will CONTINUE ON if they have a positive experience
- 4. 67% will CONTINUE ON if they have a positive experience
- 5. QUESTION: ANSWER: What separates a design Responsive Web Design, that is trendy compared y’all! to a design that is useful?
- 6. RWD LESSONS LEARNED AS told THROUGH Country MUSIC! Matthew Mielcarek, VP, Strategy & UX Design Brenda Miele, Creative Director charitydynamics.com
- 7. LESSON #1 “Forever and Ever, Amen”
- 8. Lesson #1: Assess Your Designs
- 9. Lesson #1: Assess Your Designs Traffic Sources What’s This Mean? • Direct traffic is high meaning you have a lot of visitors coming from email, social media or other places that mention the URL clearly • Over 40% of referral is from Facebook – social media love! Top Traffic Source Cities: 1. Chicago 2. New York 3. Deerfield 4. Houston 5. Alexandria Top Visitors, but not necessarily top performers (Boston missing, NYC is #14)
- 10. Lesson #1: Assess Your Designs REMAIN FOCUSED ON DESIGN OBJECTIVES
- 11. Annual Post Season Assessment: American Diabetes Association Year 1 Year 2 Year 3
- 12. 2012 Assessment 1 2 3 4 5 6 7 8 10 9 30 12 11
- 13. • At the time, only 12% of visitors were using mobile devices • ADA had a mobile site – not responsive – the #1 link that was clicked was to show the full site • Urgent priority to launch a responsive site for the next event season 2012 Assessment
- 14. 2013 Assessment
- 15. 2013 Assessment
- 16. 2013 Assessment
- 17. 2014 Assessment • Post event assessment highlighted relatively high registration abandonment rate • Attributed to overly complicated search process • Plan to refine and simplify search for subsequent event season
- 18. Lesson #1: Assess Your Designs • Remain Focused on Objectives • Build Assessment in to your Organizational Process • Refine and Optimize when Appropriate
- 19. LESSON #2 “I Like It, I Love It!”
- 20. Lesson #2: Engage Your Audience Ever Hear of A.D.D.? Think your audience might have it?
- 21. Lesson #2: Engage Your Audience 21 #bbcon
- 22. Lesson #2: Engage Your Audience • We’ve increased our reach • No more barriers of multiple sites • Consolidated analytics • We are on trend! 22 #bbcon
- 23. I Like It, I Love It, I Want Some More of It! BLAH Case in Point… I LIKE IT, I LOVE IT! National Kidney Foundation! BLAH BLAH BLAH
- 24. HOW DO WE KEEP THEM FOCUSED & LOVING US?
- 25. Lesson #2: Engage Your Audience • RWD Lead us to: • Recognizing our Audience • Improving Engagement Paths • Designing for emotion
- 26. LESSON #3 ENGAGE YOUR AUDIENCE
- 27. • Up front: “When, Where, Who” • Simplified CTAs. • Hello Social share!
- 28. Lesson #2: Engaging Your Audience • Build a platform for your AUDIENCE • Remember who you are serving • Know Your Action Paths and keep it simple • No one wants to wait around like we did for Dolly’s site! • Take it to the Next Step: Build personas to keep you on track, focused and prioritizing
- 29. LESSON #3 “You’re Still the One”
- 30. Traffic Originating on Homepage (and falling)
- 31. Lesson #3: Focus on Content Attracts audiences through SEO Engages audiences to stay Connects, builds trust and creates moments of truth
- 33. Lesson #3: Focus on Content • Complex, diverse organization • Align tone to mission • Create local connection with more frequently updated content
- 34. Lesson #3: Focus on Content
- 35. Lesson #3: Focus on Content • Original content attracts website visitors to your site and organization • Your homepage is the most popular but not primary entry point • Create tools that facilitate content creation and contribution
- 36. LESSON #4 “WIDE OPEN SPACES” RWD = OPENS YOUR (WEB) HORIZONS
- 37. 37 #bbcon
- 38. 38 #bbcon
- 39. 39 #bbcon
- 40. Lesson #4: Open Your (Web) Horizons • Prioritize your need • Get buy in from your stakeholders • Don’t ever say NEVER! 40 #bbcon
- 41. Lesson #4: Open Your (Web) Horizons • Case in Point: World Wildlife Fund • Rebranding New IFE Program • Decided to use TeamRaiser as platform • Needed everything to be Responsive • BIGGEST PRIORITY: Allow large % of mobile fundraisers to log in on 41 #bbcon mobile / tablet
- 42. Lesson #4: Opening Up Your (Web) Horizons 42 #bbcon
- 43. Lesson #4: Open Your (Web) Horizons But what about the Participant Center? WE NEED MOBILE FUNDRAISING! 43 #bbcon
- 44. 44 #bbcon
- 45. Lesson #4: Open Your (Web) Horizons With a bit of: • Patience (and a great developer) • CSS • Media Queries MAGIC HAPPENED! 45 #bbcon
- 46. Lesson #4: Opening Up Your (Web) Horizons MEDIA QUERIES 46 #bbcon
- 47. Lesson #4: Opening Up Your (Web) Horizons 47 #bbcon
- 48. 48 #bbcon But wait…. I’m not a developer
- 49. Lesson #4: Open Your (Web) Horizons • Case in Point: Be the Match • Campaign to target Hispanic marrow donors • Nearly three out of four Hispanics (72%) already owned smartphones as of Q3 20131 • BIGGEST PRIORITY: Emails must be mobile ready and work in a 1Nielsen U.S. Digital Consumers Report, 2/2014 number http://www.nielsen.com/us/en/insights/reports/2014/the-us-digital-consumer-report. html of email clients 49 #bbcon
- 50. 50 #bbcon
- 51. Lesson #4: Open Your (Web) Horizons
- 52. Lesson #4: Open Your (Web) Horizons But what about the “bad kids” of email? Lotus Notes 8 & 8.5, Outlook 2000 – 2003, Gmail App, & Windows 52 #bbcon
- 53. Lesson #4: Open Your (Web) Horizons We had to get “nerdy”: • Coded to have a centered, responsive design without media queries. • Fluid design that utilizes display: inline-block & text-align: center. • BONUS: There are only 6 images so even if they don’t “download” they get the full gist of the email MAGIC HAPPENED AGAIN! 53 #bbcon
- 54. 54 #bbcon Test tip: Use Litmus!
- 55. Lesson #4: Open Your (Web) Horizons • Remember: • RWD allows you room to grow: • Your audience • Your website • Your knowledge • NEVER GIVE UP (or take no for an answer ) 55 #bbcon
- 56. Q&A 56 #bbcon
- 57. What Have We Learned? Assess Your Design Engage Your Audience Focus on Content Open Your (Web) Horizons 57 #bbcon
- 58. So Many More Lessons to be Learned
- 59. Don’t forget to complete a session survey! Each completed survey enters you into a drawing to win a complimentary registration to bbcon 2015 in Austin, Texas*. *Blackbaud reserves the right to change or withdraw this promotion at any time, without advance notice. Promotion has no cash value and may not be exchanged, applied to, or combined with any other offer. 59 #bbcon Thank You
Editor's Notes
- #53: Gmail App strips all your media queries & head styles, so it is notoriously hard to work with. Unless you code with a fluid style, Gmail App will show a very tiny version of your desktop email. Gmail app is the #2 most popular email client, so most emails that are sent never look good in it… but this one does.