Adaptive, Responsive, Mobile. A liquid web.

Slide 1

Slide 1 text

Cristiano Rastelli - Consumer Team Adaptive, Responsive, Mobile. A liquid web.

Slide 2

Slide 2 text

Index • Premises • Responsive. Adaptive. Mobile. • Liquid web. Numbers. • Tools & Techs. • VisualDNA.

Slide 3

Slide 3 text

WEB We are talking about + + * but not only *

Slide 4

Slide 4 text

Responsive Adaptive Mobile* * first

Slide 5

Slide 5 text

www.alistapart.com/articles/responsive-web-design/

Slide 6

Slide 6 text

www.abookapart.com/products/responsive-web-design

Slide 7

Slide 7 text

www.lukew.com/ff/entry.asp?933

Slide 8

Slide 8 text

www.abookapart.com/products/mobile-first

Slide 9

Slide 9 text

twitter.com/lukew/status/262920585938612224/photo/1/large

Slide 10

Slide 10 text

RESPONSIVE Vs. ADAPTIVE

Slide 11

Slide 11 text

RESPONSIVE Vs. ADAPTIVE RWD MDWD MFWD RESS PRD

Slide 12

Slide 12 text

ADAPTIVE RESPONSIVE

Slide 13

Slide 13 text

ADAPTIVE RESPONSIVE FRAMEWORK boilerplate PATTERN libraries MOBILE FIRST

Slide 14

Slide 14 text

The RWD effect

Slide 15

Slide 15 text

bradfrostweb.com/blog/web/mobile-first-responsive-web-design/

Slide 16

Slide 16 text

futurefriend.ly

Slide 17

Slide 17 text

techcrunch.com/2012/10/27/tablet-first-mobile-second/

Slide 18

Slide 18 text

www.welcomebrand.co.uk/thoughts/the-responsive-web-will-be-99-9-typography/

Slide 19

Slide 19 text

The RWD limits

Slide 20

Slide 20 text

markboulton.co.uk/journal/gridset-and-the-red-pill Responsive design is time-consuming. Not just writing the code, but all the way back to content requirements, typography, layout, managing client needs and expectations, Q.A and bug testing. Making websites this way adds time. In some cases, too much. Or rather, we’re spending time on the wrong things. Mark Boulton

Slide 21

Slide 21 text

If you’re making websites, chances are you’ve given some thought to what constitutes a responsive-friendly design process — and you’ve probably found that adding a mockup for every breakpoint isn’t a sustainable approach. www.alistapart.com/articles/responsive-comping-obtaining-signoff-with-mockups/

Slide 22

Slide 22 text

Using a predefined grid seems to make as much sense as using a predefined colour scheme. www.alistapart.com/articles/the-infinite-grid/

Slide 23

Slide 23 text

Luke Wroblewski twitter.com/lukew/status/268406393944559616

Slide 24

Slide 24 text

one design fits all sizes

Slide 25

Slide 25 text

www.zeldman.com/2011/12/29/state-of-the-web-of-apps-devices-and-breakpoints/ Zeldman Responsive design is not dead; it has only begun. It is not a panacea but was never intended to be. It is simply the beginnings of an approach.

Slide 26

Slide 26 text

Why Liquid?

Slide 27

Slide 27 text

web

Slide 28

Slide 28 text

No content

Slide 29

Slide 29 text

No content

Slide 30

Slide 30 text

No content

Slide 31

Slide 31 text

No content

Slide 32

Slide 32 text

No content

Slide 33

Slide 33 text

user

Slide 34

Slide 34 text

Ryan Singer twitter.com/rjs/status/323880906559459331

Slide 35

Slide 35 text

PC vs. Smartphone Shipments Source: Canalys 2011

Slide 36

Slide 36 text

Global Mobile vs. Desktop Internet Users Source: Morgan Stanley 2011 overtaking this year?

Slide 37

Slide 37 text

Source: http://www.lukew.com/ff/entry.asp?1597

Slide 38

Slide 38 text

