Responsive web design - Drupal theming

Thursday 26 August 2010

Drupal ninjas


Our mission todayWhat are we going to talk about ?


Our mission todayWhat are we going to talk about ?

•What is responsive web design ?

•Why should we use responsive ?

• Responsive Drupal

• Conclusion


The trouble with devices


The trouble with devices

• Rise of the devices

• Loss of functionality

• Mobile versions




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


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





Responsive architecture


Media QueriesWhat is responsive web design ?


Exciting



CSS 3 extension


#views { float: right}

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

float: left;}

}

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


CSS 3 Media Queries

• media type + expression

• min- or max- prefixes

• not keyword

• only to color devices

• To hell with bad browsers


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

}



Bazinga !Why we should use responsiveweb design


Why responsive web design

• More flexible

• 1 single HTML page

• Less complex

• More control

• No js code


Why not ?It’s a trap !


"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


Use the right tool for the job


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


How can we solve this ?

• Media queries within mobile theme

• Take early into account

• Scalable grid design

• Use in email templates


Responsive DrupalResponsive web design, Drupal and you


Where to start ?Building your responsive Drupal theme


• Start using CSS 3 media queries

• Start using scalable fluid grid design


Pitfalls with media queries in Drupal

• Ultra long stylesheets

• Hard to structure CSS

• The problem with blocks and panels

• Re-invent the wheel


Solutions

• Create a separate mobile theme

• Use separate stylesheets for devices

• A responsive base theme

• A query manager module


Scalable fluid design

• Think grid systems

• 960 breakout



Responsive theming rocksFinal thoughts


Thanks!

Kristof Orts

[email protected]

@differentdesign

Matthias Vandermaesen

[email protected]

@netsensei


mailto:[email protected]


