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

1. !
!
!
April29,2014
ChoicesforResponsiveDesign:
FromtheGroundUporResponsiveRetrofit?
1

2. 2
• A brief intro to Responsive Web Design
• Responsive from the ground up
• Responsive Retrofitting
• Q&A
Today’sWebinar

3. Abriefintroduction
3
ResponsiveWebDesign

4. http://alistapart.com/article/responsive-web-design

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%
}
}

7. clicktoeditmastertextstyles
7
TitleText

8. http://bradfrost.github.io/this-is-responsive/

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.”

12. 12
ResponsivePerformance

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.”

14. TakingaMobileFirstapproach
14
ResponsiveFromtheGroundUp

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

21. MobileLaterisbetterthanMobileNever
21
ResponsiveRetrofitting

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

28. 28
Desktop Mobile
Banner
Content Sidebar
Navigation
Banner
Content
Sidebar
Navigation
Whoops,thesidebarisbelowthecontent!

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

30. 30
http://www.mobilizingwebsites.net

31. https://github.com/izilla/RWD-Retrofit

32. 32
Q&A

33. Thanks!
33