Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Responsive design patterns

983 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
  • Be the first to comment

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

×