SlideShare a Scribd company logo
1 of 15
Responsive Web
Design
Ing. Alexander Acurio
El cambio de una computadora por el uso de
celulares hacen que casi todos los nuevos
clientes por estos días quieran una versión
móvil de sus sitios web.




En los próximos cinco años necesitaremos
diseñar para otro sin número de nuevos
dispositivos.
¿Cuándo acabará esta locura?


                 No lo hará…
Sólo por mencionar algunos…
Pero… ¿Qué es Responsive?
Diseño que responde a:
• Comportamiento del usuario.
• Resolución de pantalla.
• Plataforma.
• Orientación.
                         Utilizar:
                         • Layouts flexibles.
                         • Imágenes flexibles.
                         • CSS Media Queries.
¿Qué beneficios tengo?
• Tu sitio se podrá ver, literalmente, en
  cualquier lado.
• Los sitios móviles actuales son pobremente
  diseñados.
• SEO: Optimización para motores de
  búsqueda.
Navegadores que lo soportan

  •IE8+
  •Safari
  •Firefox
  •Chrome
  •Opera
Y… ¿Cómo lo hacemos?
Responsive Web
Design Frameworks
¿Por qué reinventar la pólvora?
Y… ¿qué más?
• Stuff&Nonsense :
  Framework basado en HTML5 BoilerPlate
  (JQuery, Modernizr, Normalize.css)
• ScreenFly :
  Pruebas de resoluciones
• Sencha :
  IDE
• Imágenes responsivas
• Masonry :
  Layouts dinámicos
didjeram.com | info@didjeram.com


didjeram                       didjeram

More Related Content

What's hot

Video animado diseño web adaptativo o responsivo
Video animado diseño web adaptativo o responsivoVideo animado diseño web adaptativo o responsivo
Video animado diseño web adaptativo o responsivodavidstiven14
 
Desarrollo web multidispositivo
Desarrollo web multidispositivoDesarrollo web multidispositivo
Desarrollo web multidispositivodianagtr
 
Kendo UI - Potencia tu Web
Kendo UI - Potencia tu WebKendo UI - Potencia tu Web
Kendo UI - Potencia tu WebDavid Gonzalo
 
Desarrollo Web Avanzado II
Desarrollo Web Avanzado IIDesarrollo Web Avanzado II
Desarrollo Web Avanzado IIPablo De La Hoz
 

What's hot (9)

Video animado diseño web adaptativo o responsivo
Video animado diseño web adaptativo o responsivoVideo animado diseño web adaptativo o responsivo
Video animado diseño web adaptativo o responsivo
 
Desarrollo web multidispositivo
Desarrollo web multidispositivoDesarrollo web multidispositivo
Desarrollo web multidispositivo
 
Kendo UI - Potencia tu Web
Kendo UI - Potencia tu WebKendo UI - Potencia tu Web
Kendo UI - Potencia tu Web
 
Web Gratis
Web GratisWeb Gratis
Web Gratis
 
Kendo UI
Kendo UIKendo UI
Kendo UI
 
Wix
WixWix
Wix
 
La importancia de una web. El CMS (Mayo 2017)
La importancia de una web. El CMS (Mayo 2017)La importancia de una web. El CMS (Mayo 2017)
La importancia de una web. El CMS (Mayo 2017)
 
Desarrollo Web Avanzado II
Desarrollo Web Avanzado IIDesarrollo Web Avanzado II
Desarrollo Web Avanzado II
 
Responsive Web Design
Responsive Web DesignResponsive Web Design
Responsive Web Design
 

Similar to Diseño web adaptable móvil beneficios técnicas

Consejos Prácticos para Mejorar tu Web y Vender Más
Consejos Prácticos para Mejorar tu Web y Vender MásConsejos Prácticos para Mejorar tu Web y Vender Más
Consejos Prácticos para Mejorar tu Web y Vender MásAlojate.com
 
Celebración día del diseñador 27 de abril 2015 #YoDiseñoConAdobe
Celebración día del diseñador 27 de abril 2015 #YoDiseñoConAdobe Celebración día del diseñador 27 de abril 2015 #YoDiseñoConAdobe
Celebración día del diseñador 27 de abril 2015 #YoDiseñoConAdobe AdanAvelar
 
Responsive web design
Responsive web designResponsive web design
Responsive web designG2K Hosting
 
Responsive Design - Taller de Diseño av
Responsive Design - Taller de Diseño avResponsive Design - Taller de Diseño av
Responsive Design - Taller de Diseño avAyerViernes
 
