Downloaded 35 times
![• Must test on
actual devices!
• Beg, borrow, [st
eal]
• Use online
testing, too
• Track bugs for
each breakpoint
DEVELOP: TESTING](https://image.slidesharecdn.com/confluenceresponsivedesign-131007132137-phpapp01/75/Responsive-Design-What-is-it-How-do-we-do-it-How-much-will-it-cost-55-2048.jpg)
Uploaded byKarin Tracy
Responsive Design: What is it? How do we do it? How much will it cost?
The document provides an overview of responsive design, outlining its definition, principles, and best practices for creating websites optimized for various devices. It highlights the importance of adapting web designs for an optimal user experience across a range of screen sizes while discussing techniques such as fluid grids, media queries, and user experience considerations. Additionally, it addresses the pros and cons of different site design approaches and includes resources for implementation and testing.
![[BDD 2025 - Artificial Intelligence] AI for the Underdogs: Innovation for Sma...](https://cdn.slidesharecdn.com/ss_thumbnails/ai-aifortheunderdogsinnovationforsmallbusinesses-251124030839-72a599a4-thumbnail.jpg?width=640&height=640&fit=bounds)
![[BDD 2025 - Full-Stack Development] The Modern Stack: Building Web & AI Appli...](https://cdn.slidesharecdn.com/ss_thumbnails/fs-themodernstackbuildingwebaiapplicationswithserverless-251124030844-388cf04f-thumbnail.jpg?width=640&height=640&fit=bounds)
![[BDD 2025 - Full-Stack Development] Digital Accessibility: Why Developers nee...](https://cdn.slidesharecdn.com/ss_thumbnails/fs-digitalaccessibilitywhydevelopersneedtoknowandcarein2025-251127011019-0674441d-thumbnail.jpg?width=640&height=640&fit=bounds)
![[DevFest Strasbourg 2025] - NodeJs Can do that !!](https://cdn.slidesharecdn.com/ss_thumbnails/devfeststrasbourg2025-nodejscandothat-251127142731-da65b6fd-thumbnail.jpg?width=640&height=640&fit=bounds)
Responsive Design: What is it? How do we do it? How much will it cost?
- 3. Karin Tracy • VP,Creative Services • Lead strategy, UX, de sign • Dog lover GOOD MORNING!
- 4. • Technology & creativeservices 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 OFOUR CLIENTS
- 6. SMALL SAMPLE OFOUR CLIENTS
- 7. 1. What isresponsive design? 2. Responsive design examples 3. Process/workflow 4. Retrofitting site to RD 5. Level of effort
- 9. 1. Heard of responsivedesign? 2. Considering responsive design? 3. Actively planning responsive? 4. Already have responsive in place? SHOW OF HANDS
- 10. RESPONSIVE DESIGN IS… “aweb 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 YEAROF 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 FOR2014 http://tag.microsoft.com/community/blog/t/the_growth_of_mobile_marketing_and_tagging.aspx
- 13. Mobile site 1. Different versionsof 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 tailoredto screen size • Specify width, height, or ientation (landscape/port rait), resolution 1. MEDIA QUERIES DEFINE BREAKPOINTS
- 16. <!-- CSS mediaquery 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="screenand (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 toscale = 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.
- 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 NONESSENTIAL 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 NAVIGATIONFOR SMALL SCREENS • Ask yourself: • What width is too narrow to tap easily? • Clue to breakpoint size
- 25. 5. RETHINK NAVIGATIONFOR SMALL SCREENS – SIMPLE PADDING Source: http://responsivenavigation.net
- 26. 5. RETHINK NAVIGATIONFOR SMALL SCREENS – SELECT MENU Source: http://responsivenavigation.net
- 27. 5. RETHINK NAVIGATIONFOR SMALL SCREENS – SIMPLE TOGGLE MENU Source: http://responsivenavigation.net
- 28. 5. RETHINK NAVIGATIONFOR SMALL SCREENS – MULTI-TOGGLE MENU Source: http://responsivenavigation.net
- 29. 5. RETHINK NAVIGATIONFOR SMALL SCREENS – OFF CANVAS SLIDE MENU Source: http://responsivenavigation.net
- 31. WORLD WILDLIFE FUND www.wildlife.org Source:http://mediaqueri.es
- 32.
- 33.
- 34.
- 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 USCHOOL OF LAW www.law.gmu.edu Source: http://mediaqueri.es
- 39.
- 40. STUFF AND NONSENSE stuffandnonsense.co.uk Source:http://mediaqueri.es
- 42. • Research • Information Architecture •Content Strategy
- 43. • Industry research • Brandresearch • Marketing review • Analytics review DISCOVERY: RESEARCH
- 44. • Existing site contentreview • 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.
- 49. • Design decisions •Color • Typography • Detailed choices • Photoshop vs. Style Tiles vs. design in the browser DESIGN: USER INTERFACE DESIGN
- 50. DESIGN: USER INTERFACEDESIGN
- 51. • Templates • jQuery •CMS integration
- 52. • HTML5 • CSS3 •Media queries for breakpoints • jQuery – no Flash DEVELOP: TEMPLATES/JQUERY
- 53. • HTML/CSS integrate with anyCMS • Confluence commitment to open source systems (WordPress, Dr upal, Joomla!) DEVELOP: CMS INTEGRATION
- 54. • Test, testand more test
- 55. • Must teston actual devices! • Beg, borrow, [st eal] • Use online testing, too • Track bugs for each breakpoint DEVELOP: TESTING
- 56. • Clear understanding of contentper breakpoint • High enough image resolution
- 57. • No differentthan fixed design
- 58. Photo credit: ExpressMonorail, 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 addtime • 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-infrom 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 GridSystem (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
Editor's Notes
- #11 ----- 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.
- #13 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.
- #14 ----- Meeting Notes (6/6/13 22:46) -----Where adaptive design fails is when new devices come to market or certain device aren't recognized.
- #15 ----- Meeting Notes (6/6/13 22:46) -----Ok, let's discuss responsive design principles. I've broken this down into five main ones.
- #16 ----- 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.
- #17 Default is screen
- #18 And, Or, Not in order.
- #23 Area ripe for improvement and we’ll likely see big changes in workflow in next 12-18 months
- #28 \
- #29 \
- #30 Facbook on phones is doing this now.
- #32 www.wildlife.org
- #33 www.water.org
- #34 www.mercycorps.org
- #35 www.thehorizonfoundation.org
- #36 www.bostonglobe.com
- #37 www.nytimes.com
- #38 www.wildlife.org
- #39 Nypl.org = Public library site has fluid grid, Pinterest style. Scale down from laptop to tablet, lose the dropdowns on tablet
- #40 www.barackobama.org
- #41 http://www.stpaulsschool.org.uk - slick main nav action on resizing
- #42 http://www.law.gmu.eduNotice how the carousel text scales so small that it’s unreadable
- #43 www.smashingmagazine.com – good resource. Big use of search bar on tablet/phone.
- #44 http://stuffandnonsense.co.uk - Fun header
- #45 So, let’s discuss the process for creative a RD
- #46 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.
- #47 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.
- #48 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.
- #49 Onto design – my favorite part!
- #50 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.
- #51 The wireframes section is critical for responsive design! Tools are listed in the resources section at the end.
- #52 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)
- #53 Structure, fabric analogy. Color choices possibly different on smaller screens, typography sizes must adjust naturally.
- #54 Tools are listed in the resources section at the end.
- #56 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.
- #65 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.