SlideShare a Scribd company logo
1 of 47
Download to read offline
by Marta G.
...y ¿QUE ES RESPONSIVE?
...y ¿QUE ES RESPONSIVE?
Una web diseñada para
su visualización óptima
en todos los
dispositivos, desde
ordenadores a tablets y
móviles.
Vacía tu mente, libérate de las
formas.
Como el agua. Pon agua en una
botella y será la botella. Ponla en
una tetera y será la tetera.
El agua puede fluir o puede
golpear.
Sé agua, amigo.
- BRUCE LEE
¿COMO FUNCIONA?
¿COMO FUNCIONA?
¿COMO FUNCIONA?
= 1 web para múltiples dispositivos
¿COMO FUNCIONA?
= 1 web para múltiples dispositivos
480 px 768 px 1.200 px
Todos los elementos de
una web RESPONSIVE
se adaptan al
dispositivo.
Todos los elementos de
una web RESPONSIVE
se adaptan al
dispositivo.
También las
imágenes,
logos, menús,
vídeos...
Todos los elementos de
una web RESPONSIVE
se adaptan al
dispositivo.
También las
imágenes,
logos, menús,
vídeos...
columnas
flexibles
Todos los elementos de
una web RESPONSIVE
se adaptan al
dispositivo.
También las
imágenes,
logos, menús,
vídeos...
columnas
flexibles
imágenes y
vídeos
flexibles
Todos los elementos de
una web RESPONSIVE
se adaptan al
dispositivo.
También las
imágenes,
logos, menús,
vídeos...
columnas
flexibles
menús
flexibles
imágenes y
vídeos
flexibles
Todos los elementos de
una web RESPONSIVE
se adaptan al
dispositivo.
También las
imágenes,
logos, menús,
vídeos...
columnas
flexibles
menús
flexibles
imágenes y
vídeos
flexibles
El 21 de abril de 2015 Google ha
actualizado sus algoritmos de
búsqueda para móviles. Si tu web no es
RESPONSIVE será penalizada.
El 21 de abril de 2015 Google ha
actualizado sus algoritmos de
búsqueda para móviles. Si tu web no es
RESPONSIVE será penalizada.
¡HA LLEGADO EL
MOBILEGEDDON!
...entonces...
El 21 de abril de 2015 Google ha
actualizado sus algoritmos de
búsqueda para móviles. Si tu web no es
RESPONSIVE será penalizada.
¡HA LLEGADO EL
MOBILEGEDDON!
¿TENGOQUESER
RESPONSIVE?y
¿PORQUÉ?
...entonces...
El 21 de abril de 2015 Google ha
actualizado sus algoritmos de
búsqueda para móviles. Si tu web no es
RESPONSIVE será penalizada.
¡HA LLEGADO EL
MOBILEGEDDON!
¿TENGOQUESER
RESPONSIVE?y
¿PORQUÉ?
...entonces...
...porque Google
quiere que lo seas.
Si te parece poco…
El 21 de abril de 2015 Google ha
actualizado sus algoritmos de
búsqueda para móviles. Si tu web no es
RESPONSIVE será penalizada.
¡HA LLEGADO EL
MOBILEGEDDON!
IMPACTO cambios algoritmo Google
IMPACTO cambios algoritmo Google
PENGUIN
4%
IMPACTO cambios algoritmo Google
PENGUIN
4%
PANDA
12%
IMPACTO cambios algoritmo Google
PENGUIN
4%
PANDA
12%
MOBILEGEDDON
50%
IMPACTO cambios algoritmo Google
Este último será el más relevante.
PENGUIN
4%
PANDA
12%
MOBILEGEDDON
50%
...pero ¡TRANQUI!
...pero ¡TRANQUI!
Esto no quiere decir que tu web
vaya a desaparecer de los
resultados si no cuenta con diseño
adaptado para móviles.
...pero ¡TRANQUI!
Esto no quiere decir que tu web
vaya a desaparecer de los
resultados si no cuenta con diseño
adaptado para móviles.
Las páginas
RESPONSIVE
aparecerán primero pero solo
en las búsquedas realizadas desde
dispositivos móviles.
VIVIMOS EN LA ERA DEL MÓVIL
VIVIMOS EN LA ERA DEL MÓVIL
Los usuarios de móviles
comprueban sus dispositivos
VIVIMOS EN LA ERA DEL MÓVIL
Los usuarios de móviles
comprueban sus dispositivos
veces
al día
150
VIVIMOS EN LA ERA DEL MÓVIL
Los usuarios de móviles
comprueban sus dispositivos
veces
al día
150
¿PUEDES PERDER ESOS CLIENTES
¿PUEDES PERDER ESOS CLIENTES
¿PUEDES PERDER ESOS CLIENTES
de los usuarios acceden
a Internet con su móvil
o tablet.
Másdel
50%
del tiempo de navegación de los usuarios se
realiza a través del móvil55%
del tiempo de navegación de los usuarios se
realiza a través del móvil55%
de tus visitas se irán a la web de la competencia si
tienen una experiencia negativa40%
del tiempo de navegación de los usuarios se
realiza a través del móvil55%
de tus visitas se irán a la web de la competencia si
tienen una experiencia negativa40%
de usuarios no recomendarán un negocio
con una web no amigable para móviles57%
del tiempo de navegación de los usuarios se
realiza a través del móvil55%
de tus visitas se irán a la web de la competencia si
tienen una experiencia negativa40%
de usuarios no recomendarán un negocio
con una web no amigable para móviles57%
de los usuarios de móvil buscan
páginas que carguen en menos de
4 segundos64%
Más cifras...
Fíjate en el número de usuarios que se conectan a Internet mediante
dispositivos móviles en los últimos años.
Más cifras...
¡Tu web pasa el test de Google!
¡Tu web pasa el test de Google!
https://www.google.com/
webmasters/tools/
mobile-friendly/
Haz la prueba
de
optimización
para móviles
be responsive.
be responsive.
MARTA G COMUNICACIÓN
www.martagcomunicacion.es

