beyond responsive - drupal camp vienna 2013

BEYOND RESPONSIVEby Marcus Morba

(drupal.org/user/710680 = mori)

1Sunday 24 November 13

my first responsive mobile experience

was in 2004

2Sunday 24 November 13

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

3Sunday 24 November 13

DON´T LAUGH

4Sunday 24 November 13

TODAYendless devices

countless resolutions

portrait & landscape

media queries ;-)

... and still more problems ;-(

5Sunday 24 November 13

TYPICAL PROBLEMSdifferent resolutions & viewport´s

portrait & landscape views

different connection speeds & bandwidth

more browsers & versions

device optimized content

6Sunday 24 November 13

WHAT WE WANTdeliver a device, bandwidth, resolution, page orientation and use-case dependent website

use-case? WHAT?

7Sunday 24 November 13

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

8Sunday 24 November 13

PROBLEMSwith “display: none”

if an element is not displayedit 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

9Sunday 24 November 13

PROBLEMSTim Kadlec made a research on how images are downloaded when media queries are involved.

http://timkadlec.com/2012/04/media-query-asset-downloading-results/

https://github.com/tkadlec/Media-Query-test

10Sunday 24 November 13

PROBLEMSwith “display: none”

11Sunday 24 November 13

PROBLEMSwith “display: none”

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

12Sunday 24 November 13

13Sunday 24 November 13

<div  id="test5"></div>@media  all  and  (min-­‐width:  601px)  {        #test5  {                background-­‐image:url('images/test5-­‐desktop.png');                width:200px;                height:75px;        }}@media  all  and  (max-­‐width:  600px)  {        #test5  {                background-­‐image:url('images/test5-­‐mobile.png');                width:200px;                height:75px;        }}

14Sunday 24 November 13

15Sunday 24 November 13

CONCLUSIONEmbedding images via CSS with

background-image works ...

but

now try to deliver images with a CMS!

16Sunday 24 November 13

OUR OPTIONSdevice-side-only solutions

vs. server-side components

17Sunday 24 November 13

LET´S DO IT!a simple server-side detection

example with Drupal

18Sunday 24 November 13

Modules we needViews 7.x-3.7

Panels 7.x-3.3+41-dev

Mobile Detect 7.x-1.x-dev

19Sunday 24 November 13

Step 1: content types

20Sunday 24 November 13

Step 1: content types

21Sunday 24 November 13

22Sunday 24 November 13

Step 2: Image styles

23Sunday 24 November 13

Step 3: Views

24Sunday 24 November 13

25Sunday 24 November 13

26Sunday 24 November 13

27Sunday 24 November 13

28Sunday 24 November 13

Step 4: Panels

29Sunday 24 November 13

30Sunday 24 November 13

31Sunday 24 November 13

32Sunday 24 November 13

33Sunday 24 November 13

34Sunday 24 November 13

35Sunday 24 November 13

36Sunday 24 November 13

37Sunday 24 November 13

38Sunday 24 November 13

39Sunday 24 November 13

The results

40Sunday 24 November 13

41Sunday 24 November 13

42Sunday 24 November 13

43Sunday 24 November 13

THANK YOU!

44Sunday 24 November 13

WANT SOME MORE?

https://www.youtube.com/watch?v=1jWwrXEMWSQ

Please check the session recording for this:

45Sunday 24 November 13

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

•http://usability.com/2013/03/personas-and-use-cases•http://www.cisco.com/en/US/solutions/ns1007/mobile_workers.html•http://vbridges.com/2013/03/26/virtual-personas-in-the-age-of-mobility/•http://www.slideshare.net/Muiskis/day3-ix-dpersonasscanariosuserstories

46Sunday 24 November 13

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

•https://drupal.org/project/mobile_detect•https://drupal.org/project/mobile_switch•https://drupal.org/project/mobile_tools•https://drupal.org/project/browscap•https://drupal.org/project/mobilizer•https://drupal.org/project/wurfl•https://drupal.org/project/browserclass

47Sunday 24 November 13

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

•https://drupal.org/project/image_resize_filter•https://drupal.org/project/zurb_interchange•https://drupal.org/project/resp_img•https://drupal.org/project/picture•https://drupal.org/project/imgfly•https://drupal.org/project/ais (adaptive image styles)•https://drupal.org/project/adaptive_image•https://drupal.org/project/retina_images•Use Google Translator if you can´t understand!•http://www.netvlies.nl/blog/design-interactie/retina-revolutie•http://www.netvlies.nl/blog/design-interactie/retina-revolutie-follow-up

48Sunday 24 November 13

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

•https://drupal.org/project/breakpoints•https://drupal.org/project/breakpoint_panels•https://drupal.org/project/context_breakpoint

49Sunday 24 November 13