Proyecto para probar técnicas y patrones para adaptar un sitio web a la mayor cantidad de dispositivos.
Código
Todo el código del proyecto está disponible en el repositorio de Github teanocrata/invie
Objetivo
Partiendo de una página web sencilla desarrollada previamente obtenemos una web responsive con efectos de tap, gestos y lazy loading.
El desarrollo está realizado siguiendo el “Curso de Responsive Design” de Leonidas Esteban en Platzi
Conceptos y patrones utilizados
Patrones de diseño utilizados:
- Mostly fluid.
- Column drop.
- Layout shifter.
- Tiny tweaks.
- Off canvas.
Conceptos:
- Resolución.
- Viewport.
- Portrait- landscape.
- px, %, em, rem, vh, vw
- CSS3
- Retina display
- Gestos
- Graceful degradation/ Progressive enhancement
- Pagespeed insights (Google developers)
- Media queries
- Remote debugging
Otros Recursos
Recursos interesantes: