Responsive Web Design for Drupal

Transcription

1 Responsive Web Design for Drupal

2 I am IAM

3 Sorry A boot eh?

4 Drupal drupal.org/user/1773 Photo: morten.dk Legs: walkah

5 Author / Trainer

6 </me>

7 Agenda Whirlwind tour of responsive web design. Crash course on base themes in Drupal. Applying responsive principles to Drupal sites. Case study #1: responsive retrofit Case study #2: using Fusion Awesome give-away

8 Introduction In the beginning: Flexible Layouts Media queries Resizeable Images

9 Flexible Layouts

10 Screen Sizes 320px / 80px per column = 4 columns 480px / 80px = 6 columns 600px / 80px = 7 columns with extra breathing room 768px / 80px = 9 columns with extra breathing room 960px / 80px = 12 columns

11 Media Queries in HTML <link rel="stylesheet" type="text/css" media="screen and (max-width: 320px) href="320-and-smaller.css" />

12 Media Queries in screen and (max-width: 320px) { #content, #nav, #sidebar { width: 100%; } #banner { display: none; } }

13 Flexible Content Images, Media Forms img, iframe, embed, object, input, form { max-width: 100%; }

14 Tables Decide how to linearize your data and collapse or hide <td>s as appropriate.

15 IE8 and Lower Polyfill: a javascript shim that replicates the standard API for older browsers (e.g. for media queries, border radius, etc). respond.js adapt.js doesn t serve stuff until it can be used by the browser (good for bandwidth) modernizr

16 Viewport Sizes

17 Adaptive Navigation

18 Responsive Media Handling This is not solved yet. We re still working on what a best practice is. Typically a JS script determines screen size and reports back to the server. Server then gives predetermined low bandwidth content. However, small screen doesn't always mean low bandwidth. It's just easier to make that assumption. e.g.

19 Your Responsive Toolkit Check out your handout for resources.

20 Summary Responsive web sites are just sites that squish down politely. The technology is harder because of our expectations of delivering perfect content. By using existing libraries we can provide an acceptable experience to browsers that don't support modern tech.

21 Drupal Themes Provides overrides for any CSS or HTML markup in Drupal core or contrib modules. Occasionally add additional effects.

22 Base Themes Drupal Base themes are a set of improved theming defaults over Drupal core. If your base theme doesn't improve Drupal, it's not the right base theme for you.

23 My Fave Base Themes Zen has amazing documentation. Use with Zen Grids for maximum efficiency. NineSixty is my go-to theme for quickly banging out just about any theme. Fusion is my go-to theme when I will be handing off the site to someone else to maintain who is tech savvy and may need to update the layout later on.

24 Responsive + Drupal =? Creating a responsive Drupal site can be as simple as applying a single style sheet.

25 Planning the Retrofit Audit the content on the site. Identify content break points. Determine page element characteristics for each new width. Bonus: allocate time for retrofit based on visitor stats.

26 Planning the Retrofit Identify the goal of every type of page. Beauty is not a page goal. (And if it is, you re doing it wrong.) Audit the content on the site. Identify content break points. Determine page element characteristics for each new width. Bonus: allocate time for retrofit based on visitor browser stats.

27 Content Audit Find all the different kinds of things you display on the site. Make a spreadsheet if you have a big site. If relevant, note the contextual relationships of content pieces (e.g. user picture + video submission).

28 Identify Break Points Retrofit is (sort of) a luxury because you have real content. Use content, not device sizes, to determine break points. Stretch / expand your browser to find where the design breaks.

29 Domicile Original Design

30 Domicile under 960px

31 Domicile under 750px

32 Domicile under 600px

33 Page Element Characteristics Navigation (reflow) Font sizes (allow to adapt) Imagery (is it necessary to accomplish page goals?)

34 Flexible Layouts Add a new CSS file to your theme that will override fixedpixel #ID and.class properties. stylesheets[all][] = responsive default.css

35 Media Queries Based on your content s break points, set up the media queries in your new CSS screen and (max width: 960px) {} Assign new properties and values for containers, fonts and navigation.

36 Revised Below 960px

37 Revised Below 750px

38 Revised Below 650px

39 Below 650px With Nav Fix

40 Flexible Content Reset fixed-width content to be fluid. Images, Forms, Video Maybe also data tables.

41 Viewport Sizes Create a new template file html.tpl.php Add the relevant meta tags Don t forget to clear Drupal s cache

42 Maybe Support IE Choose and use a polyfill. e.g. respond.js

43 Test Your Site Check content reflows. Check rich media resizes. Check navigation is usable. Adjust CSS if necessary.

44 Retrofit Summary Define your goals for each page. Ensure your page goals can be met for a variety of device sizes. Apply relevant CSS media queries to ensure content squishes.

45 Working with Fusion

46 Get It For Yourself The responsive Drupal theme, Alloy, is available from:

47 Fusion Uses 960gs with 12 columns by default. Uses more than just regions for layout. Uses skins to alter the properties of blocks for layout. Most configuration done through the admin interface. Well documented.

48 Disclaimer Fusion is my favourite GUI-based base theme. I love their team of developers. The skins are great for clients who want to extend their site. They don t rush to market with the latest feature. They get it right the first time.

49 Responsive Features Flexible layouts. Sane media queries with four layouts. Context-aware forms. Need to add responsiveness for rich media. Supports older browsers with polyfill css3mediaqueries.js Focuses on show all approach, so there are no hidden elements eating up bandwidth.

50 Layouts Desktop only screen and (min-width:1200px) Tablet (landscape) only screen and (max-device-width: 1024px) and (orientation:landscape), only screen and (min-width:960px) and (maxwidth:1199px) and (min-device-width: 1100px) Tablet (portrait) only screen and (max-device-width: 1024px) and (orientation:portrait), only screen and (min-width:768px) and (max-width:959px) and (min-device-width: 1100px) Mobile only screen and (max-width:759px) These can all be easily adjusted in the UI.

51 Regions + Blocks Fusion relies on the 960gs for its regions and block configurations. You may subdivide any region into more columns by assigning the width of a block.

52 Default Layout

53 Alloy Design

54 Wireframe

55 Alloy Responsive Fusion compresses the wireframe for desktop -> tablet. The mobile layout is linearized. You can choose the position of the sidebars through the UI for each of the layouts. With additional CSS you might want to collapse / linearize regions for the the tablet portrait display.

56 Desktop (1200px)

57 Tablet Landscape (960px)

58 Tablet Portrait (768px)

59 Mobile

60 Applying Skins

61 Applying Grid Width Skins

62 Applying Layout Skins

63 Navigation Using superfish JS library. No additional adjustments are made for mobile-friendly navigation. You can make these adjustments based on the Domicile retrofit. Or look at the beta superfish options for touch-friendly navigation.

64 Get It For Yourself The responsive Drupal theme, Alloy, is available from:

65 Give