Presentación Multimedia - Responsive vs Adaptive
Presentación Multimedia - Responsive vs AdaptivePresentación Multimedia - Responsive vs Adaptive
Presentación Multimedia - Responsive vs AdaptiveViviana Trujillo
 
Front End & Responsive Web Design | DevFest Merida
Front End & Responsive Web Design | DevFest MeridaFront End & Responsive Web Design | DevFest Merida
Front End & Responsive Web Design | DevFest MeridaLuis Felipe Perez
 
Diseño Responsivo en Drupal: ¿Qué hay de Nuevo?
Diseño Responsivo en Drupal: ¿Qué hay de Nuevo?Diseño Responsivo en Drupal: ¿Qué hay de Nuevo?
Diseño Responsivo en Drupal: ¿Qué hay de Nuevo?Rob Montero
 
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
 
Desarrollos de aplicaciones móviles con tecnologías web
Desarrollos de aplicaciones móviles con tecnologías webDesarrollos de aplicaciones móviles con tecnologías web
Desarrollos de aplicaciones móviles con tecnologías webJulio Alfaro
 
Mobile inclusive: básicos del responsive design y HTML5
Mobile inclusive: básicos del responsive design y HTML5Mobile inclusive: básicos del responsive design y HTML5
Mobile inclusive: básicos del responsive design y HTML5Carina Novarese
 
Contenido web en múltiples pantallas
Contenido web en múltiples pantallasContenido web en múltiples pantallas
Contenido web en múltiples pantallasEdgar Parada
 
Sesion06_DW.pdf
Sesion06_DW.pdfSesion06_DW.pdf
Sesion06_DW.pdfUSAT
 
Aplicaciones moviles en mozilla
Aplicaciones moviles en mozillaAplicaciones moviles en mozilla
Aplicaciones moviles en mozillaTensor
 

Similar to Diseño web adaptable móvil beneficios técnicas (20)

Responsive Web Design
Responsive Web DesignResponsive Web Design
Responsive Web Design
 
Consejos Prácticos para Mejorar tu Web y Vender Más
Consejos Prácticos para Mejorar tu Web y Vender MásConsejos Prácticos para Mejorar tu Web y Vender Más
Consejos Prácticos para Mejorar tu Web y Vender Más
 
Celebración día del diseñador 27 de abril 2015 #YoDiseñoConAdobe
Celebración día del diseñador 27 de abril 2015 #YoDiseñoConAdobe Celebración día del diseñador 27 de abril 2015 #YoDiseñoConAdobe
Celebración día del diseñador 27 de abril 2015 #YoDiseñoConAdobe
 
Responsive web design
Responsive web designResponsive web design
Responsive web design
 
Responsive Design - Taller de Diseño av
Responsive Design - Taller de Diseño avResponsive Design - Taller de Diseño av
Responsive Design - Taller de Diseño av
 
Responsive Design
Responsive Design Responsive Design
Responsive Design
 
Responsive Web Design
Responsive Web DesignResponsive Web Design
Responsive Web Design
 
Presentación Multimedia - Responsive vs Adaptive
Presentación Multimedia - Responsive vs AdaptivePresentación Multimedia - Responsive vs Adaptive
Presentación Multimedia - Responsive vs Adaptive
 
3 dslideshare
3 dslideshare3 dslideshare
3 dslideshare
 
Front End & Responsive Web Design | DevFest Merida
Front End & Responsive Web Design | DevFest MeridaFront End & Responsive Web Design | DevFest Merida
Front End & Responsive Web Design | DevFest Merida
 
Diseño Responsivo en Drupal: ¿Qué hay de Nuevo?
Diseño Responsivo en Drupal: ¿Qué hay de Nuevo?Diseño Responsivo en Drupal: ¿Qué hay de Nuevo?
Diseño Responsivo en Drupal: ¿Qué hay de Nuevo?
 
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
 
Diseño web responsivo
Diseño web responsivoDiseño web responsivo
Diseño web responsivo
 
Desarrollos de aplicaciones móviles con tecnologías web
Desarrollos de aplicaciones móviles con tecnologías webDesarrollos de aplicaciones móviles con tecnologías web
Desarrollos de aplicaciones móviles con tecnologías web
 
Mobile inclusive: básicos del responsive design y HTML5
Mobile inclusive: básicos del responsive design y HTML5Mobile inclusive: básicos del responsive design y HTML5
Mobile inclusive: básicos del responsive design y HTML5
 
