Tweet
Tweet

Slide 1

Slide 1 text

http://www.flickr.com/photos/chesh2000/2465710741/ Eric Haidara @stratosferik The challenges of being responsive and mobile in the Multi-Size Web. Design beyond your monitor:

Slide 2

Slide 2 text

2 Intro Little bit about me STATIC 960 Works on ipad though

Slide 3

Slide 3 text

3 640x480 Intro A matter of size

Slide 4

Slide 4 text

3 1024x768 640x480 800x600 1440x900 Intro A matter of size

Slide 5

Slide 5 text

3 1024x768 640x480 800x600 1440x900 320 x 480 Intro A matter of size

Slide 6

Slide 6 text

3 1024x768 640x480 800x600 1440x900 320 x 480 1024x768 640 x 960 480 x 272 1024 x 600 480 x 800 Intro A matter of size

Slide 7

Slide 7 text

4 We’ve got the coolest job in the world. We have to figure out how to use these platforms. It’s one of the most exciting times in the history of our culture.” Josh Clarke FWOD NYC Intro Some say http://www.flickr.com/photos/chesh2000/2465710741/

Slide 8

Slide 8 text

5 What in the @#*$# is “the context” ? New kid in town: Responsive Web Design and what is that mobile first thingy? A few challenges Intro We’ll cover http://www.flickr.com/photos/chesh2000/2465710741/

Slide 9

Slide 9 text

http://www.flickr.com/photos/winni3/4616803552/ Context

Slide 10

Slide 10 text

http://www.flickr.com/photos/31525431@N00/4328160674/ I’m on the move, thus I ONLY need: Context Map Time Less content

Slide 11

Slide 11 text

http://www.flickr.com/photos/58402751@N00/2657011662/ Got all the time in the world So feed me some more content Users review Image gallery Online Chat Polls Audio slide show CONTENT FEATURE BLOAT Context

Slide 12

Slide 12 text

http://www.flickr.com/photos/tambako/3593686294/ It (was) simple really! Hummmm mmmmm mm... Context

Slide 13

Slide 13 text

http://www.flickr.com/photos/laurenmanning/2979574719/ Source: www.internetworldstats.com/ In the world 7 billions 30 % =2,110,765,810 Context is connected

Slide 14

Slide 14 text

http://www.flickr.com/photos/houghtonregis/4371208302/ Source: www.regjeringen.no In Norway has internet connection 84% uses internet daily 76% uses online banking 77% connect wirelessly outside of home or work 1 2 / Context

Slide 15

Slide 15 text

http://www.flickr.com/photos/38305415@N00/5873954634/ uses mobile while shopping 69% Context

Slide 16

Slide 16 text

http://www.flickr.com/photos/joebustillos/5413847585/ While watching TV 72% Some studies say 84% Context

Slide 17

Slide 17 text

http://www.flickr.com/photos/15734079@N00/397345394/ In the little boys’ room 39% Context

Slide 18

Slide 18 text

15 http://www.flickr.com/photos/micahrr/5393939935/ is NOT the INTENT Why Context How

Slide 19

Slide 19 text

http://www.flickr.com/photos/95046608@N00/5470303560/ Home or Office ? Context

Slide 20

Slide 20 text

http://www.flickr.com/photos/53844278@N04/5631891766/ No map, but I’ll take time to fill an online poll Context

Slide 21

Slide 21 text

http://www.flickr.com/photos/b-tal/163450213/ The context is hard to define Let’s tidy it up a bit and there’s intent too Context

Slide 22

Slide 22 text

Source: http://precious-forever.com/ Context The Screen Ecosystem

Slide 23

Slide 23 text

http://www.flickr.com/photos/steffenz/3100246315/ Web is really Multi-sized Do not think that context = Intent Difficult NOT to make assumptions Make some research & talk to your customers Go further http://www.slideshare.net/preciousforever/patterns-for-multiscreen-strategies http://yiibu.com/articles/wider-context/ In a nutshell Context

Slide 24

Slide 24 text

http://www.flickr.com/photos/wasabicube/5864797151/ Responsive Web Design GO BUY IT

Slide 25

Slide 25 text

22 An example RWD www.fucking-windows.com

Slide 26

Slide 26 text

Smartphone Tablets Desktops Widescreen frontend2011.com OK, another one then RWD

Slide 27

Slide 27 text

http://www.flickr.com/photos/andrec/2893549851/ How to adapt a website’s layout for multiple screen resolutions. H o w t o a d a p t a website’s layout for m u l t i p l e s c r e e n resolutions. How to adapt a website’s l a y o u t f o r m u l t i p l e s c r e e n resolutions. What is responsive web design? URL 1 WEB 1 RWD

