!

!

!

April 29, 2014

Choices for Responsive Design:From the Ground Up or Responsive Retrofit?

1

2

• A brief intro to Responsive Web Design

• Responsive from the ground up

• Responsive Retrofitting

• Q&A

Today’s Webinar

A brief introduction

3

Responsive Web Design

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

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

The Components of RWD

Fluid Grids Flexible Images Media Queries

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

click to edit master text styles

7

Title Text

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

9

Expanding the Definition of RWD• 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

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

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

Responsive Performance

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

Taking a Mobile First approach

14

Responsive From the Ground Up

15

Why Responsive From the Ground Up?• 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

Key Concerns For Ground-up Responsive• 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

Responsive Design: The Basics• 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

Why Mobile First?• 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

Content Strategy• 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

Marrying Responsive And Adaptive• 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

Mobile Later is better than Mobile Never

21

Responsive Retrofitting

22

Why Responsive Retrofit?• 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

Key Concerns for Responsive Retrofits• 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

Incremental or Site-wide Retrofits• 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

Retrofitting: The Basics• 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

Selecting Breakpoints for Retrofits• 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

Handling Layout Issues• 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

Desktop Mobile

Banner

Content Sidebar

Navigation

Banner

Content

Sidebar

Navigation

Whoops, the sidebar is below the content!

29

Handling Layout Issues• 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

30http://www.mobilizingwebsites.net

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

32

Q&A

Thanks!

33