2. 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
3. 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
4. Antecedentes
• De los usuarios de smartphones
aproximadamente un 39% acceden a sitios web
desde su dispositivo.
A nivel global
5. 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,
6. Antecedentes
• 5 de cada 10 internautas se conectan a través de
su smartphone.
Hábitos uso internet
AMIPCI
En México,
7. 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,
8. 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
9. 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
10. ¿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
12. ¿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.
13. ¿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
14. ¿Cómo comienzo a diseñar
un sitio web responsivo?
• El mejor punto para empezar con un diseño
responsivo es desde el wireframing.
15. ¿Cómo comienzo a diseñar
un sitio web responsivo?
• Grids flexibles
16. ¿Cómo comienzo a diseñar
un sitio web responsivo?
• Trabajar con estructura
de columnas.
17. ¿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
19. ¿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
20.
21.
22.
23.
24. ¿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.
