The document discusses responsive web design principles, tools, and frameworks, particularly focusing on CSS3 media queries, fluid layouts, and flexible images. It covers the use of preprocessing tools like Sass and Compass for cleaner coding and highlights the Zen 5 theme for Drupal as a means to implement these techniques. It provides various resources and examples for creating responsive websites and emphasizes the increasing importance of mobile accessibility.

2. Slides
• Slideshare
http://www.slideshare.net/ucbdrupal/bdug-responsive-
webtheming20120723
• UC Berkeley: IST Drupal
ist-drupal@lists.berkeley.edu
2

3. Agenda
• Introduction
• Responsive Web Design
• Base Theme: Zen 5
• CSS Preprocessing
• Sass
• Compass
• Zen Starterkit
• Demo
• Preview Berkeley Panopoly theme
• Q&A
3

4. One Website on Multiple Devices
4

5. Mobile v. Babies
Luke Wroblewski
“Why Mobile Matters”
February 2012
“1.27M mobile devices sold or
activated per day compared to
371,124 children born”
http://www.lukew.com/ff/entry.asp?1506
5

6. Responsive Web Design
• Coined by Ethan Marcotte
http://www.alistapart.com/articles/responsive-web-design
• Three Parts:
1. CSS3 media queries
2. Fluid or flexible layouts
3. Flexible images
• Device Independence: Users viewing your site on a
broad range of devices will be accessing the same
content
6

7. What does a
responsive website look like?
• Online tools
• http://responsinator.com
• http://responsivepx.com
• http://www.netmagazine.com/features/50-fantastic-tools-
responsive-web-design
• Design examples
• http://mediaqueri.es/
• Navigation Patterns
• http://bradfrostweb.com/blog/web/responsive-nav-patterns
• http://filamentgroup.com/lab/responsive_design_approach_
for_navigation
7

8. Media Queries
• CSS2 introduced the concept of media queries
• HTML files with separate stylesheets for screen and
print
<link rel="stylesheet" type="text/css" media="screen" href="screen.css">
<link rel="stylesheet" type="text/css" media="print" href="print.css">
• CSS stylesheets
@media screen {
* { font-family: sans-serif }
}
8

9. Media Queries
• CSS3: W3C extended the functionality of media queries
• Check for particular media features like width, height, and color
• Tailor styles to a specific range of devices without changing the
content itself
• Implemented via the @import rule in CSS
@import url(style480min.css) screen and (min-width: 480px);
• Used in the HTML <link> media attribute
<link rel="stylesheet" type="text/css" media="screen and (min-width: 480px)"
href="style480min.css" />
9

10. Media Queries
• Or most commonly used directly in a style sheet
(from Zen responsive-sidebars.css):
@media all and (min-width: 480px) {
#main {
padding-top: 3em;
position: relative;
}
#navigation {
position: absolute;
top: 0;
height: 3em;
width: 100%;
}
}
10

11. Fluid or Flexible Layouts
• Before responsive web design: Fixed, fluid, elastic?
Fixed: Fluid: Elastic:
#container { #container { #container {
width: 400px; width: 40%; width: 25em;
} } }
Adjusts to Size elements
Control and user’s screen with ems (relative
consistency resolution unit based on font
size)
11

12. Responsive Grids
12

13. Flexible Images and Media
• Scaling images and video in CSS is straightforward
by setting the max-width to 100%.
img {
max-width: 100%;
}
• Performance considerations: May be taking up
bandwidth to serve a high-resolution image to a
device that isn’t using it
http://blog.cloudfour.com/responsive-imgs/
13

14. Responsive Base Themes
• Zen 5
http://drupal.org/project/zen
• Adaptive Theme
http://drupal.org/project/adaptivetheme
• Omega
http://drupal.org/project/omega
14

15. Why Zen 5?
• Terrific documentation
• Clean organization
• Best practices (http://drupal.org/project/zen)
HTML5 Optional IE6/7 Support
HTML shiv Documentation
Responsive Design Swappable Layouts
Sass/Compass Drush Support
CSS RTL Language Support
Zen Grids Accessibility
Normalize CSS
Respond.js
IE Conditional Classes
15

16. CSS Preprocessing
• Sounds more complicated than it is
• “I already know CSS; no time to learn something new”
• Easy to get started
• Just an extension of CSS – use as much or as little as desired
• Sass (http://sass-lang.com) or Less (http://lesscss.org)
• Allow you to write cleaner and easier-to-read code
• Run through CSS preprocessor – transforms into typical CSS
• Can just write css, so easy to "sassify” or “lessify” existing CSS files
• Live websites are running CSS (compiled by Sass)
16

17. Sass
• “Syntactically awesome style sheets”
• Getting started:
• http://sass-lang.com/tutorial.html
• http://thesassway.com/beginner/getting-started-with-sass-and-
compass
• Written in Ruby; installed via Ruby package
manager; don’t need to learn Ruby to use
17

18. Sass
• Mac OS X: Ruby already installed! (update if
desired)
ruby --version or ruby –v
• Windows: Ruby installer (http://rubyinstaller.org/downloads/)
• Linux: Install via favorite package manager
• Install Sass:
gem install sass
18

19. Sass
• Two syntaxes
• .sass (Sass – older syntax for those who like
terseness; indentation instead of braces and
semicolons)
• .scss (Sassy CSS – default syntax of Sass 3)
• Default SCSS syntax is a superset of CSS
• Allows you to write CSS and only add SCSS when
you need it
• Every CSS file is a valid SCSS file
19

20. Sass Examples
http://sass-lang.com
20

21. Sass Examples
http://sass-lang.com
21

22. Sass Examples
http://sass-lang.com
22

23. Sass Examples
http://sass-lang.com
23

24. Compass
http://compass-style.org
• Open Source CSS Authoring Framework
• Uses Sass
• Makes things easier
• Library of functions and add-ons to do common things
• Install Compass:
gem install compass
• Using Compass (outside of Zen 5, Drupal):
compass help
Primary Commands:
* clean - Remove generated files and the sass cache
* compile - Compile Sass stylesheets to CSS
* create - Create a new compass project
* init - Add compass to an existing project
* watch - Compile Sass stylesheets to CSS when they change
24

25. CSS before Compass
http://compass-style.org
25

26. Compass
http://compass-style.org
26

27. Compass: CSS module
http://compass-style.org
27

28. Compass: Sprites
http://compass-style.org/help/tutorials/spriting
Image sprites
• Performance boost by fetching all images at once
• Difficult to create and manage
Example: Baron Wanschers, LimoenGroen (Lime Green):
http://www.bariswanschers.com/blog/use-sass-and-compass-streamline-your-css-development:
Generated CSS:
28

29. Zen 5
• Already set up to use Sass and Compass
• STARTERKIT
(see zen/STARTERKIT/README.txt)
• Copy the STARTERKIT folder, place under sites/all/themes and rename
Copy “sites/all/themes/zen/STARTERKIT”
To “sites/all/themes/foo”
• Rename “STARTERKIT.info.txt” as “foo.info” and update name and description
• In template.php and theme-settings.php: Replace ALL occurrences of
"STARTERKIT" with “foo”
• Set default theme at admin/appearance
• Or use drush:
drush zen "Foo Theme" foo
29

30. Zen 5
• Review Files
• Standard Drupal theme files
• Standard folders
• Sass-related files/folders
• Using Sass and Compass with Zen 5
From root of your sub-theme folder:
compass clean //removes existing css files so they can be regenerated
compass watch //watches the “sass” directory
//anytime a .scss file is changed, .css auto-generated
//includes debug feature for syntax errors during development
//launch compass watch and leave running (if needed, re-launch
terminal)
//can look at css generated but eventually just work with scss files
30

31. Zen Grids
http://zengrids.com
31

32. Zen 5: Production
• When ready to move to production…
See http://drupal.org/node/1548946 and zen/STARTERKIT/sass/README.txt
• Update CSS files, minify, and aggregate for
performance:
• compass clean
• edit config.rb by uncommenting “#environment = :production”
• turn on CSS aggregation
32

33. Tools
• FireSass for Firebug: https://addons.mozilla.org/en-
US/firefox/addon/firesass-for-firebug/
• ZenGrids:
http://zengrids.com
• If you don’t like the command line:
• Compass.app: http://compass.handlino.com/ (Mac, Linux, PC)
• Fire.app: http://fireapp.handlino.com/ (Mac, Linux, PC)
• Codekit: http://incident57.com/codekit/ (Mac)
33

34. Berkeley Panopoly
• Berkeley Panopoly Theme
• Panopoly
http://drupal.org/project/panopoly
34

35. Next Steps
Pilots
• Administration &
Finance
• Office of the
Chancellor
• BAS: Parking &
Transportation
• Campus IT
35