responsive web design - drupal theming
TRANSCRIPT
![Page 1: Responsive web design - Drupal theming](https://reader035.vdocuments.mx/reader035/viewer/2022062514/559b339b1a28ab3e638b4635/html5/thumbnails/1.jpg)
Thursday 26 August 2010
![Page 2: Responsive web design - Drupal theming](https://reader035.vdocuments.mx/reader035/viewer/2022062514/559b339b1a28ab3e638b4635/html5/thumbnails/2.jpg)
Drupal ninjas
Thursday 26 August 2010
![Page 3: Responsive web design - Drupal theming](https://reader035.vdocuments.mx/reader035/viewer/2022062514/559b339b1a28ab3e638b4635/html5/thumbnails/3.jpg)
Our mission todayWhat are we going to talk about ?
Thursday 26 August 2010
![Page 4: Responsive web design - Drupal theming](https://reader035.vdocuments.mx/reader035/viewer/2022062514/559b339b1a28ab3e638b4635/html5/thumbnails/4.jpg)
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
![Page 5: Responsive web design - Drupal theming](https://reader035.vdocuments.mx/reader035/viewer/2022062514/559b339b1a28ab3e638b4635/html5/thumbnails/5.jpg)
The trouble with devices
Thursday 26 August 2010
![Page 6: Responsive web design - Drupal theming](https://reader035.vdocuments.mx/reader035/viewer/2022062514/559b339b1a28ab3e638b4635/html5/thumbnails/6.jpg)
The trouble with devices
• Rise of the devices
• Loss of functionality
• Mobile versions
Thursday 26 August 2010
![Page 7: Responsive web design - Drupal theming](https://reader035.vdocuments.mx/reader035/viewer/2022062514/559b339b1a28ab3e638b4635/html5/thumbnails/7.jpg)
Thursday 26 August 2010
![Page 8: Responsive web design - Drupal theming](https://reader035.vdocuments.mx/reader035/viewer/2022062514/559b339b1a28ab3e638b4635/html5/thumbnails/8.jpg)
Thursday 26 August 2010
![Page 9: Responsive web design - Drupal theming](https://reader035.vdocuments.mx/reader035/viewer/2022062514/559b339b1a28ab3e638b4635/html5/thumbnails/9.jpg)
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
![Page 10: Responsive web design - Drupal theming](https://reader035.vdocuments.mx/reader035/viewer/2022062514/559b339b1a28ab3e638b4635/html5/thumbnails/10.jpg)
What is it all about ?What is responsive web design ?
Thursday 26 August 2010
![Page 11: Responsive web design - Drupal theming](https://reader035.vdocuments.mx/reader035/viewer/2022062514/559b339b1a28ab3e638b4635/html5/thumbnails/11.jpg)
Thursday 26 August 2010
![Page 12: Responsive web design - Drupal theming](https://reader035.vdocuments.mx/reader035/viewer/2022062514/559b339b1a28ab3e638b4635/html5/thumbnails/12.jpg)
Thursday 26 August 2010
![Page 13: Responsive web design - Drupal theming](https://reader035.vdocuments.mx/reader035/viewer/2022062514/559b339b1a28ab3e638b4635/html5/thumbnails/13.jpg)
Thursday 26 August 2010
![Page 14: Responsive web design - Drupal theming](https://reader035.vdocuments.mx/reader035/viewer/2022062514/559b339b1a28ab3e638b4635/html5/thumbnails/14.jpg)
Responsive architecture
Thursday 26 August 2010
![Page 15: Responsive web design - Drupal theming](https://reader035.vdocuments.mx/reader035/viewer/2022062514/559b339b1a28ab3e638b4635/html5/thumbnails/15.jpg)
Media QueriesWhat is responsive web design ?
Thursday 26 August 2010
![Page 16: Responsive web design - Drupal theming](https://reader035.vdocuments.mx/reader035/viewer/2022062514/559b339b1a28ab3e638b4635/html5/thumbnails/16.jpg)
Exciting
Thursday 26 August 2010
![Page 17: Responsive web design - Drupal theming](https://reader035.vdocuments.mx/reader035/viewer/2022062514/559b339b1a28ab3e638b4635/html5/thumbnails/17.jpg)
Thursday 26 August 2010
![Page 18: Responsive web design - Drupal theming](https://reader035.vdocuments.mx/reader035/viewer/2022062514/559b339b1a28ab3e638b4635/html5/thumbnails/18.jpg)
CSS 3 extension
Thursday 26 August 2010
![Page 19: Responsive web design - Drupal theming](https://reader035.vdocuments.mx/reader035/viewer/2022062514/559b339b1a28ab3e638b4635/html5/thumbnails/19.jpg)
#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
![Page 20: Responsive web design - Drupal theming](https://reader035.vdocuments.mx/reader035/viewer/2022062514/559b339b1a28ab3e638b4635/html5/thumbnails/20.jpg)
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
![Page 21: Responsive web design - Drupal theming](https://reader035.vdocuments.mx/reader035/viewer/2022062514/559b339b1a28ab3e638b4635/html5/thumbnails/21.jpg)
#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
![Page 22: Responsive web design - Drupal theming](https://reader035.vdocuments.mx/reader035/viewer/2022062514/559b339b1a28ab3e638b4635/html5/thumbnails/22.jpg)
Thursday 26 August 2010
![Page 23: Responsive web design - Drupal theming](https://reader035.vdocuments.mx/reader035/viewer/2022062514/559b339b1a28ab3e638b4635/html5/thumbnails/23.jpg)
Bazinga !Why we should use responsiveweb design
Thursday 26 August 2010
![Page 24: Responsive web design - Drupal theming](https://reader035.vdocuments.mx/reader035/viewer/2022062514/559b339b1a28ab3e638b4635/html5/thumbnails/24.jpg)
Why responsive web design
• More flexible
• 1 single HTML page
• Less complex
• More control
• No js code
Thursday 26 August 2010
![Page 25: Responsive web design - Drupal theming](https://reader035.vdocuments.mx/reader035/viewer/2022062514/559b339b1a28ab3e638b4635/html5/thumbnails/25.jpg)
Why not ?It’s a trap !
Thursday 26 August 2010
![Page 26: Responsive web design - Drupal theming](https://reader035.vdocuments.mx/reader035/viewer/2022062514/559b339b1a28ab3e638b4635/html5/thumbnails/26.jpg)
"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
![Page 27: Responsive web design - Drupal theming](https://reader035.vdocuments.mx/reader035/viewer/2022062514/559b339b1a28ab3e638b4635/html5/thumbnails/27.jpg)
Use the right tool for the job
Thursday 26 August 2010
![Page 28: Responsive web design - Drupal theming](https://reader035.vdocuments.mx/reader035/viewer/2022062514/559b339b1a28ab3e638b4635/html5/thumbnails/28.jpg)
How can we solve this ?What is responsive web design ?
Thursday 26 August 2010
![Page 29: Responsive web design - Drupal theming](https://reader035.vdocuments.mx/reader035/viewer/2022062514/559b339b1a28ab3e638b4635/html5/thumbnails/29.jpg)
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
![Page 30: Responsive web design - Drupal theming](https://reader035.vdocuments.mx/reader035/viewer/2022062514/559b339b1a28ab3e638b4635/html5/thumbnails/30.jpg)
Responsive DrupalResponsive web design, Drupal and you
Thursday 26 August 2010
![Page 31: Responsive web design - Drupal theming](https://reader035.vdocuments.mx/reader035/viewer/2022062514/559b339b1a28ab3e638b4635/html5/thumbnails/31.jpg)
Where to start ?Building your responsive Drupal theme
Thursday 26 August 2010
![Page 32: Responsive web design - Drupal theming](https://reader035.vdocuments.mx/reader035/viewer/2022062514/559b339b1a28ab3e638b4635/html5/thumbnails/32.jpg)
• Start using CSS 3 media queries
• Start using scalable fluid grid design
Thursday 26 August 2010
![Page 33: Responsive web design - Drupal theming](https://reader035.vdocuments.mx/reader035/viewer/2022062514/559b339b1a28ab3e638b4635/html5/thumbnails/33.jpg)
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
![Page 34: Responsive web design - Drupal theming](https://reader035.vdocuments.mx/reader035/viewer/2022062514/559b339b1a28ab3e638b4635/html5/thumbnails/34.jpg)
Solutions
• Create a separate mobile theme
• Use separate stylesheets for devices
• A responsive base theme
• A query manager module
Thursday 26 August 2010
![Page 35: Responsive web design - Drupal theming](https://reader035.vdocuments.mx/reader035/viewer/2022062514/559b339b1a28ab3e638b4635/html5/thumbnails/35.jpg)
Scalable fluid design
• Think grid systems
• 960 breakout
Thursday 26 August 2010
![Page 36: Responsive web design - Drupal theming](https://reader035.vdocuments.mx/reader035/viewer/2022062514/559b339b1a28ab3e638b4635/html5/thumbnails/36.jpg)
Thursday 26 August 2010
![Page 37: Responsive web design - Drupal theming](https://reader035.vdocuments.mx/reader035/viewer/2022062514/559b339b1a28ab3e638b4635/html5/thumbnails/37.jpg)
Responsive theming rocksFinal thoughts
Thursday 26 August 2010
![Page 38: Responsive web design - Drupal theming](https://reader035.vdocuments.mx/reader035/viewer/2022062514/559b339b1a28ab3e638b4635/html5/thumbnails/38.jpg)
Thanks!
Kristof Orts
@differentdesign
Matthias Vandermaesen
@netsensei
Thursday 26 August 2010