RWD Techniques Workshop

Slide 1

Slide 1 text

Ben Callahan RWD TECHNIQUES @bencallahan Monday, July 29, 13

Slide 2

Slide 2 text

Monday, July 29, 13

Slide 3

Slide 3 text

Collaborative note-taking experiment: http://goo.gl/pyjfKo Monday, July 29, 13

Slide 4

Slide 4 text

#rwdslc Monday, July 29, 13

Slide 5

Slide 5 text

For the Type-A Personalities ‣ Getting Started with RWD ‣ RWD Workflow ‣ Creating Flexibility ‣ RWD Retrofitting ‣ Lessons Learned ‣ Future of RWD Monday, July 29, 13

Slide 6

Slide 6 text

LET’S JUMP IN! Monday, July 29, 13

Slide 7

Slide 7 text

RESPONSIVE WEB DESIGN TECHNIQUES GETTING STARTED WITH RWD Monday, July 29, 13

Slide 8

Slide 8 text

September 9, 2007 6:30am Monday, July 29, 13

Slide 9

Slide 9 text

177% increase in tablet ownership since last year In the US... http://bit.ly/YFW4Ai Monday, July 29, 13

Slide 10

Slide 10 text

80% of consumers multi-task with other devices while watching TV In the US... http://bit.ly/YFW4Ai Monday, July 29, 13

Slide 11

Slide 11 text

26% of consumers own a laptop, tablet & smartphone http://bit.ly/YFW4Ai In the US... Monday, July 29, 13

Slide 12

Slide 12 text

Q1 2013 conversions on tablets surpassed conversions on traditional desktops http://bit.ly/sNpLte In the US... Monday, July 29, 13

Slide 13

Slide 13 text

The web is not fixed width Monday, July 29, 13

Slide 14

Slide 14 text

The penetration of desktop ownership is the same today as it was in 2007. http://bit.ly/zE1zgp In the US... Monday, July 29, 13

Slide 15

Slide 15 text

Mobile vs Desktop Browsing 0 500 1000 1500 2000 2007 2008 2009 2010 2011 2012 2013 2014 2015 Mobile Users Desktop Users http://bit.ly/L5cqiO Monday, July 29, 13

Slide 16

Slide 16 text

0 500 1000 1500 2000 2007 2008 2009 2010 2011 2012 2013 2014 2015 Mobile Users Desktop Users http://bit.ly/L5cqiO Not that far away Monday, July 29, 13

Slide 17

Slide 17 text

Flexibility is the new norm Monday, July 29, 13

Slide 18

Slide 18 text

People are trying to browse your sites on these devices, today Monday, July 29, 13

Slide 19

Slide 19 text

Responsive web design Monday, July 29, 13

Slide 20

Slide 20 text

