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
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
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. http://drupal.org/project/responsive_images
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.
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.
● http://www.designtotheme.com/blog/base-themes
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.
● http://drupal.org/project/domicile_responsive
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”.
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 fixed-
pixel #ID and .class properties.
stylesheets[all][] =
responsivedefault.css
35. 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.
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”.
46. Get It For Yourself
The responsive Drupal theme, Alloy, is
available from:
http://drupal.org/project/alloy
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 css3-
mediaqueries.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 (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.
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.
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.
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:
http://drupal.org/project/alloy
65. Give Aways!
@emmajanedotnet
emma@designtotheme.com
www.responsivewebdesignguild.com
