Upload
karin-tracy
View
115
Download
7
Tags:
Embed Size (px)
DESCRIPTION
Presentation given at the North Carolina Tech4Good Conference in Chapel Hill, NC – June 7, 2013 While responsive design may sound like a buzzword, it has real implications for your nonprofit’s website. This session will cover: • responsive design principles • provide several illustrations of responsive design done well (from small to large • nonprofit sites and a few commercial examples) • explain the process of planning for, and implementing responsive design • discuss ways to retrofit an existing site to responsive • the respective level of effort for responsive projects Additionally, we will share several tools that we have found helpful in the planning, design and implementation phases. Confluence focuses on website design and development using open source content management systems for nonprofits and organizations. We have implemented several responsive sites for our clients over the past 18 months and have invested heavily in training our staff in this important discipline.
Citation preview
RESPONSIV
E DESIG
N
NC
TE
CH
4G
OO
D |
JU
NE
7,
20
13
QUICK IN
TRODUCTI
ON
WH
O A
M I
?
Karin Tracy• VP, Creative
Services• Lead strategy,
UX, design• Dog lover
GOOD MORNING!
• Technology & creative services company
• Focus on nonprofits• Experts in open
source technologies• Offices in DC,
Baltimore, LA, Portland OR
• Clients nationwide• @ConfluenceCorp
4 practices
1. Technology consulting
2. Creative solutions
3. Open source development
4. Salesforce
CONFLUENCE
SMALL SAMPLE OF OUR CLIENTS
SMALL SAMPLE OF OUR CLIENTS
WHAT
SHALL
WE
TALK
ABOUT?1. What is responsive
design?2. Responsive design
examples3. Process/workflow4. Retrofitting site to
RD5. Level of effort
WHAT
IS R
ESPONSIV
E
DESIGN?
SE
CT
I ON
1
1. Heard of responsive design?
2. Considering responsive design?
3. Actively planning responsive?
4. Already have responsive in place?
SHOW OF HANDS
RESPONSIVE DESIGN IS…
“a web design approach aimed at crafting sites to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from desktop computers monitors to mobile phones).”
– Wikipedia
“a web design approach aimed at crafting sites to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from desktop computers monitors to mobile phones).”
Ethan MarcotteCoined term responsiveA List Apart, 2010
2013: THE YEAR OF RESPONSIVE DESIGN
“For those of us who create websites and services, all of this leads to a singular conclusion: A million screens have bloomed, and we need to build for all of them.”
– Pete Cashmore
Pete CashmoreFounder/CEO - Mashable
“For those of us who create websites and services, all of this leads to a singular conclusion: A million screens have bloomed, and we need to build for all of them.”
– Pete Cashmore
GETTING READY FOR 2014
http://tag.microsoft.com/community/blog/t/the_growth_of_mobile_marketing_and_tagging.aspx
Mobile site
1. Different versions of one site
2. Multiple codebase
Adaptive design
1. Sniffs for specific end device
2. Loads pre-defined layout based on result
WHAT RESPONSIVE DESIGN IS NOT
RESPONSIV
E DESIG
N
PRIN
CIPLE
S
SE
CT
I ON
2
• CSS3: content, layout tailored to screen size
• Specify width, height, orientation (landscape/portrait), resolution
1. MEDIA QUERIES DEFINE BREAKPOINTS
<!-- CSS media query on a link element -->
<link rel="stylesheet" media=”(max-width: 800px)" href="example.css" />
<!-- CSS media query within a style sheet -->
<style>
@media (max-width: 600px) {
.facet_sidebar {
display: none;
}
}
</style>
MEDIA QUERY CODE
Consists of
1. Media type• Screen• All
2. Expression• Orientation• Min-width• Max-width• Device-aspect ratio• Device-height• Device-width
<link rel="stylesheet" media="screen and (color)" href="example.css" />
COMBINING EXPRESSIONS
And/Or/Not
1. And = AND
2. Comma = OR
3. Not = NOT@media screen and (color), projection and
(color) { … }
<link rel="stylesheet" media="not screen and (color)" href="example.css" />
COMMON SIZE BREAKPOINTS/BREAKRANGES
• Breakpoints – base them on content/layout
• Not based on device!• # of layouts can range
from 2-5 (ish)• 320 – 480 pixels Phone• 768 – 1025 pixels Tablet• > 1024 Desktop
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) { … }
@media only screen and (min-device-width :768px) and (max-device-width : 1024px) { … }
@media only screen and (min-device-width :768px) and (max-device-width : 1024px) and (orientation: portrait) { … }
@media only screen and (min-device-width :768px) and (max-device-width : 1024px) and (orientation: landscape) { … }
• Ability to scale = dependent on fluid design
• No more fixed width; pixels
• Think in percentages and proportion
2. FLUID GRID
Photo credit: Robert Couse-Baker, Creative Commons
2. FLUID GRID
3. IMAGES & VIDEOS RESIZE
Issues:
1. Have to serve largest version of image to cover all scaled amounts OR
2. Use media queries to serve different images per screensize
To start:
1. No width/height attributes on <img> tag
2. Add img {max-width: 100%;} to CSS
3. IMAGES & VIDEOS RESIZE - WORKAROUNDS
Icon fonts• Scalable font• Often open
source
Adaptive Images• Add .htaccess, 1
php file, javascript call
• Properly sized images created on the fly
• www.adaptive-images.com
4. REMOVE NON ESSENTIAL CONTENT
Photo credit: jonasginter, Creative Commons
• Mobile-first mantra• Focus/concentrate
“must” have content for small sizes
• Ask your audience!• Review analytics to
validate
• RD isn’t about mobile!
• It’s about device size.
• What experience is appropriate for small, medium, large?
• Don’t make assumptions that can’t be validated
5. RETHINK NAVIGATION FOR SMALL SCREENS
• Ask yourself:• What width is
too narrow to tap easily?
• Clue to breakpoint size
5. RETHINK NAVIGATION FOR SMALL SCREENS – SIMPLE PADDING
Source: http://responsivenavigation.net
5. RETHINK NAVIGATION FOR SMALL SCREENS – SELECT MENU
Source: http://responsivenavigation.net
5. RETHINK NAVIGATION FOR SMALL SCREENS – SIMPLE TOGGLE MENU
Source: http://responsivenavigation.net
5. RETHINK NAVIGATION FOR SMALL SCREENS – MULTI-TOGGLE MENU
Source: http://responsivenavigation.net
5. RETHINK NAVIGATION FOR SMALL SCREENS – OFF CANVAS SLIDE MENU
Source: http://responsivenavigation.net
EXAMPLES O
F
RESPONSIV
E DESIG
N
SE
CT
I ON
3
WORLD WILDLIFE FUND
www.wildlife.org
Source: http://mediaqueri.es
WATER.ORG
www.water.org
Source: http://mediaqueri.es
MERCY CORPS
www.mercycorps.org
BOSTON GLOBE
www.bostonglobe.com
Source: http://mediaqueri.es
NY PUBLIC LIBRARY
www.nypl.org
Source: http://mediaqueri.es
ST. PAUL’S SCHOOL
http://www.stpaulsschool.org.uk
Source: http://mediaqueri.es
GEORGE MASON U SCHOOL OF LAW
www.law.gmu.edu
Source: http://mediaqueri.es
SMASHING MAGAZINE
www.smashingmagazine.com
Source: http://mediaqueri.es
STUFF AND NONSENSE
stuffandnonsense.co.uk
Source: http://mediaqueri.es
RESPONSIV
E DESIG
N
PROCESS
SE
CT
I ON
4
DISCOVERY • Research
• Information Architecture
• Content Strategy
• Industry research
• Brand research
• Marketing review
• Analytics review
DISCOVERY: RESEARCH
• Existing site content review
• R.O.T.• Device size-
specific content
• Site map
DISCOVERY: IA/CONTENT STRATEGY
DESIG
N• User Experience
(UX)• Wireframes
(Interaction design)
• Visual design (Interface design)
• Sketches -- site structure, hierarchy
• Breakpoint/range decision
• Content-driven decisions
DESIGN: USER EXPERIENCE (UX)
Photo credit: Kemeny_x, Creative Commons
• Communicate functionality / process
• Gray boxes• Interactive is
best• Isn’t design
DESIGN: WIREFRAMES (INTERACTION DESIGN)
DESIGN: INTERACTION DESIGN
• Design decisions• Color• Typography• Detailed choices• Photoshop vs.
Style Tiles vs. design in the browser
DESIGN: USER INTERFACE DESIGN
DESIGN: USER INTERFACE DESIGN
DEVELO
P • Templates• jQuery• CMS
integration
• HTML5• CSS3• Media queries
for breakpoints
• jQuery – no Flash
DEVELOP: TEMPLATES/JQUERY
• HTML/CSS integrate with any CMS
• Confluence commitment to open source systems (WordPress, Drupal, Joomla!)
DEVELOP: CMS INTEGRATION
TESTI
NG/QA • Test, test and
more test
• Must test on actual devices!
• Beg, borrow, [steal]
• Use online testing, too
• Track bugs for each breakpoint
DEVELOP: TESTING
TRAIN
ING/D
OCUMENTA
TION
• Clear understanding of content per breakpoint
• High enough image resolution
CONTENT
MIGRAT
ION
• No different than fixed design
LAUNCH
You d
id it
!
Photo credit: Express Monorail, Creative Commons
RETROFIT
TING A
N
EXISTI
NG SIT
E
SE
CT
I ON
5
PROS• Separate codebase• No legacy issues from
existing code• Feels “app-like”• Can be good for
microsite, event, conference, etc.
• Works better for sites that can serve limited content to phones
CONS• Not future
friendly• Support costs
for updating two sites
• Content parity (if necessary) is work
RETROFITTING: DEDICATED MOBILE SITE
Cost: Low to moderate
PROS• One codebase• Future friendly• Tools available
(RWD Retrofit, MobifyJS)
• Can “buy” you another 12-16 months before redesign
CONS• Relies on existing
clean, semantic markup
• Hard to use framework tools (Bootstrap, Zurb, etc.) and existing markup
• Extensive testing/QA cycle necessary
RETROFITTING: RESPONSIVE RESKINNING
Cost: Moderate to high
PROS• Holistic approach• Content first
thought• Supports widest
variety of end users• One codebase• Future friendly• Tools available for
IE 7/8 compliance
CONS• Extensive
testing/QA cycle necessary
• Testing on real devices - $
RETROFITTING: DECIDING ON RWD
Cost: High at present
LEVEL O
F EFF
ORT/C
OST
SE
CT
I ON
6
Elements that add time
• Learning curve (will lessen into 2014)
• Content strategy for multiple views
• UX design (wireframing)
• Media queries/CSS• Testing• Project management
Level of Effort• ~80% > effort for RD
through Q2 2014• ~ 50% > following 12-18
months• May even out to ~30%
greater effort than fixed site
Other Choices• Mobile site: Potentially less
at start, future upkeep of two sites
• Adaptive-device (device specific): New devices out every month; phablets – gets mobile or desktop?
LEVEL OF EFFORT
Budget Considerations
• Discovery/education
• Understanding/buy-in from management
• Needs to be group decision
Process Considerations
• Waterfall process may not work
• Requires collaboration, iteration, experimentation
• Lots of decisions to make
LEVEL OF EFFORT
RESOURCES
SE
CT
I ON
7
Testing• MattKersley.co
m/responsive• QuirkTools.co
m/screenfly/• Screenqueri.es• BrowserStack.
com
Dealing with IE 7/8 :(
• Doesn’t support media queries / CSS3
• Respond.js (https://github.com/scottjehl/Respond)
• Modernizr.com
RESOURCES
Responsive Wireframes
• Froont• Wirefy• Jetstrap• Balsamiq• ProtoShare
Interface Design• Photoshop /
graphics editors• Style Tiles (
styletil.es)• Adobe Edge
Reflow (html.adobe.com/edge/reflow/)
RESOURCES
Layout/Grids/Frameworks
• Golden Grid System (goldengridsystem.com)
• Simple Grid (SimpleGrid.info)
• Less Framework (LessFramework.com)
Cont.• Bootstrap
(Twitter.github.io/bootstrap/)
• ZURB (Foundation.zurb.com)
• Skeleton (Getskeleton.com)
RESOURCES
Navigation• FlexNav
(github.com/indyplanets/flexnav)
• TinyNav (tinynav.viljamis.com)
• Mean Menu (meanthemes.com)
• ResponsiveNavigation.net
Reading• A List Apart• Mashable• Smashing
Magazine• ResponsiveDe
signWeekly.net
RESOURCES