Progressive Enchancement: Crafting a Responsive Redesign
Download as PPT, PDF0 likes574 views
The document presents a comprehensive overview of progressive enhancement and responsive design, emphasizing its importance for optimizing web experiences across various devices. It discusses the involved phases of design and development, the significance of understanding user needs, and tools for effective wireframing and implementation. Additionally, it highlights specific challenges and resources for developing responsive websites tailored for nonprofit organizations.
Progressive Enchancement: Crafting a Responsive Redesign
- 1. Progressive Enhancement: Crafting a Responsive Redesign #14NTCThink Karin Tracy; Daniel Ferro; Sean Powell
- 3. Introductions Happy Saturday! Karin Tracy; VP, Creative Services – Confluence Daniel Ferro; Sr. Interactive Designer – Forum One Sean Powell; Director– The Engage Group (TEG) Slide 2Progressive Enhancement: #14NTCThink @ConfluenceCorp @DFerroF1 @SeanPowell
- 4. Introductions - Confluence Confluence is a technology planning and web design /development company created to serve nonprofit organizations and foundations. We have 4 areas of service: Slide 3Progressive Enhancement: #14NTCThink 1 Technology planning and consulting 2 Graphic and web design 3 Open source CMS / CRM; Salesforce partner 4 Open source support and maintenance
- 5. Introductions – Forum One Forum One is a digital communications firm focused on driving progress on issues of importance such as health, education, the environment, and international development. Service offerings include: Slide 4Progressive Enhancement: #14NTCThink 1 Internet strategy 2 Interactive Design for Web and Mobile 3 Branding 4 Accessibility and usability engineering
- 6. Introductions – The Engage Group The Engage Group manages all production phases of online communication, marketing, and fundraising for nonprofits and the agencies that serve them. Slide 5Progressive Enhancement: #14NTCThink 1 Responsive web design and development 2 Online campaign management 3 CRM and CMS Migrations 4 Application development
- 7. Show of Hands Slide 6Progressive Enhancement: #14NTCThink 1. Heard of responsive design? 2. Considering responsive design? 3. Actively planning responsive? 4. Already have responsive in place?
- 8. RESPONSIVE DESIGN In Four Slides!
- 9. Quick Overview of Responsive Design “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 to mobile phones).” Slide 8Progressive Enhancement: #14NTCThink Ethan Marcotte Coined term responsive A List Apart, 2010
- 10. Summary Responsive Design is basically 1. One site to rule them all Responsive Design is not 1. Separate mobile site 2. Simply being visible on a mobile device Slide 9Progressive Enhancement: #14NTCThink
- 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.” Slide 10Progressive Enhancement: #14NTCThink Pete Cashmore Founder/CEO - Mashable
- 12. And 2014? Slide 11Progressive Enhancement: #14NTCThink Mobile users will surpass desktop users in 2014. This is the year to redevelop websites using responsive design principles.
- 13. RESPONSIVE REDESIGN Guinea pig? NTEN!
- 14. Current NTEN Website - www.nten.org Slide 13Progressive Enhancement: #14NTCThink Desktop/Laptop Tablet Phone
- 15. What Can Be Improved? Slide 14Progressive Enhancement: #14NTCThink • Site reflects outdated design trends • Site is a fixed, static width (1,024 pixels wide) • Was the “lowest common denominator” in 2004/2005 and we have stuck with it • Most importantly, it’s NOT responsive • Notice how the visual display is the same on all three devices • Fonts and column sizes just don’t make sense on smaller devices • No fluidity in column widths/ratio • Have to zoom in to read, click, search < laptop or large tablet
- 16. What Can Be Improved?, cont. Slide 15Progressive Enhancement: #14NTCThink • Content never changes based on device size • Content decisions for one size might not be appropriate for all sizes / bandwidth • Responsive allows you to show/hide content based on device width • “Finger-friendly” decisions haven’t been made • Buttons, search field, links
- 17. Responsive Design, Step-by-Step Slide 16Progressive Enhancement: #14NTCThink • Design discovery phase • Understanding audience members • Reviewing Google Analytics • Creation of user personas • Functional Requirements • Content plan / Information Architecture • Prototyping / Wireframes • User interface design • HTML / CSS development
- 18. Prototyping / Wireframes Slide 17Progressive Enhancement: #14NTCThink • Determining breakpoints (3, 4?) • Planning content for each breakpoint • May decide that phone-sized breakpoints should display less content, for example • Consider types of wireframes • Low fidelity (paper sketches) • High fidelity (static, electronic) • Code-based prototype (HTML, CSS – can be based on an existing framework) • Wireframe, then test! Gather actual users for feedback
- 19. Low Fidelity Wireframes Slide 18Progressive Enhancement: #14NTCThink
- 20. High Fidelity Wireframes Slide 19Progressive Enhancement: #14NTCThink
- 21. High Fidelity Wireframes Slide 20Progressive Enhancement: #14NTCThink
- 22. Code-based Wireframes Slide 21Progressive Enhancement: #14NTCThink bit.ly/1gMcnGq
- 23. Wireframing - Tools Slide 22Progressive Enhancement: #14NTCThink • Low Fidelity Sketch Templates • App Sketchbook (bit.ly/1pSiBee) – paper notepads with different breakpoints • SneakPeek (sneakpeekit.com) – ready to print templates • High Fidelity Templates • Illustrator templates by Rubber Cheese (bit.ly/1g3Op7T) • Guide creator (plugin) for Photoshop (www.guideguide.me) • Great article by Smashing Magazine about wireframing within InDesign (bit.ly/1eJF494)
- 24. Wireframing - Tools, cont. Slide 23Progressive Enhancement: #14NTCThink • Wireframe in the browser • Bootstrap (getbootstrap.com) • UX Pin (uxpin.com) • Adobe Edge Reflow (part of Adobe Creative Cloud; html.adobe.com/edge/reflow/) • Foundation (foundation.zurb.com) • Wirefy (getwirefy.com) • Jetstrap (jetstrap.com) • Balsalmiq (www.balsamiq.com)
- 25. Responsive Design, Step-by-Step Slide 24Progressive Enhancement: #14NTCThink • Design discovery phase • Understanding audience members • Reviewing Google Analytics • Creation of user personas • Content plan / Information Architecture • Prototyping / Wireframes • User interface design • HTML / CSS development
- 26. Design Slide 25Progressive Enhancement: #14NTCThink • Finger-friendly mobile interface elements played a large part in the interface design decisions of this redesign • The “hero” photo is an important factor in the emotional impact of a homepage and was carefully selected to tie in with the idea of technology being leveraged to drive positive social change • The visual design incorporates many modern web trends to make it feel current, such as rounded san- serif web fonts
- 27. Flat Design Slide 26Progressive Enhancement: #14NTCThink • Less bevels, drop shadows, gradients and realistic textures in favor of simple shapes and solid color blocks. Typically incorporates larger fonts as well.
- 28. Vertical Design Slide 27Progressive Enhancement: #14NTCThink • Primarily Vertical, single column design instead of multiple columns of content • Is more friendly for mobile browsing • Allows more focus on content blocks. Less distraction by side “widgets” • Is more simple. Less content is being thrown at user at once. • bit.ly/1iuPBIy
- 29. Large Interactive Elements Slide 28Progressive Enhancement: #14NTCThink • Large finger-friendly interactive elements even in desktop view. • Makes traditionally boring or frustrating web elements such as forms, buttons and links seem more fun and easy to use.
- 30. Design - Tools Slide 29Progressive Enhancement: #14NTCThink • Traditionally, web design has primarily been done in tools such as Photoshop, Fireworks or Illustrator. • These programs have limitations when it comes to responsive design: the designs are fixed. The programs have no simple way of rearranging elements based on browser width without creating an entirely new document. • New tools are emerging that allow designs that dynamically change as the browser width changes: • Adobe Edge Reflow: http://html.adobe.com/edge/reflow • Macaw: http://macaw.co/ • Webflow: https://webflow.com/
- 31. Responsive Design, Step-by-Step Slide 30Progressive Enhancement: #14NTCThink • Design discovery phase • Understanding audience members • Reviewing Google Analytics • Creation of user personas • Content plan / Information Architecture • Prototyping / Wireframes • User interface design • HTML / CSS development
- 32. Development – Getting Started Slide 31Progressive Enhancement: #14NTCThink Picking a framework or not using one at all… •Be judicious about the framework components that you use • If you are going to use a framework like Foundation or Bootstrap • Do customize to your specific needs • Don’t load the entire framework • Avoid the kitchen sink approach •Or simply assemble the parts you need • Your favorite grid + CSS helpers + js library • Reinforces a spartan approach
- 33. Development – Responsive Techniques Slide 32Progressive Enhancement: #14NTCThink • Grids/media queries • There are elevenbilliony grids out there • Create your own: http://www.adamkaplan.me/grid/ • Fluid and fixed (ish) width • Reflow • Tables • Handling images on multiple devices • Srcset • Picturefill.js • Imager.js • Cross browser/fallback support
- 34. Development – Hardest parts/keys Slide 33Progressive Enhancement: #14NTCThink • Deciding on breakpoints • Flow and resizing • Knowing the ins and outs of viewport, zoom and reference pixels • High res/retina displays • Figuring out proportions • Target/context = result* • A way to determine font size or relative size • 24/16=1.5em *http://alistapart.com/article/fluidgrids
- 35. Development – Diving In Slide 34Progressive Enhancement: #14NTCThink • Mobile first perspective • Initial framework and implementation testing on mobile based width browsers and device simulators (short iterations) • First breakpoint is a mobile phone width and move up from there • Globalize your CSS • Headers, fonts, colors, etc • Break the design down into components • Separating out navigation or the footer into separate components • Allows for easier testing and troubleshooting
- 36. Development – Workflow Tools Slide 35Progressive Enhancement: #14NTCThink Yeoman = Grunt + Bower + Yo Scaffolding For this presentation’s project I used the Yeoman Mobile generator which comes bundled with… •Live reload, responsive screenshot automation, Browserstack automation, responsive image generator, minification and image compression/optimization, jshint, and many more <2 minute setup time (you’ll need Nodejs/Yeoman installed)
- 37. Development – Workflow Tools Cont. Slide 36Progressive Enhancement: #14NTCThink Step-by-step… 1.“yo mobile” 2.Code some, benefit from live reload, code some more, benefit some more from live reload • Across multiple devices simultaneously 3.Negotiate what feels like a multinational peace treaty across browser and device through Browserstack 4.Create distro • Minified and compressed: 2.5 mb to 800kb 5.(Non) Profit
- 38. Development – Other notes Slide 37Progressive Enhancement: #14NTCThink • Custom fonts took up 80% of page load • Didn’t test cross browser compatibility • Positioning, differences in how margin and padding is applied • Fallback support for media queries • Modernizr, respond.js, selectivzr
- 39. Development – More Resources Slide 38Progressive Enhancement: #14NTCThink • Brad Frost’s comprehensive collection on Responsive patterns, resources and news • http://bradfrost.github.io/this-is-responsive/ • Less • http://lesscss.org/ • Sass • http://sass-lang.com/ • Localtunnel – tunnels your local environment to the web • http://progrium.com/localtunnel/
- 40. Development – Website and Repo Slide 39Progressive Enhancement: #14NTCThink • Website • http://ntc.teg.me • Github • https://github.com/seanpowell/ntc2014
- 41. NTEN Website Comparison – Desktop/Laptop Slide 40Progressive Enhancement: #14NTCThink Current New
- 42. NTEN Website Comparison - Tablet Slide 41Progressive Enhancement: #14NTCThink Current New
- 43. NTEN Website Comparison - Phone Slide 42Progressive Enhancement: #14NTCThink Current New
- 45. Stay in touch Slide 44Progressive Enhancement: #14NTCThink Karin Tracy @ConfluenceCorp Daniel Ferro @DFerroF1 Sean Powell @SeanPowell
- 46. What did you think? Evaluate this session! Or, search by session title at www.nten.org/ntc/eval When you evaluate a session, you will be entered to win a prize!