Responsive web design - Drupal theming
-
Upload
adifferentdesign -
Category
Design
-
view
5.916 -
download
0
Transcript of 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
@differentdesign
Matthias Vandermaesen
@netsensei
Thursday 26 August 2010