Your SlideShare is downloading. ×
0
Beyond Responsive - Drupal Camp Vienna 2013
Beyond Responsive - Drupal Camp Vienna 2013
Beyond Responsive - Drupal Camp Vienna 2013
Beyond Responsive - Drupal Camp Vienna 2013
Beyond Responsive - Drupal Camp Vienna 2013
Beyond Responsive - Drupal Camp Vienna 2013
Beyond Responsive - Drupal Camp Vienna 2013
Beyond Responsive - Drupal Camp Vienna 2013
Beyond Responsive - Drupal Camp Vienna 2013
Beyond Responsive - Drupal Camp Vienna 2013
Beyond Responsive - Drupal Camp Vienna 2013
Beyond Responsive - Drupal Camp Vienna 2013
Beyond Responsive - Drupal Camp Vienna 2013
Beyond Responsive - Drupal Camp Vienna 2013
Beyond Responsive - Drupal Camp Vienna 2013
Beyond Responsive - Drupal Camp Vienna 2013
Beyond Responsive - Drupal Camp Vienna 2013
Beyond Responsive - Drupal Camp Vienna 2013
Beyond Responsive - Drupal Camp Vienna 2013
Beyond Responsive - Drupal Camp Vienna 2013
Beyond Responsive - Drupal Camp Vienna 2013
Beyond Responsive - Drupal Camp Vienna 2013
Beyond Responsive - Drupal Camp Vienna 2013
Beyond Responsive - Drupal Camp Vienna 2013
Beyond Responsive - Drupal Camp Vienna 2013
Beyond Responsive - Drupal Camp Vienna 2013
Beyond Responsive - Drupal Camp Vienna 2013
Beyond Responsive - Drupal Camp Vienna 2013
Beyond Responsive - Drupal Camp Vienna 2013
Beyond Responsive - Drupal Camp Vienna 2013
Beyond Responsive - Drupal Camp Vienna 2013
Beyond Responsive - Drupal Camp Vienna 2013
Beyond Responsive - Drupal Camp Vienna 2013
Beyond Responsive - Drupal Camp Vienna 2013
Beyond Responsive - Drupal Camp Vienna 2013
Beyond Responsive - Drupal Camp Vienna 2013
Beyond Responsive - Drupal Camp Vienna 2013
Beyond Responsive - Drupal Camp Vienna 2013
Beyond Responsive - Drupal Camp Vienna 2013
Beyond Responsive - Drupal Camp Vienna 2013
Beyond Responsive - Drupal Camp Vienna 2013
Beyond Responsive - Drupal Camp Vienna 2013
Beyond Responsive - Drupal Camp Vienna 2013
Beyond Responsive - Drupal Camp Vienna 2013
Beyond Responsive - Drupal Camp Vienna 2013
Beyond Responsive - Drupal Camp Vienna 2013
Beyond Responsive - Drupal Camp Vienna 2013
Beyond Responsive - Drupal Camp Vienna 2013
Beyond Responsive - Drupal Camp Vienna 2013
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Beyond Responsive - Drupal Camp Vienna 2013

309

Published on

A session with Best-Practices & How to´s for targeting different devices (Web, Tablet & Smartphones) with Drupal 7 which goes beyond the possibilities of a responsive theme to deliver the best …

A session with Best-Practices & How to´s for targeting different devices (Web, Tablet & Smartphones) with Drupal 7 which goes beyond the possibilities of a responsive theme to deliver the best possible UI/UX for your visitors.

What you will see:
- Typical problems with targeting different devices
- Personas & Use-Cases of visitors
- How to setup different layouts for different devices
- How to optimize/setup content displays for the different devices (Textlength, - Image-Sizes, Retina-Support, Optimize Source-Code ...)
- Overview of useful modules
- Drupal 8-Preview

Session Details & a Demo-Installation: https://2013.drupalcamp.at/session/beyond-responsive-drupal-multi-device-setups

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