Contenido web en múltiples pantallas
Contenido web en múltiples pantallasContenido web en múltiples pantallas
Contenido web en múltiples pantallas
 
ing.software
ing.softwareing.software
ing.software
 
Sesion06_DW.pdf
Sesion06_DW.pdfSesion06_DW.pdf
Sesion06_DW.pdf
 
Aplicaciones moviles en mozilla
Aplicaciones moviles en mozillaAplicaciones moviles en mozilla
Aplicaciones moviles en mozilla
 
9.aplicaciones web responsive gene xus
9.aplicaciones web responsive gene xus9.aplicaciones web responsive gene xus
9.aplicaciones web responsive gene xus
 

Recently uploaded

Mapa Mental de estrategias de articulación de las areas curriculares.pdf
Mapa Mental de estrategias de articulación de las areas curriculares.pdfMapa Mental de estrategias de articulación de las areas curriculares.pdf
Mapa Mental de estrategias de articulación de las areas curriculares.pdfvictorbeltuce
 
ÉTICA, NATURALEZA Y SOCIEDADES_3RO_3ER TRIMESTRE.pdf
ÉTICA, NATURALEZA Y SOCIEDADES_3RO_3ER TRIMESTRE.pdfÉTICA, NATURALEZA Y SOCIEDADES_3RO_3ER TRIMESTRE.pdf
ÉTICA, NATURALEZA Y SOCIEDADES_3RO_3ER TRIMESTRE.pdfluisantoniocruzcorte1
 
Tema 8.- Gestion de la imagen a traves de la comunicacion de crisis.pdf
Tema 8.- Gestion de la imagen a traves de la comunicacion de crisis.pdfTema 8.- Gestion de la imagen a traves de la comunicacion de crisis.pdf
Tema 8.- Gestion de la imagen a traves de la comunicacion de crisis.pdfDaniel Ángel Corral de la Mata, Ph.D.
 
PLANIFICACION ANUAL 2024 - INICIAL UNIDOCENTE.docx
PLANIFICACION ANUAL 2024 - INICIAL UNIDOCENTE.docxPLANIFICACION ANUAL 2024 - INICIAL UNIDOCENTE.docx
PLANIFICACION ANUAL 2024 - INICIAL UNIDOCENTE.docxJUANSIMONPACHIN
 
LA OVEJITA QUE VINO A CENAR CUENTO INFANTIL.pdf
LA OVEJITA QUE VINO A CENAR CUENTO INFANTIL.pdfLA OVEJITA QUE VINO A CENAR CUENTO INFANTIL.pdf
LA OVEJITA QUE VINO A CENAR CUENTO INFANTIL.pdfNataliaMalky1
 
Presentación de Estrategias de Enseñanza-Aprendizaje Virtual.pptx
Presentación de Estrategias de Enseñanza-Aprendizaje Virtual.pptxPresentación de Estrategias de Enseñanza-Aprendizaje Virtual.pptx
Presentación de Estrategias de Enseñanza-Aprendizaje Virtual.pptxYeseniaRivera50
 
SINTAXIS DE LA ORACIÓN SIMPLE 2023-2024.pptx
SINTAXIS DE LA ORACIÓN SIMPLE 2023-2024.pptxSINTAXIS DE LA ORACIÓN SIMPLE 2023-2024.pptx
SINTAXIS DE LA ORACIÓN SIMPLE 2023-2024.pptxlclcarmen
 
Fisiologia.Articular. 3 Kapandji.6a.Ed.pdf
Fisiologia.Articular. 3 Kapandji.6a.Ed.pdfFisiologia.Articular. 3 Kapandji.6a.Ed.pdf
Fisiologia.Articular. 3 Kapandji.6a.Ed.pdfcoloncopias5
 
5° SEM29 CRONOGRAMA PLANEACIÓN DOCENTE DARUKEL 23-24.pdf
5° SEM29 CRONOGRAMA PLANEACIÓN DOCENTE DARUKEL 23-24.pdf5° SEM29 CRONOGRAMA PLANEACIÓN DOCENTE DARUKEL 23-24.pdf
5° SEM29 CRONOGRAMA PLANEACIÓN DOCENTE DARUKEL 23-24.pdfOswaldoGonzalezCruz
 
Día de la Madre Tierra-1.pdf día mundial
Día de la Madre Tierra-1.pdf día mundialDía de la Madre Tierra-1.pdf día mundial
Día de la Madre Tierra-1.pdf día mundialpatriciaines1993
 
