mobile inclusive: básicos del responsive design y html5
TRANSCRIPT
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
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
Buenos ejemplos