Published in: Technology, Design
2 Comments
1 Like
Statistics
Notes
  • D8 Innitatives: https://drupal.org/node/2107085

    FRONTEND: Twig and the new theme layer in Drupal 8: https://drupal.org/node/2008464

    Media: https://groups.drupal.org/media

    -> Sprint report: https://groups.drupal.org/node/327768

    UX & UI: https://drupal.org/community-initiatives/drupal-core/usability
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • If you want have less problems in your future, help to make D8 better !!!

       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
309
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
6
Comments
2
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  1. BEYOND RESPONSIVE by Marcus Morba (drupal.org/user/710680 = mori) Sunday 24 November 13 1
  2. my first responsive mobile experience was in 2004 Sunday 24 November 13 2
  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 Sunday 24 November 13 3
  4. DON´T LAUGH Sunday 24 November 13 4
  5. TODAY endless devices countless resolutions portrait & landscape media queries ;-) ... and still more problems ;-( Sunday 24 November 13 5
  6. TYPICAL PROBLEMS different resolutions & viewport´s portrait & landscape views different connection speeds & bandwidth more browsers & versions device optimized content Sunday 24 November 13 6
  7. WHAT WE WANT deliver a device, bandwidth, resolution, page orientation and use-case dependent website use-case? WHAT? Sunday 24 November 13 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 Sunday 24 November 13 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 Sunday 24 November 13 9
  10. PROBLEMS Tim Kadlec made a research on how images are downloaded when media queries are involved. http://timkadlec.com/2012/04/media-query-assetdownloading-results/ https://github.com/tkadlec/Media-Query-test Sunday 24 November 13 10
  11. PROBLEMS with “display: none” Sunday 24 November 13 11
  12. PROBLEMS with “display: none” <div  id="test1">        <img  src="images/test1.png"  alt=""  /> </div> @media  all  and  (max-­‐width:  600px)  {        #test1  {  display:none;  } } Sunday 24 November 13 12
  13. Sunday 24 November 13 13
  14. <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;        } } Sunday 24 November 13 14
  15. Sunday 24 November 13 15
  16. CONCLUSION Embedding images via CSS with background-image works ... but now try to deliver images with a CMS! Sunday 24 November 13 16
  17. OUR OPTIONS device-side-only solutions vs. server-side components Sunday 24 November 13 17
  18. LET´S DO IT! a simple server-side detection example with Drupal Sunday 24 November 13 18
  19. Modules we need Views 7.x-3.7 Panels 7.x-3.3+41-dev Mobile Detect 7.x-1.x-dev Sunday 24 November 13 19
  20. Step 1: content types Sunday 24 November 13 20
  21. Step 1: content types Sunday 24 November 13 21
  22. Sunday 24 November 13 22
  23. Step 2: Image styles Sunday 24 November 13 23
  24. Step 3: Views Sunday 24 November 13 24
  25. Sunday 24 November 13 25
  26. Sunday 24 November 13 26
  27. Sunday 24 November 13 27
  28. Sunday 24 November 13 28
  29. Step 4: Panels Sunday 24 November 13 29
  30. Sunday 24 November 13 30
  31. Sunday 24 November 13 31
  32. Sunday 24 November 13 32
  33. Sunday 24 November 13 33
  34. Sunday 24 November 13 34
  35. Sunday 24 November 13 35
  36. Sunday 24 November 13 36
  37. Sunday 24 November 13 37
  38. Sunday 24 November 13 38
  39. Sunday 24 November 13 39
  40. The results Sunday 24 November 13 40
  41. Sunday 24 November 13 41
  42. Sunday 24 November 13 42
  43. Sunday 24 November 13 43
  44. THANK YOU! Sunday 24 November 13 44
  45. WANT SOME MORE? Please check the session recording for this: https://www.youtube.com/watch?v=1jWwrXEMWSQ Sunday 24 November 13 45
  46. 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-inthe-age-of-mobility/ •http://www.slideshare.net/Muiskis/day3-ixdpersonasscanariosuserstories Sunday 24 November 13 46
  47. 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 Sunday 24 November 13 47
  48. 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 Sunday 24 November 13 48
  49. 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 Sunday 24 November 13 49

×