A brief introduction
This site is optimised for
- Netscape
- Internet Explorer
- 256 colours
- 800×600
Forget this, let's use Flash
Web Standards
The Mobile Divide
Responsive Design
What is Responsive Design?
- Your website responds to the platform
- Looks good, works well
- One version of your site for all platforms
Yes, but really
What is Responsive Design?
Look at your website
Now look at your mobile
Now look at this older computer
Now look at this tablet
Now look at this huge screen
And now...
What tech underpins Responsive Design?
- CSS Media Queries
- Fluid Grids
- Flexible Images
- Progressive Enhancement
Who's championing it?
A bunch of sites and developers including:
What can you do with it?
- Change the sizes of screen elements
- Move screen elements around
- Change the way elements behave
- Make images & content fit layouts more effectively
- Change content layouts
- Use different images, media and screen elements
Why should I use Responsive Design?
- Less work
- Not everyone needs to do a specific mobile version
- Mobile users like having the same content & functionality as desktop users
- Makes you popular
- Futureproof
- You don't need an app for that
- The way you should do it
- It's totally sweet
Potential drawbacks and issues?
- Hard to get started
- Doesn't work on old browsers
- Resource intensive
- Fiddly
- Managing CSS is hard
- Apps might be more appropriate
How can I avoid problems?
- Considering order of media queries
- Think mobile first - quickest resources to load
- Plan & design how your page will behave
- Account for IE8 and below (JavaScript)
- Think about it
What does this have to do with Drupal?
- Responsive Design is a more general web ideology
- Technique is transferrable to Drupal
- Part of general direction in which the web is moving
- Strategic direction of Drupal 8
- One markup, many devices
How Omega makes your site responsive
- Predefined sizes
- default (mobile)
- small
- regular
- widescreen
- Can configure widths at which sizes are triggered
- Fluid grid
How Adaptive makes your site responsive
- Separate rules for portrait and landscape displays
- Explicitly defined behaviours for
- smartphones (320px, 480px)
- tablets (768px, 1024px)
- desktop displays (> 1024px)
- Based around regions instead of fluid grid
- Configure sidebar widths and positions
Behind Responsive Design
- Technology: CSS Media Queries
- Technology: Fluid Grids
- Technology: Flexible Images
- Ideology: Progressive Enhancement
Media Types
media="all/screen/handheld/print/projection/braille/etc."
@media screen {
body {
color: #111;
}
}
Feature Detection
<link rel="stylesheet" media="screen and (color)" href="example.css" />
@import url(color.css) screen and (color);
Screen Size
@media all and (min-width:500px) { … }
@media (min-width:500px) { … }
@media (orientation: portrait) { … }
@media all and (orientation: portrait) { … }
Boolean Operators
- , = or
- not = not
- and = and
Feature Detection
print and (monochrome)
tv and (scan: progressive)
aural and (device-aspect-ratio: 16/9)
speech and (min-device-width: 800px)
Feature Detection
only screen and (-webkit-min-device-pixel-ratio: 2)
Drupal and CSS Media Queries
stylesheets[screen and (orientation:landscape)][] = screen-landscape.css
drupal_add_css('my-stylesheet.css', array(
'media' => 'screen and (max-width: 800px)',
));
http://millwoodonline.co.uk/media-queries-drupal
Cascading with Media Queries
stylesheets[all][] = css/global.css
stylesheets[all and (min-width: 800px)][] = lib/TinyFluidGrid/grid.css
stylesheets[all and (min-width: 800px)][] = css/800.css
stylesheets[all and (min-width: 1200px)][] = css/1200.css
stylesheets[all and (min-width: 1600px)][] = css/1600.css
http://millwoodonline.co.uk/media-queries-drupal
Why Fluid Grids work
- Elements sized not by fixed widths, but by proportions
- Use wrapper elements to contain, set widths and gutter in percentage
- Use reusable semantic classes to set commonly-used proportions & positions
Drupal themes that support Fluid Grids
Technology: Flexible Images
http://unstoppablerobotninja.com/entry/fluid-images/
- Flexible images are proportional in the same way containers are for fluid grids
- Set width as a percentage
- Works for embedded objects too!
- However, this loads giant images in a small space...
The server can help
- Use Javascript to grab a resized image when the screen resizes
- Try using small images by default - phone users will love you for it
Graceful Degredation
- Start with the best devices, degrate to "adequate"
- Doesn't work back far enough
- Inaccessible
- Lip service
- Doesn't allow for new innovations
Principles of Progressive Enhancement
- Start with the lowest common denominator
- Semantic design
- Features for baseline clients
- Accessibility
- Add stylesheets, scripts to control presentation & behaviour
Why Responsive Design needs it
The philosophy of Progressive Enhancement underpins Responsive Design
Start with a content layer that works on all devices
And add style behaviour layers to give the best experience on modern browsers
⇣
Start with a design that works well for all devices
And make it responsive to give the best experience on modern browsers
Drupal and Progressive Enhancement
Drupal is built with progressive enhancement in mind
- Forms API & AJAX
- Tabledrag & Sticky Headers
- Accessibility features
Example: Theming and templating
Remember that templates themselves are the base level:
We enhance them later
Start by making them semantically rich
Your style and behaviour layers can do the heavy lifting
Example: Markup
- Think about the purpose of your elements, and map your tags to that purpose
- Add classes to describe reusable elems
- Ad IDs to describe unique elems
Example: Responsiveness
Now let's have it respond to browser size changes
- Think about the major elements on your theme
- Think about where they will flow
- And don't forget your meta viewport tag
<meta name="viewport"
content="width=device-width; initial-scale=1.0">
Example: Special behaviour for special sizes
In the case of this site, and mobile devices...
It's more appropriate to move the navigation
People want the content first
Example: Responsive Media
This theme does flexible images a little differently
- quarter
- third
- half
- twothirds
- threequarters
- full
<img originalsrc="public://field/image/JBiUP.jpg"
class="third"
src="...">
JavaScript builds links to styled files and replaces original images with them
Mobile-first: smallest image rendered by default
There's no one way to do this
What resources are available?
Books
(Some) Websites
More resources
(Some) Articles
(Some) People
More resources
Drupal-specific
Other references