Ethan Marcotte Article on ALA (http://bit.ly/Wi0xvw) Book via ABA (http://bit.ly/f6TPB7) Monday, July 29, 13

Slide 21

Slide 21 text

RWD 101 ‣ Three Core Techniques - A Fluid Foundation - Flexible Content - Media Queries Monday, July 29, 13

Slide 22

Slide 22 text

A Fluid Foundation Honor the proportions of the design by creating percentage-based layout instead of fixed-width, pixel-based layout. Monday, July 29, 13

Slide 23

Slide 23 text

A Fluid Foundation http://microsoft.com Monday, July 29, 13

Slide 24

Slide 24 text

Flexible Content Once we have a layout which is based on proportions, the content must also respond. Monday, July 29, 13

Slide 25

Slide 25 text

Flexible Content http://stry.us Monday, July 29, 13

Slide 26

Slide 26 text

Media Queries When our content and our design are no longer working in harmony, we need to make a larger shift in layout. Monday, July 29, 13

Slide 27

Slide 27 text

Media Queries http://skinnyties.com Monday, July 29, 13

Slide 28

Slide 28 text

RWD 101 ‣ Three Core Techniques - A Fluid Foundation - Flexible Content - Media Queries Monday, July 29, 13

Slide 29

Slide 29 text

RESPONSIVE WEB DESIGN TECHNIQUES RWD WORKFLOW Monday, July 29, 13

Slide 30

Slide 30 text

Before RWD, we pretended like things were pretty simple. Monday, July 29, 13

Slide 31

Slide 31 text

1024ish 768ish fixed width Monday, July 29, 13

Slide 32

Slide 32 text

GAET grand2013 Monday, July 29, 13

Slide 33

Slide 33 text

DESIGN FRONT-END BACK-END LAUNCH! Linear Workflow Monday, July 29, 13

Slide 34

Slide 34 text

DESIGN FRONT-END BACK-END LAUNCH! THINK ABOUT USERS Linear Workflow Monday, July 29, 13

Slide 35

Slide 35 text

DESIGN FRONT-END BACK-END LAUNCH! Linear Workflow THINK ABOUT USERS THROW IN SOME CONTENT Monday, July 29, 13

Slide 36

Slide 36 text

Slightly Better Linear Workflow CONTENT UX DESIGN FRONT-END BACK-END LAUNCH! Monday, July 29, 13

Slide 37

Slide 37 text

Why hello, RWD. Monday, July 29, 13

Slide 38

Slide 38 text

Why hello, RWD. Monday, July 29, 13

Slide 39

Slide 39 text

Linear Workflow Now with RWD! CONTENT UX DESIGN FRONT-END BACK-END LAUNCH! Monday, July 29, 13

Slide 40

Slide 40 text

Ditto! Now with RWD! Linear Workflow CONTENT UX DESIGN FRONT-END BACK-END LAUNCH! Me too! Monday, July 29, 13

Slide 41

Slide 41 text

This doesn’t work. Monday, July 29, 13

Slide 42

Slide 42 text

Linear Workflow Problem LAUNCH DESIGN FRONT END BACK END CONTENT DECISIONS MADE DECISIONS MADE DECISIONS MADE DECISIONS MADE Monday, July 29, 13

Slide 43

Slide 43 text

We need to invite others into the process Monday, July 29, 13

Slide 44

Slide 44 text

CONTENT UX FRONT-END DESIGN BACK-END “1 Deliverable” Workflow Monday, July 29, 13

Slide 45

Slide 45 text

CONTENT UX FRONT-END DESIGN BACK-END “1 Deliverable” Workflow Monday, July 29, 13

Slide 46

Slide 46 text

CONTENT UX FRONT-END DESIGN BACK-END “1 Deliverable” Workflow Monday, July 29, 13

Slide 47

Slide 47 text

CONTENT UX FRONT-END DESIGN BACK-END “1 Deliverable” Workflow Monday, July 29, 13

Slide 48

Slide 48 text

A “1 deliverable” workflow... is centered on iteration Monday, July 29, 13

Slide 49

Slide 49 text

A “1 deliverable” workflow... requires collaboration Monday, July 29, 13

Slide 50

Slide 50 text

A “1 deliverable” workflow... results in natural decisions Monday, July 29, 13

Slide 51

Slide 51 text

A “1 deliverable” workflow... conflicts with organizational structure Monday, July 29, 13

Slide 52

Slide 52 text

http://www.zeldman.com/2007/07/02/let-there-be-web-divisions/ “...[A]lmost no one who makes websites works in their company or organization’s web division. That’s because almost no company or organization has a web division. And that void on the org chart is one reason we have so many bloated, unusable failures where we should be producing great user experiences.” @zeldman, 2007 Monday, July 29, 13

Slide 53

Slide 53 text

A “1 deliverable” workflow... requires the right team Monday, July 29, 13

Slide 54

Slide 54 text

LAUNCH DESIGN FRONT END BACK END CONTENT DECISIONS MADE DECISIONS MADE DECISIONS MADE DECISIONS MADE CONTENT UX FRONT-END DESIGN BACK-END Monday, July 29, 13

Slide 55

Slide 55 text

LAUNCH DESIGN FRONT END BACK END CONTENT DECISIONS MADE DECISIONS MADE DECISIONS MADE DECISIONS MADE CONTENT UX FRONT-END DESIGN BACK-END UX FRONT-END DESIGN LAUNCH DESIGN FRONT END BACK END CONTENT DECISIONS MADE DECISIONS MADE DECISIONS MADE DECISIONS MADE Monday, July 29, 13

Slide 56

Slide 56 text

ND DESIGN So, how do we advance design through a “1 deliverable” workflow? Monday, July 29, 13

Slide 57

Slide 57 text

WEB DESIGNERS STILL USE PHOTOSHOP! Monday, July 29, 13

Slide 58

Slide 58 text

Dissecting Design PRODUCTIVITY TIME Monday, July 29, 13

Slide 59

Slide 59 text

Dissecting Design PRODUCTIVITY TIME Monday, July 29, 13

Slide 60

Slide 60 text

Dissecting Design PRODUCTIVITY TIME Monday, July 29, 13

Slide 61

Slide 61 text

Establish the Aesthetic DISSECTING DESIGN Monday, July 29, 13

Slide 62

Slide 62 text

Solve the Problem DISSECTING DESIGN Monday, July 29, 13

Slide 63

Slide 63 text

Refine the Solution DISSECTING DESIGN Monday, July 29, 13

Slide 64

Slide 64 text

Monday, July 29, 13

Slide 65

Slide 65 text

Establish the Aesthetic DISSECTING DESIGN Monday, July 29, 13

Slide 66

Slide 66 text

DISSECTING DESIGN ‣ Style Comparisons ‣ Style Tiles ‣ Style Prototypes Establish the Aesthetic Monday, July 29, 13

Slide 67

Slide 67 text

Style Comparisons ESTABLISH THE AESTHETIC “I could create an illustration or a 3D rendering of what I want my new office to look like, but that doesn’t take advantage of his great ideas. It’s dictation, not collaboration. Instead, I show him a Pinterest board my wife and I created.” @danielmall http://danielmall.com/articles/the-post-psd-era/ Monday, July 29, 13

Slide 68

Slide 68 text

Style Comparisons ESTABLISH THE AESTHETIC Light vs Dark Monday, July 29, 13

Slide 69

Slide 69 text

Style Comparisons ESTABLISH THE AESTHETIC Flat vs Textured Monday, July 29, 13

Slide 70

Slide 70 text

Style Comparisons ESTABLISH THE AESTHETIC Illustration vs Photography Monday, July 29, 13

Slide 71

Slide 71 text

Style Tiles ESTABLISH THE AESTHETIC Monday, July 29, 13

Slide 72

Slide 72 text

Style Tiles ESTABLISH THE AESTHETIC Monday, July 29, 13

Slide 73

Slide 73 text

Style Tiles ESTABLISH THE AESTHETIC Monday, July 29, 13

Slide 74

Slide 74 text

Style Prototypes ESTABLISH THE AESTHETIC Monday, July 29, 13

Slide 75

Slide 75 text

USE TOOLS YOU ARE COMFORTABLE WITH TO ESTABLISH THE AESTHETIC HOW TO DECIDE Monday, July 29, 13

Slide 76

Slide 76 text

Cool, so what happens next? Monday, July 29, 13

Slide 77

Slide 77 text

Solve the Problem DISSECTING DESIGN Monday, July 29, 13

Slide 78

Slide 78 text

DISSECTING DESIGN ‣ Static Design Tools ‣ Responsive Design Tools ‣ HTML/CSS Solve the Problem Monday, July 29, 13

Slide 79

Slide 79 text

Static Design Tools SOLVE THE PROBLEM Monday, July 29, 13

Slide 80

Slide 80 text

Static Design Tools SOLVE THE PROBLEM Monday, July 29, 13

Slide 81

Slide 81 text

Static Design Tools SOLVE THE PROBLEM Monday, July 29, 13

Slide 82

Slide 82 text

Responsive Design Tools SOLVE THE PROBLEM Monday, July 29, 13

Slide 83

Slide 83 text

SOLVE THE PROBLEM Responsive Design Tools Monday, July 29, 13

Slide 84

Slide 84 text

SOLVE THE PROBLEM Responsive Design Tools Monday, July 29, 13

Slide 85

Slide 85 text

HTML/CSS SOLVE THE PROBLEM Monday, July 29, 13

Slide 86

Slide 86 text

HTML/CSS SOLVE THE PROBLEM Monday, July 29, 13

Slide 87

Slide 87 text

HTML/CSS SOLVE THE PROBLEM Monday, July 29, 13

Slide 88

Slide 88 text

Layout vs Modules SOLVE THE PROBLEM Monday, July 29, 13

Slide 89

Slide 89 text

Layout vs Modules SOLVE THE PROBLEM Monday, July 29, 13

Slide 90

Slide 90 text

Layout vs Modules SOLVE THE PROBLEM Monday, July 29, 13

Slide 91

Slide 91 text

YOU BEST SOLVE PROBLEMS USING TOOLS YOU ARE FLUENT WITH HOW TO DECIDE Monday, July 29, 13

Slide 92

Slide 92 text

Monday, July 29, 13

Slide 93

Slide 93 text

SOLVE THE PROBLEM Monday, July 29, 13

Slide 94

Slide 94 text

Unconscious Incompetence SOLVE THE PROBLEM Monday, July 29, 13

Slide 95

Slide 95 text

Unconscious Incompetence Conscious Incompetence SOLVE THE PROBLEM Monday, July 29, 13

Slide 96

Slide 96 text

Unconscious Incompetence Conscious Incompetence Conscious Competence SOLVE THE PROBLEM Monday, July 29, 13

Slide 97

Slide 97 text

Unconscious Incompetence Conscious Incompetence Conscious Competence Unconscious Competence SOLVE THE PROBLEM Monday, July 29, 13

Slide 98

Slide 98 text

Fluency SOLVE THE PROBLEM Monday, July 29, 13

Slide 99

Slide 99 text

Refine the Solution DISSECTING DESIGN Monday, July 29, 13

Slide 100

Slide 100 text

DISSECTING DESIGN ‣ Static Design Tools ‣ Design Pairing Refine the Solution Monday, July 29, 13

Slide 101

Slide 101 text

Don’t Use Static Design Tools REFINE THE SOLUTION LAUNCH DESIGN FRONT END BACK END CONTENT DECISIONS MADE DECISIONS MADE DECISIONS MADE DECISIONS MADE Monday, July 29, 13

Slide 102

Slide 102 text

Instead of static design hand-offs, consider design pairing REFINE THE SOLUTION Monday, July 29, 13

Slide 103

Slide 103 text

Design Pairing REFINE THE SOLUTION Monday, July 29, 13

Slide 104

Slide 104 text

Design Pairing REFINE THE SOLUTION Monday, July 29, 13

Slide 105

Slide 105 text

Design Pairing REFINE THE SOLUTION Monday, July 29, 13

Slide 106

Slide 106 text

Design Pairing REFINE THE SOLUTION Monday, July 29, 13

Slide 107

Slide 107 text

Monday, July 29, 13

Slide 108

Slide 108 text

You don’t want to do the long tail more than once REFINE THE SOLUTION Monday, July 29, 13

Slide 109

Slide 109 text

The Switching Point REFINE THE SOLUTION Monday, July 29, 13

Slide 110

Slide 110 text

EFFICIENCY IS KEY WHEN REFINING A DESIGN SOLUTION HOW TO DECIDE Monday, July 29, 13

Slide 111

Slide 111 text

Establish Solve Refine ........................ Comfort ............................... Fluency .......................... Efficiency Guidelines for Selecting Tooling Monday, July 29, 13

Slide 112

Slide 112 text

Establish Solve Refine ............. Style Prototype ....... Sketching + PSD + CSS ............ In-Browser Pairing Tools we use at Sparkbox Monday, July 29, 13

Slide 113

Slide 113 text

CONTENT How do we prioritize content & functionality through a “one deliverable” workflow? Monday, July 29, 13

Slide 114

Slide 114 text

Monday, July 29, 13

Slide 115

Slide 115 text

Content Prototypes [demo] Monday, July 29, 13

Slide 116

Slide 116 text

Photo Credit: Jay Maisel Monday, July 29, 13

Slide 117

Slide 117 text

Photo Credit: Jay Maisel Monday, July 29, 13

Slide 118

Slide 118 text

Photo Credit: Jay Maisel Monday, July 29, 13

Slide 119

Slide 119 text

Group improvisation is a challenge. Aside from the weighty technical problem of collective coherent thinking, there is the very human, even social need for sympathy from all members to bend for the common result. Bill Evans Monday, July 29, 13

Slide 120

Slide 120 text

Slide 121

Slide 121 text

Slide 122

Slide 122 text

Group Improvisation Monday, July 29, 13

Slide 123

Slide 123 text

Group improvisation requires individuals on a team to... be great Monday, July 29, 13

Slide 124

Slide 124 text

Group improvisation requires individuals on a team to... be humble Monday, July 29, 13

Slide 125

Slide 125 text

Group improvisation requires individuals on a team to... be empathetic Monday, July 29, 13

Slide 126

Slide 126 text

Create guidelines instead of rigid process Monday, July 29, 13

Slide 127

Slide 127 text

Invest in people over process Monday, July 29, 13

Slide 128

Slide 128 text

CREATING FLEXIBILITY RESPONSIVE WEB DESIGN TECHNIQUES Monday, July 29, 13

Slide 129

Slide 129 text

CREATING FLEXIBILITY What Needs to Flex ‣ Grids ‣ Layout ‣ Typography ‣ Images ‣ Tables ‣ Video Monday, July 29, 13

Slide 130

Slide 130 text

CREATING FLEXIBILITY What Needs to Flex ‣ Grids ‣ Layout ‣ Typography ‣ Images ‣ Tables ‣ Video Monday, July 29, 13

Slide 131

Slide 131 text

It starts with the grid Monday, July 29, 13

Slide 132

Slide 132 text

body { width: 1000px; } div.main { width: 700px; } aside { width: 280px; } It starts with the grid body { width: 100%; } div.main { width: 70%; } aside { width: 28%; } Monday, July 29, 13

Slide 133

Slide 133 text

body { width: 1000px; } div.main { width: 700px; } It starts with the grid body { width: 100%; } div.main { width: 70%; } target / context = % 700 / 1000 = .7 .7 = 70% Monday, July 29, 13

Slide 134

Slide 134 text

body { width: 1000px; } aside { width: 280px; } It starts with the grid body { width: 100%; } aside { width: 28%; } target / context = % 280 / 1000 = .28 .28 = 28% Monday, July 29, 13

Slide 135

Slide 135 text

Responsive grid systems Monday, July 29, 13

Slide 136

Slide 136 text

CREATING FLEXIBILITY RWD Grid Systems ‣ Foundation ‣ Bootstrap ‣ Skeleton ‣ Responsive.gs ‣ Columnal ‣ ...this list goes on, and on, and on Monday, July 29, 13

Slide 137

Slide 137 text

CREATING FLEXIBILITY Semantic RWD Grid Systems ‣ Semantic.gs ‣ Susy ‣ Zen Grids Monday, July 29, 13

Slide 138

Slide 138 text

@column-width: 60; @gutter-width: 20; @columns: 12; @total-width: 100%; header { @include column(12); } article { @include column(12); } aside { @include column(12); } @media (min-width: 38em) { article { @include column(8); } aside { @include column(4); } } Semantic.gs Monday, July 29, 13

Slide 139

Slide 139 text

Slide 140

Slide 140 text

Semantic.gs @column-width: 60; @gutter-width: 20; @columns: 12; @total-width: 100%; header { @include column(12); } article { @include column(12); } aside { @include column(12); } @media (min-width: 38em) { article { @include column(8); } aside { @include column(4); } } Monday, July 29, 13

Slide 141

Slide 141 text

Slide 142

Slide 142 text

Slide 143

Slide 143 text

Or, just roll your own Monday, July 29, 13

Slide 144

Slide 144 text

CREATING FLEXIBILITY What Needs to Flex ‣ Grids ‣ Layout ‣ Typography ‣ Images ‣ Tables ‣ Video Monday, July 29, 13

Slide 145

Slide 145 text

CREATING FLEXIBILITY Responsive Layout Patterns ‣ Source order stacking ‣ Content choreography ‣ Off canvas Monday, July 29, 13

Slide 146

Slide 146 text

CREATING FLEXIBILITY Responsive Layout Patterns ‣ Source order stacking ‣ Content choreography ‣ Off canvas Monday, July 29, 13

Slide 147

Slide 147 text

Monday, July 29, 13

Slide 148

Slide 148 text

CREATING FLEXIBILITY Responsive Layout Patterns ‣ Source order stacking ‣ Content choreography ‣ Off canvas Monday, July 29, 13

Slide 149

Slide 149 text

Monday, July 29, 13

Slide 150

Slide 150 text

Monday, July 29, 13

Slide 151

Slide 151 text

[AppendAround Demo] Monday, July 29, 13

Slide 152

Slide 152 text

CREATING FLEXIBILITY Responsive Layout Patterns ‣ Source order stacking ‣ Content choreography ‣ Off canvas Monday, July 29, 13

Slide 153

Slide 153 text

Monday, July 29, 13

Slide 154

Slide 154 text

Monday, July 29, 13

Slide 155

Slide 155 text

Easiest to show a few examples: http://jasonweaver.name/lab/offcanvas/ http://mashable.com/ Monday, July 29, 13

Slide 156

Slide 156 text

There are many, many combinations of these basic ideas http://bit.ly/U4N5qH (http://bradfrost.github.com/this-is-responsive/patterns.html) Monday, July 29, 13

Slide 157

Slide 157 text

There are some really cool new layout modules coming... Monday, July 29, 13

Slide 158

Slide 158 text

http://www.fivesimplesteps.com/ products/css3-layout-modules Monday, July 29, 13

Slide 159

Slide 159 text

http://www.netmagazine.com/tutorials/ master-new-css-layout-properties Monday, July 29, 13

Slide 160

Slide 160 text

CREATING FLEXIBILITY What Needs to Flex ‣ Grids ‣ Layout ‣ Typography ‣ Images ‣ Tables ‣ Video Monday, July 29, 13

Slide 161

Slide 161 text

Type flexes by default Monday, July 29, 13

Slide 162

Slide 162 text

We need to consider readability Monday, July 29, 13

Slide 163

Slide 163 text

CREATING FLEXIBILITY Responsive Typography ‣ Small screen != small font-size ‣ Consider contrast ‣ If text has links, give adequate room to touch them Monday, July 29, 13

Slide 164

Slide 164 text

CREATING FLEXIBILITY Responsive Typography ‣ Small screen != small font-size ‣ Consider contrast ‣ If text has links, give adequate room to touch them Monday, July 29, 13

Slide 165

Slide 165 text

CREATING FLEXIBILITY Responsive Typography ‣ Small screen != small font-size ‣ Consider contrast ‣ If text has links, give adequate room to touch them Monday, July 29, 13

Slide 166

Slide 166 text

@snookca http://snook.ca/technical/colour_contrast/ colour.html @leaverou http://leaverou.github.com/contrast-ratio/ Monday, July 29, 13

Slide 167

Slide 167 text

CREATING FLEXIBILITY Responsive Typography ‣ Small screen != small font-size ‣ Consider contrast ‣ If text has links, give adequate room to touch them Monday, July 29, 13

Slide 168

Slide 168 text

CREATING FLEXIBILITY What Needs to Flex ‣ Grids ‣ Layout ‣ Typography ‣ Images ‣ Tables ‣ Video Monday, July 29, 13

Slide 169

Slide 169 text

img { max-width: 100%; } Flexible Images Monday, July 29, 13

Slide 170

Slide 170 text

http://bit.ly/12TbTX4 (http://codepen.io/bencallahan/pen/CtLDb) Monday, July 29, 13

Slide 171

Slide 171 text

The image problem(s) Monday, July 29, 13

Slide 172

Slide 172 text

CREATING FLEXIBILITY The image problem(s) ‣ Content ‣ Bandwidth ‣ Pixel density Monday, July 29, 13

Slide 173

Slide 173 text

CREATING FLEXIBILITY Image: Content Monday, July 29, 13

Slide 174

Slide 174 text

CREATING FLEXIBILITY Image: Content Monday, July 29, 13

Slide 175

Slide 175 text

CREATING FLEXIBILITY Image: Content Monday, July 29, 13

Slide 176

Slide 176 text

CREATING FLEXIBILITY Image: Content Monday, July 29, 13

Slide 177

Slide 177 text

CREATING FLEXIBILITY Image: Bandwidth As of March of 2012, 86% of the sites on mediaqueri.es demonstrated the same weight and load time at resolutions from 300ish to 1200ish. via @guypod http://www.guypo.com/mobile/performance-implications-of- responsive-design-book-contribution/ Monday, July 29, 13

Slide 178

Slide 178 text

CREATING FLEXIBILITY Image: Bandwidth Responsive & Responsible via @scotjehl https://speakerdeck.com/scottjehl/responsive-responsible http://www.lukew.com/ff/entry.asp?1565 Monday, July 29, 13

Slide 179

Slide 179 text

CREATING FLEXIBILITY Image: Pixel Density Most new mobile devices have high pixel density displays: Apple iPhone 4+: 326 PPI Amazon Kindle Fire HD 8.9: 254 PPI Nokia Lumia 920: 332 PPI BlackBerry Z10: 356 PPI Samsung Galaxy Note: 285 PPI Monday, July 29, 13

Slide 180

Slide 180 text

CREATING FLEXIBILITY The image problem(s) ‣ Content ‣ Bandwidth ‣ Pixel density Monday, July 29, 13

Slide 181

Slide 181 text

CREATING FLEXIBILITY The image solution(s) ‣ SVG ‣ Icon fonts ‣ Pixel-density media queries ‣ Compressive ‣ Picturefill ‣ User preference Monday, July 29, 13

Slide 182

Slide 182 text

SVG (Scalable Vector Graphics) ‣ Allows the image to be resolution independent. ‣ Support isn’t very good for older browsers. ‣ We can use Modernizr to detect if the browser supports SVG and provide a .png fallback for those that do not. Monday, July 29, 13

Slide 183

Slide 183 text

@dbushell wrote a great primer for SVG Monday, July 29, 13

Slide 184

Slide 184 text

Icon Fonts ‣ Fonts by default are resolution independent, Icon fonts are no different. ‣ http://icomoon.io/app/ allows you to create your own icon fonts ‣ They do require a bit more markup, and JS for IE 7 and lower. Monday, July 29, 13

Slide 185

Slide 185 text

Search Icon Font Markup /*.scss*/ [data-icon]:before { content: attr(data-icon); font-family: 'icon-font-family'; speak: none; } Monday, July 29, 13

Slide 186

Slide 186 text

“Compressive” Images ‣ http://bit.ly/Sygdey ‣ Increase the image dimensions ‣ Add massive compression ‣ Scale the image in the browser Monday, July 29, 13

Slide 187

Slide 187 text

Pixel Density MQs ‣ Detect the pixel ratio of the device and serve a second, higher-res image. ‣ Retina devices now have to make an additional request for the retina asset. Monday, July 29, 13

Slide 188

Slide 188 text

/*.scss*/ @media only all and (-webkit-min-device-pixel-ratio: 1.5) { .logo { background-image: url(/i/logo-2x.png); background-size: 100%; } } Pixel Density MQs Also need other browser prefixes Monday, July 29, 13

Slide 189

Slide 189 text

Picturefill ‣ https://github.com/scottjehl/ picturefill ‣ Polyfill for the new element Monday, July 29, 13

Slide 190

Slide 190 text

Picturefill Monday, July 29, 13

Slide 191

Slide 191 text

User Preference ‣ Allow the user to choose what experience they would like to have on their device: “HD” or “SD”. Monday, July 29, 13

Slide 192

Slide 192 text

CREATING FLEXIBILITY What Needs to Flex ‣ Grids ‣ Layout ‣ Typography ‣ Images ‣ Tables ‣ Video Monday, July 29, 13

Slide 193

Slide 193 text

CREATING FLEXIBILITY Tables http://codepen.io/bencallahan/pen/xvmCe Monday, July 29, 13

Slide 194

Slide 194 text

RWD Table Patterns [demo] Monday, July 29, 13

Slide 195

Slide 195 text

CREATING FLEXIBILITY What Needs to Flex ‣ Grids ‣ Layout ‣ Typography ‣ Images ‣ Tables ‣ Video Monday, July 29, 13

Slide 196

Slide 196 text

CREATING FLEXIBILITY Video Monday, July 29, 13

Slide 197

Slide 197 text

CREATING FLEXIBILITY Intrinsic Ratios http://codepen.io/bencallahan/pen/KICkl Monday, July 29, 13

Slide 198

Slide 198 text

CREATING FLEXIBILITY Video Monday, July 29, 13

Slide 199

Slide 199 text

Creating flexibility requires experimentation Monday, July 29, 13

Slide 200

Slide 200 text

RWD RETROFITTING RESPONSIVE WEB DESIGN TECHNIQUES Monday, July 29, 13

Slide 201

Slide 201 text

@BENCALLAHAN What is a Retrofit? RESPONSIVE RETROFITTING Monday, July 29, 13

Slide 202

Slide 202 text

@BENCALLAHAN What is a Retrofit? Finding the fastest and lowest-risk approach to creating a better experience on an existing site for users of any size screen. RESPONSIVE RETROFITTING Monday, July 29, 13

Slide 203

Slide 203 text

@BENCALLAHAN What is a Retrofit? 1. How to do it. RESPONSIVE RETROFITTING Monday, July 29, 13

Slide 204

Slide 204 text

@BENCALLAHAN What is a Retrofit? 1. How to do it. 2. Managing your client. RESPONSIVE RETROFITTING Monday, July 29, 13

Slide 205

Slide 205 text

@BENCALLAHAN @klayon RESPONSIVE RETROFITTING Monday, July 29, 13

Slide 206

Slide 206 text

@BENCALLAHAN @klayon ...performance is important, but access is more important. Mobile later is better than mobile never. From “Responsive images for mobile: don’t sweat it” (http://tiny.cc/vr24gw) RESPONSIVE RETROFITTING Monday, July 29, 13

Slide 207

Slide 207 text

@BENCALLAHAN Retrofitting Techniques http://github.com/bencallahan/rwd-retrofitting If you like, you can clone this repository: RESPONSIVE RETROFITTING Monday, July 29, 13

Slide 208

Slide 208 text

@BENCALLAHAN Retrofitting Techniques: From Fixed to Fluid (demo of Twitter.com) RESPONSIVE RETROFITTING Monday, July 29, 13

Slide 209

Slide 209 text

@BENCALLAHAN Retrofitting Techniques: From Fixed to Fluid ➡ Demo of Twitter.com http://www.alistapart.com/articles/fluidgrids/ target / context = result RESPONSIVE RETROFITTING Monday, July 29, 13

Slide 210

Slide 210 text

@BENCALLAHAN Retrofitting Techniques: From Fixed to Fluid ➡ Demo of Twitter.com http://www.alistapart.com/articles/fluidgrids/ target / context = result 302 / 837 = 36.08% 522 / 837 = 62.37% RESPONSIVE RETROFITTING Monday, July 29, 13

Slide 211

Slide 211 text

@BENCALLAHAN Retrofitting Techniques: From Fixed to Fluid ➡ Demo of Twitter.com http://paulirish.com/2012/box-sizing-border-box-ftw/ * { -‐moz-‐box-‐sizing: border-‐box; -‐webkit-‐box-‐sizing: border-‐box; box-‐sizing: border-‐box; } RESPONSIVE RETROFITTING Monday, July 29, 13

Slide 212

Slide 212 text

@BENCALLAHAN Retrofitting Techniques: From Fixed to Fluid ➡ Demo of Twitter.com /* some css */ @media (max-‐width: 500px) { /* css for 500px and lower */ } RESPONSIVE RETROFITTING Monday, July 29, 13

Slide 213

Slide 213 text

@BENCALLAHAN Retrofitting Techniques: Inline Image Styles (demo of /Images) http://github.com/bencallahan/rwd-retrofitting RESPONSIVE RETROFITTING Monday, July 29, 13

Slide 214

Slide 214 text

@BENCALLAHAN Retrofitting Techniques: Inline Image Styles ➡ Support ‣ FireFox 5+ Win/Mac ‣ IE7+ (exception: IE8 & min-width) ‣ Chrome 14+ Win/Mac ‣ Safari 4+ Win, 5+ Mac ‣ Opera 10+ Win, 11+ Mac ‣ Mobile Safari (iOS 5) ‣ Android Browser 2.3+ RESPONSIVE RETROFITTING Monday, July 29, 13

Slide 215

Slide 215 text

@BENCALLAHAN Retrofitting Techniques: Background Images Tim Kadlec on timkadlec.com “Media Query & Asset Downloading Results” ‣ display: none on parent element ‣ specify all background images inside media queries http://timkadlec.com/2012/04/media-query-asset-downloading-results/ RESPONSIVE RETROFITTING Monday, July 29, 13

Slide 216

Slide 216 text

@BENCALLAHAN Retrofitting Techniques: Tables RESPONSIVE RETROFITTING Monday, July 29, 13

Slide 217

Slide 217 text

@BENCALLAHAN Retrofitting Techniques: Tables (demo of /Tables) http://github.com/bencallahan/rwd-retrofitting RESPONSIVE RETROFITTING Monday, July 29, 13

Slide 218

Slide 218 text

@BENCALLAHAN Retrofitting Techniques: Tables RESPONSIVE RETROFITTING Monday, July 29, 13

Slide 219

Slide 219 text

@BENCALLAHAN Retrofitting Techniques: Media Queries ➡ Large Resolution First ➡ Small Resolution First, Capped RESPONSIVE RETROFITTING Monday, July 29, 13

Slide 220

Slide 220 text

@BENCALLAHAN Retrofitting Techniques: Media Queries ➡ Large Resolution First /* FILE: main.css */ /* all your original styles */ @media (max-‐width: 53em) { /* styles for 53em and lower */ } @media (max-‐width: 37em) { /* styles for 37em and lower */ } RESPONSIVE RETROFITTING Monday, July 29, 13

Slide 221

Slide 221 text

@BENCALLAHAN Retrofitting Techniques: Media Queries ➡ Small Resolution First, Capped ‣ Serve the original CSS to large viewports ‣ Serve mobile-first CSS to small viewports ‣ No changes to original CSS RESPONSIVE RETROFITTING Monday, July 29, 13

Slide 222

Slide 222 text

@BENCALLAHAN Retrofitting Techniques: Media Queries ➡ Small Resolution First, Capped yepnope({ test : Modernizr.mq(‘(min-‐width: 0px)’), yep : ‘base.css’, nope : ‘original.css’ }); RESPONSIVE RETROFITTING Monday, July 29, 13

Slide 223

Slide 223 text

@BENCALLAHAN Retrofitting Techniques: Media Queries ➡ Small Resolution First, Capped @media (max-width: 979px) { @import "small"; } @media (min-width: 661px) and (max-width: 979px) { @import "medium"; } @media (min-width: 980px) { @import "original"; } RESPONSIVE RETROFITTING Monday, July 29, 13

Slide 224

Slide 224 text

@BENCALLAHAN Client Interaction RESPONSIVE RETROFITTING Monday, July 29, 13

Slide 225

Slide 225 text

@BENCALLAHAN Client Interaction: Great Need Big Companies + No Mobile Presence + Triple Digit Growth = Anxious Clients RESPONSIVE RETROFITTING Monday, July 29, 13

Slide 226

Slide 226 text

@BENCALLAHAN Client Interaction: Great Need Less than Half the Cost + Less than Half the Time + Increased Conversions = Desperate Clients RESPONSIVE RETROFITTING Monday, July 29, 13

Slide 227

Slide 227 text

@BENCALLAHAN Client Interaction: When It’s Right ➡ Evaluate the Project ‣ Solid UX at higher widths? ‣ Semantic markup? ‣ Immediate need? ‣ Real benefit for the user? RESPONSIVE RETROFITTING Monday, July 29, 13

Slide 228

Slide 228 text

@BENCALLAHAN Client Interaction: Proceed Carefully Retrofitting is a step in the right direction. RESPONSIVE RETROFITTING Monday, July 29, 13

Slide 229

Slide 229 text

@BENCALLAHAN Client Interaction: Proceed Carefully Make sure you’re capturing analytics. RESPONSIVE RETROFITTING Monday, July 29, 13

Slide 230

Slide 230 text

@BENCALLAHAN Constantly remind them of the user. Client Interaction: Proceed Carefully RESPONSIVE RETROFITTING Monday, July 29, 13

Slide 231

Slide 231 text

@BENCALLAHAN When you’re done and they ask for more... Client Interaction: Proceed Carefully ...push for even better experiences! RESPONSIVE RETROFITTING Monday, July 29, 13

Slide 232

Slide 232 text

LESSONS LEARNED RESPONSIVE WEB DESIGN TECHNIQUES Monday, July 29, 13

Slide 233

Slide 233 text

Testing Monday, July 29, 13

Slide 234

Slide 234 text

LESSONS LEARNED Testing ‣ You must test on real devices ‣ Do your development in a webkit browser ‣ Bulid libraries of your patterns Monday, July 29, 13

Slide 235

Slide 235 text

Pricing Monday, July 29, 13

Slide 236

Slide 236 text

LESSONS LEARNED Pricing ‣ As much as 100% more, initially ‣ Likely to be 50% more, soon after ‣ Probably never less than 25% more Monday, July 29, 13

Slide 237

Slide 237 text

LESSONS LEARNED Pricing ‣ As much as 100% more, initially ‣ Likely to be 50% more, soon after ‣ Probably never less than 25% more COMPARED TO WHAT? Monday, July 29, 13

Slide 238

Slide 238 text

LESSONS LEARNED Pricing ‣ Testing (labs & time) ‣ Fewer patterns ‣ Project management ‣ Learning curve ‣ Maintenance ‣ Content strategy Monday, July 29, 13

Slide 239

Slide 239 text

Prioritization Monday, July 29, 13

Slide 240

Slide 240 text

LESSONS LEARNED Prioritization Monday, July 29, 13

Slide 241

Slide 241 text

LESSONS LEARNED Prioritization Monday, July 29, 13

Slide 242

Slide 242 text

LESSONS LEARNED Prioritization Monday, July 29, 13

Slide 243

Slide 243 text

LESSONS LEARNED Prioritization Monday, July 29, 13

Slide 244

Slide 244 text

LESSONS LEARNED Prioritization Monday, July 29, 13

Slide 245

Slide 245 text

Performance Monday, July 29, 13

Slide 246

Slide 246 text

LESSONS LEARNED Performance ‣ Optimize or cut out images ‣ Decrease the number of requests ‣ Gzip if you can ‣ Concat and minify CSS/JS ‣ Load CSS at the top ‣ Load JS at the bottom ‣ Follow @souders on Twitter Monday, July 29, 13

Slide 247

Slide 247 text

Barriers Monday, July 29, 13

Slide 248

Slide 248 text

LESSONS LEARNED Barriers ‣ Organization barriers block collaboration ‣ Must have buy in from upper management ‣ Must have buy in from those doing the work ‣ It’s not easy, we’re still figuring it out Monday, July 29, 13

Slide 249

Slide 249 text

WHERE WE’RE GOING RESPONSIVE WEB DESIGN TECHNIQUES Monday, July 29, 13

Slide 250

Slide 250 text

Monday, July 29, 13

Slide 251

Slide 251 text

YOU ARE ALL SECRET AGENTS Monday, July 29, 13

Slide 252

Slide 252 text

The Responsive Dip http://bit.ly/MasqBk Monday, July 29, 13

Slide 253

Slide 253 text

The server is our friend Monday, July 29, 13

Slide 254

Slide 254 text

Performance is a feature Monday, July 29, 13

Slide 255

Slide 255 text

Build something that does more than just fit on small screens Monday, July 29, 13

Slide 256

Slide 256 text

Focus on the content Monday, July 29, 13

Slide 257

Slide 257 text

Simplicity “Simplicity isn’t just a visual style. It’s not just minimalisim or the absence of clutter...You have deeply understand the essence of a product in order to be able to get rid of the parts that are not essential.” Jony Ive Monday, July 29, 13

Slide 258

Slide 258 text

The Responsive Mindset “The truly responsive design web designer wasn’t born until after the launch of the iPhone. We haven’t seen his or her work yet.” Andy Clarke http://the-pastry-box-project.net/andy-clarke/2012-april-8/ Monday, July 29, 13

Slide 259

Slide 259 text

There are many problems left to solve. We’ll solve them much faster if we solve them together. Monday, July 29, 13

Slide 260

Slide 260 text

THANKS! @bencallahan Monday, July 29, 13