• Like
Responsive Design: What is it? How do we do it? How much will it cost?
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.

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


Presentation given at the North Carolina Tech4Good Conference in Chapel Hill, NC – June 7, 2013 …

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
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads


Total Views
On SlideShare
From Embeds
Number of Embeds



Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

    No notes for slide
  • ----- Meeting Notes (6/6/13 21:37) -----So, let's see what Wikipedia tells us responsive design is…what's the key point in this sentence? "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's take a look at what'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't recognized.
  • ----- Meeting Notes (6/6/13 22:46) -----Ok, let's discuss responsive design principles. I'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'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.


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