Slide 28

Slide 28 text

http://www.flickr.com/photos/lendog64/5174151519 Start big Adapt to smaller viewport and also an approach RWD

Slide 29

Slide 29 text

http://www.flickr.com/photos/71776414@N00/4835208029/ The elements of RWD Fluid Grids Flexible Images & Media Media Queries Mr Responsive Web Design RWD

Slide 30

Slide 30 text

http://www.flickr.com/photos/bre/552152780/ Based on some proven tools Graceful degradation Flexible Layouts CSS 2.1 Media Types RWD

Slide 31

Slide 31 text

http://www.flickr.com/photos/39718079@N00/172647550/ #nav { float: left; width: 25%; #content { float: left; margin-left: 5%; Fluid Grids RWD

Slide 32

Slide 32 text

http://www.flickr.com/photos/x1brett/6049667982/ Flexible Images & Media fit a 500px media How to 800px container In a 100px container or a RWD

Slide 33

Slide 33 text

http://www.flickr.com/photos/30145139@N07/5299081893/ @media screen and (max-width: 1160px) { #drapeRight, #drapeLeft, #award { display: none; } } /* Horizontal limits */ @media screen and (max-width: 1540px) { #teo, #balloons { display: none; } } Media Queries RWD

Slide 34

Slide 34 text

http://www.flickr.com/photos/11777427@N05/1184491822/ Split up vertical & horizontal breakpoints Fixed positioned elements are important to test Tips & Advices RWD Display:none = not mobile friendly

Slide 35

Slide 35 text

http://www.flickr.com/photos/steve0_f/416266654/ Media Queries: Fool’s Gold I pity the FOOL!!! All you need to do to transform your desktop web design into something optimized for devices with smaller screens, less powerful CPUs, and slower network connections is to add more code. * Jason Grigsby RWD

Slide 36

Slide 36 text

http://www.flickr.com/photos/steve0_f/416266654/ Media Queries: Fool’s Gold I pity the FOOL!!! RWD

Slide 37

Slide 37 text

http://www.flickr.com/photos/steffenz/3101130384/ Build from the top-down Doesn’t solve the “context” Give flexibility over the viewport Hot right now http://pinchzoom.com/posts/a-mobile-magazine-prototype/ http://www.cloudfour.com/css-media-query-for-mobile-is-fools-gold/ Only one content/URL In a nutshell RWD Go further:

Slide 38

Slide 38 text

http://www.flickr.com/photos/17927408@N07/2322337810/ Mobile First Start with me

Slide 39

Slide 39 text

http://www.flickr.com/photos/83346641@N00/3383629917/ Is there a mobile context? Mobile First

Slide 40

Slide 40 text

Anywhere http://www.flickr.com/photos/adactio/6150683333/ Devices capabilities Constraints Everywhere & Some think that, Yes there is Mobile First Luke W

Slide 41

Slide 41 text

http://www.flickr.com/photos/imaphotog/205492402/ Mobile First Unique User Experience Mobile First

Slide 42

Slide 42 text

http://www.flickr.com/photos/imaphotog/205492402/ Mobile First “they create a truly Personalized and Responsive user experience regardless of the situation.” Tim Kadlec Unique User Experience Mobile First

Slide 43

Slide 43 text

http://www.flickr.com/photos/86009833@N00/2771273050/ Understand the Mobile Contexts when creating UX What is it then? Holding a beer Holding is phone Ridding a train Mobile First

Slide 44

Slide 44 text

http://www.flickr.com/photos/86009833@N00/2771273050/ Danger of assumptions Mobile First Get only this

Slide 45

Slide 45 text

http://www.flickr.com/photos/86009833@N00/2771273050/ Mobile First I really wanted this Danger of assumptions

Slide 46

Slide 46 text

http://www.flickr.com/photos/90963248@N00/299066758/ Content Priorities Why mobile 1st then? Mobile First FOCUS

Slide 47

Slide 47 text

http://www.flickr.com/photos/90963248@N00/299066758/ Why mobile 1st then? Mobile First

Slide 48

Slide 48 text

http://www.flickr.com/photos/90963248@N00/299066758/ Why mobile 1st then? Mobile First

Slide 49

Slide 49 text

http://www.flickr.com/photos/90963248@N00/299066758/ Why mobile 1st then? Mobile First

Slide 50

Slide 50 text

