Esta presentación hace parte del taller Mobile Optimization que se dictó en el #WebCongress Bogotá 2016. El taller busca mostrar las mejores prácticas de optimización Mobile y cuales son las principales tendencias del tema. AMP de Google y Instante Articles de Facebook son nuevas tecnologías que se enfocan en la experiencia desde móviles, descubrirán cada una de estas novedades. Además trataremos de temas claves como la optimización completa para sitios móviles en la era Mobilegeddon y mejorar el rendimiento la pauta desde mobile. Contacto para dudas: https://twitter.com/JorgeJaramillo Los Slides solos no hablan, se manejaron como material de apoyo. Por eso, si tienen alguna duda me pueden preguntar en Twitter y con todo gusto respondo. Otros Slides: SERP: http://www.slideshare.net/jorgejaramillo/serp-57753876 Pinterest para empresas: http://www.slideshare.net/jorgejaramillo/pinterest-para-empresas-32558131 SEO & Social Media: http://www.slideshare.net/jorgejaramillo/seo-social-media-43639486 Introducción a Google Analytics: http://www.slideshare.net/jorgejaramillo/google-analytics-54446162

1. MOBILE OPTIMIZATION
WEBCONGRESS 2016

2. JORGE JARAMILLO
JEFE DE SEO, PUBLICACIONES SEMANA.
TWITTER: @JorgeJaramillo
LINKEDIN: /jorgejaramillog
SLIDESHARE: /jorgejaramillo
CONTACTO: mail@jorgejaramillo.com

3. PREGUNTAS SOBRE EL SLIDE
@JORGEJARAMILLO
#WEBCONGRESS

4. POCO MOBILE
MOBILE IGUALA
DESKTOP
MOBILE SERÁ EL
FUTURO
EL FUTURO
ES AHORA
“EL FUTURO”

5. CONTENT IS KING

6. CONTEXT IS KING

7. PENSEMOS EN EL USUARIO

11. EL USUARIO COMO EJE

12. CONOCIMIENTO

13. DEBEMOS CONOCER
MEJOR LOS USUARIOS
PARA AGRADARLES MÁS

14. DISEÑO

15. DISPONIBILIDAD

16. MENSAJE

17. CALL TO ACTION

18. NO PENSEMOS
EN DISPOSITIVO

19. PENSEMOS
EN MOMENTOS

20. DISPOSITIVO
IPHONE

21. MOMENTO
UN VIAJE

22. LOS BUSCADORES ENTIENDEN EL CAMBIO

23. QUIERO SABER QUIERO IR
QUIERO COMPRAR QUIERO HACER

24. LOS BUSCADORES
REFLEJAN
LO QUE TODOS
PENSAMOS

31. DEBEMOS APRENDER DEL CAMBIO

32. IMAGINEMOS
DIFERENTES CAMINOS
PARA LAS ACCIONES

33. ACCIÓN
AGREGAR AL CARRITO

34. ACCIÓN
RECIBIR UN MES GRATIS

35. ACCIÓN
PRUEBA 30 DÍAS GRATIS

36. ACCIÓN
EMPEZAR A ENTRENAR

37. INMEDIATEZ

38. 5 SEGUNDOS

39. REQUISITOS DE LA
PRIMERA IMPRESIÓN
MOSTRAR LA MARCA
EXPRESAR CREDIBILIDAD
SER CLARO EN EL MENSAJE
LLAMAR A LA ACCIÓN
AGRADABLE VISUALMENTE

40. 43%DE LOS VISITANTES
NO RETORNAN A UN
SITIO, SÍ ESTE ES LENTO.

41. PERFORMANCE = ENGANCHE

42. 1 SEGDE DELAY REPRESENTA:
AUMENTO REBOTE EN 2%
DISMINUYE LOS PAGEVIEWS 3%
PÉRDIDA EN CONVERSIÓN DEL 7%*
*EN ALGUNOS SECTORES

43. NUEVAS TECNOLOGÍAS
AL RESCATE

44. INSTANT ARTICLES

45. instantarticles.fb.com

46. INSTANT ARTICLES RESPONSIVE

47. INSTANT ARTICLES RESPONSIVE

48. ARTÍCULO RELACIONADOS

49. ARTÍCULO RELACIONADOS

50. ACCELERATOR MOBILE PAGES

51. www.ampproject.org

52. LANZADO FEB. 2016
OPEN SOURCE
LIDERADO POR GOOGLE
CAMBIO DE PARADIGMA

53. NO NECESITA API NI RSS
MAYOR VELOCIDAD
NO ADBLOCKERS
MULTIPLATAFORMA
FÁCIL NAVEGACIÓN
MEJORA EL REBOTE

58. AMP
AMP
AMP
A MANO
A MANO
A MANO
SIN OPTIMIZACIÓN
SIN OPTIMIZACIÓN
SIN OPTIMIZACIÓN

