Website responsive del diario Boston Globe --> www.bostonglobe.com

"Graceful degradation vs progressive enhancement"

La codificación "mobile first" se basa en desarrollar primero para la versión móvil, obligando a prescindir de lo superficial sintetizando el mensaje al máximo. Este técnica acostumbra a redundar positivamente en el producto final. Es importante tener en cuenta el uso que se le da al espacio web en función del dispositivo.

  • Móvil --> Uso esporádico a modo de checking. Acciones simples.
  • Tablet --> Lectura más reposada. Acciones de complejidad media.
  • Sobremesa --> Trabajo. Acciones complejas.

Esquema de como evoluciona el contenido des del formato móvil al formato de escritorio.
Para codificar este proceso es imprescindible trabajar con CSS "media queries", que
limitan las hojas de estilo en función del ancho de la pantalla.



Codificación "mobile first"
usando media queries

(reduce la pantalla del navegador ;-)




Alzado resposive website
www.lavanguardia.es


Atomic design

Sistema basado en módulos definidos a modo de una estructuras orgánicas.


Átomos
Componentes básicos de materia. Etiquetas HTML, labels, botones, colores...
Moléculas
Grupos de átomos unidos entre sí. Son las unidades compuestas más pequeñas.
Organismos
Grupos de moléculas que interactúan entre si definiendo una parte de la interficie.
Plantillas
Grupos de organismos unidos que forman plantillas dinámicas.
Páginas
Compuestas de plantillas, muestran las disposición final contenido dinámico.