This document discusses responsive web design. It begins by introducing the topic and problems with different devices having different screen sizes and functionality. It then discusses responsive web design as the solution, how it works using CSS media queries and fluid grids. It covers why responsive design should be used and challenges in implementing it with Drupal. Potential solutions discussed include separate mobile themes, stylesheets and modules.

1. Thursday 26 August 2010

2. Drupal ninjas
Thursday 26 August 2010

3. Our mission today
What are we going to talk about ?
Thursday 26 August 2010

4. Our mission today
What are we going to talk about ?
• What is responsive web design ?
• Why should we use responsive ?
• Responsive Drupal
• Conclusion
Thursday 26 August 2010

5. The trouble with
devices
Thursday 26 August 2010

6. The trouble with devices
• Rise of the devices
• Loss of functionality
• Mobile versions
Thursday 26 August 2010

7. Thursday 26 August 2010

8. Thursday 26 August 2010

9. 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

10. What is it all about ?
What is responsive web design ?
Thursday 26 August 2010

11. Thursday 26 August 2010

12. Thursday 26 August 2010

13. Thursday 26 August 2010

14. Responsive architecture
Thursday 26 August 2010

15. Media Queries
What is responsive web design ?
Thursday 26 August 2010

16. Exciting
Thursday 26 August 2010

17. Thursday 26 August 2010

18. CSS 3 extension
Thursday 26 August 2010

19. #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

20. 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

21. #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

22. Thursday 26 August 2010

23. Bazinga !
Why we should use responsive
web design
Thursday 26 August 2010

24. Why responsive web design
• More flexible
• 1 single HTML page
• Less complex
• More control
• No js code
Thursday 26 August 2010

25. Why not ?
It’s a trap !
Thursday 26 August 2010

26. "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

27. Use the right tool for the job
Thursday 26 August 2010

28. How can we solve this ?
What is responsive web design ?
Thursday 26 August 2010

29. 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

30. Responsive Drupal
Responsive web design, Drupal and you
Thursday 26 August 2010

31. Where to start ?
Building your responsive Drupal theme
Thursday 26 August 2010

32. • Start using CSS 3 media queries
• Start using scalable fluid grid design
Thursday 26 August 2010

33. 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

34. Solutions
• Create a separate mobile theme
• Use separate stylesheets for devices
• A responsive base theme
• A query manager module
Thursday 26 August 2010

35. Scalable fluid design
• Think grid systems
• 960 breakout
Thursday 26 August 2010

36. Thursday 26 August 2010

37. Responsive theming rocks
Final thoughts
Thursday 26 August 2010

38. Thanks!
Kristof Orts Matthias Vandermaesen
kristof.orts@krimson.be matthias.vandermaesen@krimson.be
@differentdesign @netsensei
Thursday 26 August 2010