Homepage Design Slam
38
09/30/13 #bbcon 1 Homepage Design Slam PRESENTED BY NYLEVA CORLEY, INFORMATION ARCHITECT MICHAEL CHANG, CREATIVE DIRECTOR #bbcon
-
Upload
blackbaud -
Category
Technology
-
view
107 -
download
1
description
bbcon 2013
Transcript of Homepage Design Slam
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
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
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:
Cre
dits
: Lu
ke
Wro
ble
wski, J
osh
ua
Jo
hn
so
n
http
://bit.ly
/wZ
CiP
c a
nd
http
://bit.ly
/He
Om
q0
09/30/13 #bbcon 19
LAYOUT
Layout Patterns include:
Cre
dits
: Lu
ke
Wro
ble
wski, J
osh
ua
Jo
hn
so
n
http
://bit.ly
/wZ
CiP
c a
nd
http
://bit.ly
/He
Om
q0
09/30/13 #bbcon 20
LAYOUT
Layout Patterns include:
Cre
dits
: Lu
ke
Wro
ble
wski, J
osh
ua
Jo
hn
so
n
http
://bit.ly
/wZ
CiP
c a
nd
http
://bit.ly
/He
Om
q0
09/30/13 #bbcon 21
LAYOUT
Layout Patterns include:
Cre
dits
: Lu
ke
Wro
ble
wski, J
osh
ua
Jo
hn
so
n
http
://bit.ly
/wZ
CiP
c a
nd
http
://bit.ly
/He
Om
q0
09/30/13 #bbcon 22
LAYOUT
Layout Patterns include:
Cre
dits
: Lu
ke
Wro
ble
wski, J
osh
ua
Jo
hn
so
n
http
://bit.ly
/wZ
CiP
c a
nd
http
://bit.ly
/He
Om
q0
09/30/13 #bbcon 23
LAYOUT
Navigation Patterns include:
Cre
dit: B
rad
Fro
st
http
://bit.ly
/zw
yv2
d a
nd
http
://bit.ly
/Qsa
Fk5
09/30/13 #bbcon 24
LAYOUT
Navigation Patterns include:
Cre
dit: B
rad
Fro
st
http
://bit.ly
/zw
yv2
d a
nd
http
://bit.ly
/Qsa
Fk5
09/30/13 #bbcon 25
LAYOUT
Navigation Patterns include:
Cre
dit: B
rad
Fro
st
http
://bit.ly
/zw
yv2
d a
nd
http
://bit.ly
/Qsa
Fk5
09/30/13 #bbcon 26
LAYOUT
Navigation Patterns include:
Cre
dit: B
rad
Fro
st
http
://bit.ly
/zw
yv2
d a
nd
http
://bit.ly
/Qsa
Fk5
09/30/13 #bbcon 27
LAYOUT
Navigation Patterns include:
Cre
dit: B
rad
Fro
st
http
://bit.ly
/zw
yv2
d a
nd
http
://bit.ly
/Qsa
Fk5
09/30/13 #bbcon 28
LAYOUT
Navigation Patterns include:
Cre
dit: B
rad
Fro
st
http
://bit.ly
/zw
yv2
d a
nd
http
://bit.ly
/Qsa
Fk5
09/30/13 #bbcon 29
LAYOUT
Navigation Patterns include:
Cre
dit: B
rad
Fro
st
http
://bit.ly
/zw
yv2
d a
nd
http
://bit.ly
/Qsa
Fk5
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!
