Responsive Web Design for Drupal, CMS Expo
-
Upload
emma-jane-hogbin -
Category
Technology
-
view
110 -
download
0
description
Transcript of Responsive Web Design for Drupal, CMS Expo
![Page 2: Responsive Web Design for Drupal, CMS Expo](https://reader034.fdocuments.us/reader034/viewer/2022051515/54c7bc934a7959d0418b456d/html5/thumbnails/2.jpg)
I am IAM
![Page 3: Responsive Web Design for Drupal, CMS Expo](https://reader034.fdocuments.us/reader034/viewer/2022051515/54c7bc934a7959d0418b456d/html5/thumbnails/3.jpg)
SorryA boot
eh?
![Page 4: Responsive Web Design for Drupal, CMS Expo](https://reader034.fdocuments.us/reader034/viewer/2022051515/54c7bc934a7959d0418b456d/html5/thumbnails/4.jpg)
Drupaldrupal.org/user/1773
Photo: morten.dkLegs: walkah
![Page 5: Responsive Web Design for Drupal, CMS Expo](https://reader034.fdocuments.us/reader034/viewer/2022051515/54c7bc934a7959d0418b456d/html5/thumbnails/5.jpg)
Author / Trainer
http://www.designtotheme.com/workshopshttp://www.designtotheme.com/ebooks
![Page 6: Responsive Web Design for Drupal, CMS Expo](https://reader034.fdocuments.us/reader034/viewer/2022051515/54c7bc934a7959d0418b456d/html5/thumbnails/6.jpg)
</me>
![Page 7: Responsive Web Design for Drupal, CMS Expo](https://reader034.fdocuments.us/reader034/viewer/2022051515/54c7bc934a7959d0418b456d/html5/thumbnails/7.jpg)
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
![Page 8: Responsive Web Design for Drupal, CMS Expo](https://reader034.fdocuments.us/reader034/viewer/2022051515/54c7bc934a7959d0418b456d/html5/thumbnails/8.jpg)
Introduction
In the beginning:● Flexible Layouts● Media queries● Resizeable Images
![Page 9: Responsive Web Design for Drupal, CMS Expo](https://reader034.fdocuments.us/reader034/viewer/2022051515/54c7bc934a7959d0418b456d/html5/thumbnails/9.jpg)
Flexible Layouts
![Page 10: Responsive Web Design for Drupal, CMS Expo](https://reader034.fdocuments.us/reader034/viewer/2022051515/54c7bc934a7959d0418b456d/html5/thumbnails/10.jpg)
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
![Page 11: Responsive Web Design for Drupal, CMS Expo](https://reader034.fdocuments.us/reader034/viewer/2022051515/54c7bc934a7959d0418b456d/html5/thumbnails/11.jpg)
Media Queries in HTML
<link rel="stylesheet" type="text/css"
media="screen and (max-width: 320px)”
href="320-and-smaller.css" />
![Page 12: Responsive Web Design for Drupal, CMS Expo](https://reader034.fdocuments.us/reader034/viewer/2022051515/54c7bc934a7959d0418b456d/html5/thumbnails/12.jpg)
Media Queries in CSS@media screen and (max-width: 320px) { #content, #nav, #sidebar { width: 100%; } #banner { display: none; }}
![Page 13: Responsive Web Design for Drupal, CMS Expo](https://reader034.fdocuments.us/reader034/viewer/2022051515/54c7bc934a7959d0418b456d/html5/thumbnails/13.jpg)
Flexible Content
● Images, Media● Forms
img, iframe, embed, object, input, form {
max-width: 100%;
}
![Page 14: Responsive Web Design for Drupal, CMS Expo](https://reader034.fdocuments.us/reader034/viewer/2022051515/54c7bc934a7959d0418b456d/html5/thumbnails/14.jpg)
Tables● Decide how to linearize your data and collapse or
hide <td>s as appropriate.
![Page 15: Responsive Web Design for Drupal, CMS Expo](https://reader034.fdocuments.us/reader034/viewer/2022051515/54c7bc934a7959d0418b456d/html5/thumbnails/15.jpg)
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
![Page 16: Responsive Web Design for Drupal, CMS Expo](https://reader034.fdocuments.us/reader034/viewer/2022051515/54c7bc934a7959d0418b456d/html5/thumbnails/16.jpg)
Viewport Sizes
![Page 17: Responsive Web Design for Drupal, CMS Expo](https://reader034.fdocuments.us/reader034/viewer/2022051515/54c7bc934a7959d0418b456d/html5/thumbnails/17.jpg)
Adaptive Navigation
![Page 18: Responsive Web Design for Drupal, CMS Expo](https://reader034.fdocuments.us/reader034/viewer/2022051515/54c7bc934a7959d0418b456d/html5/thumbnails/18.jpg)
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. http://drupal.org/project/responsive_images
![Page 19: Responsive Web Design for Drupal, CMS Expo](https://reader034.fdocuments.us/reader034/viewer/2022051515/54c7bc934a7959d0418b456d/html5/thumbnails/19.jpg)
Your Responsive Toolkit
Check out your handout for resources.
![Page 20: Responsive Web Design for Drupal, CMS Expo](https://reader034.fdocuments.us/reader034/viewer/2022051515/54c7bc934a7959d0418b456d/html5/thumbnails/20.jpg)
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.
![Page 21: Responsive Web Design for Drupal, CMS Expo](https://reader034.fdocuments.us/reader034/viewer/2022051515/54c7bc934a7959d0418b456d/html5/thumbnails/21.jpg)
Drupal ThemesProvides “overrides” for any CSS or HTML markup in Drupal core or contrib modules. Occasionally add additional effects.
![Page 22: Responsive Web Design for Drupal, CMS Expo](https://reader034.fdocuments.us/reader034/viewer/2022051515/54c7bc934a7959d0418b456d/html5/thumbnails/22.jpg)
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.● http://www.designtotheme.com/blog/base-themes
![Page 23: Responsive Web Design for Drupal, CMS Expo](https://reader034.fdocuments.us/reader034/viewer/2022051515/54c7bc934a7959d0418b456d/html5/thumbnails/23.jpg)
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.
![Page 24: Responsive Web Design for Drupal, CMS Expo](https://reader034.fdocuments.us/reader034/viewer/2022051515/54c7bc934a7959d0418b456d/html5/thumbnails/24.jpg)
Responsive + Drupal = ?● Creating a responsive Drupal site can be as simple
as applying a single style sheet.● http://drupal.org/project/domicile_responsive
![Page 25: Responsive Web Design for Drupal, CMS Expo](https://reader034.fdocuments.us/reader034/viewer/2022051515/54c7bc934a7959d0418b456d/html5/thumbnails/25.jpg)
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.
![Page 26: Responsive Web Design for Drupal, CMS Expo](https://reader034.fdocuments.us/reader034/viewer/2022051515/54c7bc934a7959d0418b456d/html5/thumbnails/26.jpg)
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.
![Page 27: Responsive Web Design for Drupal, CMS Expo](https://reader034.fdocuments.us/reader034/viewer/2022051515/54c7bc934a7959d0418b456d/html5/thumbnails/27.jpg)
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).
![Page 28: Responsive Web Design for Drupal, CMS Expo](https://reader034.fdocuments.us/reader034/viewer/2022051515/54c7bc934a7959d0418b456d/html5/thumbnails/28.jpg)
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”.
![Page 29: Responsive Web Design for Drupal, CMS Expo](https://reader034.fdocuments.us/reader034/viewer/2022051515/54c7bc934a7959d0418b456d/html5/thumbnails/29.jpg)
Domicile – Original Design
![Page 30: Responsive Web Design for Drupal, CMS Expo](https://reader034.fdocuments.us/reader034/viewer/2022051515/54c7bc934a7959d0418b456d/html5/thumbnails/30.jpg)
Domicile – under 960px
![Page 31: Responsive Web Design for Drupal, CMS Expo](https://reader034.fdocuments.us/reader034/viewer/2022051515/54c7bc934a7959d0418b456d/html5/thumbnails/31.jpg)
Domicile – under 750px
![Page 32: Responsive Web Design for Drupal, CMS Expo](https://reader034.fdocuments.us/reader034/viewer/2022051515/54c7bc934a7959d0418b456d/html5/thumbnails/32.jpg)
Domicile – under 600px
![Page 33: Responsive Web Design for Drupal, CMS Expo](https://reader034.fdocuments.us/reader034/viewer/2022051515/54c7bc934a7959d0418b456d/html5/thumbnails/33.jpg)
Page Element Characteristics
● Navigation (reflow)● Font sizes (allow to adapt)● Imagery (is it necessary to
accomplish page goals?)
![Page 34: Responsive Web Design for Drupal, CMS Expo](https://reader034.fdocuments.us/reader034/viewer/2022051515/54c7bc934a7959d0418b456d/html5/thumbnails/34.jpg)
Flexible Layouts
● Add a new CSS file to your theme that will override fixed-pixel #ID and .class properties.
stylesheets[all][] = responsivedefault.css
![Page 35: Responsive Web Design for Drupal, CMS Expo](https://reader034.fdocuments.us/reader034/viewer/2022051515/54c7bc934a7959d0418b456d/html5/thumbnails/35.jpg)
Media Queries
● Based on your content’s break points, set up the media queries in your new CSS file.
@media screen and (maxwidth: 960px) {}
● Assign new properties and values for containers, fonts and navigation.
![Page 36: Responsive Web Design for Drupal, CMS Expo](https://reader034.fdocuments.us/reader034/viewer/2022051515/54c7bc934a7959d0418b456d/html5/thumbnails/36.jpg)
Revised – Below 960px
![Page 37: Responsive Web Design for Drupal, CMS Expo](https://reader034.fdocuments.us/reader034/viewer/2022051515/54c7bc934a7959d0418b456d/html5/thumbnails/37.jpg)
Revised – Below 750px
![Page 38: Responsive Web Design for Drupal, CMS Expo](https://reader034.fdocuments.us/reader034/viewer/2022051515/54c7bc934a7959d0418b456d/html5/thumbnails/38.jpg)
Revised – Below 650px
![Page 39: Responsive Web Design for Drupal, CMS Expo](https://reader034.fdocuments.us/reader034/viewer/2022051515/54c7bc934a7959d0418b456d/html5/thumbnails/39.jpg)
Below 650px With Nav Fix
![Page 40: Responsive Web Design for Drupal, CMS Expo](https://reader034.fdocuments.us/reader034/viewer/2022051515/54c7bc934a7959d0418b456d/html5/thumbnails/40.jpg)
Flexible Content
● Reset fixed-width content to be fluid.
● Images, Forms, Video● Maybe also data tables.
![Page 41: Responsive Web Design for Drupal, CMS Expo](https://reader034.fdocuments.us/reader034/viewer/2022051515/54c7bc934a7959d0418b456d/html5/thumbnails/41.jpg)
Viewport Sizes
● Create a new template file html.tpl.php
● Add the relevant meta tags● Don’t forget to clear Drupal’s
cache
![Page 42: Responsive Web Design for Drupal, CMS Expo](https://reader034.fdocuments.us/reader034/viewer/2022051515/54c7bc934a7959d0418b456d/html5/thumbnails/42.jpg)
Maybe Support IE
● Choose and use a polyfill.● e.g. respond.js
![Page 43: Responsive Web Design for Drupal, CMS Expo](https://reader034.fdocuments.us/reader034/viewer/2022051515/54c7bc934a7959d0418b456d/html5/thumbnails/43.jpg)
Test Your Site
● Check content reflows.● Check rich media resizes.● Check navigation is usable.● Adjust CSS if necessary.
![Page 44: Responsive Web Design for Drupal, CMS Expo](https://reader034.fdocuments.us/reader034/viewer/2022051515/54c7bc934a7959d0418b456d/html5/thumbnails/44.jpg)
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”.
![Page 45: Responsive Web Design for Drupal, CMS Expo](https://reader034.fdocuments.us/reader034/viewer/2022051515/54c7bc934a7959d0418b456d/html5/thumbnails/45.jpg)
Working with Fusion
![Page 46: Responsive Web Design for Drupal, CMS Expo](https://reader034.fdocuments.us/reader034/viewer/2022051515/54c7bc934a7959d0418b456d/html5/thumbnails/46.jpg)
Get It For Yourself
The responsive Drupal theme, Alloy, is available from:http://drupal.org/project/alloy
![Page 47: Responsive Web Design for Drupal, CMS Expo](https://reader034.fdocuments.us/reader034/viewer/2022051515/54c7bc934a7959d0418b456d/html5/thumbnails/47.jpg)
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.
![Page 48: Responsive Web Design for Drupal, CMS Expo](https://reader034.fdocuments.us/reader034/viewer/2022051515/54c7bc934a7959d0418b456d/html5/thumbnails/48.jpg)
DisclaimerFusion 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.
![Page 49: Responsive Web Design for Drupal, CMS Expo](https://reader034.fdocuments.us/reader034/viewer/2022051515/54c7bc934a7959d0418b456d/html5/thumbnails/49.jpg)
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 css3-
mediaqueries.js● Focuses on “show all” approach, so there are no
hidden elements eating up bandwidth.
![Page 50: Responsive Web Design for Drupal, CMS Expo](https://reader034.fdocuments.us/reader034/viewer/2022051515/54c7bc934a7959d0418b456d/html5/thumbnails/50.jpg)
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 (max-width: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.
![Page 51: Responsive Web Design for Drupal, CMS Expo](https://reader034.fdocuments.us/reader034/viewer/2022051515/54c7bc934a7959d0418b456d/html5/thumbnails/51.jpg)
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.
![Page 52: Responsive Web Design for Drupal, CMS Expo](https://reader034.fdocuments.us/reader034/viewer/2022051515/54c7bc934a7959d0418b456d/html5/thumbnails/52.jpg)
Default Layout
![Page 53: Responsive Web Design for Drupal, CMS Expo](https://reader034.fdocuments.us/reader034/viewer/2022051515/54c7bc934a7959d0418b456d/html5/thumbnails/53.jpg)
Alloy Design
![Page 54: Responsive Web Design for Drupal, CMS Expo](https://reader034.fdocuments.us/reader034/viewer/2022051515/54c7bc934a7959d0418b456d/html5/thumbnails/54.jpg)
Wireframe
![Page 55: Responsive Web Design for Drupal, CMS Expo](https://reader034.fdocuments.us/reader034/viewer/2022051515/54c7bc934a7959d0418b456d/html5/thumbnails/55.jpg)
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.
![Page 56: Responsive Web Design for Drupal, CMS Expo](https://reader034.fdocuments.us/reader034/viewer/2022051515/54c7bc934a7959d0418b456d/html5/thumbnails/56.jpg)
Desktop (1200px)
![Page 57: Responsive Web Design for Drupal, CMS Expo](https://reader034.fdocuments.us/reader034/viewer/2022051515/54c7bc934a7959d0418b456d/html5/thumbnails/57.jpg)
Tablet – Landscape (960px)
![Page 58: Responsive Web Design for Drupal, CMS Expo](https://reader034.fdocuments.us/reader034/viewer/2022051515/54c7bc934a7959d0418b456d/html5/thumbnails/58.jpg)
Tablet – Portrait (768px)
![Page 59: Responsive Web Design for Drupal, CMS Expo](https://reader034.fdocuments.us/reader034/viewer/2022051515/54c7bc934a7959d0418b456d/html5/thumbnails/59.jpg)
Mobile
![Page 60: Responsive Web Design for Drupal, CMS Expo](https://reader034.fdocuments.us/reader034/viewer/2022051515/54c7bc934a7959d0418b456d/html5/thumbnails/60.jpg)
Applying Skins
![Page 61: Responsive Web Design for Drupal, CMS Expo](https://reader034.fdocuments.us/reader034/viewer/2022051515/54c7bc934a7959d0418b456d/html5/thumbnails/61.jpg)
Applying Grid Width Skins
![Page 62: Responsive Web Design for Drupal, CMS Expo](https://reader034.fdocuments.us/reader034/viewer/2022051515/54c7bc934a7959d0418b456d/html5/thumbnails/62.jpg)
Applying Layout Skins
![Page 63: Responsive Web Design for Drupal, CMS Expo](https://reader034.fdocuments.us/reader034/viewer/2022051515/54c7bc934a7959d0418b456d/html5/thumbnails/63.jpg)
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.
![Page 64: Responsive Web Design for Drupal, CMS Expo](https://reader034.fdocuments.us/reader034/viewer/2022051515/54c7bc934a7959d0418b456d/html5/thumbnails/64.jpg)
Get It For Yourself
The responsive Drupal theme, Alloy, is available from:http://drupal.org/project/alloy