More Related Content

Viewers also liked

Marta G. Bandera. dossier ferias 09
Marta G. Bandera. dossier ferias 09Marta G. Bandera. dossier ferias 09
Marta G. Bandera. dossier ferias 09Marta González
 
Diseño grafico comunicacion social
Diseño grafico comunicacion social Diseño grafico comunicacion social
Diseño grafico comunicacion social galaxi92
 
Redisseny del Portal Oficial de Turisme de les Illes Balears
Redisseny del Portal Oficial de Turisme de les Illes BalearsRedisseny del Portal Oficial de Turisme de les Illes Balears
Redisseny del Portal Oficial de Turisme de les Illes BalearsJordi Zango Novell
 
Reticulas para pantalla
Reticulas para pantallaReticulas para pantalla
Reticulas para pantallaMORFEO2685
 
Presentacion de clasificacion de los celulares.
Presentacion de clasificacion de los celulares.Presentacion de clasificacion de los celulares.
Presentacion de clasificacion de los celulares.David Vizcarra Ramos
 
Cómo descargar presentaciones desde SlideShare
Cómo descargar presentaciones desde SlideShareCómo descargar presentaciones desde SlideShare
Cómo descargar presentaciones desde SlideSharePedro Bermudez Talavera
 

Viewers also liked (8)

Marta G. Bandera. dossier ferias 09
Marta G. Bandera. dossier ferias 09Marta G. Bandera. dossier ferias 09
Marta G. Bandera. dossier ferias 09
 
Diseño grafico comunicacion social
Diseño grafico comunicacion social Diseño grafico comunicacion social
Diseño grafico comunicacion social
 
Presentación la vitrina
Presentación la vitrinaPresentación la vitrina
Presentación la vitrina
 
Redisseny del Portal Oficial de Turisme de les Illes Balears
Redisseny del Portal Oficial de Turisme de les Illes BalearsRedisseny del Portal Oficial de Turisme de les Illes Balears
Redisseny del Portal Oficial de Turisme de les Illes Balears
 
Reticulas para pantalla
Reticulas para pantallaReticulas para pantalla
Reticulas para pantalla
 
Presentacion de clasificacion de los celulares.
Presentacion de clasificacion de los celulares.Presentacion de clasificacion de los celulares.
Presentacion de clasificacion de los celulares.
 
Servicio todo en uno - arquitecto técnico en Gijón, Asturias
Servicio todo en uno - arquitecto técnico en Gijón, AsturiasServicio todo en uno - arquitecto técnico en Gijón, Asturias
Servicio todo en uno - arquitecto técnico en Gijón, Asturias
 
Cómo descargar presentaciones desde SlideShare
Cómo descargar presentaciones desde SlideShareCómo descargar presentaciones desde SlideShare
Cómo descargar presentaciones desde SlideShare
 

Similar to Be RESPONSIVE my friend.

Claudio Adrian Natoli - Tendencias en el diseño web 2015
Claudio Adrian Natoli - Tendencias en el diseño web 2015Claudio Adrian Natoli - Tendencias en el diseño web 2015
Claudio Adrian Natoli - Tendencias en el diseño web 2015Claudio Adrian Natoli Michieli
 
Diseñando la web móvil con HTML5 y CSS3
Diseñando la web móvil con HTML5 y CSS3Diseñando la web móvil con HTML5 y CSS3
Diseñando la web móvil con HTML5 y CSS3Marta Armada
 
Curso UX Tenerife (No maltrates a tus usuarios) FG ULL - Día 3 - Responsive W...
Curso UX Tenerife (No maltrates a tus usuarios) FG ULL - Día 3 - Responsive W...Curso UX Tenerife (No maltrates a tus usuarios) FG ULL - Día 3 - Responsive W...
Curso UX Tenerife (No maltrates a tus usuarios) FG ULL - Día 3 - Responsive W...Romén Rodríguez-Gil
 
2015 corta accesibilidad digital agosto antioquia digital
2015 corta accesibilidad digital agosto   antioquia digital2015 corta accesibilidad digital agosto   antioquia digital
2015 corta accesibilidad digital agosto antioquia digitalFelipe Accesibilidad
 
Device Days 2012 - HTML5 y CSS3 para móvil
Device Days 2012 - HTML5 y CSS3 para móvilDevice Days 2012 - HTML5 y CSS3 para móvil
Device Days 2012 - HTML5 y CSS3 para móvilJavier Usobiaga
 
Cómo llegar a los celulares y Tablets
Cómo llegar a los celulares y TabletsCómo llegar a los celulares y Tablets
Cómo llegar a los celulares y Tabletsclubdemarketing1
 
Mobile Primero en Playa Valley 2011
Mobile Primero en Playa Valley 2011Mobile Primero en Playa Valley 2011
Mobile Primero en Playa Valley 2011Maximiliano Firtman
 
Clase Práctica Wireframes
Clase Práctica WireframesClase Práctica Wireframes
Clase Práctica WireframesRodrigo Vera
 
Master class: Mobile UI/UX. Como diseñar una App exitosa.
Master class: Mobile UI/UX. Como diseñar una App exitosa.Master class: Mobile UI/UX. Como diseñar una App exitosa.
Master class: Mobile UI/UX. Como diseñar una App exitosa.Martin Redigolo
 
Arquitectura de la Información aplicada a móviles
Arquitectura de la Información aplicada a móvilesArquitectura de la Información aplicada a móviles
Arquitectura de la Información aplicada a móvilesAiChile
 
Mobile design 02 Recomendaciones para el diseño de aplicaciones móviles
Mobile design 02 Recomendaciones para el diseño de aplicaciones móvilesMobile design 02 Recomendaciones para el diseño de aplicaciones móviles
Mobile design 02 Recomendaciones para el diseño de aplicaciones móvilesJuan Paulo Madriaza
 
Presentacion Vive interactive 2016
Presentacion Vive interactive 2016Presentacion Vive interactive 2016
Presentacion Vive interactive 2016Luis Hernandez
 
Diseno y usabilidad en aplicaciones móviles para iphone (ui app design)
Diseno y usabilidad en aplicaciones móviles para iphone (ui app design)Diseno y usabilidad en aplicaciones móviles para iphone (ui app design)
Diseno y usabilidad en aplicaciones móviles para iphone (ui app design)Izaskun Saez
 
Qr rttes presentacion
Qr rttes presentacionQr rttes presentacion
Qr rttes presentacionqr-codigo
 
Responsive Web Design, ventaja, inconvenientes y recomendaciones
Responsive Web Design, ventaja, inconvenientes y recomendacionesResponsive Web Design, ventaja, inconvenientes y recomendaciones
Responsive Web Design, ventaja, inconvenientes y recomendacionesXavi Cardet
 

Similar to Be RESPONSIVE my friend. (20)

Tendencias en el diseño web 2015
Tendencias en el diseño web 2015Tendencias en el diseño web 2015
Tendencias en el diseño web 2015
 
Claudio Adrian Natoli - Tendencias en el diseño web 2015
Claudio Adrian Natoli - Tendencias en el diseño web 2015Claudio Adrian Natoli - Tendencias en el diseño web 2015
Claudio Adrian Natoli - Tendencias en el diseño web 2015
 
Accesibilidad Digital Completa Colciencias 144
Accesibilidad Digital Completa Colciencias 144Accesibilidad Digital Completa Colciencias 144
Accesibilidad Digital Completa Colciencias 144
 
Diseñando la web móvil con HTML5 y CSS3
Diseñando la web móvil con HTML5 y CSS3Diseñando la web móvil con HTML5 y CSS3
Diseñando la web móvil con HTML5 y CSS3
 
