Responsive webdesign presentatie - Nederlandse Plone gebruikersdag 2012

1,593 views
1,489 views

Published on

This talk was given at the Dutch Plone gebruikersdag 2012.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,593
On SlideShare
0
From Embeds
0
Number of Embeds
574
Actions
Shares
0
Downloads
6
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • Vertellen over de GWW iOS en android apps.\nTelefoons, tablets, e-readers, notebooks, computers, game consoles, big TV’s & retina\nPeople access the web on the go (everywhere), used to be only from the desktop.\n
  • Uitleggen responsive test pagina (matt kersley)\nVeel sites zijn nog niet responsive (gww ook niet)\n
  • Standaard is Plone responsive, alhoewel er nog wel wat verbeteringen zijn\n
  • Viertal zwembaden, die elk een bestaande website hebben.\nDe site zoals die een computer wordt getoond.\n
  • Uitleggen hoe we tot het ontwerp gekomen zijn.\nZelf ervoor kiezen of zaken weggelaten worden\n\n\n
  • Leg uit welke technieken (images!) worden gebruikt\nBegin eerst met de kleine schermen daarna groter\nHoud er rekening mee dat tel.s en tables een touch interface hebben. \n\n
  • Op kleinere schermen evt. zaken weglaten, of ‘verstoppen’.\n
  • \n
  • \n
  • 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/

    ×