Enhancing User Experience: Implementing Responsive Design for Mjskok.com

1. Case study: Implementing the design for mjskok.com Natalie Keller – Charles River Web

2. Design by Tom O’Keefe

3. Design by Tom O’Keefe

4. Our first responsive site

5. Adaptivetheme • http://drupal.org/project/adaptivetheme • http://adaptivethemes.com Responsive HTML5 Drupal 7 Base Theme by Jeff Burnz

6. Manages layout for different-sized screens

7. Standard layout

8. Standard layout, cont’d

9. Stylesheet /* Standard layout three-col-grail */ @media only screen and (min-width:951px) { .container { width: 100%; max-width: 1280px; } .two-sidebars .content-inner { margin-left: 200px; margin-right: 292px; } . . . }

10. Smartphone layout - landscape

11. Smartphone layout - portrait

12. Stylesheet /* Smartphone portrait one-col-stack */ @media only screen and (max-width:320px) { } /* Smartphone landscape one-col-stack */ @media only screen and (min-width:321px) and (max-width:480px) { } /* Tablet portrait one-col-vert */ @media only screen and (min-width:481px) and (max-width:768px) { } /* Tablet landscape three-col-grail */ @media only screen and (min-width:769px) and (max-width:950px) { } /* Standard layout three-col-grail */ @media only screen and (min-width:951px) { }

13. Responsive CSS files Generated by AT (don’t touch): files/at_css/<your theme>.responsive.layout.css All yours: <your theme>/css/<your theme>.responsive.layout.css

14. Example: Resource grid

15. Example: Resource grid

16. Narrow screen Three columns become one.

17. In the stylesheet /* Smartphone portrait */ @media only screen and (max-width:320px) { #resource-heading { display: none; } } /* Smartphone landscape */ @media only screen and (min-width:321px) and (max-width:480px) { #resource-heading { display: none; } } /* Tablet portrait */ @media only screen and (min-width:481px) and (max-width:768px) { #resource-heading { display: none; } }

18. …more stylesheet /* Tablet landscape (for low res; above 950px wide use regular display) */ @media only screen and (min-width:769px) and (max-width:950px) { #resource-heading { display: none; } } /* Standard layout */ @media only screen and (min-width:951px) { .view-resources .view-empty .view-header { display: none; } }

19. Testing strategy • Potentially infinite range of devices and browsers to test • Limited testing hardware

20. In our office • 4 Macs • Each running Windows on a VM • 1 Windows netbook Enough for all the versions of any non-mobile browser we care to test.

21. Your desktop browser

22. Tools on the web testiphone.com ipadpeek.com For Windows: spoon.net/browsers runs browsers in a virtual machine

23. Random photo backgrounds

24. The steps • Make a photo content type • Make a scaled and cropped image style for phones • When the page loads, PHP randomly picks an image and communicates it to the JS • JavaScript uses the large or small image depending on the window size.

25. The code: template.php function skoktheme_preprocess_page(&$vars) { // Get list of all background_image nodes $query =db_select('node','n'); $query->condition('n.type','background_image','=') ->fields('n',array('nid')); $result = $query->execute()->fetchAll(); // Get one randomly from the list $random_key =array_rand($result); $random_nid= $result[$random_key]->nid; $random_node=node_load($random_nid);

26. template.php, cont’d // Get the image filename $filename = $random_node->field_photo[$random_node-> language][0]['filename']; // Send the path to files directory and the chosen filename to JS drupal_add_js(array('skoktheme' => array( 'path_to_files'=> variable_get('file_public_path', conf_path() . '/files'), 'filename' => $filename ) ),'setting'); // Attach JS file and add to template variables drupal_add_js(drupal_get_path('theme', 'skoktheme') .'/skok-background.js',array('group' => JS_THEME,'scope' =>'footer', ‘cache' =>FALSE)); $vars['scripts'] =drupal_get_js();

27. JavaScript: Drupal behaviors wrapper (function ($) { if ($('html').css('background-image') !='none') { Drupal.behaviors.bgImage = { attach:function (context, settings) { . . . } }; } })(jQuery);

28. Inside the wrapper var pathToFiles = Drupal.settings.skoktheme.path_to_files; // Get a random bg image to plug in var filename = Drupal.settings.skoktheme.filename; var contentwidth = $('.container').width(); if ((contentwidth) < ’481') { $('html').css('background-image','url(/' + pathToFiles + '/styles/phone/public/backgrounds/'+ filename + ')'); } else { $('html').css('background-image','url(/' + pathToFiles + '/backgrounds/' + filename +')'); }

29. The CSS From http://css-tricks.com/perfect-full-page-background-image/ html { background: url(/sites/default/files/backgrounds/grand-canyon.jpg) no-repeat center center fixed #000; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }

30. For IE7 - 8 <body> <!--[if lt IE 9]> <img id="background" src="/sites/default/files/backgrounds/grand-canyon.jpg" /> <![endif]--> Get the CSS at http://css-tricks.com/perfect-full-page-background-image/

31. Break from code

32. Taxonomy menu wth nice paths

33. The steps Goal 1: Get terms in menu and get menu items to have the right path • Install Taxonomy Menu • Implement one of its hooks Goal 2: Get resulting page to show the correct content • Use contextual filters in Views to limit content based on the path

34. Taxonomy edit screen

35. hook_taxonomy_menu_path() function resource_menu_taxonomy_menu_path() { $output = array( 'resource_menu_path_terms' => t('Taxonomy name/tid') ); return $output; }

36. Callback function resource_menu_path_terms($vid, $tid) { // Get the vocabulary name $vocab = taxonomy_vocabulary_load($vid); $name = $vocab->machine_name; // Build the path $path = $name.'/'.$tid; return $path; }

37. Configuring the view

38. Page settings: Path

39. Advanced: Contextual Filter

40. Advanced: Contextual Filter

41. Advanced: Contextual Filter i.e., mjskok.com/resources

43. THE END