Road to Responsive - Speaker Deck

Slide 1

Slide 1 text

The Road to Responsive Mike Aparicio  User Interface Engineer [email protected]

Slide 2

Slide 2 text

1996

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

2003

Slide 14

Slide 14 text

http://www.csszengarden.com/001/

Slide 15

Slide 15 text

No content

Slide 16

Slide 16 text

No content

Slide 17

Slide 17 text

2007

Slide 18

Slide 18 text

No content

Slide 19

Slide 19 text

No content

Slide 20

Slide 20 text

2010

Slide 21

Slide 21 text

No content

Slide 22

Slide 22 text

No content

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

The Responsive Trinity Fluid Grid Flexible Media Media Queries

Slide 25

Slide 25 text

Flexible Grid

Slide 26

Slide 26 text

20px 20px 20px 220px 220px 220px 220px 940px

Slide 27

Slide 27 text

2% 2% 2% 23.5% 23.5% 23.5% 23.5% 100%

Slide 28

Slide 28 text

No content

Slide 29

Slide 29 text

No content

Slide 30

Slide 30 text

Flexible Media

Slide 31

Slide 31 text

http://slashfilm.com/

Slide 32

Slide 32 text

No content

Slide 33

Slide 33 text

No content

Slide 34

Slide 34 text

(viewport meta tag)

Slide 35

Slide 35 text

No content

Slide 36

Slide 36 text

No content

Slide 37

Slide 37 text

No content

Slide 38

Slide 38 text

Media Queries

Slide 39

Slide 39 text

No content

Slide 40

Slide 40 text

No content

Slide 41

Slide 41 text

No content

Slide 42

Slide 42 text

•width* •height* •device-height* •aspect-ratio* •device-aspect-ratio* •device-pixel-ratio* •color* •color-index* •monochrome* •resolution* •scan •grid Media Features * can be prefixed with [min/max-]

Slide 43

Slide 43 text

•all •aural •braille •handheld •print •projection •screen •tty •tv •embossed Media Types

Slide 44

Slide 44 text

Pixel Perfect ^ Proportion

Slide 45

Slide 45 text

target ÷ context = result

Slide 46

Slide 46 text

980px (100%)

Slide 47

Slide 47 text

460px (?%)

Slide 48

Slide 48 text

target ÷ context = result

Slide 49

Slide 49 text

460px ÷ 980px = 46.938776%

Slide 50

Slide 50 text

24px

Slide 51

Slide 51 text

24px ÷ 16px = 150%

Slide 52

Slide 52 text

http://abookapart.com/products/responsive-web-design

Slide 53

Slide 53 text

http://responsivewebdesign.com/podcast/

Slide 54

Slide 54 text

Convincing Stakeholders

Slide 55

Slide 55 text

“We looked at how work was being done and thought that, despite our best efforts, things weren’t rolling out as fast enough, we weren’t always having the right functionality. You’re putting all this energy into this core experience but it’s not making its way to the other experiences, and you couple that with the trends that everybody in this industry sees—the growth of mobile, the growth of tablet—and you look at our conversion and our trafﬁc, and we’re not getting it, and the trafﬁc we are getting we’re not converting on.”

Slide 56

Slide 56 text

https://twitter.com/lukew/status/591265766823034880

Slide 57

Slide 57 text

No content

Slide 58

Slide 58 text

Mobile First

Slide 59

Slide 59 text

“In 2014, we will double down on our progress over the past year, across 4 key areas by: Investing in growing our mobile customer base, accelerating activation and making Groupon a mobile ﬁrst company…” - Eric Lefkofsky  February 2014

Slide 60

Slide 60 text

No content

Slide 61

Slide 61 text

“Our percent of mobile transactions continued to increase [...] including some countries that are approaching a mix that is well above 65% mobile. Spend for customers who buy through mobile remains signiﬁcantly higher than for those who don’t.” - Eric Lefkofsky  November 2014

Slide 62

Slide 62 text

“[Mobile First] is really about prioritizing and making sure that you know exactly what the people that are going to be using your site are looking for, where they expect to ﬁnd it, what order makes the most sense for them to see it in, and accommodating for that.”