Curso UX Tenerife (No maltrates a tus usuarios) FG ULL - Día 3 - Responsive W...
Curso UX Tenerife (No maltrates a tus usuarios) FG ULL - Día 3 - Responsive W...Curso UX Tenerife (No maltrates a tus usuarios) FG ULL - Día 3 - Responsive W...
Curso UX Tenerife (No maltrates a tus usuarios) FG ULL - Día 3 - Responsive W...
 
2015 corta accesibilidad digital agosto antioquia digital
2015 corta accesibilidad digital agosto   antioquia digital2015 corta accesibilidad digital agosto   antioquia digital
2015 corta accesibilidad digital agosto antioquia digital
 
Device Days 2012 - HTML5 y CSS3 para móvil
Device Days 2012 - HTML5 y CSS3 para móvilDevice Days 2012 - HTML5 y CSS3 para móvil
Device Days 2012 - HTML5 y CSS3 para móvil
 
Cómo llegar a los celulares y Tablets
Cómo llegar a los celulares y TabletsCómo llegar a los celulares y Tablets
Cómo llegar a los celulares y Tablets
 
Mobile Primero en Playa Valley 2011
Mobile Primero en Playa Valley 2011Mobile Primero en Playa Valley 2011
Mobile Primero en Playa Valley 2011
 
Responsive Web Design
Responsive Web DesignResponsive Web Design
Responsive Web Design
 
Clase Práctica Wireframes
Clase Práctica WireframesClase Práctica Wireframes
Clase Práctica Wireframes
 
Master class: Mobile UI/UX. Como diseñar una App exitosa.
Master class: Mobile UI/UX. Como diseñar una App exitosa.Master class: Mobile UI/UX. Como diseñar una App exitosa.
Master class: Mobile UI/UX. Como diseñar una App exitosa.
 
Arquitectura de la Información aplicada a móviles
Arquitectura de la Información aplicada a móvilesArquitectura de la Información aplicada a móviles
Arquitectura de la Información aplicada a móviles
 
Mobile design 02 Recomendaciones para el diseño de aplicaciones móviles
Mobile design 02 Recomendaciones para el diseño de aplicaciones móvilesMobile design 02 Recomendaciones para el diseño de aplicaciones móviles
Mobile design 02 Recomendaciones para el diseño de aplicaciones móviles
 
Presentacion Vive interactive 2016
Presentacion Vive interactive 2016Presentacion Vive interactive 2016
Presentacion Vive interactive 2016
 
Diseno y usabilidad en aplicaciones móviles para iphone (ui app design)
Diseno y usabilidad en aplicaciones móviles para iphone (ui app design)Diseno y usabilidad en aplicaciones móviles para iphone (ui app design)
Diseno y usabilidad en aplicaciones móviles para iphone (ui app design)
 
Qr rttes presentacion
Qr rttes presentacionQr rttes presentacion
Qr rttes presentacion
 
Responsive Web Design, ventaja, inconvenientes y recomendaciones
Responsive Web Design, ventaja, inconvenientes y recomendacionesResponsive Web Design, ventaja, inconvenientes y recomendaciones
Responsive Web Design, ventaja, inconvenientes y recomendaciones
 
conceptos claves 2
conceptos claves 2conceptos claves 2
conceptos claves 2
 
Presentación3
Presentación3Presentación3
Presentación3
 

Be RESPONSIVE my friend.

  • 1.
  • 2.
  • 4. ...y ¿QUE ES RESPONSIVE?
  • 5. ...y ¿QUE ES RESPONSIVE? Una web diseñada para su visualización óptima en todos los dispositivos, desde ordenadores a tablets y móviles.
  • 6. Vacía tu mente, libérate de las formas. Como el agua. Pon agua en una botella y será la botella. Ponla en una tetera y será la tetera. El agua puede fluir o puede golpear. Sé agua, amigo. - BRUCE LEE
  • 9. ¿COMO FUNCIONA? = 1 web para múltiples dispositivos
  • 10. ¿COMO FUNCIONA? = 1 web para múltiples dispositivos 480 px 768 px 1.200 px
  • 11. Todos los elementos de una web RESPONSIVE se adaptan al dispositivo.
  • 12. Todos los elementos de una web RESPONSIVE se adaptan al dispositivo. También las imágenes, logos, menús, vídeos...
  • 13. Todos los elementos de una web RESPONSIVE se adaptan al dispositivo. También las imágenes, logos, menús, vídeos... columnas flexibles
  • 14. Todos los elementos de una web RESPONSIVE se adaptan al dispositivo. También las imágenes, logos, menús, vídeos... columnas flexibles imágenes y vídeos flexibles
  • 15. Todos los elementos de una web RESPONSIVE se adaptan al dispositivo. También las imágenes, logos, menús, vídeos... columnas flexibles menús flexibles imágenes y vídeos flexibles
  • 16. Todos los elementos de una web RESPONSIVE se adaptan al dispositivo. También las imágenes, logos, menús, vídeos... columnas flexibles menús flexibles imágenes y vídeos flexibles
  • 17. El 21 de abril de 2015 Google ha actualizado sus algoritmos de búsqueda para móviles. Si tu web no es RESPONSIVE será penalizada.
  • 18. El 21 de abril de 2015 Google ha actualizado sus algoritmos de búsqueda para móviles. Si tu web no es RESPONSIVE será penalizada. ¡HA LLEGADO EL MOBILEGEDDON!
  • 19. ...entonces... El 21 de abril de 2015 Google ha actualizado sus algoritmos de búsqueda para móviles. Si tu web no es RESPONSIVE será penalizada. ¡HA LLEGADO EL MOBILEGEDDON!
  • 20. ¿TENGOQUESER RESPONSIVE?y ¿PORQUÉ? ...entonces... El 21 de abril de 2015 Google ha actualizado sus algoritmos de búsqueda para móviles. Si tu web no es RESPONSIVE será penalizada. ¡HA LLEGADO EL MOBILEGEDDON!
  • 21. ¿TENGOQUESER RESPONSIVE?y ¿PORQUÉ? ...entonces... ...porque Google quiere que lo seas. Si te parece poco… El 21 de abril de 2015 Google ha actualizado sus algoritmos de búsqueda para móviles. Si tu web no es RESPONSIVE será penalizada. ¡HA LLEGADO EL MOBILEGEDDON!
  • 23. IMPACTO cambios algoritmo Google PENGUIN 4%
  • 24. IMPACTO cambios algoritmo Google PENGUIN 4% PANDA 12%
  • 25. IMPACTO cambios algoritmo Google PENGUIN 4% PANDA 12% MOBILEGEDDON 50%
  • 26. IMPACTO cambios algoritmo Google Este último será el más relevante. PENGUIN 4% PANDA 12% MOBILEGEDDON 50%
  • 28. ...pero ¡TRANQUI! Esto no quiere decir que tu web vaya a desaparecer de los resultados si no cuenta con diseño adaptado para móviles.
  • 29. ...pero ¡TRANQUI! Esto no quiere decir que tu web vaya a desaparecer de los resultados si no cuenta con diseño adaptado para móviles. Las páginas RESPONSIVE aparecerán primero pero solo en las búsquedas realizadas desde dispositivos móviles.
  • 30. VIVIMOS EN LA ERA DEL MÓVIL
  • 31. VIVIMOS EN LA ERA DEL MÓVIL Los usuarios de móviles comprueban sus dispositivos
  • 32. VIVIMOS EN LA ERA DEL MÓVIL Los usuarios de móviles comprueban sus dispositivos veces al día 150
  • 33. VIVIMOS EN LA ERA DEL MÓVIL Los usuarios de móviles comprueban sus dispositivos veces al día 150
  • 36. ¿PUEDES PERDER ESOS CLIENTES de los usuarios acceden a Internet con su móvil o tablet. Másdel 50%
  • 37. del tiempo de navegación de los usuarios se realiza a través del móvil55%
  • 38. del tiempo de navegación de los usuarios se realiza a través del móvil55% de tus visitas se irán a la web de la competencia si tienen una experiencia negativa40%
  • 39. del tiempo de navegación de los usuarios se realiza a través del móvil55% de tus visitas se irán a la web de la competencia si tienen una experiencia negativa40% de usuarios no recomendarán un negocio con una web no amigable para móviles57%
  • 40. del tiempo de navegación de los usuarios se realiza a través del móvil55% de tus visitas se irán a la web de la competencia si tienen una experiencia negativa40% de usuarios no recomendarán un negocio con una web no amigable para móviles57% de los usuarios de móvil buscan páginas que carguen en menos de 4 segundos64%
  • 42. Fíjate en el número de usuarios que se conectan a Internet mediante dispositivos móviles en los últimos años. Más cifras...
  • 43. ¡Tu web pasa el test de Google!
  • 44. ¡Tu web pasa el test de Google! https://www.google.com/ webmasters/tools/ mobile-friendly/ Haz la prueba de optimización para móviles
  • 45.
  • 47. be responsive. MARTA G COMUNICACIÓN www.martagcomunicacion.es