Als je vandaag een nieuwe website maakt of je bestaande website grondig aanpakt, kan je niet anders dan rekening houden met de enorme variëteit aan toestellen waarmee de bezoeker je webpagina bekijkt: van een kleine smartphone over een tablet tot een desktop computer, alle met verschillende schermgroottes en resoluties. Rekening houden met die bezoekers houdt o.a. in dat "mobile devices" je website vlot en handig kunnen consulteren. Tegelijkertijd wil je dat je website er ook op een desktopcomputer met groot scherm overzichtelijk en gebruiksvriendelijk uitziet: je kan elk apparaat dus niet zomaar dezelfde versie aanbieden. Hoog tijd dan om je website "responsive" te maken: op basis van een aantal factoren (waarvan de belangrijkste is: schermgrootte) gaan we de website automatisch aanpassen op gebied van lay-out, navigatie, typografie, ... Dankzij nieuwe evoluties in HTML en CSS, ondersteund in alle grote browsers, en met de hulp van wat javascript, ligt dit allemaal binnen handbereik.
Inhoud:
Inleiding en kennismaking
Wat is responsive webdesign? Waarom RWD? En wat zijn de alternatieven?
Typische RWD principes en workflow
Fluid grid
Fluid images
Fluid typography
Media queries
Mobile first
Technische fundamenten
Tools
Web standards
Viewport
Make everything liquid
Media queries
Mobile first
Testsite: fixed site responsive maken
Frameworks
Responsive images
Responsive typography
Slideshows
Responsive menus/navigation
SVG, Icon fonts
Tables & forms
Testen in verschillende browsers
Optimalisatie en compressie