This talk was given at the Dutch Plone gebruikersdag 2012.

1. RESPONSIVE WEB DESIGN
Kim Chee Leong
Goldmund, Wyldebeast & Wunderliebe

2. IN THE OLD DAYS...

3. MANY DEVICES / SCREEN SIZES

4. RESPONSIVENESS TEST PAGE

5. RESPONSIVENESS TEST PAGE

6. RESPONSIVE EXAMPLE

7. RESPONSIVE EXAMPLE

8. BE RESPONSIVE
• Flexible grid (fluid layout)
• CSS3 media queries
• Flexible values (fonts in ‘em’, margins etc. in percentages)
• Don’t use server-side stuff to detect mobile devices

9. BE RESPONSIVE #2
• Most of the CSS3 techniques can be used
• Older browsers like IE7 and 8 don’t support CSS3
• Responsive add-on: plonetheme.responsivetheme
• Responsive stylesheet for Plone:
• https://gist.github.com/3847700

10. HOW TO START?
• Responsive websites:
• http://mediaqueri.es/
• Responsive web design testing tool:
• http://mattkersley.com/responsive/
• Read Ethan Marcotte’s book about Responsive Web Design
• http://www.abookapart.com/

11. PHOTO CREDITS
• http://www.flickr.com/photos/a-issleib/7948123558/