Slide 63

Slide 63 text

“When you’ve got limited screen real estate. It makes decision- making skills much more rigorous versus a desktop design, which is a lot more open to interpretation. When you’ve got a minimum screen width, you’re really forced to make tough decisions.”

Slide 64

Slide 64 text

“The end goal was that if we did this right for mobile, I think the beneﬁts were actually going to trickle back to the desktop users as well. It was going to allow us to streamline a lot of the content we had across the website, and also simplify a lot of the pages.”

Slide 65

Slide 65 text

“If you design mobile ﬁrst, you create agreement on what matters most. You can then apply the same rationale to the desktop/laptop version of the web site. We agreed that this was the most important set of features and content for our customers and business—why should that change with more screen space?” - Luke Wroblewski  Mobile First

Slide 66

Slide 66 text

No content

Slide 67

Slide 67 text

No content

Slide 68

Slide 68 text

Mobile Web vs. Native App

Slide 69

Slide 69 text

“Mobile apps might work for some people but it seems to me that most people are probably consuming their content on, say Facebook, where they’re having this steady feed of content coming to them, and when they’re looking at it on Facebook’s mobile web, it just makes more sense to spend our time on that experience rather than splitting it with a mobile app that’s dedicated.”

Slide 70

Slide 70 text

“For the mobile website, we still have tons of new users joining every day and their ﬁrst experience is likely not going to be installing an application, that’s a pretty big commitment. We have people clicking on links in email, we have people reading tweets, and we have people just discovering us and what we don’t want to do is send them to a three-year-old outdated experience that doesn’t even really tell you on the homepage what we do or what it is.”

Slide 71

Slide 71 text

“One of the things that kept coming up was “let’s build an app.” And after researching that a little bit we found that it could be a slippery slope. We had to build it for multiple channels, it’s going to be constantly changing, it could become very costly. We wanted to try to do something where we could basically write the code once and use it in multiple ways.”

Slide 72

Slide 72 text

Desktop vs. Mobile Users

Slide 73

Slide 73 text

No content

Slide 74

Slide 74 text

“MOBILE CONTEXT”

Slide 75

Slide 75 text

http://www.lukew.com/ff/entry.asp?1943

Slide 76

Slide 76 text

“We pretty quickly landed on the idea that people want great content wherever they are and they want our best wherever they are. We looked at the Google Analytics that we had and we didn’t see much of a difference, in terms of our audience and how they were engaging with our content on different platforms and what kind of content they wanted. The splits just weren’t there.”

Slide 77

Slide 77 text

“Our data shows us quite plainly and clearly that the behavior of those on our mobile devices and the small screens is really not all that different than the behavior of those on the desktop. And the things they are seeking to do and the tasks they are seeking to accomplish are really quite the same.”

Slide 78

Slide 78 text

“All of the arguments for mobile versus desktop being different are entirely organizational change problems. They are organizations that want mobile and desktop to be different so each team can have their own little patch of turf to play on.” - Karen McGrane  RWD Podcast

Slide 79

Slide 79 text

Culture

Slide 80

Slide 80 text

“One of the great things about working at NPR is the upper management really putting their trust in the folks who are building these products and trusting the team nature of that experience to emerge with the right answers. There’s certainly adjustments from above and direction given on information sharing that they have, but we’re really not a place where every design needs to go up and be seen by twelve executives.”

Slide 81

Slide 81 text

The Team

Slide 82

Slide 82 text

No content

Slide 83

Slide 83 text

No content

Slide 84

Slide 84 text

No content

Slide 85

Slide 85 text

No content

Slide 86

Slide 86 text

“Designers are also changing as well. More and more, designers really need to know a little bit of front-end code so when they produce even just early visual mockups, if it can be done in code, it’s so much easier. …As we were developing our structure, it became very pointless to design in ﬂat, so we really quickly moved to designing in browser. Designers, UX designers, and devs were working closely together to test and build structures and content patterns in code, obviously because we needed to see it at all breakpoints at all times.”

Slide 87

Slide 87 text

Frameworks &  Pattern Libraries

Slide 88

Slide 88 text

