Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Responsive webdesign presentatie - Nederlandse Plone gebruikersdag 2012

1,767 views

Published on

This talk was given at the Dutch Plone gebruikersdag 2012.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Responsive webdesign presentatie - Nederlandse Plone gebruikersdag 2012

  1. 1. RESPONSIVE WEB DESIGN Kim Chee Leong Goldmund, Wyldebeast & Wunderliebe
  2. 2. IN THE OLD DAYS...
  3. 3. MANY DEVICES / SCREEN SIZES
  4. 4. RESPONSIVENESS TEST PAGE
  5. 5. RESPONSIVENESS TEST PAGE
  6. 6. RESPONSIVE EXAMPLE
  7. 7. RESPONSIVE EXAMPLE
  8. 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. 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. 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. 11. PHOTO CREDITS• http://www.flickr.com/photos/a-issleib/7948123558/

×