invie - Responsive Desing
Image source: Isabel Muñoz

invie - Responsive Desing

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: