beyond responsive - drupal camp vienna 2013
Post on 31-Aug-2014
474 Views
Preview:
DESCRIPTION
TRANSCRIPT
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
top related