http://thenextweb.com/dd/2015/10/28/9-responsive-design-mistakes-you-dont-want-to-make/
GRID
Hou je aan het grid: elementen kunnen in principe niet buiten het grid vallen, dat maakt responsive design slecht maakbaar.
Test je ontwerp op de volgende resoluties:
320px (kleinste formaat iPhone)
640px
768px
1024px
1440px (maximale grootte)
FORMULIEREN
Denk na over de functie van radiobuttons, selectboxen, checkboxen. Teken niet zomaar een checkbox als er maar 1 keuze mogelijk/handig is.
BLOKKEN MET VASTE HOOGTE
Wanneer je ontwerp sterk op blokken gebaseerd is; realiseer dat de hoogte van de blokken dan vaak vast ligt. Gevolg is dat de tekst hierin een beperkte hoogte kan hebben: bij een breed scherm kan er in een blok meer tekst dan in datzelfde blok bij een smal scherm (blok wordt dan nl. ook smaller en niet automatisch hoger).
Plaats je afbeeldingen in blokken; denk na over de grootte:
- worden afbeeldingen altijd op 100% breedte geplaatst en zou het dan kunnen dat de hoogte bij verschillende formaten afbeeldingen dus ook verschillend is.
- Moet een afbeelding in een blok met vaste afmetingen komen, wordt hiervoor een achtergrondafbeelding gebruikt (background-size: cover). Daardoor komt een afbeelding altijd vullend in het blok. Nadeel: afbeelding die niet dezelfde breedte/hoogte verhouding hebben als het blok waar deze in geplaatst wordt, worden afgesneden.
LETTERTYPES
Hou fontgroottes door alle pagina’s het zelfde: kies voor headers en koppen maximaal 3 maten/variaties.
Het zou echt heel handig zijn als alle tekststijlelementen in een overizicht zouden staan. Nu is het meestal gokken en zoeken welke tekstgrootte, subkop, etc. op een bepaalde plaats gebruikt wordt. Ook handig voor de webredactie
Je maakt fonts niet kleiner op tablet & iphone resoluties, eerder groter. Dus niet je ontwerp simpelweg kleiner schalen.
MENU’S
Bij uitklapmenu’s zijn de hoofdknoppen niet klikbaar met een reden: mobiel!
Dus als er een menuknop ‘over ons’ is, met daaronder ‘onze mensen’ en ‘onze klanten’, dan hangt er onder ‘over ons’ geen pagina.