Tarea 5_ Foro _Selección de herramientas digitales_Manuel.pdf
Tarea 5_ Foro _Selección de herramientas digitales_Manuel.pdfTarea 5_ Foro _Selección de herramientas digitales_Manuel.pdf
Tarea 5_ Foro _Selección de herramientas digitales_Manuel.pdfManuel Molina
 
TEST DE RAVEN es un test conocido para la personalidad.pdf
TEST DE RAVEN es un test conocido para la personalidad.pdfTEST DE RAVEN es un test conocido para la personalidad.pdf
TEST DE RAVEN es un test conocido para la personalidad.pdfDannyTola1
 
LINEAMIENTOS INICIO DEL AÑO LECTIVO 2024-2025.pptx
LINEAMIENTOS INICIO DEL AÑO LECTIVO 2024-2025.pptxLINEAMIENTOS INICIO DEL AÑO LECTIVO 2024-2025.pptx
LINEAMIENTOS INICIO DEL AÑO LECTIVO 2024-2025.pptxdanalikcruz2000
 
NARRACIONES SOBRE LA VIDA DEL GENERAL ELOY ALFARO
NARRACIONES SOBRE LA VIDA DEL GENERAL ELOY ALFARONARRACIONES SOBRE LA VIDA DEL GENERAL ELOY ALFARO
NARRACIONES SOBRE LA VIDA DEL GENERAL ELOY ALFAROJosé Luis Palma
 
Tarea 5-Selección de herramientas digitales-Carol Eraso.pdf
Tarea 5-Selección de herramientas digitales-Carol Eraso.pdfTarea 5-Selección de herramientas digitales-Carol Eraso.pdf
Tarea 5-Selección de herramientas digitales-Carol Eraso.pdfCarol Andrea Eraso Guerrero
 
SISTEMA INMUNE FISIOLOGIA MEDICA UNSL 2024
SISTEMA INMUNE FISIOLOGIA MEDICA UNSL 2024SISTEMA INMUNE FISIOLOGIA MEDICA UNSL 2024
SISTEMA INMUNE FISIOLOGIA MEDICA UNSL 2024gharce
 
c3.hu3.p1.p2.El ser humano y el sentido de su existencia.pptx
c3.hu3.p1.p2.El ser humano y el sentido de su existencia.pptxc3.hu3.p1.p2.El ser humano y el sentido de su existencia.pptx
c3.hu3.p1.p2.El ser humano y el sentido de su existencia.pptxMartín Ramírez
 

Recently uploaded (20)

Mapa Mental de estrategias de articulación de las areas curriculares.pdf
Mapa Mental de estrategias de articulación de las areas curriculares.pdfMapa Mental de estrategias de articulación de las areas curriculares.pdf
Mapa Mental de estrategias de articulación de las areas curriculares.pdf
 
ÉTICA, NATURALEZA Y SOCIEDADES_3RO_3ER TRIMESTRE.pdf
ÉTICA, NATURALEZA Y SOCIEDADES_3RO_3ER TRIMESTRE.pdfÉTICA, NATURALEZA Y SOCIEDADES_3RO_3ER TRIMESTRE.pdf
ÉTICA, NATURALEZA Y SOCIEDADES_3RO_3ER TRIMESTRE.pdf
 
Tema 8.- Gestion de la imagen a traves de la comunicacion de crisis.pdf
Tema 8.- Gestion de la imagen a traves de la comunicacion de crisis.pdfTema 8.- Gestion de la imagen a traves de la comunicacion de crisis.pdf
Tema 8.- Gestion de la imagen a traves de la comunicacion de crisis.pdf
 
PLANIFICACION ANUAL 2024 - INICIAL UNIDOCENTE.docx
PLANIFICACION ANUAL 2024 - INICIAL UNIDOCENTE.docxPLANIFICACION ANUAL 2024 - INICIAL UNIDOCENTE.docx
PLANIFICACION ANUAL 2024 - INICIAL UNIDOCENTE.docx
 
LA OVEJITA QUE VINO A CENAR CUENTO INFANTIL.pdf
LA OVEJITA QUE VINO A CENAR CUENTO INFANTIL.pdfLA OVEJITA QUE VINO A CENAR CUENTO INFANTIL.pdf
LA OVEJITA QUE VINO A CENAR CUENTO INFANTIL.pdf
 
Presentación de Estrategias de Enseñanza-Aprendizaje Virtual.pptx
Presentación de Estrategias de Enseñanza-Aprendizaje Virtual.pptxPresentación de Estrategias de Enseñanza-Aprendizaje Virtual.pptx
Presentación de Estrategias de Enseñanza-Aprendizaje Virtual.pptx
 
