SITIOS WEB: DISEÑO Y ESTRUCTURA
Modos adaptables
El nuevo
rey
50% del tráfico total del FT viene de móviles
15-20% de las nuevas suscripciones se venden desde un
celular
15% de las gan...
Sabores
y colores
Chau plug ins!!
Video y multimedia
Gráficos
Sonido
Interactividad
Velocidad
Offline
Vs
Y/O
El mundo de oz
Otros ejemplos
Apple
Chrome
20things…
Yendo de la cama al
living
Uno para todos todos para uno
Qué es?
El diseño adaptable proporciona a todos los
dispositivos un mismo código que se ajusta al
tamaño de pantalla.
Ventajas responsive design
SEO. Sólo hay una web (HTML + CSS), URL es única para todos los dispositivos. Se evitan redirecciones de
unas versiones a ...
• Si se usa una sola URL, a los usuarios les resulta más fácil
compartir el contenido y enlazarlo.
• Ayuda a los algoritmo...
• Ahorra recursos cuando Googlebot rastrea tu sitio. Cualquier
agente de usuario de Googlebot solo tiene que rastrear tu
p...
Adaptaciones móviles
Mobile
Desktop en
smartphone
Los sitios web “mobile
friendly” convierten a
los usuarios en clientes
What Users Want Most from Mobile Sites Today
(Googl...
61% “Si no encuentro rápido lo que
estaba buscando en un sitio móvil, me
voy a otro”
50% “Si la web de mi negocio
favorito...
Pensar y crear en clave
de móviles
Contenido demasiado
limitado
Dominios múltiples.
Pop-ups.
Videos que no se pueden
ver
Redireccionamiento falllido.
Tiempo ...
MÓVILES Y
ALGORITMO DE
GOOGLE
21 de abril 2015: Google volvió a modificar su
algoritmo para privilegiar en el posicionamie...
Qué sitios web son
mobile friendly?
Mobile Friendly test
Principios de diseño de un sitio
Mobile Friendly Websites
CHEQUEO DE “SALUD” MÓVIL DE UN SITIO WEB
Qué características tiene un sitio web móvil?
• Evita el uso de software que no es común en dispositivos móviles, como
Fla...
AMIGABLE
NO AMIGABLE
Cuidado con los avisos
de apps en móviles
Luego del 1° de noviembre,
los sitios web móviles que
utilicen anuncio de apps
q...
GOOGLE OJO
NO SÍ
jQuery
Underscore
jPlayer
HTML5 video
jQuery Reel
jQuery address
Our mobile planet
Buenos ejemplos
Mobile inclusive: básicos del responsive design y HTML5
Mobile inclusive: básicos del responsive design y HTML5
Mobile inclusive: básicos del responsive design y HTML5
Mobile inclusive: básicos del responsive design y HTML5
Mobile inclusive: básicos del responsive design y HTML5
Mobile inclusive: básicos del responsive design y HTML5
Mobile inclusive: básicos del responsive design y HTML5
Mobile inclusive: básicos del responsive design y HTML5
Mobile inclusive: básicos del responsive design y HTML5
Mobile inclusive: básicos del responsive design y HTML5
Mobile inclusive: básicos del responsive design y HTML5
Mobile inclusive: básicos del responsive design y HTML5
Mobile inclusive: básicos del responsive design y HTML5
Mobile inclusive: básicos del responsive design y HTML5
Mobile inclusive: básicos del responsive design y HTML5
Mobile inclusive: básicos del responsive design y HTML5
Mobile inclusive: básicos del responsive design y HTML5
Mobile inclusive: básicos del responsive design y HTML5
Mobile inclusive: básicos del responsive design y HTML5
Mobile inclusive: básicos del responsive design y HTML5
Mobile inclusive: básicos del responsive design y HTML5
Próxima SlideShare
Cargando en…5
×

Mobile inclusive: básicos del responsive design y HTML5

2.079 visualizaciones

Publicado el

Clase de Narrativa Online, Facultad de Comunicación, Universidad de Montevideo 2015

Publicado en: Internet
0 comentarios
0 recomendaciones
Estadísticas
Notas
  • Sé el primero en comentar

  • Sé el primero en recomendar esto

Sin descargas
Visualizaciones
Visualizaciones totales
2.079
En SlideShare
0
De insertados
0
Número de insertados
1.204
Acciones
Compartido
0
Descargas
6
Comentarios
0
Recomendaciones
0
Insertados 0
No insertados

No hay notas en la diapositiva.

Mobile inclusive: básicos del responsive design y HTML5

  1. 1. SITIOS WEB: DISEÑO Y ESTRUCTURA
  2. 2. Modos adaptables
  3. 3. El nuevo rey
  4. 4. 50% del tráfico total del FT viene de móviles 15-20% de las nuevas suscripciones se venden desde un celular 15% de las ganancias x publicidad del FT proviene de móviles “The audience is clearly moving to mobile, and we need to be where the audience is.
  5. 5. Sabores y colores
  6. 6. Chau plug ins!!
  7. 7. Video y multimedia Gráficos Sonido Interactividad Velocidad Offline
  8. 8. Vs Y/O
  9. 9. El mundo de oz Otros ejemplos Apple Chrome 20things…
  10. 10. Yendo de la cama al living
  11. 11. Uno para todos todos para uno
  12. 12. Qué es? El diseño adaptable proporciona a todos los dispositivos un mismo código que se ajusta al tamaño de pantalla.
  13. 13. Ventajas responsive design
  14. 14. SEO. Sólo hay una web (HTML + CSS), URL es única para todos los dispositivos. Se evitan redirecciones de unas versiones a otras UX. User eXperience. El usuario accede al mismo website con independencia del dispositivo que utilice. Coherencia. Integridad. Sólo hay una estructura HTML y una única hoja de estilo CSS para todos los dispositivos. Costes. Requiere más tiempo de desarrollo y es más cara, pero implica menos mantenimiento (hay que revisar 1 hoja de estilo).
  15. 15. • Si se usa una sola URL, a los usuarios les resulta más fácil compartir el contenido y enlazarlo. • Ayuda a los algoritmos de Google a asignar correctamente las propiedades de indexación a la página en vez de tener que señalar la existencia de páginas correspondientes para PC’s o para móviles. • Requiere menos tiempo de ingeniería para mantener varias páginas para el mismo contenido. • No es necesario realizar un redireccionamiento para que los usuarios lleguen a la vista optimizada para su dispositivo, de modo que se reduce el tiempo de carga.
  16. 16. • Ahorra recursos cuando Googlebot rastrea tu sitio. Cualquier agente de usuario de Googlebot solo tiene que rastrear tu página una vez para recuperar todas las versiones del contenido (en vez de tener que rastrearlas varias veces con diferentes agentes de usuario de Googlebot). • Esta mejora en la eficiencia de rastreo puede ayudar de forma indirecta a Google a indexar una parte mayor del contenido del sitio y a mantenerlo adecuadamente actualizado.
  17. 17. Adaptaciones móviles
  18. 18. Mobile Desktop en smartphone
  19. 19. Los sitios web “mobile friendly” convierten a los usuarios en clientes What Users Want Most from Mobile Sites Today (Google, setiembre 2012)
  20. 20. 61% “Si no encuentro rápido lo que estaba buscando en un sitio móvil, me voy a otro” 50% “Si la web de mi negocio favorito no tiene salida móvil, lo usaría menos o lo cambiaría por otro”.
  21. 21. Pensar y crear en clave de móviles
  22. 22. Contenido demasiado limitado Dominios múltiples. Pop-ups. Videos que no se pueden ver Redireccionamiento falllido. Tiempo de carga PageSpeed
  23. 23. MÓVILES Y ALGORITMO DE GOOGLE 21 de abril 2015: Google volvió a modificar su algoritmo para privilegiar en el posicionamiento en sus búsquedas a los sitios web que tienen versions móviles
  24. 24. Qué sitios web son mobile friendly? Mobile Friendly test Principios de diseño de un sitio Mobile Friendly Websites
  25. 25. CHEQUEO DE “SALUD” MÓVIL DE UN SITIO WEB
  26. 26. Qué características tiene un sitio web móvil? • Evita el uso de software que no es común en dispositivos móviles, como Flash. • Usa texto que se puede leer sin hacer zoom • Adapta el tamaño del contenido a las pantallas, de manera que los usuarios no tengan que hacer scroll horizontal o vertical constantemente. • Ubica a los links lo suficientemente aparte para que puedan ser fácilmente “tocables” y no se confundan con otros.
  27. 27. AMIGABLE
  28. 28. NO AMIGABLE
  29. 29. Cuidado con los avisos de apps en móviles Luego del 1° de noviembre, los sitios web móviles que utilicen anuncio de apps que escondan una parte significativa de la página no serán ya consideradas “mobile friendly”. Google también los penalizará en sus rankings
  30. 30. GOOGLE OJO NO SÍ
  31. 31. jQuery Underscore jPlayer HTML5 video jQuery Reel jQuery address
  32. 32. Our mobile planet
  33. 33. Buenos ejemplos

×