Mobile inclusive: básicos del responsive design y HTML5

SITIOS WEB: DISEÑO Y ESTRUCTURA

Modos adaptables

El nuevorey

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.

Saboresy colores

Chau plug ins!!

Video y multimediaGráficosSonidoInteractividadVelocidad

Offline

Vs

Y/O

El mundo de ozOtros ejemplosAppleChrome20things…

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

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

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

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 (Google, setiembre 2012)

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

Pensar y crear en clave de móviles

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

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

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

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.

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 que escondan una parte significativa de la página no serán ya consideradas “mobile friendly”. Google también los penalizará en sus rankings

GOOGLE OJO

NO SÍ

jQueryUnderscore

jPlayer

HTML5 videojQuery Reel

jQuery address

Our mobile planet

Buenos ejemplos