http://www.flickr.com/photos/boston_public_library/5712631379/ Why mobile 1st then? Mobile First Agreement

Slide 51

Slide 51 text

http://www.flickr.com/photos/arselectronica/4959753845/ GPS Multi-touch / Gestures Accelerometer Camera Take advantage of new technologies Mobile First

Slide 52

Slide 52 text

http://www.flickr.com/photos/boston_public_library/6303112003 (Many web users are mobile-only) mobile subscribers = To reach more people Mobile First 5,3 Billion Of world population 77% Source: www.internetworldstats.com/ www.lukew.com/ff/entry.asp?1426

Slide 53

Slide 53 text

http://www.flickr.com/photos/boston_public_library/6303112003 (Many web users are mobile-only) mobile subscribers = To reach more people Mobile First 5,3 Billion Of world population 77% Source: www.internetworldstats.com/ www.lukew.com/ff/entry.asp?1426 Need more data? 2015 $4 Billion 3 x 20 %

Slide 54

Slide 54 text

http://www.flickr.com/photos/paulr/2978291797 Scale up, not down How Mobile First Start small

Slide 55

Slide 55 text

(if you want to support more than smartphones superstars) http://www.flickr.com/photos/steffenz/3100246315/ Build from the small to large Focus on what matters Why not having a separate url .m / mobile. http://www.cloudfour.com/on-mobile-context/ http://www.lukew.com/ff/entry.asp?933 http://www.lukew.com/ff/entry.asp?1333 http://yiibu.com/ http://bradfrostweb.com/blog/web/mobile-first-responsive-web-design/ SUPER DUPER HARD In a nutshell Mobile First Go further:

Slide 56

Slide 56 text

http://www.flickr.com/photos/lazzeresky/5200654959 Challenges

Slide 57

Slide 57 text

http://www.flickr.com/photos/djou/260839373/ Developement cost & time Is the team ready? How long until they are? How much trial & error? Challenges

Slide 58

Slide 58 text

http://www.flickr.com/photos/glsims99/1404828286/ Breaking point is a defined size at which the design changes How many breaking points 1 2 More ? Challenges

Slide 59

Slide 59 text

http://www.flickr.com/photos/golitlee/270342959/ How many prototypes / mockups / design? Challenges

Slide 60

Slide 60 text

http://www.flickr.com/photos/45940879@N04/5421517469/ Consistency? Missing content? What about UX? New navigation Challenges

Slide 61

Slide 61 text

You see it the sidebar You don’t It changes What about UX? Challenges

Slide 62

Slide 62 text

We removed […] the sidebar because […] posting a job from a tablet or mobile is pretty unlikely given how much input is involved Localization: Only Mobile …Filtering bar changes substantially on desktop vs. tablet A matter of choices What about UX? Cameron Moll Authentic Jobs Challenges

Slide 63

Slide 63 text

http://www.flickr.com/photos/26121794@N07/4049957908/ Advertising money What of the real-estate on smaller screens? Is smaller ads = less revenue? Maybe smart to keep a separate mobile site Challenges

Slide 64

Slide 64 text

http://www.flickr.com/photos/26121794@N07/4049957908/ Advertising money Challenges The main challenge associated to a new responsive design was the advertising. (...) we didn't work on a new revenue model, we are basically just resizing the images as we go down to mobile Vitaly Friedman

Slide 65

Slide 65 text

http://www.flickr.com/photos/paloetic/4928290705/ Where to now?

Slide 66

Slide 66 text

http://www.flickr.com/photos/41185766@N03/4760692715/ Closer teams Where to now? Yum... javascript image resizing Nam nam, More UX flavor

Slide 67

Slide 67 text

http://www.flickr.com/photos/huasonic/1443767744/ Rapid iterations More flexibility HTML prototyping Where to now?

Slide 68

Slide 68 text

http://www.flickr.com/photos/huasonic/1443767744/ Rapid iterations More flexibility HTML prototyping Where to now? Foundation by Zurb

Slide 69

Slide 69 text

http://www.flickr.com/photos/luc/6217776582/ Less static design = bye Photoshop ? Should we let go of our habits? Let go of the past Where to now?

Slide 70

Slide 70 text

http://www.flickr.com/photos/evalottchen/4666617453 Content Stack CMS not ready yet Content First Where to now?

Slide 71

Slide 71 text

http://www.flickr.com/photos/astique/85164557/ Content First Where to now?

Slide 72

Slide 72 text