http://getbootstrap.com/

Slide 89

Slide 89 text

No content

Slide 90

Slide 90 text

“It was a lot of collaboration between our information architects, our front-end development team and as well, our design team. As part of that we created a framework ﬁrst. It created a common language for us to rally around as a design team and a development team.”

Slide 91

Slide 91 text

http://bradfrost.com/blog/post/atomic-web-design/

Slide 92

Slide 92 text

No content

Slide 93

Slide 93 text

Template Organism Molecule Atoms

Slide 94

Slide 94 text

Prototyping

Slide 95

Slide 95 text

“I think some of the stuff that we’ve been able to do though is get to what something real looks like a lot faster, and then even putting a real live prototype in front of our executives at our monthly meetings can change the conversation.”

Slide 96

Slide 96 text

“A prototype is currency and everything we do is try to get it in the browser as quickly as we possibly can to assess feel, to assess space. Every discussion becomes a practical one instead of a theoretical one about “how is this going to change or shift or move?” You can see it real time.”

Slide 97

Slide 97 text

“Going with responsive designs, when we created responsive prototypes, it was so much easier to be able to test that on different devices with the users in the usability labs. You could see the difference. We could make a little bit of change, and we could test that right away with the users. So the designers and the product people also saw that, and they slowly started understanding that going responsive, at least as a base, is a much better option.”

Slide 98

Slide 98 text

Performance

Slide 99

Slide 99 text

“You see a tweet to one of our stories and you click it and you open it up and it’s in that, the little Twitter browser, and how that loads and what that experience is. If people start to learn that it takes awhile for that to load, they’re maybe not clicking as much.”

Slide 100

Slide 100 text

No content

Slide 101

Slide 101 text

http://whatdoesmysitecost.com/

Slide 102

Slide 102 text

No content

Slide 103

Slide 103 text

https://gigaom.com/2014/12/29/the-overweight-web-average-web-page-size-is-up-15-in-2014/

Slide 104

Slide 104 text

• Set a performance budget   (Time to first paint, time to page complete, speed index) • Determine baseline performance, make it “not terrible,” optimize • Optimize images (appropriate sizes + picture element) • Load JS only when needed (Do we need social sharing widgets?) • Consider perceived performance vs. actual Performance Tips

Slide 105

Slide 105 text

1.Optimize an existing feature or asset on the page. 2.Remove an existing feature or asset from the page. 3.Don’t add the new feature or asset. Staying on Budget http://timkadlec.com/2013/01/setting-a-performance-budget/

Slide 106

Slide 106 text

“I think it’s come around by the organization sort of admitting that performance is a feature that they need to incorporate and plan for, it’s a design consideration. What’s more, performance is really not just a technical issue, it has to be an organizational- wide priority. It’s everyone’s responsibility.” - Ethan Marcotte  RWD Podcast

Slide 107

Slide 107 text

Responsive @ Groupon

Slide 108

Slide 108 text

WHAT IF I TOLD YOU GROUPON.COM IS ALREADY RESPONSIVE

Slide 109

Slide 109 text

Groupon To Go (GTG)

Slide 110

Slide 110 text

Merchant Place Pages (MPP)

Slide 111

Slide 111 text

WOAH.

Slide 112

Slide 112 text

Groupon Interface Guidelines (GIG) • A CSS (and JS) framework shared across iTier apps • Includes common styles, UI patterns and modules • (Think Twitter Bootstrap) • Includes a fluid grid and support for flexible images • Fluid grid is scoped under a body class called “responsive” • iTier apps can trigger this class with a feature flag • Shared Layout Service provides a responsive header/footer

Slide 113

Slide 113 text

Lessons Learned

Slide 114

Slide 114 text

• Get stakeholders involved early and often (including devs) • Get in the browser as quickly as possible • Deliver prototypes, not pictures of websites • Make a framework that’s useful to designers and developers • Think atoms before pages • Start with the smallest view, then largest • Hire specialists to bridge the design/dev gap • Design for performance + set a budget • Monitor performance (speed + traffic/conversion) to measure success Lessons Learned

Slide 115

Slide 115 text

Thank You! GO BULLS!