This document discusses responsive web design, which involves making websites render well on a variety of devices and screen sizes. It recommends using a flexible grid layout with fluid fonts and margins, CSS3 media queries, and responsive add-ons for older browsers. It provides links to resources on responsive web design techniques and testing tools to help designers get started with this approach.

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/