Responsive Design Patterns

Column drop

Column drop voorbeelden

Column shifter

Column shifter voorbeelden

Tiny tweaks

Tiny tweaks voorbeelden

Off canvas

Off canvas voorbeelden

Top nav or "do nothing" approach

● eenvoudig te implementeren● geen javascript afhankelijkheid● geen css trucks nodig● geen aanpassing in DOM nodig

Nadelen:● problemen met hoogte● niet schaalbaar● moeilijk aan te klikken

Top nav or "do nothing" approach

The footer anchor

● kleine link aan de bovenkant van de pagina verwijst naar menu onderin de pagina

● eenvoudig te implementeren● geen javascript afhankelijkheid● geen css trucks nodig● maar 1 knop nodig in de header

Nadelen● verspringen pagina kan verwarrend werken

The footer anchor

Het select menu

● menu vervangen door selectbox● makkelijk herkenbaar● navigatie blijft bovin de pagina

Nadelen● beperkte stijlings mogelijkheden● kan verwarrende werken● subnavigatie lastiger te implementeren● afhankelijk van javascript

Het select menu

Toggle

● opent navigatie door klikken op knop● gebruiker blijft op zijn plek● eenvoudig schaalbaar

Nadelen● afhankelijk van javascript● animatie kan vertragend werken

Toggle

Left nav flyout

● klikken op knop opent navigatie aan linkerkant van het scherm

● veel ruimte● sluit aan bij Facebook conventie (dus

mensen herkennen het)

Nadelen● lastiger te implementeren● lastig te schalen

Left nav flyout

Footer only

● links alleen in de footer aanwezig (zonder verwijzing vanuit header)

● meer ruimte bovenin de pagina

Nadelen● Lastig te ontdekken● Lastig te bereiken

Footer only

Hide 'n cry

● verbergen van content / functionaliteit voor mobiele gebruikers

● meer ruimte

Nadelen● mobiele gebruikers hebben minder

functionaliteit ● pagina's zwaarder door display: none;● lastiger te onderhouden

Hide 'n cry