Where are people using mobile devices? Source: Compete's Quarterly Smartphone Report 84% 80% 76% 69% 64% 62% 47% at home during miscellaneous downtime throughout the day waiting in lines of waiting for appointments while shopping at work while watching TV during commute in to work

Slide 39

Slide 39 text

twitter.com/gluca/status/312849923466985472 Gianluca Diegoli I realized that it's the mobile experience that determines what then I use in my desktop. For example, Pinterest for iOS is lousy, and then…

Slide 40

Slide 40 text

hbr.org/2013/01/how-people-really-use-mobile

Slide 41

Slide 41 text

googlemobileads.blogspot.co.uk/2011/04/smartphone-user-study-shows-mobile.html

Slide 42

Slide 42 text

google.com/think/research-studies/creating-moments-that-matter.html

Slide 43

Slide 43 text

www.google.com/think/research-studies/the-new-multi-screen-world-study.html

Slide 44

Slide 44 text

www.google.com/think/research-studies/the-new-multi-screen-world-study.html

Slide 45

Slide 45 text

www.google.com/think/research-studies/the-new-multi-screen-world-study.html

Slide 46

Slide 46 text

www.google.com/think/research-studies/the-new-multi-screen-world-study.html

Slide 47

Slide 47 text

Money. Not only user-experience!

Slide 48

Slide 48 text

CONTEXT A shift in the of web usage

Slide 49

Slide 49 text

Slide 50

Slide 50 text

www.slideshare.net/yiibu/pragmatic-responsive-design/

Slide 51

Slide 51 text

Test with real devices!

Slide 52

Slide 52 text

No content

Slide 53

Slide 53 text

No content

Slide 54

Slide 54 text

others

Slide 55

Slide 55 text

trentwalton.com/2013/04/10/reorganization/ Organization

Slide 56

Slide 56 text

trentwalton.com/2013/04/10/reorganization/ Organization

Slide 57

Slide 57 text

viljamis.com/blog/2012/responsive-workflow/ Workflow

Slide 58

Slide 58 text

viljamis.com/blog/2012/responsive-workflow/ Workflow

Slide 59

Slide 59 text

daverupert.com/2013/04/responsive-deliverables/ Deliverables

Slide 60

Slide 60 text

styletil.es Deliverables

Slide 61

Slide 61 text

styletil.es Deliverables

Slide 62

Slide 62 text

Tools & Techs

Slide 63

Slide 63 text

Patterns mobiledesignpatterngallery.com

Slide 64

Slide 64 text

Patterns mediaqueri.es

Slide 65

Slide 65 text

Patterns mobilepatterns.com

Slide 66

Slide 66 text

Patterns bradfrost.github.com/this-is-responsive/patterns.html

Slide 67

Slide 67 text

Designing Tools html.adobe.com/edge/reflow/

Slide 68

Slide 68 text

Designing Tools easel.io

Slide 69

Slide 69 text

Designing Tools uxpin.com

Slide 70

Slide 70 text

Designing Tools gridsetapp.com

Slide 71

Slide 71 text

Prototyping Tools solidifyapp.com

Slide 72

Slide 72 text

Prototyping Tools proto.io

Slide 73

Slide 73 text

Prototyping Tools popapp.in

Slide 74

Slide 74 text

Prototyping Tools plunkapp.com

Slide 75

Slide 75 text

Testing Tools studiopress.com/responsive/

Slide 76

Slide 76 text

Testing Tools LiveView For Mac, iPhone & iPad zambetti.com/projects/liveview/

Slide 77

Slide 77 text

NO!

Slide 78

Slide 78 text

VisualDNA

Slide 79

Slide 79 text

• Context is changing. We must embrace it. • Measure/track users in specific devices. • Different approach to quiz & data analysis.

Slide 80

Slide 80 text

mobile.visualdna.com

Slide 81

Slide 81 text

Cristiano Rastelli - Consumer Team THANK YOU

Slide 82

Slide 82 text