SINTAXIS DE LA ORACIÓN SIMPLE 2023-2024.pptx
SINTAXIS DE LA ORACIÓN SIMPLE 2023-2024.pptxSINTAXIS DE LA ORACIÓN SIMPLE 2023-2024.pptx
SINTAXIS DE LA ORACIÓN SIMPLE 2023-2024.pptx
 
VISITA À PROTEÇÃO CIVIL _
VISITA À PROTEÇÃO CIVIL                  _VISITA À PROTEÇÃO CIVIL                  _
VISITA À PROTEÇÃO CIVIL _
 
Fisiologia.Articular. 3 Kapandji.6a.Ed.pdf
Fisiologia.Articular. 3 Kapandji.6a.Ed.pdfFisiologia.Articular. 3 Kapandji.6a.Ed.pdf
Fisiologia.Articular. 3 Kapandji.6a.Ed.pdf
 
5° SEM29 CRONOGRAMA PLANEACIÓN DOCENTE DARUKEL 23-24.pdf
5° SEM29 CRONOGRAMA PLANEACIÓN DOCENTE DARUKEL 23-24.pdf5° SEM29 CRONOGRAMA PLANEACIÓN DOCENTE DARUKEL 23-24.pdf
5° SEM29 CRONOGRAMA PLANEACIÓN DOCENTE DARUKEL 23-24.pdf
 
Día de la Madre Tierra-1.pdf día mundial
Día de la Madre Tierra-1.pdf día mundialDía de la Madre Tierra-1.pdf día mundial
Día de la Madre Tierra-1.pdf día mundial
 
Tarea 5_ Foro _Selección de herramientas digitales_Manuel.pdf
Tarea 5_ Foro _Selección de herramientas digitales_Manuel.pdfTarea 5_ Foro _Selección de herramientas digitales_Manuel.pdf
Tarea 5_ Foro _Selección de herramientas digitales_Manuel.pdf
 
Earth Day Everyday 2024 54th anniversary
Earth Day Everyday 2024 54th anniversaryEarth Day Everyday 2024 54th anniversary
Earth Day Everyday 2024 54th anniversary
 
TEST DE RAVEN es un test conocido para la personalidad.pdf
TEST DE RAVEN es un test conocido para la personalidad.pdfTEST DE RAVEN es un test conocido para la personalidad.pdf
TEST DE RAVEN es un test conocido para la personalidad.pdf
 
TL/CNL – 2.ª FASE .
TL/CNL – 2.ª FASE                       .TL/CNL – 2.ª FASE                       .
TL/CNL – 2.ª FASE .
 
LINEAMIENTOS INICIO DEL AÑO LECTIVO 2024-2025.pptx
LINEAMIENTOS INICIO DEL AÑO LECTIVO 2024-2025.pptxLINEAMIENTOS INICIO DEL AÑO LECTIVO 2024-2025.pptx
LINEAMIENTOS INICIO DEL AÑO LECTIVO 2024-2025.pptx
 
NARRACIONES SOBRE LA VIDA DEL GENERAL ELOY ALFARO
NARRACIONES SOBRE LA VIDA DEL GENERAL ELOY ALFARONARRACIONES SOBRE LA VIDA DEL GENERAL ELOY ALFARO
NARRACIONES SOBRE LA VIDA DEL GENERAL ELOY ALFARO
 
Tarea 5-Selección de herramientas digitales-Carol Eraso.pdf
Tarea 5-Selección de herramientas digitales-Carol Eraso.pdfTarea 5-Selección de herramientas digitales-Carol Eraso.pdf
Tarea 5-Selección de herramientas digitales-Carol Eraso.pdf
 
SISTEMA INMUNE FISIOLOGIA MEDICA UNSL 2024
SISTEMA INMUNE FISIOLOGIA MEDICA UNSL 2024SISTEMA INMUNE FISIOLOGIA MEDICA UNSL 2024
SISTEMA INMUNE FISIOLOGIA MEDICA UNSL 2024
 
c3.hu3.p1.p2.El ser humano y el sentido de su existencia.pptx
c3.hu3.p1.p2.El ser humano y el sentido de su existencia.pptxc3.hu3.p1.p2.El ser humano y el sentido de su existencia.pptx
c3.hu3.p1.p2.El ser humano y el sentido de su existencia.pptx
 

Diseño web adaptable móvil beneficios técnicas