PDF de programación - Responsive Web Design - Diseño Web Adaptativo

“Responsive Web Design”

Diseño Web Adaptativo

“El diseño adaptativo no es una técnica

para re organizar sino un concepto”

Dispositivo móvil vs Dispositivo estático

menor tamaño

mayor tamaño

distracción

concentración

ansiedad

tranquilidad

prisa

paciencia

falta de foco

en foco

“Si todo es importante nada es importante”

Accesibilidad

Es el grado en el que todas las personas pueden utilizar un objeto,
visitar un lugar o acceder a un servicio, independiente de sus
capacidades físicas, cognitivas y técnicas.

Relacionado a Internet se refiere a qué tan apto se encuentra el
contenido de un sitio para ser interpretado por todos los usuarios,
independientemente de sus limitaciones fisiológicas y
tecnológicas.

Usabilidad

Facilidad con que las personas pueden utilizar una herramienta u
objeto fabricado por otras personas con el fin de alcanzar un
objetivo en concreto.

En el diseño Web, se refiere exclusivamente a que tan beneficiosa
es la experiencia de uso de una interfaz gráfica interactiva.

Graceful Degradation

La degradación elegante es la propiedad que habilita a un sistema
a seguir funcionando luego de haber ocurrido un error.
El decrecimiento del sistema es proporcional a la gravedad del
error.
Esta no es una propiedad exclusiva de las máquinas sino también
aplicada a las interfaces de usuarios y su capacidad para tolerar los
errores.

Javascript no obstructivo

jquerymobile.com

abcwin.abcdisegno.com

Progressive Enhancement

La mejora progresiva es una estrategia del diseño web que hace
hincapié en la accesibilidad de los sitios web, su semántica
HTML/CSS y las tecnologías de secuencias de comandos.
El objetivo es ir mejorando el aspecto y la funcionalidad de acuerdo
a las capacidades de los nuevos navegadores.

Chrome | Firefox

IE7 | IE6

Sin estilos

Ejemplos

mail.google.com

twitter.com

cargaygana.com (beta)

ricardocastillo.com

Media Queries

w3.org/TR/css3-mediaqueries

Imágenes flexibles

Apple

Contenido fluido

chambersjudd.com/calculator

Unidades tipográficas

 Usar medidas relativas y escalables – em, ex, %
1 em = Medida por defecto del navegador
1 ex = Alto de la letra “x” de la fuente definida por
defecto en el navegador
100% = Medida por defecto del navegador
Sitio para hacer conversiones de pixeles a medidas
escalables = pxtoem.com

•
•
•

•
•



Javascript

github.com/scottjehl/Respond/

code.google.com/p/css3-mediaqueries-js/

24ways.org/2011/conditional-loading-for-responsive-designs/

Templates

twitter.github.io/bootstrap/

modernizr.com

html5boilerplate.com

initializr.com

Previsualización

responsive.victorcoulon.fr

chrome.google.com/webstore/detail/user-agent-switcher-for-c/djflhoibgkdhkhhcedjiklpkjnoahfmg

Comentarios finales

 Crear un orden jerárquico del contenido
Diseñar exclusivamente las distintas resoluciones
Empezar por las resoluciones más pequeñas
Pensar el texto en función de su contenedor
Usar fuentes seguras para los dispositivos móviles
Finalmente hacer testing en varios dispositivos

•
•
•
•
•
•


¿Algo para compartir o preguntar?

abcdisegno.com/rwd

“Dios está en los detalles”

Hillman Curtis

ricardocastillo.com