Top Banner
SITIOS WEB: DISEÑO Y ESTRUCTURA
54

Mobile inclusive: básicos del responsive design y HTML5

Jan 24, 2017

Download

Internet

Carina Novarese
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: Mobile inclusive: básicos del responsive design y HTML5

SITIOS WEB: DISEÑO Y ESTRUCTURA

Page 2: Mobile inclusive: básicos del responsive design y HTML5

Modos adaptables

Page 3: Mobile inclusive: básicos del responsive design y HTML5

El nuevorey

Page 4: Mobile inclusive: básicos del responsive design y HTML5
Page 5: Mobile inclusive: básicos del responsive design y HTML5

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.

Page 6: Mobile inclusive: básicos del responsive design y HTML5

Saboresy colores

Page 7: Mobile inclusive: básicos del responsive design y HTML5

Chau plug ins!!

Page 8: Mobile inclusive: básicos del responsive design y HTML5

Video y multimediaGráficosSonidoInteractividadVelocidad

Offline

Page 9: Mobile inclusive: básicos del responsive design y HTML5

Vs

Y/O

Page 11: Mobile inclusive: básicos del responsive design y HTML5

Yendo de la cama al living

Page 12: Mobile inclusive: básicos del responsive design y HTML5
Page 13: Mobile inclusive: básicos del responsive design y HTML5

Uno para todos todos para uno

Page 14: Mobile inclusive: básicos del responsive design y HTML5

Qué es?El diseño adaptable proporciona a todos los dispositivos un mismo código que se ajusta al tamaño de pantalla.

Page 15: Mobile inclusive: básicos del responsive design y HTML5
Page 16: Mobile inclusive: básicos del responsive design y HTML5
Page 18: Mobile inclusive: básicos del responsive design y HTML5

Ventajas responsive design

Page 19: Mobile inclusive: básicos del responsive design y HTML5

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).

Page 20: Mobile inclusive: básicos del responsive design y HTML5

• 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.

Page 21: Mobile inclusive: básicos del responsive design y HTML5

• 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.

Page 22: Mobile inclusive: básicos del responsive design y HTML5
Page 23: Mobile inclusive: básicos del responsive design y HTML5

Adaptaciones móviles

Page 24: Mobile inclusive: básicos del responsive design y HTML5

Mobile

Desktop en smartphone

Page 25: Mobile inclusive: básicos del responsive design y HTML5
Page 26: Mobile inclusive: básicos del responsive design y HTML5
Page 27: Mobile inclusive: básicos del responsive design y HTML5

Los sitios web “mobile friendly” convierten a los usuarios en clientes

What Users Want Most from Mobile Sites Today (Google, setiembre 2012)

Page 28: Mobile inclusive: básicos del responsive design y HTML5
Page 29: Mobile inclusive: básicos del responsive design y HTML5

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”.

Page 32: Mobile inclusive: básicos del responsive design y HTML5

Contenido demasiado limitadoDominios múltiples. Pop-ups. Videos que no se pueden verRedireccionamiento falllido.Tiempo de carga  PageSpeed

Page 33: Mobile inclusive: básicos del responsive design y HTML5

MÓVILES Y ALGORITMO DE GOOGLE21 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

Page 35: Mobile inclusive: básicos del responsive design y HTML5

CHEQUEO DE “SALUD” MÓVIL DE UN SITIO WEB

Page 36: Mobile inclusive: básicos del responsive design y HTML5

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.

Page 37: Mobile inclusive: básicos del responsive design y HTML5

AMIGABLE

Page 38: Mobile inclusive: básicos del responsive design y HTML5

NO AMIGABLE

Page 39: Mobile inclusive: básicos del responsive design y HTML5

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

Page 40: Mobile inclusive: básicos del responsive design y HTML5

GOOGLE OJO

NO SÍ

Page 42: Mobile inclusive: básicos del responsive design y HTML5

jQueryUnderscore

jPlayer

HTML5 videojQuery Reel

jQuery address

Page 43: Mobile inclusive: básicos del responsive design y HTML5