El documento habla sobre el diseño de sitios web adaptables y móviles. Explica que el diseño adaptable proporciona un mismo código que se ajusta al tamaño de pantalla para todos los dispositivos. Las ventajas incluyen mejor SEO, experiencia de usuario y menor costo de mantenimiento. También discute la importancia de crear contenido para móviles dado que más del 50% del tráfico viene de estos dispositivos y los usuarios esperan sitios rápidos y optimizados.

1. SITIOS WEB: DISEÑO Y ESTRUCTURA

2. Modos adaptables

3. El nuevo
rey

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

6. Sabores
y colores

7. Chau plug ins!!

8. Video y multimedia
Gráficos
Sonido
Interactividad
Velocidad
Offline

9. Vs
Y/O

10. El mundo de oz
Otros ejemplos
Apple
Chrome
20things…

11. Yendo de la cama al
living

13. Uno para todos todos para uno

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

18. Ventajas responsive design

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

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

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

23. Adaptaciones móviles

24. Mobile
Desktop en
smartphone

27. Los sitios web “mobile
friendly” convierten a
los usuarios en clientes
What Users Want Most from Mobile Sites Today
(Google, setiembre 2012)

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

30. Pensar y crear en clave
de móviles

32. Contenido demasiado
limitado
Dominios múltiples.
Pop-ups.
Videos que no se pueden
ver
Redireccionamiento falllido.
Tiempo de carga PageSpeed

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

34. Qué sitios web son
mobile friendly?
Mobile Friendly test
Principios de diseño de un sitio
Mobile Friendly Websites

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

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

37. AMIGABLE

38. NO AMIGABLE

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

40. GOOGLE OJO
NO SÍ

42. jQuery
Underscore
jPlayer
HTML5 video
jQuery Reel
jQuery address

47. Our mobile planet

48. Buenos ejemplos