59. g.co/ampdemo

60. AMP ≠ RESPONSIVE

61. VERSIÓN
AMP
SIN AMP

62. VERSIÓN
AMP
CON AMP

63. VERSIÓN AMPVERSIÓN NO AMP
<link rel="amphtml" href="https://www.example.com/url/to/amp-version.html" />
DESDE LA VERSIÓN NO AMP APUNTAMOS UN META HACIA LA VERSIÓN AMP

64. VERSIÓN AMPVERSIÓN NO AMP
<link rel="canonical" href="https://www.example.com/url/normal-no-amp.html" />
DESDE LA VERSIÓN AMP APUNTAMOS UNA CANONICAL HACIA LA NO AMP

67. AMP RESPONSIVE

68. AMP RESPONSIVE

69. AMP RESPONSIVE

70. AMP RESPONSIVE

71. AMP RESPONSIVE

72. AMP RESPONSIVE

73. AMP RESPONSIVE

74. AMP RESPONSIVE

75. AMP + RESPONSIVE + ESCRITORIO

76. EJEMPLOS DE USO
<amp-twitter width="375"
height="472"
layout="responsive"
data-tweetid="638793490521001985">
</amp-twitter>

77. EJEMPLOS DE USO
<amp-instagram data-shortcode="1totVhIFXl"
width="1"
height="1"
layout="responsive">
</amp-instagram>

78. www.ampproject.org

79. EXPERIMENTOS

80. ANTES DESPUÉS
AUMENTO USO DEL
MENÚ EN UN 30%

81. bit.ly/menu-hamburger

82. bit.ly/fb-hamburguer

83. MAZDA NUEVO MEDELLÍN
VALOR: 27,000.000
MAZDA NUEVO MEDELLÍN
VALOR: 27,000.000
MAZDA NUEVO MEDELLÍN
VALOR: 27,000.000
MAZDA NUEVO MEDELLÍN
ANTES DESPUÉS
AUMENTO USO DEL
BUSCADOR EN UN 15%
MAZDA NUEVO MEDELLÍN
VALOR: 27,000.000
MAZDA NUEVO MEDELLÍN
BUSCA POR MARCA
ENCUENTRA TU
CARRO O
MOTO

84. SUBCATEGORÍAS
ANTES DESPUÉS
AUMENTO EN PÁGINAS
VISTAS UN 7%
SELECCIONA LA CATEGORÍA
DEPORTIVOS
CLÁSICOS
CATEGORÍAS
DEPORTIVOS CLÁSICOS
MODERNOS TURISMO
REPUESTOS

85. ANTES DESPUÉS
AUMENTO USO DE LOS
BOTONES EN UN 23%
BUSCADOR
Tenemos las
mejores
opciones
para su
próximo
viaje.
HOTELES VIAJES
Tenemos las mejores
opciones para su
próximo viaje.
HOTELES VIAJES
BUSCADOR

86. ¡BIENVENIDOS!
ELLOS NECESITAN TU
AMOR Y APOYO
ANTES DESPUÉS
AUMENTO USO DEL
MENÚ EN UN 35%
¡BIENVENIDOS!
ELLOS NECESITAN TU
AMOR Y APOYO
LOGO
ADOPTA AYUDA APADRINA
APADRINAR
AYUDAR
LA FUNDACIÓN
ADOPTA

87. TIPS

88. AMIGABLE PARA MOBILES

89. bit.ly/wc-speed-test

90. bit.ly/wc-speed-test

91. MICRO OBJETIVOS

92. 1
2

93. REPENSEMOS LOS
OBJETIVOS

94. NÚMERO DE PÁGINAS VISTAS
INTENCIÓN DE IMPRIMIR O ENVIAR
CAMBIO DE TAMAÑO DE FUENTE
TIEMPO DE PERMANENCIA MAYOR A 3’
INTENCIÓN DE COMPARTIR
OBJETIVOS O CONVERSIONES
32
5
1
4
1
2
3
4
5

95. NO TODO EN RESPONSIVE

96. ¿QUÉ ES NECESARIO REALMENTE?

97. BYE!

98. URL DIFERENTE VS RESPONSIVE
app.ejemplo.com ejemplo.com

99. MARCAR EVENTOS
MEJORA EL REBOTE

100. DESCARGAR APP

101. MÁS TIPS

104. PENSEMOS EN EL USUARIO

105. Gracias pexels.com

106. ENLACES DE INTERÉS
PROYECTO AMP
AMPBYEXAMPLES.COM
INSTANT ARTICLES
VWO.COM
GOOGLE SPEED TEST
BOOTSTRAP 4.0
JORGEJARAMILLO.COM
SLIDESHARE

107. ¡GRACIAS!