Downloaded 11 times
Uploaded byEdwart Visser
Responsive design patterns
A few design patterns for Responsive Design. Sources: - http://www.lukew.com/ff/entry.asp?1514 - http://bradfrostweb.com/blog/web/responsive-nav-patterns/
Responsive design patterns
- 1. Responsive Design Patterns
- 2.
- 3.
- 4.
- 5.
- 6.
- 7.
- 8.
- 9.
- 10. 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
- 11. Top nav or"do nothing" approach
- 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 header Nadelen ● verspringen pagina kan verwarrend werken
- 13.
- 14. 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
- 15.
- 16. Toggle ● opent navigatiedoor klikken op knop ● gebruiker blijft op zijn plek ● eenvoudig schaalbaar Nadelen ● afhankelijk van javascript ● animatie kan vertragend werken
- 17.
- 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.
- 20. Footer only ● linksalleen in de footer aanwezig (zonder verwijzing vanuit header) ● meer ruimte bovenin de pagina Nadelen ● Lastig te ontdekken ● Lastig te bereiken
- 21.
- 22. 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
- 23.