Responsive design patterns

Responsive Design
Patterns

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

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

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

Nadelen
● afhankelijk van javascript
● animatie kan vertragend werken

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

Footer only
● links alleen in de footer aanwezig (zonder
verwijzing vanuit header)
● meer ruimte bovenin de pagina

Nadelen
● Lastig te ontdekken
● Lastig te bereiken

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

Responsive design patterns

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (7)

Responsive design patterns