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...
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 implemen...
The footer anchor
Het select menu● menu vervangen door selectbox● makkelijk herkenbaar● navigatie blijft bovin de paginaNadelen● beperkte st...
Het select menu
Toggle● opent navigatie door klikken op knop● gebruiker blijft op zijn plek● eenvoudig schaalbaarNadelen● afhankelijk van ...
Toggle
Left nav flyout● klikken op knop opent navigatie aan  linkerkant van het scherm● veel ruimte● sluit aan bij Facebook conve...
Left nav flyout
Footer only● links alleen in de footer aanwezig (zonder  verwijzing vanuit header)● meer ruimte bovenin de paginaNadelen● ...
Footer only
Hide n cry● verbergen van content / functionaliteit voor  mobiele gebruikers● meer ruimteNadelen● mobiele gebruikers hebbe...
Hide n cry
Upcoming SlideShare
Loading in …5
×

Responsive design patterns

755 views

Published on

A few design patterns for Responsive Design.
Sources:

- http://www.lukew.com/ff/entry.asp?1514
- http://bradfrostweb.com/blog/web/responsive-nav-patterns/

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
755
On SlideShare
0
From Embeds
0
Number of Embeds
10
Actions
Shares
0
Downloads
9
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Responsive design patterns

  1. 1. Responsive Design Patterns
  2. 2. Column drop
  3. 3. Column drop voorbeelden
  4. 4. Column shifter
  5. 5. Column shifter voorbeelden
  6. 6. Tiny tweaks
  7. 7. Tiny tweaks voorbeelden
  8. 8. Off canvas
  9. 9. Off canvas voorbeelden
  10. 10. Top nav or "do nothing" approach● eenvoudig te implementeren● geen javascript afhankelijkheid● geen css trucks nodig● geen aanpassing in DOM nodigNadelen:● problemen met hoogte● niet schaalbaar● moeilijk aan te klikken
  11. 11. Top nav or "do nothing" approach
  12. 12. 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 headerNadelen● verspringen pagina kan verwarrend werken
  13. 13. The footer anchor
  14. 14. Het select menu● menu vervangen door selectbox● makkelijk herkenbaar● navigatie blijft bovin de paginaNadelen● beperkte stijlings mogelijkheden● kan verwarrende werken● subnavigatie lastiger te implementeren● afhankelijk van javascript
  15. 15. Het select menu
  16. 16. Toggle● opent navigatie door klikken op knop● gebruiker blijft op zijn plek● eenvoudig schaalbaarNadelen● afhankelijk van javascript● animatie kan vertragend werken
  17. 17. Toggle
  18. 18. 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
  19. 19. Left nav flyout
  20. 20. Footer only● links alleen in de footer aanwezig (zonder verwijzing vanuit header)● meer ruimte bovenin de paginaNadelen● Lastig te ontdekken● Lastig te bereiken
  21. 21. Footer only
  22. 22. Hide n cry● verbergen van content / functionaliteit voor mobiele gebruikers● meer ruimteNadelen● mobiele gebruikers hebben minder functionaliteit● paginas zwaarder door display: none;● lastiger te onderhouden
  23. 23. Hide n cry

×