BEYOND RESPONSIVE. by Marcus Morba (drupal.org/user/ = mori) Sunday 24 November 13

Transcription

1 BEYOND RESPONSIVE by Marcus Morba (drupal.org/user/ = mori) 1

2 my first responsive mobile experience was in

3 2 target devices target resolutions: 240 x 320 and 480 x 640 one code base for layout & content no media queries different CMS site structure & content for mobile 3

4 DON T LAUGH 4

5 TODAY endless devices countless resolutions portrait & landscape media queries ;-)... and still more problems ;-( 5

6 TYPICAL PROBLEMS different resolutions & viewport s portrait & landscape views different connection speeds & bandwidth more browsers & versions device optimized content 6

7 WHAT WE WANT deliver a device, bandwidth, resolution, page orientation and use-case dependent website use-case? WHAT? 7

8 WHY USE-CASES? different people = different situations = different needs Simple examples: a user sitting at home at the evening (after store opening hours) may have a different needs as a user on the run during lunch-break second screen scenarios 8

9 PROBLEMS with display: none if an element is not displayed it does NOT mean it isn t loaded!!! Normally browsers preload all of the images that they can identify in the source code before any CSS or JavaScript is processed 9

10 PROBLEMS Tim Kadlec made a research on how images are downloaded when media queries are involved

11 PROBLEMS with display: none 11

12 PROBLEMS with display: none <div id="test1"> <img src="images/test1.png" alt="" /> all and (max- width: 600px) { #test1 { display:none; } } 12

13 13

14 <div all and (min- width: 601px) { #test5 { background- image:url('images/test5- desktop.png'); width:200px; height:75px; } all and (max- width: 600px) { #test5 { background- image:url('images/test5- mobile.png'); width:200px; height:75px; } } 14

15 15

16 CONCLUSION Embedding images via CSS with background-image works... but now try to deliver images with a CMS! 16

17 OUR OPTIONS device-side-only solutions vs. server-side components 17

18 LET S DO IT! a simple server-side detection example with Drupal 18

19 Modules we need Views 7.x-3.7 Panels 7.x dev Mobile Detect 7.x-1.x-dev 19

20 Step 1: content types 20

21 Step 1: content types 21

22 22

23 Step 2: Image styles 23

24 Step 3: Views 24

25 25

26 26

27 27

28 28

29 Step 4: Panels 29

30 30

31 31

32 32

33 33

34 34

35 35

36 36

37 37

38 38

39 39

40 The results 40

41 41

42 42

43 43

44 THANK YOU! 44

45 WANT SOME MORE? Please check the session recording for this: 45

46 URL s & Stuff: Module URL s from the session & to the topics: mobile_workers.html

47 URL s & Stuff: Module URL s from the session & to the topics:

48 URL s & Stuff: Module URL s from the session & to the topics: (adaptive image styles) Use Google Translator if you can t understand!

49 URL s & Stuff: Module URL s from the session & to the topics: