Homepage Design Slam
Upcoming SlideShare
Loading in...5
×
 

Homepage Design Slam

on

  • 948 views

bbcon 2013

bbcon 2013

Statistics

Views

Total Views
948
Views on SlideShare
948
Embed Views
0

Actions

Likes
1
Downloads
10
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Homepage Design Slam Homepage Design Slam Presentation Transcript

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