4 Where to now? Content First Clever Web One web Future Friendly Multisize Web Responsive Enhancement We have to make content that endures – that lives through those shifts, not loses its meaning.* http://endlesslycontent.com/2011/08/04/structured-content-shifting-context-responsive-design/

Slide 73

Slide 73 text

4 And here we are Where to now? There's a digital evolution taking place - one with exciting implications for Web designers. Heard that before ? http://www.flickr.com/photos/vox_efx/3501000840/

Slide 74

Slide 74 text

4 And here we are Where to now? 12 years ago http://www.flickr.com/photos/vox_efx/3501000840/

Slide 75

Slide 75 text

http://www.flickr.com/photos/jonworth/105842934/ Stephanie & Bryan Rieger Luke Wroblewski Ethan Marcotte Jason Grigsby Brad Frost Precious-Forever And many more... Based on the work of The Multisize web

Slide 76

Slide 76 text

http://www.flickr.com/photos/chesh2000/2465710741/ http://www.flickr.com/photos/31525431@N00/4328160674/ http://www.flickr.com/photos/58402751@N00/2657011662/ http://www.flickr.com/photos/tambako/3593686294/ http://www.flickr.com/photos/laurenmanning/2979574719/ http://www.flickr.com/photos/houghtonregis/4371208302/ http://www.flickr.com/photos/38305415@N00/5873954634/ http://www.flickr.com/photos/joebustillos/5413847585/ http://www.flickr.com/photos/15734079@N00/397345394/ http://www.flickr.com/photos/95046608@N00/5470303560/ http://www.flickr.com/photos/47610090@N07/4389698869/ http://www.flickr.com/photos/53844278@N04/5631891766/ http://www.flickr.com/photos/b-tal/163450213/ http://www.flickr.com/photos/b-tal/163450213/ http://www.flickr.com/photos/steffenz/3100246315/ http://www.flickr.com/photos/wasabicube/5864797151/ http://www.flickr.com/photos/andrec/2893549851/ http://www.flickr.com/photos/81445502@N00/4365152223/ http://www.flickr.com/photos/99983307@N00/4299377933/ http://www.flickr.com/photos/58944004@N00/2542795166/ http://www.flickr.com/photos/71776414@N00/4835208029/ http://www.flickr.com/photos/roland/4305223929/ http://www.flickr.com/photos/glsims99/1404828286/ http://www.flickr.com/photos/mondayne/3410286069/ http://www.flickr.com/photos/45940879@N04/5421517469/ http://www.flickr.com/photos/26121794@N07/4049957908/ http://www.flickr.com/photos/steve0_f/416266654/ http://www.flickr.com/photos/steffenz/3101130384/ http://www.flickr.com/photos/17927408@N07/2322337810/ http://www.flickr.com/photos/83346641@N00/3383629917/ http://www.flickr.com/photos/localcelebrity/4831362933 http://www.flickr.com/photos/imaphotog/205492402/ http://www.flickr.com/photos/86009833@N00/2771273050/ http://www.flickr.com/photos/90963248@N00/299066758/ http://www.flickr.com/photos/boston_public_library/5712631379/ http://www.flickr.com/photos/arselectronica/4959753845/ http://www.flickr.com/photos/laurenmanning/2979574719/ http://www.flickr.com/photos/paulr/2978291797 http://www.flickr.com/photos/fritish/3423037412/ http://www.flickr.com/photos/fritish/3423037412/ http://www.flickr.com/photos/crazyeddie/2888389000/ http://www.flickr.com/photos/lazzeresky/5200654959 http://www.flickr.com/photos/41185766@N03/4760692715/ http://www.flickr.com/photos/huasonic/1443767744/ http://www.flickr.com/photos/evalottchen/4666617453 http://www.flickr.com/photos/evalottchen/4666617453 http://www.flickr.com/photos/scatterbrein/5533360139 http://www.flickr.com/photos/chris-fritz/2409491374 http://www.flickr.com/photos/jonworth/105842934/ http://www.flickr.com/photos/16865477@N07/5492830078/ http://www.flickr.com/photos/39718079@N00/172647550/ http://www.flickr.com/photos/x1brett/6049667982/ http://www.flickr.com/photos/30145139@N07/5299081893/ http://www.flickr.com/photos/11777427@N05/1184491822/ http://www.flickr.com/photos/chris-fritz/2409491374 Links ;-) The Multisize web http://bagcheck.com/bag/4986-the-multi-size-web

Slide 77

Slide 77 text

http://www.flickr.com/photos/scatterbrein/5533360139 Takk for meg The Multisize web Eric Haidara @stratosferik erich@ixd.no