http://www.zeldman.com/2011/12/29/state-of-the-web-of-apps-devices-and-breakpoints/ http://www.slideshare.net/yiibu/pragmatic-responsive-design/ http://www.netmagazine.com/opinions/responsive-web-design-boring http://viljamis.com/blog/2012/adaptive-vs-responsive-whats-the-difference.php http://markboulton.co.uk/journal/gridset-and-the-red-pill http://www.netmagazine.com/opinions/responsive-web-design-boring http://www.slideshare.net/pkattera/design-process-for-responsive-web-design http://37signals.com/svn/posts/3285-the-typography-and-layout-behind-the-new-signal-vs-noise-redesign http://www.cloudfour.com/where-are-the-mobile-first-responsive-web-designs/ http://trentwalton.com/2013/04/10/reorganization/ http://viljamis.com/blog/2012/responsive-workflow/ http://www.google.com/think/research-studies/the-new-multi-screen-world-study.html Must-Read Nice-to-Read Some references: http://www.lukew.com/ff/entry.asp?1394 http://www.lukew.com/ff/entry.asp?1562 http://www.lukew.com/ff/entry.asp?1436 http://www.alistapart.com/articles/responsive-web-design/

Slide 83

Slide 83 text

http://www.alistapart.com/articles/responsive-comping-obtaining-signoff-with-mockups/ http://www.alistapart.com/articles/the-infinite-grid/ http://www.alistapart.com/articles/uncle-sam-wants-you-to-optimize-your-content-for-mobile/ http://www.smashingmagazine.com/responsive-web-design-guidelines-tutorials/ http://mobile.smashingmagazine.com/2012/10/24/beyond-common-media-query-breakpoints/ http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/ http://www.slideshare.net/livefront/responsive-design-7877412 http://www.slideshare.net/KMcGrane/adapting-ourselves-to-adaptive-content-12133365 http://www.slideshare.net/bradfrostweb/for-a-futurefriendly-web http://www.slideshare.net/pkattera/design-process-for-responsive-web-design http://www.slideshare.net/pekkos/mobile-experiences http://www.slideshare.net/bradfrostweb/beyond-media-queries-anatomy-of-an-adaptive-web-design https://speakerdeck.com/scottjehl/responsive-responsible https://speakerdeck.com/erunyon/rebuilding-a-university-homepage-to-be-responsive-twice-in-less-than- a-year https://speakerdeck.com/m83/responsive-webdesing-and-the-little-dirty-secret-behind-fluid-grids http://markboulton.co.uk/journal/adaptive_content_management http://uxdesign.smashingmagazine.com/2012/11/08/ux-design-qa-with-christian-holst/ http://bradfrostweb.com/blog/mobile/planting-the-seed-for-a-responsive-future/ http://www.quora.com/Responsive-Design-vs-Adaptive-Design http://www.html5rocks.com/en/mobile/responsivedesign/ http://www.sazzy.co.uk/2012/02/why-i-cant-design-in-the-browser/ Nice-to-Read (cont.)

Slide 84

Slide 84 text

http://bradfrostweb.com/blog/mobile/planting-the-seed-for-a-responsive-future/ http://techcrunch.com/2012/10/27/tablet-first-mobile-second/ http://www.jordanm.co.uk/post/32866575759/the-airfix-responsive-workflow http://blog.cloudfour.com/css-media-query-for-mobile-is-fools-gold/ http://www.guardian.co.uk/help/developer-blog/2012/oct/18/responsive-design-guardian-introduction http://digital.cabinetoffice.gov.uk/govuk-launch-colophon/ Nice-to-Read (cont.) http://responsive.is/ http://bradfrost.github.com/this-is-responsive/ http://mediaqueri.es/ http://futurefriend.ly/ http://www.mobiledesignpatterngallery.com http://www.mobilepatterns.com Resources http://html.adobe.com/edge/reflow/ http://html.adobe.com/edge/inspect/ http://zambetti.com/projects/liveview/ http://popapp.in http://www.solidifyapp.com http://proto.io https://gridsetapp.com Tools