0
Karin Tracy
• VP, Creative
Services
• Lead
strategy, UX, de
sign
• Dog lover
GOOD MORNING!
• Technology &
creative services
company
• Focus on nonprofits
• Experts in open
source technologies
• Offices in
DC, Balt...
SMALL SAMPLE OF OUR CLIENTS
SMALL SAMPLE OF OUR CLIENTS
1. What is responsive
design?
2. Responsive design
examples
3. Process/workflow
4. Retrofitting site to
RD
5. Level of eff...
1. Heard of
responsive design?
2. Considering
responsive design?
3. Actively planning
responsive?
4. Already have
responsi...
RESPONSIVE DESIGN IS…
“a web design approach aimed at crafting sites to provide an optimal viewing
experience—easy reading...
2013: THE YEAR OF RESPONSIVE DESIGN
“For those of us who create websites and services, all of this leads to a singular
con...
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. Lo...
• CSS3:
content, layout
tailored to
screen size
• Specify
width, height, or
ientation
(landscape/port
rait), resolution
1....
<!-- CSS media query on a link element -->
<link rel="stylesheet" media=”(max-width: 800px)"
href="example.css" />
<!-- CS...
<link rel="stylesheet" media="screen and (color)"
href="example.css" />
COMBINING EXPRESSIONS
And/Or/Not
1. And = AND
2. C...
COMMON SIZE BREAKPOINTS/BREAKRANGES
• Breakpoints – base them
on content/layout
• Not based on device!
• # of layouts can ...
• Ability to scale
= dependent on
fluid design
• No more fixed
width; pixels
• Think in
percentages
and proportion
2. FLUI...
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
qu...
3. IMAGES & VIDEOS RESIZE - WORKAROUNDS
Icon fonts
• Scalable font
• Often open
source
Adaptive Images
• Add .htaccess, 1
...
4. REMOVE NON ESSENTIAL CONTENT
Photo credit: jonasginter, Creative Commons
• Mobile-first mantra
• Focus/concentrate
“mus...
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
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
NEW YORK TIMES
www.nytimes.com | www.nytimes.com/marketing/prototype/
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
• 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
• User Experience
(UX)
• Wireframes
(Interaction
design)
• Visual design
(Interface
design)
• Sketches -- site
structure, hierar
chy
• Breakpoint/rang
e decision
• Content-driven
decisions
DESIGN: USER EXPERIENCE (...
• Communicate
functionality /
process
• Gray boxes
• Interactive is
best
• Isn’t design
DESIGN: WIREFRAMES (INTERACTION DE...
DESIGN: INTERACTION DESIGN
• Design decisions
• Color
• Typography
• Detailed choices
• Photoshop vs.
Style Tiles vs.
design in the
browser
DESIGN: U...
DESIGN: USER INTERFACE DESIGN
• 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, Dr
upal, Joomla!)
DEVELOP: CM...
• Test, test and
more test
• Must test on
actual devices!
• Beg, borrow, [st
eal]
• Use online
testing, too
• Track bugs for
each breakpoint
DEVELOP:...
• Clear
understanding of
content per
breakpoint
• High enough
image resolution
• No different than
fixed design
Photo credit: Express Monorail, Creative Commons
PROS
• Separate codebase
• No legacy issues from
existing code
• Feels “app-like”
• Can be good for
microsite, event, conf...
PROS
• One codebase
• Future friendly
• Tools available
(RWD
Retrofit, MobifyJS)
• Can “buy” you
another 12-16
months befo...
PROS
• Holistic approach
• Content first thought
• Supports widest
variety of end users
• One codebase
• Future friendly
•...
Elements that add time
• Learning curve (will lessen into
2014)
• Content strategy for multiple views
• UX design (wirefra...
Budget
Considerations
• Discovery/educat
ion
• Understanding/b
uy-in from
management
• Needs to be
group decision
Process
...
Testing
• MattKersley.com/r
esponsive
• QuirkTools.com/sc
reenfly/
• Screenqueri.es
• BrowserStack.com
Dealing with IE 7/8...
Responsive
Wireframes
• Froont
• Wirefy
• Jetstrap
• Balsamiq
• ProtoShare
Interface Design
• Photoshop /
graphics editors...
Layout/Grids/Framew
orks
• Golden Grid System
(goldengridsystem.c
om)
• Simple Grid
(SimpleGrid.info)
• Less Framework
(Le...
Navigation
• FlexNav
(github.com/indyplane
ts/flexnav)
• TinyNav
(tinynav.viljamis.com)
• Mean Menu
(meanthemes.com)
• Res...
Responsive Design: What is it? How do we do it? How much will it cost?
Responsive Design: What is it? How do we do it? How much will it cost?
Responsive Design: What is it? How do we do it? How much will it cost?
Responsive Design: What is it? How do we do it? How much will it cost?
Responsive Design: What is it? How do we do it? How much will it cost?
Responsive Design: What is it? How do we do it? How much will it cost?
Responsive Design: What is it? How do we do it? How much will it cost?
Responsive Design: What is it? How do we do it? How much will it cost?
Responsive Design: What is it? How do we do it? How much will it cost?
Responsive Design: What is it? How do we do it? How much will it cost?
Upcoming SlideShare
Loading in...5
×

Responsive Design: What is it? How do we do it? How much will it cost?

1,540

Published on

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.

Published in: Technology, Design
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,540
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
34
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • ----- Meeting Notes (6/6/13 21:37) -----So, let&apos;s see what Wikipedia tells us responsive design is…what&apos;s the key point in this sentence? &quot;Optimal viewing experience--easy reading and navigation with a minimum of resizing, panning and scrolling-- ascorss a wide range of devices.
  • http://tag.microsoft.com/community/blog/t/the_growth_of_mobile_marketing_and_tagging.aspx----- Meeting Notes (6/6/13 21:37) -----That was 2013, let&apos;s take a look at what&apos;s going to happen in 2014. Mobile internet will almost certainly take over desktop internet usage. Mobile browsing has already overtake desktop amongst certain demographics – the young, those who cannot afford home computers or the cost of internet access.
  • ----- Meeting Notes (6/6/13 22:46) -----Where adaptive design fails is when new devices come to market or certain device aren&apos;t recognized.
  • ----- Meeting Notes (6/6/13 22:46) -----Ok, let&apos;s discuss responsive design principles. I&apos;ve broken this down into five main ones.
  • ----- Meeting Notes (6/6/13 22:46) -----Media queries are the root of responsive design. And what&apos;s a breakpoint? A breakpoint is the screen width at which layout adjusts or reflows.The UX London conference site.4 right we have laptop/desktop size. Moving in, tablet in landscape, continuing tablet in portrait and lastly, phone.
  • Default is screen
  • And, Or, Not in order.
  • Area ripe for improvement and we’ll likely see big changes in workflow in next 12-18 months
  • \
  • \
  • Facbook on phones is doing this now.
  • www.wildlife.org
  • www.water.org
  • www.mercycorps.org
  • www.thehorizonfoundation.org
  • www.bostonglobe.com
  • www.nytimes.com
  • www.wildlife.org
  • Nypl.org = Public library site has fluid grid, Pinterest style. Scale down from laptop to tablet, lose the dropdowns on tablet
  • www.barackobama.org
  • http://www.stpaulsschool.org.uk - slick main nav action on resizing
  • http://www.law.gmu.eduNotice how the carousel text scales so small that it’s unreadable
  • www.smashingmagazine.com – good resource. Big use of search bar on tablet/phone.
  • http://stuffandnonsense.co.uk - Fun header
  • So, let’s discuss the process for creative a RD
  • Discovery: typical first step in any web project. You’ll recognize a lot of this process as similar to what you would expect in any web project. I’ll make careful note, however, of elements that are specific or otherwise different for RD.
  • Marketing review – what are your users asking for? What are your competitors providing in terms of a responsive experience?Analytics review – find out what browser configurations your users have. What screen resolution, what devices, what type of connection speed. Try to identify pages that are more, or less, commonly used by devices with smaller screen sizes.
  • Content review and inventory – not specific to RD. Removing ROT – not specific to RD. Determine strategy for device size content. Do you provide less content? Same amount content? Different content to different sizesDevelopment of site map – start to note sections/pages that are specific to certain screen sizes.IA can take many forms.
  • Onto design – my favorite part!
  • Devices will change; content needs to drive the choices for layout breakpoints. Don’t do more major breakpoints than you need – don’t go crazy with them. Minor breakpoints can also be discussed.
  • The wireframes section is critical for responsive design! Tools are listed in the resources section at the end.
  • Intentionally devoid of color, size/weight show importance of information.Developing structure for navigation (dropdowns on large, no drops on tablet portrait, select list on phone)
  • Structure, fabric analogy. Color choices possibly different on smaller screens, typography sizes must adjust naturally.
  • Tools are listed in the resources section at the end.
  • This code is from the iBS site above. Notice how we set the breakpoints and their respective widths/padding.Flash, not responsive in addition to all the other reasons not to use it.
  • Jumping to the first con, a responsive reskinning requires that the existing markup is clean, semantic, uses CSS 2 or 3 for positioning…RWD Retrofit is free files that set and change the viewport on the fly to ensure the right CSS is read.
  • Transcript of "Responsive Design: What is it? How do we do it? How much will it cost?"

    1. 1. Karin Tracy • VP, Creative Services • Lead strategy, UX, de sign • Dog lover GOOD MORNING!
    2. 2. • 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
    3. 3. SMALL SAMPLE OF OUR CLIENTS
    4. 4. SMALL SAMPLE OF OUR CLIENTS
    5. 5. 1. What is responsive design? 2. Responsive design examples 3. Process/workflow 4. Retrofitting site to RD 5. Level of effort
    6. 6. 1. Heard of responsive design? 2. Considering responsive design? 3. Actively planning responsive? 4. Already have responsive in place? SHOW OF HANDS
    7. 7. 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
    8. 8. 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
    9. 9. GETTING READY FOR 2014 http://tag.microsoft.com/community/blog/t/the_growth_of_mobile_marketing_and_tagging.aspx
    10. 10. 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
    11. 11. • CSS3: content, layout tailored to screen size • Specify width, height, or ientation (landscape/port rait), resolution 1. MEDIA QUERIES DEFINE BREAKPOINTS
    12. 12. <!-- 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
    13. 13. <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" />
    14. 14. 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) { … }
    15. 15. • 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
    16. 16. 2. FLUID GRID
    17. 17. 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
    18. 18. 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
    19. 19. 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
    20. 20. 5. RETHINK NAVIGATION FOR SMALL SCREENS • Ask yourself: • What width is too narrow to tap easily? • Clue to breakpoint size
    21. 21. 5. RETHINK NAVIGATION FOR SMALL SCREENS – SIMPLE PADDING Source: http://responsivenavigation.net
    22. 22. 5. RETHINK NAVIGATION FOR SMALL SCREENS – SELECT MENU Source: http://responsivenavigation.net
    23. 23. 5. RETHINK NAVIGATION FOR SMALL SCREENS – SIMPLE TOGGLE MENU Source: http://responsivenavigation.net
    24. 24. 5. RETHINK NAVIGATION FOR SMALL SCREENS – MULTI-TOGGLE MENU Source: http://responsivenavigation.net
    25. 25. 5. RETHINK NAVIGATION FOR SMALL SCREENS – OFF CANVAS SLIDE MENU Source: http://responsivenavigation.net
    26. 26. WORLD WILDLIFE FUND www.wildlife.org Source: http://mediaqueri.es
    27. 27. WATER.ORG www.water.org Source: http://mediaqueri.es
    28. 28. MERCY CORPS www.mercycorps.org
    29. 29. BOSTON GLOBE www.bostonglobe.com Source: http://mediaqueri.es
    30. 30. NEW YORK TIMES www.nytimes.com | www.nytimes.com/marketing/prototype/
    31. 31. NY PUBLIC LIBRARY www.nypl.org Source: http://mediaqueri.es
    32. 32. ST. PAUL’S SCHOOL http://www.stpaulsschool.org.uk Source: http://mediaqueri.es
    33. 33. GEORGE MASON U SCHOOL OF LAW www.law.gmu.edu Source: http://mediaqueri.es
    34. 34. SMASHING MAGAZINE www.smashingmagazine.com Source: http://mediaqueri.es
    35. 35. STUFF AND NONSENSE stuffandnonsense.co.uk Source: http://mediaqueri.es
    36. 36. • Research • Information Architecture • Content Strategy
    37. 37. • Industry research • Brand research • Marketing review • Analytics review DISCOVERY: RESEARCH
    38. 38. • Existing site content review • R.O.T. • Device size- specific content • Site map DISCOVERY: IA/CONTENT STRATEGY
    39. 39. • User Experience (UX) • Wireframes (Interaction design) • Visual design (Interface design)
    40. 40. • Sketches -- site structure, hierar chy • Breakpoint/rang e decision • Content-driven decisions DESIGN: USER EXPERIENCE (UX) Photo credit: Kemeny_x, Creative Commons
    41. 41. • Communicate functionality / process • Gray boxes • Interactive is best • Isn’t design DESIGN: WIREFRAMES (INTERACTION DESIGN)
    42. 42. DESIGN: INTERACTION DESIGN
    43. 43. • Design decisions • Color • Typography • Detailed choices • Photoshop vs. Style Tiles vs. design in the browser DESIGN: USER INTERFACE DESIGN
    44. 44. DESIGN: USER INTERFACE DESIGN
    45. 45. • Templates • jQuery • CMS integration
    46. 46. • HTML5 • CSS3 • Media queries for breakpoints • jQuery – no Flash DEVELOP: TEMPLATES/JQUERY
    47. 47. • HTML/CSS integrate with any CMS • Confluence commitment to open source systems (WordPress, Dr upal, Joomla!) DEVELOP: CMS INTEGRATION
    48. 48. • Test, test and more test
    49. 49. • Must test on actual devices! • Beg, borrow, [st eal] • Use online testing, too • Track bugs for each breakpoint DEVELOP: TESTING
    50. 50. • Clear understanding of content per breakpoint • High enough image resolution
    51. 51. • No different than fixed design
    52. 52. Photo credit: Express Monorail, Creative Commons
    53. 53. 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
    54. 54. 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
    55. 55. 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
    56. 56. 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
    57. 57. 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
    58. 58. 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
    59. 59. 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
    60. 60. 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
    61. 61. 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
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×