Kim Chee Leong - Responsive web design

Meer info: Nederlandse Plone gebruikersdag 2012.

Kim Chee Leong werkt bij GW20e.

Tegenwoordig zijn er veel verschillende apparaten met verschillende schermafmetingen die je website kunnen bekijken. Met responsive web design kan je de website aanpassen aan het apparaat.

Plone past zich al gedeeltelijk aan het schermformaat aan, maar dat kan beter.

Met een klant hebben we overlegd hoe we dit gaan aanpakken. Het is goed dat de klant daar ook over nadenkt, dat hij aangeeft wat belangrijk is.

Hoe kan je responsive zijn?

• Gebruik een flexibel grid (fluid layout)
• CSS3 media queries
• Flexibele waardes (fonts in em, margins en dergelijke in percentages, niet in pixels)
• Gebruik geen code op de server om mobiele apparaten te ontdekken. Dat kan een manier zijn, maar het is niet responsive. Let gewoon op de schermgrootte.

De meeste andere CSS3 technieken kan je ook gebruiken. Oudere browsers als IE7 en IE8 ondersteunen geen CSS3, maar die hebben dan de gewone site als fallback. Dat hoeft dus niet erg te zijn, maar let er wel op.

Voorbeeld responsive stylesheet voor Plone: https://gist.github.com/3847700

Zelf beginnen:

• http://mediaqueri.es
• Test een site: http://mattkersley.com/responsive
• Boek Ethan Marcatte: http://www.abookapart.com/