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.

3. Karin Tracy
• VP, Creative
Services
• Lead
strategy, UX, de
sign
• Dog lover
GOOD MORNING!

4. • 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

5. SMALL SAMPLE OF OUR CLIENTS

6. SMALL SAMPLE OF OUR CLIENTS

7. 1. What is responsive
design?
2. Responsive design
examples
3. Process/workflow
4. Retrofitting site to
RD
5. Level of effort

9. 1. Heard of
responsive design?
2. Considering
responsive design?
3. Actively planning
responsive?
4. Already have
responsive in
place?
SHOW OF HANDS

10. 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 Marcotte
Coined term responsive
A List Apart, 2010

11. 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 Cashmore
Founder/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

12. GETTING READY FOR 2014
http://tag.microsoft.com/community/blog/t/the_growth_of_mobile_marketing_and_tagging.aspx

13. 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

15. • CSS3:
content, layout
tailored to
screen size
• Specify
width, height, or
ientation
(landscape/port
rait), resolution
1. MEDIA QUERIES DEFINE BREAKPOINTS

16. <!-- 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

17. <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" />

18. 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) { … }

19. • 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

20. 2. FLUID GRID

21. 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

22. 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

23. 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, lar
ge?
• Don’t make
assumptions that
can’t be validated

24. 5. RETHINK NAVIGATION FOR SMALL SCREENS
• Ask yourself:
• What width is
too narrow to
tap easily?
• Clue to
breakpoint size

25. 5. RETHINK NAVIGATION FOR SMALL SCREENS
– SIMPLE PADDING
Source: http://responsivenavigation.net

26. 5. RETHINK NAVIGATION FOR SMALL SCREENS
– SELECT MENU
Source: http://responsivenavigation.net

27. 5. RETHINK NAVIGATION FOR SMALL SCREENS
– SIMPLE TOGGLE MENU
Source: http://responsivenavigation.net

28. 5. RETHINK NAVIGATION FOR SMALL SCREENS
– MULTI-TOGGLE MENU
Source: http://responsivenavigation.net

29. 5. RETHINK NAVIGATION FOR SMALL SCREENS
– OFF CANVAS SLIDE MENU
Source: http://responsivenavigation.net

31. WORLD WILDLIFE FUND
www.wildlife.org
Source: http://mediaqueri.es

32. WATER.ORG
www.water.org
Source: http://mediaqueri.es

33. MERCY CORPS
www.mercycorps.org

34. BOSTON GLOBE
www.bostonglobe.com
Source: http://mediaqueri.es

35. NEW YORK TIMES
www.nytimes.com | www.nytimes.com/marketing/prototype/

36. NY PUBLIC LIBRARY
www.nypl.org
Source: http://mediaqueri.es

37. ST. PAUL’S SCHOOL
http://www.stpaulsschool.org.uk
Source: http://mediaqueri.es

38. GEORGE MASON U SCHOOL OF LAW
www.law.gmu.edu
Source: http://mediaqueri.es

39. SMASHING MAGAZINE
www.smashingmagazine.com
Source: http://mediaqueri.es

40. STUFF AND NONSENSE
stuffandnonsense.co.uk
Source: http://mediaqueri.es

42. • Research
• Information
Architecture
• Content
Strategy

43. • Industry
research
• Brand research
• Marketing
review
• Analytics review
DISCOVERY: RESEARCH

44. • Existing site
content review
• R.O.T.
• Device size-
specific content
• Site map
DISCOVERY: IA/CONTENT STRATEGY

45. • User Experience
(UX)
• Wireframes
(Interaction
design)
• Visual design
(Interface
design)

46. • Sketches -- site
structure, hierar
chy
• Breakpoint/rang
e decision
• Content-driven
decisions
DESIGN: USER EXPERIENCE (UX)
Photo credit: Kemeny_x, Creative Commons

47. • Communicate
functionality /
process
• Gray boxes
• Interactive is
best
• Isn’t design
DESIGN: WIREFRAMES (INTERACTION DESIGN)

48. DESIGN: INTERACTION DESIGN

49. • Design decisions
• Color
• Typography
• Detailed choices
• Photoshop vs.
Style Tiles vs.
design in the
browser
DESIGN: USER INTERFACE DESIGN

50. DESIGN: USER INTERFACE DESIGN

51. • Templates
• jQuery
• CMS integration

52. • HTML5
• CSS3
• Media queries
for breakpoints
• jQuery – no
Flash
DEVELOP: TEMPLATES/JQUERY

53. • HTML/CSS
integrate with
any CMS
• Confluence
commitment to
open source
systems
(WordPress, Dr
upal, Joomla!)
DEVELOP: CMS INTEGRATION

54. • Test, test and
more test

55. • Must test on
actual devices!
• Beg, borrow, [st
eal]
• Use online
testing, too
• Track bugs for
each breakpoint
DEVELOP: TESTING

56. • Clear
understanding of
content per
breakpoint
• High enough
image resolution

57. • No different than
fixed design

58. Photo credit: Express Monorail, Creative Commons

60. PROS
• Separate codebase
• No legacy issues from
existing code
• Feels “app-like”
• Can be good for
microsite, event, confe
rence, 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

61. 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

62. 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

64. 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

65. Budget
Considerations
• Discovery/educat
ion
• Understanding/b
uy-in from
management
• Needs to be
group decision
Process
Considerations
• Waterfall process
may not work
• Requires
collaboration, iter
ation, experiment
ation
• Lots of decisions
to make
LEVEL OF EFFORT

67. Testing
• MattKersley.com/r
esponsive
• QuirkTools.com/sc
reenfly/
• 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

68. 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

69. Layout/Grids/Framew
orks
• Golden Grid System
(goldengridsystem.c
om)
• Simple Grid
(SimpleGrid.info)
• Less Framework
(LessFramework.co
m)
Cont.
• Bootstrap
(Twitter.github.io/
bootstrap/)
• ZURB
(Foundation.zurb
.com)
• Skeleton
(Getskeleton.co
m)
RESOURCES

70. Navigation
• FlexNav
(github.com/indyplane
ts/flexnav)
• TinyNav
(tinynav.viljamis.com)
• Mean Menu
(meanthemes.com)
• ResponsiveNavigatio
n.net
Reading
• A List Apart
• Mashable
• Smashing
Magazine
• ResponsiveDesign
Weekly.net
RESOURCES