Beyond Responsive - Drupal Camp Vienna 2013
-
Upload
drupal-rockscom -
Category
Technology
-
view
474 -
download
0
description
Transcript of Beyond Responsive - Drupal Camp Vienna 2013
![Page 1: Beyond Responsive - Drupal Camp Vienna 2013](https://reader034.fdocuments.in/reader034/viewer/2022042713/5403b6ed8d7f72294d8b48a8/html5/thumbnails/1.jpg)
BEYOND RESPONSIVEby Marcus Morba
(drupal.org/user/710680 = mori)
1Sunday 24 November 13
![Page 2: Beyond Responsive - Drupal Camp Vienna 2013](https://reader034.fdocuments.in/reader034/viewer/2022042713/5403b6ed8d7f72294d8b48a8/html5/thumbnails/2.jpg)
my first responsive mobile experience
was in 2004
2Sunday 24 November 13
![Page 3: Beyond Responsive - Drupal Camp Vienna 2013](https://reader034.fdocuments.in/reader034/viewer/2022042713/5403b6ed8d7f72294d8b48a8/html5/thumbnails/3.jpg)
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
![Page 4: Beyond Responsive - Drupal Camp Vienna 2013](https://reader034.fdocuments.in/reader034/viewer/2022042713/5403b6ed8d7f72294d8b48a8/html5/thumbnails/4.jpg)
DON´T LAUGH
4Sunday 24 November 13
![Page 5: Beyond Responsive - Drupal Camp Vienna 2013](https://reader034.fdocuments.in/reader034/viewer/2022042713/5403b6ed8d7f72294d8b48a8/html5/thumbnails/5.jpg)
TODAYendless devices
countless resolutions
portrait & landscape
media queries ;-)
... and still more problems ;-(
5Sunday 24 November 13
![Page 6: Beyond Responsive - Drupal Camp Vienna 2013](https://reader034.fdocuments.in/reader034/viewer/2022042713/5403b6ed8d7f72294d8b48a8/html5/thumbnails/6.jpg)
TYPICAL PROBLEMSdifferent resolutions & viewport´s
portrait & landscape views
different connection speeds & bandwidth
more browsers & versions
device optimized content
6Sunday 24 November 13
![Page 7: Beyond Responsive - Drupal Camp Vienna 2013](https://reader034.fdocuments.in/reader034/viewer/2022042713/5403b6ed8d7f72294d8b48a8/html5/thumbnails/7.jpg)
WHAT WE WANTdeliver a device, bandwidth, resolution, page orientation and use-case dependent website
use-case? WHAT?
7Sunday 24 November 13
![Page 8: Beyond Responsive - Drupal Camp Vienna 2013](https://reader034.fdocuments.in/reader034/viewer/2022042713/5403b6ed8d7f72294d8b48a8/html5/thumbnails/8.jpg)
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
![Page 9: Beyond Responsive - Drupal Camp Vienna 2013](https://reader034.fdocuments.in/reader034/viewer/2022042713/5403b6ed8d7f72294d8b48a8/html5/thumbnails/9.jpg)
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
![Page 10: Beyond Responsive - Drupal Camp Vienna 2013](https://reader034.fdocuments.in/reader034/viewer/2022042713/5403b6ed8d7f72294d8b48a8/html5/thumbnails/10.jpg)
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
![Page 11: Beyond Responsive - Drupal Camp Vienna 2013](https://reader034.fdocuments.in/reader034/viewer/2022042713/5403b6ed8d7f72294d8b48a8/html5/thumbnails/11.jpg)
PROBLEMSwith “display: none”
11Sunday 24 November 13
![Page 12: Beyond Responsive - Drupal Camp Vienna 2013](https://reader034.fdocuments.in/reader034/viewer/2022042713/5403b6ed8d7f72294d8b48a8/html5/thumbnails/12.jpg)
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
![Page 13: Beyond Responsive - Drupal Camp Vienna 2013](https://reader034.fdocuments.in/reader034/viewer/2022042713/5403b6ed8d7f72294d8b48a8/html5/thumbnails/13.jpg)
13Sunday 24 November 13
![Page 14: Beyond Responsive - Drupal Camp Vienna 2013](https://reader034.fdocuments.in/reader034/viewer/2022042713/5403b6ed8d7f72294d8b48a8/html5/thumbnails/14.jpg)
<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
![Page 15: Beyond Responsive - Drupal Camp Vienna 2013](https://reader034.fdocuments.in/reader034/viewer/2022042713/5403b6ed8d7f72294d8b48a8/html5/thumbnails/15.jpg)
15Sunday 24 November 13
![Page 16: Beyond Responsive - Drupal Camp Vienna 2013](https://reader034.fdocuments.in/reader034/viewer/2022042713/5403b6ed8d7f72294d8b48a8/html5/thumbnails/16.jpg)
CONCLUSIONEmbedding images via CSS with
background-image works ...
but
now try to deliver images with a CMS!
16Sunday 24 November 13
![Page 17: Beyond Responsive - Drupal Camp Vienna 2013](https://reader034.fdocuments.in/reader034/viewer/2022042713/5403b6ed8d7f72294d8b48a8/html5/thumbnails/17.jpg)
OUR OPTIONSdevice-side-only solutions
vs. server-side components
17Sunday 24 November 13
![Page 18: Beyond Responsive - Drupal Camp Vienna 2013](https://reader034.fdocuments.in/reader034/viewer/2022042713/5403b6ed8d7f72294d8b48a8/html5/thumbnails/18.jpg)
LET´S DO IT!a simple server-side detection
example with Drupal
18Sunday 24 November 13
![Page 19: Beyond Responsive - Drupal Camp Vienna 2013](https://reader034.fdocuments.in/reader034/viewer/2022042713/5403b6ed8d7f72294d8b48a8/html5/thumbnails/19.jpg)
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
![Page 20: Beyond Responsive - Drupal Camp Vienna 2013](https://reader034.fdocuments.in/reader034/viewer/2022042713/5403b6ed8d7f72294d8b48a8/html5/thumbnails/20.jpg)
Step 1: content types
20Sunday 24 November 13
![Page 21: Beyond Responsive - Drupal Camp Vienna 2013](https://reader034.fdocuments.in/reader034/viewer/2022042713/5403b6ed8d7f72294d8b48a8/html5/thumbnails/21.jpg)
Step 1: content types
21Sunday 24 November 13
![Page 22: Beyond Responsive - Drupal Camp Vienna 2013](https://reader034.fdocuments.in/reader034/viewer/2022042713/5403b6ed8d7f72294d8b48a8/html5/thumbnails/22.jpg)
22Sunday 24 November 13
![Page 23: Beyond Responsive - Drupal Camp Vienna 2013](https://reader034.fdocuments.in/reader034/viewer/2022042713/5403b6ed8d7f72294d8b48a8/html5/thumbnails/23.jpg)
Step 2: Image styles
23Sunday 24 November 13
![Page 24: Beyond Responsive - Drupal Camp Vienna 2013](https://reader034.fdocuments.in/reader034/viewer/2022042713/5403b6ed8d7f72294d8b48a8/html5/thumbnails/24.jpg)
Step 3: Views
24Sunday 24 November 13
![Page 25: Beyond Responsive - Drupal Camp Vienna 2013](https://reader034.fdocuments.in/reader034/viewer/2022042713/5403b6ed8d7f72294d8b48a8/html5/thumbnails/25.jpg)
25Sunday 24 November 13
![Page 26: Beyond Responsive - Drupal Camp Vienna 2013](https://reader034.fdocuments.in/reader034/viewer/2022042713/5403b6ed8d7f72294d8b48a8/html5/thumbnails/26.jpg)
26Sunday 24 November 13
![Page 27: Beyond Responsive - Drupal Camp Vienna 2013](https://reader034.fdocuments.in/reader034/viewer/2022042713/5403b6ed8d7f72294d8b48a8/html5/thumbnails/27.jpg)
27Sunday 24 November 13
![Page 28: Beyond Responsive - Drupal Camp Vienna 2013](https://reader034.fdocuments.in/reader034/viewer/2022042713/5403b6ed8d7f72294d8b48a8/html5/thumbnails/28.jpg)
28Sunday 24 November 13
![Page 29: Beyond Responsive - Drupal Camp Vienna 2013](https://reader034.fdocuments.in/reader034/viewer/2022042713/5403b6ed8d7f72294d8b48a8/html5/thumbnails/29.jpg)
Step 4: Panels
29Sunday 24 November 13
![Page 30: Beyond Responsive - Drupal Camp Vienna 2013](https://reader034.fdocuments.in/reader034/viewer/2022042713/5403b6ed8d7f72294d8b48a8/html5/thumbnails/30.jpg)
30Sunday 24 November 13
![Page 31: Beyond Responsive - Drupal Camp Vienna 2013](https://reader034.fdocuments.in/reader034/viewer/2022042713/5403b6ed8d7f72294d8b48a8/html5/thumbnails/31.jpg)
31Sunday 24 November 13
![Page 32: Beyond Responsive - Drupal Camp Vienna 2013](https://reader034.fdocuments.in/reader034/viewer/2022042713/5403b6ed8d7f72294d8b48a8/html5/thumbnails/32.jpg)
32Sunday 24 November 13
![Page 33: Beyond Responsive - Drupal Camp Vienna 2013](https://reader034.fdocuments.in/reader034/viewer/2022042713/5403b6ed8d7f72294d8b48a8/html5/thumbnails/33.jpg)
33Sunday 24 November 13
![Page 34: Beyond Responsive - Drupal Camp Vienna 2013](https://reader034.fdocuments.in/reader034/viewer/2022042713/5403b6ed8d7f72294d8b48a8/html5/thumbnails/34.jpg)
34Sunday 24 November 13
![Page 35: Beyond Responsive - Drupal Camp Vienna 2013](https://reader034.fdocuments.in/reader034/viewer/2022042713/5403b6ed8d7f72294d8b48a8/html5/thumbnails/35.jpg)
35Sunday 24 November 13
![Page 36: Beyond Responsive - Drupal Camp Vienna 2013](https://reader034.fdocuments.in/reader034/viewer/2022042713/5403b6ed8d7f72294d8b48a8/html5/thumbnails/36.jpg)
36Sunday 24 November 13
![Page 37: Beyond Responsive - Drupal Camp Vienna 2013](https://reader034.fdocuments.in/reader034/viewer/2022042713/5403b6ed8d7f72294d8b48a8/html5/thumbnails/37.jpg)
37Sunday 24 November 13
![Page 38: Beyond Responsive - Drupal Camp Vienna 2013](https://reader034.fdocuments.in/reader034/viewer/2022042713/5403b6ed8d7f72294d8b48a8/html5/thumbnails/38.jpg)
38Sunday 24 November 13
![Page 39: Beyond Responsive - Drupal Camp Vienna 2013](https://reader034.fdocuments.in/reader034/viewer/2022042713/5403b6ed8d7f72294d8b48a8/html5/thumbnails/39.jpg)
39Sunday 24 November 13
![Page 40: Beyond Responsive - Drupal Camp Vienna 2013](https://reader034.fdocuments.in/reader034/viewer/2022042713/5403b6ed8d7f72294d8b48a8/html5/thumbnails/40.jpg)
The results
40Sunday 24 November 13
![Page 41: Beyond Responsive - Drupal Camp Vienna 2013](https://reader034.fdocuments.in/reader034/viewer/2022042713/5403b6ed8d7f72294d8b48a8/html5/thumbnails/41.jpg)
41Sunday 24 November 13
![Page 42: Beyond Responsive - Drupal Camp Vienna 2013](https://reader034.fdocuments.in/reader034/viewer/2022042713/5403b6ed8d7f72294d8b48a8/html5/thumbnails/42.jpg)
42Sunday 24 November 13
![Page 43: Beyond Responsive - Drupal Camp Vienna 2013](https://reader034.fdocuments.in/reader034/viewer/2022042713/5403b6ed8d7f72294d8b48a8/html5/thumbnails/43.jpg)
43Sunday 24 November 13
![Page 44: Beyond Responsive - Drupal Camp Vienna 2013](https://reader034.fdocuments.in/reader034/viewer/2022042713/5403b6ed8d7f72294d8b48a8/html5/thumbnails/44.jpg)
THANK YOU!
44Sunday 24 November 13
![Page 45: Beyond Responsive - Drupal Camp Vienna 2013](https://reader034.fdocuments.in/reader034/viewer/2022042713/5403b6ed8d7f72294d8b48a8/html5/thumbnails/45.jpg)
WANT SOME MORE?
https://www.youtube.com/watch?v=1jWwrXEMWSQ
Please check the session recording for this:
45Sunday 24 November 13
![Page 46: Beyond Responsive - Drupal Camp Vienna 2013](https://reader034.fdocuments.in/reader034/viewer/2022042713/5403b6ed8d7f72294d8b48a8/html5/thumbnails/46.jpg)
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
![Page 47: Beyond Responsive - Drupal Camp Vienna 2013](https://reader034.fdocuments.in/reader034/viewer/2022042713/5403b6ed8d7f72294d8b48a8/html5/thumbnails/47.jpg)
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
![Page 48: Beyond Responsive - Drupal Camp Vienna 2013](https://reader034.fdocuments.in/reader034/viewer/2022042713/5403b6ed8d7f72294d8b48a8/html5/thumbnails/48.jpg)
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
![Page 49: Beyond Responsive - Drupal Camp Vienna 2013](https://reader034.fdocuments.in/reader034/viewer/2022042713/5403b6ed8d7f72294d8b48a8/html5/thumbnails/49.jpg)
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