Choices for Responsive Redesign: Ground-up or Responsive Retrofit
•
0 likes•557 views
Every major brand has a web presence that may include product sites, a corporate site, apps and social media. As their customers and constituents transition to mobile consumption of brand assets organizations find they need to rebuild their web sites to be more usable, or responsive, in a variety of contexts. The two main approaches to achieve this are to either redevelop the site and architecture from the ground up, or to responsively retrofit the site over time. Each approach has benefits and drawbacks. This webinar will explain the features and benefits of each and make contingent recommendations for choosing between the two. Topics to be covered include: • Understanding Responsive Design • The Customer’s Multi-device Experience • Ground Up Responsive Redesign: Process and Benefits • Responsive Retrofitting: Process and Benefits • How to decide between ground-up and responsive retrofitting
Report
Share
More Related Content
Viewers also liked
Viewers also liked (7)
Similar to Choices for Responsive Redesign: Ground-up or Responsive Retrofit
Similar to Choices for Responsive Redesign: Ground-up or Responsive Retrofit (20)
More from Cantina
More from Cantina (12)
Recently uploaded
Recently uploaded (20)
Choices for Responsive Redesign: Ground-up or Responsive Retrofit
- 2. 2 • A brief intro to Responsive Web Design • Responsive from the ground up • Responsive Retrofitting • Q&A Today’sWebinar
- 5. 5 Ethan Marcotte Responsive Web Design http://bit.ly/1bwP3sU “Rather than tailoring disconnected designs to each of an ever-increasing number of web devices, we can treat them as facets of the same experience. We can design for an optimal viewing experience, but embed standards-based technologies into our designs to make them not only more flexible, but more adaptive to the media that renders them. In short, we need to practice responsive web design.”
- 6. 6 TheComponentsofRWD FluidGrids FlexibleImages MediaQueries B C D A FE B F E A D C @media screen and (min-‐device-‐width: 480px ) { .col-‐2-‐3 { width: 66.66% } ! .col-‐1-‐3 { width: 33.33% } }
- 9. 9 ExpandingtheDefinitionofRWD • As Responsive Web Design is adopted and faces real-world challenges, the components have expanded (and become more complex) • Responsive + Server Side = RESS • Adaptive Delivery • Responsive Email • Responsive Typography • Responsive and Content Management Systems • Et cetera…
- 10. 10 Jeffrey Zeldman, Responsive Design. I don’t think that word means what you think it means. http://bit.ly/oP8eei “...the purpose behind “responsive design”—the concept of what it strives to achieve—should be separated from the specific techniques used to achieve it. As the worldwide community embraces Ethan’s idea (and as new methods of CSS layout become practical), the techniques of responsive design will continue to improve and, dare I say it, adapt.”
- 11. 11 Mark Boulton Responsive Web Design – Defining the Damn Thing http://markboulton.co.uk/journal/rwd-dtdt “Responsive design has grown into a term that represents change above all else.”
- 13. 13 Guy Podjarny, Performance Implications of Responsive Design http://www.guypo.com/mobile/performance-implications-of-responsive- design-book-contribution/ “Responsive Web Design (RWD) tackles many problems, and it’s easy to get lost in questions around how maintainable, future friendly or cool your responsive website will be. In the midst of all of these, it’s important to not lose sight of how fast will it be. Performance is a critical component in your user’s experience, and many case studies demonstrate how it affects your users’ satisfaction and your bottom line.”
- 15. 15 Why ResponsiveFromtheGroundUp? • Allows your site to take advantage of the latest and greatest techniques and practices ��� Makes it easy to focus on key factors such as content strategy, performance and process • Leads to a consistent experience for all users • Future-friendly & standards-based when done right • So you a setting a great foundation for future device support and changes
- 16. 16 KeyConcernsForGround-upResponsive • Doing a complete redesign of your site may not be feasible at this moment • Time and cost implications can be daunting • Designing Mobile First and responsive is challenging • Requires an understanding of content strategy, new design patterns, and performance design • Testing such a design is more difficult than some alternatives, such as mobile- specific sites
- 17. 17 ResponsiveDesign:TheBasics • Take a Mobile First approach • Understand your content strategy • Understand the impact on your architecture • For example, content management systems • Set your breakpoints around your design needs, not devices • Consider implementing back-end, adaptive solutions to support your front-end techniques
- 18. 18 WhyMobileFirst? • Taking a Mobile First approach means the adoption of the constraints of the mobile platform as key concerns for your design • Small screens • Slower processors • Variable connection speeds • Adopting these constraints allows you to focus on what matters • Implementing for the most constrained case leads to better results in all cases
- 19. 19 ContentStrategy • A responsive design from the ground up is an ideal time to consider content strategy • Some key things to consider: • Does your site need all of content is has? • What matters most on the page? • How do you handle non-text content across devices with varying capabilities? • How will your CMS manage content?
- 20. 20 MarryingResponsiveAndAdaptive • Responsive design is great for handling front-end design concerns • But it may not be enough to handle all cases • Adding an adaptive, server-side solution can improve the flexibility and performance of your site • But it also increases complexity
- 22. 22 WhyResponsiveRetrofit? • Sometimes you can’t start from scratch • Cost or time to do a Mobile First redesign may be too high • Allows reuse of existing code • Provides a path to dealing with screen-focused responsiveness
- 23. 23 KeyConcernsforResponsiveRetrofits • Reworking the existing design can be challenging • Dealing with retrofitting layouts • Handling non-text content is challenging • Maintaining performance can be difficult • You are adding complexity without refactoring • Does not address many key issues of content and focus • It can be expensive in time and resources
- 24. 24 IncrementalorSite-wideRetrofits • Taking an incremental approach allows you to role out responsive retrofits for sections of the site at a time • You can address underlying issues in a linear fashion • Learn as you go • But it can leave you site feeling “clunky” • Site-wide retrofits cover the whole site • They’re more comprehensive, but can take longer • Not easy to do if you don’t have clean HTML
- 25. 25 Retrofitting:TheBasics • You will need to add the viewport meta tag to you HTML • Disassemble your fixed width layout to allow the page to flex • Determine your new breakpoints • Figure out how to correctly handle the layout of elements on the page • Reimplement or hide elements that do not work for given breakpoints • Test, test, TEST! • Monitor performance
- 26. 26 SelectingBreakpointsforRetrofits • Reimplement your layout for flexibility • User your desktop design as the first breakpoint • Working down from there, flex the page, looking for “breakage” in the design • Elements is the wrong order or placement • Elements that no longer fit the design, e.g., images that extend beyond the content • Create a new breakpoint and implement CSS to fix the issues • Keep working down until you get to your mobile minimum
- 27. 27 HandlingLayoutIssues • By default, your layout will flex based on source order • Content may be out of ideal position based on the other elements on the page • This can result in other important elements being pushed out of view
- 29. 29 HandlingLayoutIssues • By default, your layout will flex based on source order • Content may be out of ideal position based on the other elements on the page • This can result in other important elements being pushed out of view • Consider implementing a off-page layout to provide focus to key content • Alternatively, consider collapsing elements to reduce overall impact on the layout
- 32. 32 Q&A
- 33. Thanks! 33