Responsive web design - Drupal theming

Thursday 26 August 2010

Drupal ninjas

Thursday 26 August 2010

Our mission todayWhat are we going to talk about ?

Thursday 26 August 2010

Our mission todayWhat are we going to talk about ?

•What is responsive web design ?

•Why should we use responsive ?

• Responsive Drupal

• Conclusion

Thursday 26 August 2010

The trouble with devices

Thursday 26 August 2010

The trouble with devices

• Rise of the devices

• Loss of functionality

• Mobile versions

Thursday 26 August 2010

Thursday 26 August 2010

Thursday 26 August 2010

The Solution or how we should stop worrying and love

Responsive web design

• Responsive web design

• Ethan Marcotte

• CSS 3 Media Queries & fluid grids

• 1 single HTML page

• Responds to viewport

Thursday 26 August 2010

What is it all about ?What is responsive web design ?

Thursday 26 August 2010

Thursday 26 August 2010

Thursday 26 August 2010

Thursday 26 August 2010

Responsive architecture

Thursday 26 August 2010

Media QueriesWhat is responsive web design ?

Thursday 26 August 2010

Exciting

Thursday 26 August 2010

Thursday 26 August 2010

CSS 3 extension

Thursday 26 August 2010

#views { float: right}

@media screen and (max-width: 400px) { #views {

float: left;}

}

@media screen and (min-width: 600px) { #views { float: none; }}

Thursday 26 August 2010

CSS 3 Media Queries

• media type + expression

• min- or max- prefixes

• not keyword

• only to color devices

• To hell with bad browsers

Thursday 26 August 2010

#div {-moz-column-count: 2;-moz-column-gap: 20px;-webkit-column-count: 2;-webkit-column-gap: 20px;column-count: 2;column-gap: 20px;

}

Thursday 26 August 2010

Thursday 26 August 2010

Bazinga !Why we should use responsiveweb design

Thursday 26 August 2010

Why responsive web design

• More flexible

• 1 single HTML page

• Less complex

• More control

• No js code

Thursday 26 August 2010

Why not ?It’s a trap !

Thursday 26 August 2010

"Responsive Web Design" is way cool—but I rarely want to serve the same content to devices with different sized screens. It ignores context.

@jcroft

Thursday 26 August 2010

Use the right tool for the job

Thursday 26 August 2010

How can we solve this ?What is responsive web design ?

Thursday 26 August 2010

How can we solve this ?

• Media queries within mobile theme

• Take early into account

• Scalable grid design

• Use in email templates

Thursday 26 August 2010

Responsive DrupalResponsive web design, Drupal and you

Thursday 26 August 2010

Where to start ?Building your responsive Drupal theme

Thursday 26 August 2010

• Start using CSS 3 media queries

• Start using scalable fluid grid design

Thursday 26 August 2010

Pitfalls with media queries in Drupal

• Ultra long stylesheets

• Hard to structure CSS

• The problem with blocks and panels

• Re-invent the wheel

Thursday 26 August 2010

Solutions

• Create a separate mobile theme

• Use separate stylesheets for devices

• A responsive base theme

• A query manager module

Thursday 26 August 2010

Scalable fluid design

• Think grid systems

• 960 breakout

Thursday 26 August 2010

Thursday 26 August 2010

Responsive theming rocksFinal thoughts

Thursday 26 August 2010

Thanks!

Kristof Orts

kristof.orts@krimson.be

@differentdesign

Matthias Vandermaesen

matthias.vandermaesen@krimson.be

@netsensei

Thursday 26 August 2010