responsive web design
TRANSCRIPT
Diseño web responsivoResponsive web design
Antecedentes
• A partir de la introducción de las tabletas cerca del año 2010, los diseñadores y desarrolladores web se han enfrentado a un sinnúmero de diferentes resoluciones para la diversidad de dispositivos móviles que ofrece el mercado.
A nivel global
Antecedentes
• De los 4 billones de teléfonos móviles en el mundo, más de 1 billón de ellos son smartphones.
• De acuerdo con Google, 85% de los usuarios norteamericanos nunca se encuentran a más de un metro de distancia de su smartphone.
A nivel global
Antecedentes
• De los usuarios de smartphones aproximadamente un 39% acceden a sitios web desde su dispositivo.
A nivel global
Antecedentes
• Para finales del 2013 se tenía registrado que la laptop y la PC seguían siendo los principales dispositivos de conexión, seguidos por los Smartphones.
Hábitos uso internet AMIPCI
En México,
Antecedentes
• 5 de cada 10 internautas se conectan a través de su smartphone.
Hábitos uso internet AMIPCI
En México,
Antecedentes
• Para conectarse a Internet, en 2014 los internautas mexicanos usan tres dispositivos en promedio
• 9 de cada 10 internautas mexicanos siempre llevan consigo sus dispositivos móviles
• Los internautas mexicanos invierten en Internet más del doble del tiempo que en medios tradicionales
ESTUDIO DE CONSUMO DE MEDIOS Y DISPOSITIVOS ENTRE INTERNAUTAS MEXICANOS uso internet IAB México
En México,
Estadísticas
50% de las personas que tienen una laptop tienen un smartphone
Estudios recientes indican que:
30% de las personas que tienen un smartphone también tienen una tablet
Hay un incremento en las personas que usan los tres dispositivos
Estadísticas
46% de los usuarios reportan dificultad para interactuar con el sitio
Sitios web no reponsive
44% de los usuarios se quejan de una navegación difícil
¿Qué es?
• El término Web responsive fue acuñado por primera vez en 2010 por el diseñador web Ethan Marcotte en su artículo en List Apart.http://alistapart.com/article/responsive-web-design
Ilustración: Kevin Cornell A List Apart
¿Qué es?• En este artículo, describe la inquietud de los
diseñadores web para tener sitios que sean visibles en todos los dispositivos.
• Así como la tecnología está en constante evolución, el contenido en internet debe también adaptarse a la creciente demanda de dispostivos.
• Por consiguiente, el contenido debe ser lo más accesible posible para los usuarios.
¿Qué es?
• Diseño responsivo permite que un sitio web se ajuste al dispositivo desde donde está siendo visto.
• Esto representa una experiencia óptima para los usuarios sin importar si están usando un smartphone, una tableta, una computadora o cualquier otro dispositivo
¿Cómo comienzo a diseñar un sitio web responsivo?
• El mejor punto para empezar con un diseño responsivo es desde el wireframing.
¿Cómo comienzo a diseñar un sitio web responsivo?
• Grids flexibles
¿Cómo comienzo a diseñar un sitio web responsivo?
• Trabajar con estructura de columnas.
¿Cómo comienzo a diseñar un sitio web responsivo?
• Se inicia diseñando la versión para móviles, indicando la ubicación de cada sección de contenido.
Mobile First
Mobile firstDiseñando primero para las versiones móviles
¿Cómo comienzo a diseñar un sitio web responsivo?
• Se continúa trabajando con las siguientes resoluciones para netbook, laptop o escritorio de dimensiones mayores.
http://www.thismanslife.co.uk/projects/lab/responsivewireframes/#mobile
¿Cómo funciona?
• El diseño responsivo detecta el ancho del navegador del dispositivo que se esté usando para determinar cómo debe ser mostrado.
• Se establecen breakpoints para el ancho de cada uno de los dispositivos.
Breakpoints
http://blog.uxpin.com/4596/responsive-web-design-cheat-sheet/
Media QuerySintaxis