SlideShare a Scribd company logo
1 of 8
RESPONSIVE WEB
DESIGN



Eduardo Shimabuko Goya
¿Qué es?
   Crear sitios web que se adapten al entorno del
    usuario




                       Fuente: http://en.wikipedia.org/wiki/File:Boston_Globe_responsive_website.jpg
Características
   Sitio web con grilla flexible
   Ajusta de acuerdo al tamaño de la pantalla del
    dispositivo:
     Diseño (layout)
     Fuentes

     Imágenes

     Mostrar/ocultar elementos

   Uso de media queries
Media Queries
   Expresión lógica
   Extensión del atributo media types
   Contiene expresiones que verifican
    condiciones de ciertas características (ej:
    resolución de pantalla)
Ejemplos
   Sin responsive web design

http://www.alistapart.com/d/responsive-web-
  design/ex/ex-site-flexible.html

   Con responsive web design

http://www.alistapart.com/d/responsive-web-
  design/ex/ex-site-FINAL.html
Beneficios
   Reducción de costo en desarrollo
   Eficiencia en actualización
   Mejora la usabilidad
   Impacto en los visitantes




                              Fuente: http://www.ecbloguer.com/marketingdigital/?p=2635
Referencias útiles
   http://www.alistapart.com/articles/responsive-
    web-design/

   http://coding.smashingmagazine.com/2011/01/
    12/guidelines-for-responsive-web-design/

   http://sixrevisions.com/web_design/understand
    ing-the-elements-of-responsive-web-design/
Gracias

More Related Content

Viewers also liked

MODE_Sector-Brochure_Commercial_V1_LQ
MODE_Sector-Brochure_Commercial_V1_LQMODE_Sector-Brochure_Commercial_V1_LQ
MODE_Sector-Brochure_Commercial_V1_LQRhonan OBrien
 
chuyên thiết kế clip quảng cáo công ty
chuyên thiết kế clip quảng cáo công tychuyên thiết kế clip quảng cáo công ty
chuyên thiết kế clip quảng cáo công tymarkus308
 
Reflexionesparalavida (1)
Reflexionesparalavida (1)Reflexionesparalavida (1)
Reflexionesparalavida (1)Wilson Torres
 
الفصل الثالث من مانجا الرجل دو اللكمة الواحدة - one punch man
الفصل الثالث من مانجا الرجل دو اللكمة الواحدة - one punch manالفصل الثالث من مانجا الرجل دو اللكمة الواحدة - one punch man
الفصل الثالث من مانجا الرجل دو اللكمة الواحدة - one punch manSidi Mohamed
 
Delitos informaticos.ochoa.esquivel.122
Delitos informaticos.ochoa.esquivel.122Delitos informaticos.ochoa.esquivel.122
Delitos informaticos.ochoa.esquivel.122darilge7
 
Super hero comic strip
Super hero comic stripSuper hero comic strip
Super hero comic stripljohnson12
 
SampleCoverLetter
SampleCoverLetterSampleCoverLetter
SampleCoverLetterMaria Sych
 
Shiv Shankar @Resume
Shiv Shankar @ResumeShiv Shankar @Resume
Shiv Shankar @ResumeShiv shankar
 
MODE_Sector-Brochure_Health_V1_LQ
MODE_Sector-Brochure_Health_V1_LQMODE_Sector-Brochure_Health_V1_LQ
MODE_Sector-Brochure_Health_V1_LQRhonan OBrien
 
Las tics monserrat bueno
Las tics monserrat buenoLas tics monserrat bueno
Las tics monserrat buenoMONSE2016
 
bảng giá thiết kế video quảng cáo chất lượng cao
bảng giá thiết kế video quảng cáo chất lượng caobảng giá thiết kế video quảng cáo chất lượng cao
bảng giá thiết kế video quảng cáo chất lượng caokraig134
 
Being Agile and Seeing Big Picture
Being Agile and Seeing Big PictureBeing Agile and Seeing Big Picture
Being Agile and Seeing Big PictureAlex Leonov
 
Anterolateral abdominal wall (rectus sheath) & hernia
Anterolateral abdominal wall (rectus sheath) & herniaAnterolateral abdominal wall (rectus sheath) & hernia
Anterolateral abdominal wall (rectus sheath) & herniaIrma Suntoo
 
Chapter 8 Transport in Humans Lesson 3 - Structure and function of the human ...
Chapter 8 Transport in Humans Lesson 3 - Structure and function of the human ...Chapter 8 Transport in Humans Lesson 3 - Structure and function of the human ...
Chapter 8 Transport in Humans Lesson 3 - Structure and function of the human ...j3di79
 
Brief lesson plan on digestive system
Brief lesson plan on digestive systemBrief lesson plan on digestive system
Brief lesson plan on digestive systemswissmitchick
 
General relativity presentation.ragesh,asmitha,m.d.t
General relativity presentation.ragesh,asmitha,m.d.tGeneral relativity presentation.ragesh,asmitha,m.d.t
General relativity presentation.ragesh,asmitha,m.d.trageshthedon
 

Viewers also liked (18)

MODE_Sector-Brochure_Commercial_V1_LQ
MODE_Sector-Brochure_Commercial_V1_LQMODE_Sector-Brochure_Commercial_V1_LQ
MODE_Sector-Brochure_Commercial_V1_LQ
 
chuyên thiết kế clip quảng cáo công ty
chuyên thiết kế clip quảng cáo công tychuyên thiết kế clip quảng cáo công ty
chuyên thiết kế clip quảng cáo công ty
 
Reflexionesparalavida (1)
Reflexionesparalavida (1)Reflexionesparalavida (1)
Reflexionesparalavida (1)
 
الفصل الثالث من مانجا الرجل دو اللكمة الواحدة - one punch man
الفصل الثالث من مانجا الرجل دو اللكمة الواحدة - one punch manالفصل الثالث من مانجا الرجل دو اللكمة الواحدة - one punch man
الفصل الثالث من مانجا الرجل دو اللكمة الواحدة - one punch man
 
Konsburg
KonsburgKonsburg
Konsburg
 
Delitos informaticos.ochoa.esquivel.122
Delitos informaticos.ochoa.esquivel.122Delitos informaticos.ochoa.esquivel.122
Delitos informaticos.ochoa.esquivel.122
 
Super hero comic strip
Super hero comic stripSuper hero comic strip
Super hero comic strip
 
SampleCoverLetter
SampleCoverLetterSampleCoverLetter
SampleCoverLetter
 
Shiv Shankar @Resume
Shiv Shankar @ResumeShiv Shankar @Resume
Shiv Shankar @Resume
 
MODE_Sector-Brochure_Health_V1_LQ
MODE_Sector-Brochure_Health_V1_LQMODE_Sector-Brochure_Health_V1_LQ
MODE_Sector-Brochure_Health_V1_LQ
 
Las tics monserrat bueno
Las tics monserrat buenoLas tics monserrat bueno
Las tics monserrat bueno
 
bảng giá thiết kế video quảng cáo chất lượng cao
bảng giá thiết kế video quảng cáo chất lượng caobảng giá thiết kế video quảng cáo chất lượng cao
bảng giá thiết kế video quảng cáo chất lượng cao
 
Resume
ResumeResume
Resume
 
Being Agile and Seeing Big Picture
Being Agile and Seeing Big PictureBeing Agile and Seeing Big Picture
Being Agile and Seeing Big Picture
 
Anterolateral abdominal wall (rectus sheath) & hernia
Anterolateral abdominal wall (rectus sheath) & herniaAnterolateral abdominal wall (rectus sheath) & hernia
Anterolateral abdominal wall (rectus sheath) & hernia
 
Chapter 8 Transport in Humans Lesson 3 - Structure and function of the human ...
Chapter 8 Transport in Humans Lesson 3 - Structure and function of the human ...Chapter 8 Transport in Humans Lesson 3 - Structure and function of the human ...
Chapter 8 Transport in Humans Lesson 3 - Structure and function of the human ...
 
Brief lesson plan on digestive system
Brief lesson plan on digestive systemBrief lesson plan on digestive system
Brief lesson plan on digestive system
 
General relativity presentation.ragesh,asmitha,m.d.t
General relativity presentation.ragesh,asmitha,m.d.tGeneral relativity presentation.ragesh,asmitha,m.d.t
General relativity presentation.ragesh,asmitha,m.d.t
 

Similar to Responsive web design

Responsive web design
Responsive web designResponsive web design
Responsive web designG2K Hosting
 
Fundamentos del diseño web front end
Fundamentos del diseño web front endFundamentos del diseño web front end
Fundamentos del diseño web front endDavid Hurtado
 
Diseño Web: Qué necesitamos para empezar?
Diseño Web: Qué necesitamos para empezar?Diseño Web: Qué necesitamos para empezar?
Diseño Web: Qué necesitamos para empezar?Karla Arosemena
 
Curso de Responsive Web Design de BEEVA
Curso de Responsive Web Design de BEEVACurso de Responsive Web Design de BEEVA
Curso de Responsive Web Design de BEEVABEEVA_es
 
Construyendo Portales Corporativos Usando Oracle WebCemter Portal
Construyendo Portales Corporativos Usando Oracle WebCemter PortalConstruyendo Portales Corporativos Usando Oracle WebCemter Portal
Construyendo Portales Corporativos Usando Oracle WebCemter PortalRefundation
 
Introducción al Diseño Web
Introducción al Diseño WebIntroducción al Diseño Web
Introducción al Diseño WebLorena Guerrero
 
Del papel a la pantalla
Del papel a la pantallaDel papel a la pantalla
Del papel a la pantallaPaulo Saavedra
 
Conversion web
Conversion webConversion web
Conversion webDomestika
 
Diseño con códigos
Diseño con códigosDiseño con códigos
Diseño con códigosIreneF
 

Similar to Responsive web design (20)

Responsive Web Design
Responsive Web DesignResponsive Web Design
Responsive Web Design
 
Responsive web design
Responsive web designResponsive web design
Responsive web design
 
Fundamentos del diseño web front end
Fundamentos del diseño web front endFundamentos del diseño web front end
Fundamentos del diseño web front end
 
Diseño web responsivo
Diseño web responsivoDiseño web responsivo
Diseño web responsivo
 
Diseño Web: Qué necesitamos para empezar?
Diseño Web: Qué necesitamos para empezar?Diseño Web: Qué necesitamos para empezar?
Diseño Web: Qué necesitamos para empezar?
 
lobo.pptx
lobo.pptxlobo.pptx
lobo.pptx
 
Diseño y web 2
Diseño y web 2Diseño y web 2
Diseño y web 2
 
Curso de Responsive Web Design de BEEVA
Curso de Responsive Web Design de BEEVACurso de Responsive Web Design de BEEVA
Curso de Responsive Web Design de BEEVA
 
Herramientas web 2.0 Ricardo botero
Herramientas web 2.0   Ricardo boteroHerramientas web 2.0   Ricardo botero
Herramientas web 2.0 Ricardo botero
 
Construyendo Portales Corporativos Usando Oracle WebCemter Portal
Construyendo Portales Corporativos Usando Oracle WebCemter PortalConstruyendo Portales Corporativos Usando Oracle WebCemter Portal
Construyendo Portales Corporativos Usando Oracle WebCemter Portal
 
Responsive Web Design
Responsive Web DesignResponsive Web Design
Responsive Web Design
 
Introducción al Diseño Web
Introducción al Diseño WebIntroducción al Diseño Web
Introducción al Diseño Web
 
Diseño web
Diseño webDiseño web
Diseño web
 
Diseño web
Diseño webDiseño web
Diseño web
 
Del papel a la pantalla
Del papel a la pantallaDel papel a la pantalla
Del papel a la pantalla
 
Conversion Web Madrid Tecnologia 2010
Conversion Web Madrid Tecnologia 2010Conversion Web Madrid Tecnologia 2010
Conversion Web Madrid Tecnologia 2010
 
Conversion web
Conversion webConversion web
Conversion web
 
Diseño web
Diseño webDiseño web
Diseño web
 
Qué es el diseño web
Qué es el diseño webQué es el diseño web
Qué es el diseño web
 
Diseño con códigos
Diseño con códigosDiseño con códigos
Diseño con códigos
 

Recently uploaded

PRESENTACION DEL TEMA LOS MEJORES SIMULADORES DE CIRCUITOS ELCTRONICOS
PRESENTACION DEL TEMA LOS MEJORES SIMULADORES DE CIRCUITOS ELCTRONICOSPRESENTACION DEL TEMA LOS MEJORES SIMULADORES DE CIRCUITOS ELCTRONICOS
PRESENTACION DEL TEMA LOS MEJORES SIMULADORES DE CIRCUITOS ELCTRONICOSLincangoKevin
 
La tablet trabajo en grupo del grado 9-2
La tablet trabajo en grupo del grado 9-2La tablet trabajo en grupo del grado 9-2
La tablet trabajo en grupo del grado 9-2montoyagabriela340
 
Presentación - Diseño de Algoritmos Paralelos - Grupo 2.pdf
Presentación - Diseño de Algoritmos Paralelos - Grupo 2.pdfPresentación - Diseño de Algoritmos Paralelos - Grupo 2.pdf
Presentación - Diseño de Algoritmos Paralelos - Grupo 2.pdfymiranda2
 
Inteligencia artificial dentro de la contabilidad
Inteligencia artificial dentro de la contabilidadInteligencia artificial dentro de la contabilidad
Inteligencia artificial dentro de la contabilidaddanik1023m
 
El diseño de Algoritmos Paralelos.pdf - analisis de algortimos
El diseño de Algoritmos Paralelos.pdf - analisis de algortimosEl diseño de Algoritmos Paralelos.pdf - analisis de algortimos
El diseño de Algoritmos Paralelos.pdf - analisis de algortimosLCristinaForchue
 
Los mejores simuladores de circuitos electrónicos.pdf
Los mejores simuladores de circuitos electrónicos.pdfLos mejores simuladores de circuitos electrónicos.pdf
Los mejores simuladores de circuitos electrónicos.pdfodalistar77
 
Actividad 14_ Diseño de Algoritmos Paralelos.pdf
Actividad 14_ Diseño de Algoritmos Paralelos.pdfActividad 14_ Diseño de Algoritmos Paralelos.pdf
Actividad 14_ Diseño de Algoritmos Paralelos.pdfalejandrogomezescoto
 
La Electricidad y La Electrónica.pdf....
La Electricidad y La Electrónica.pdf....La Electricidad y La Electrónica.pdf....
La Electricidad y La Electrónica.pdf....Aaron Betancourt
 
VIDEOS DE APOYO.docx E
VIDEOS DE APOYO.docx                                  EVIDEOS DE APOYO.docx                                  E
VIDEOS DE APOYO.docx Emialexsolar
 
Análisis de artefactos tecnologicos .pdf
Análisis de artefactos tecnologicos .pdfAnálisis de artefactos tecnologicos .pdf
Análisis de artefactos tecnologicos .pdfcastrodanna185
 
Carta de Premio y Excel angeline 11-2pdf
Carta de Premio y Excel angeline 11-2pdfCarta de Premio y Excel angeline 11-2pdf
Carta de Premio y Excel angeline 11-2pdfangelinebocanegra1
 
Actividad 14: Diseño de Algoritmos Paralelos Actividad 14: Diseño de Algoritm...
Actividad 14: Diseño de Algoritmos Paralelos Actividad 14: Diseño de Algoritm...Actividad 14: Diseño de Algoritmos Paralelos Actividad 14: Diseño de Algoritm...
Actividad 14: Diseño de Algoritmos Paralelos Actividad 14: Diseño de Algoritm...RaymondCode
 
Matriz de integración de tecnologías- Paola Carvajal.docx
Matriz de integración de tecnologías- Paola Carvajal.docxMatriz de integración de tecnologías- Paola Carvajal.docx
Matriz de integración de tecnologías- Paola Carvajal.docxPaolaCarolinaCarvaja
 
De Código a Ejecución: El Papel Fundamental del MSIL en .NET
De Código a Ejecución: El Papel Fundamental del MSIL en .NETDe Código a Ejecución: El Papel Fundamental del MSIL en .NET
De Código a Ejecución: El Papel Fundamental del MSIL en .NETGermán Küber
 
TENDENCIAS DE IA Explorando el futuro de la tecnologia.pdf
TENDENCIAS DE IA Explorando el futuro de la tecnologia.pdfTENDENCIAS DE IA Explorando el futuro de la tecnologia.pdf
TENDENCIAS DE IA Explorando el futuro de la tecnologia.pdfJoseAlejandroPerezBa
 
Tecnológia 2024.docx.Tecnológia 2024.docx.
Tecnológia 2024.docx.Tecnológia 2024.docx.Tecnológia 2024.docx.Tecnológia 2024.docx.
Tecnológia 2024.docx.Tecnológia 2024.docx.marianarodriguezc797
 
Actividad 1-PRESENTACIÓN ANIMADA.pptxPreservación y conservación de los docum...
Actividad 1-PRESENTACIÓN ANIMADA.pptxPreservación y conservación de los docum...Actividad 1-PRESENTACIÓN ANIMADA.pptxPreservación y conservación de los docum...
Actividad 1-PRESENTACIÓN ANIMADA.pptxPreservación y conservación de los docum...OLGAMILENAMONTAEZNIO
 
Inmersión global en ciberseguridad e IA en la conferencia RSA.pdf
Inmersión global en ciberseguridad e IA en la conferencia RSA.pdfInmersión global en ciberseguridad e IA en la conferencia RSA.pdf
Inmersión global en ciberseguridad e IA en la conferencia RSA.pdfOBr.global
 

Recently uploaded (20)

PRESENTACION DEL TEMA LOS MEJORES SIMULADORES DE CIRCUITOS ELCTRONICOS
PRESENTACION DEL TEMA LOS MEJORES SIMULADORES DE CIRCUITOS ELCTRONICOSPRESENTACION DEL TEMA LOS MEJORES SIMULADORES DE CIRCUITOS ELCTRONICOS
PRESENTACION DEL TEMA LOS MEJORES SIMULADORES DE CIRCUITOS ELCTRONICOS
 
La tablet trabajo en grupo del grado 9-2
La tablet trabajo en grupo del grado 9-2La tablet trabajo en grupo del grado 9-2
La tablet trabajo en grupo del grado 9-2
 
Presentación - Diseño de Algoritmos Paralelos - Grupo 2.pdf
Presentación - Diseño de Algoritmos Paralelos - Grupo 2.pdfPresentación - Diseño de Algoritmos Paralelos - Grupo 2.pdf
Presentación - Diseño de Algoritmos Paralelos - Grupo 2.pdf
 
Inteligencia artificial dentro de la contabilidad
Inteligencia artificial dentro de la contabilidadInteligencia artificial dentro de la contabilidad
Inteligencia artificial dentro de la contabilidad
 
El diseño de Algoritmos Paralelos.pdf - analisis de algortimos
El diseño de Algoritmos Paralelos.pdf - analisis de algortimosEl diseño de Algoritmos Paralelos.pdf - analisis de algortimos
El diseño de Algoritmos Paralelos.pdf - analisis de algortimos
 
Los mejores simuladores de circuitos electrónicos.pdf
Los mejores simuladores de circuitos electrónicos.pdfLos mejores simuladores de circuitos electrónicos.pdf
Los mejores simuladores de circuitos electrónicos.pdf
 
Actividad 14_ Diseño de Algoritmos Paralelos.pdf
Actividad 14_ Diseño de Algoritmos Paralelos.pdfActividad 14_ Diseño de Algoritmos Paralelos.pdf
Actividad 14_ Diseño de Algoritmos Paralelos.pdf
 
La Electricidad y La Electrónica.pdf....
La Electricidad y La Electrónica.pdf....La Electricidad y La Electrónica.pdf....
La Electricidad y La Electrónica.pdf....
 
BEDEC Proyecto y obra , novedades 2024 - Xavier Folch
BEDEC Proyecto y obra , novedades 2024 - Xavier FolchBEDEC Proyecto y obra , novedades 2024 - Xavier Folch
BEDEC Proyecto y obra , novedades 2024 - Xavier Folch
 
VIDEOS DE APOYO.docx E
VIDEOS DE APOYO.docx                                  EVIDEOS DE APOYO.docx                                  E
VIDEOS DE APOYO.docx E
 
Análisis de artefactos tecnologicos .pdf
Análisis de artefactos tecnologicos .pdfAnálisis de artefactos tecnologicos .pdf
Análisis de artefactos tecnologicos .pdf
 
Carta de Premio y Excel angeline 11-2pdf
Carta de Premio y Excel angeline 11-2pdfCarta de Premio y Excel angeline 11-2pdf
Carta de Premio y Excel angeline 11-2pdf
 
Actividad 14: Diseño de Algoritmos Paralelos Actividad 14: Diseño de Algoritm...
Actividad 14: Diseño de Algoritmos Paralelos Actividad 14: Diseño de Algoritm...Actividad 14: Diseño de Algoritmos Paralelos Actividad 14: Diseño de Algoritm...
Actividad 14: Diseño de Algoritmos Paralelos Actividad 14: Diseño de Algoritm...
 
Matriz de integración de tecnologías- Paola Carvajal.docx
Matriz de integración de tecnologías- Paola Carvajal.docxMatriz de integración de tecnologías- Paola Carvajal.docx
Matriz de integración de tecnologías- Paola Carvajal.docx
 
De Código a Ejecución: El Papel Fundamental del MSIL en .NET
De Código a Ejecución: El Papel Fundamental del MSIL en .NETDe Código a Ejecución: El Papel Fundamental del MSIL en .NET
De Código a Ejecución: El Papel Fundamental del MSIL en .NET
 
TENDENCIAS DE IA Explorando el futuro de la tecnologia.pdf
TENDENCIAS DE IA Explorando el futuro de la tecnologia.pdfTENDENCIAS DE IA Explorando el futuro de la tecnologia.pdf
TENDENCIAS DE IA Explorando el futuro de la tecnologia.pdf
 
Tecnológia 2024.docx.Tecnológia 2024.docx.
Tecnológia 2024.docx.Tecnológia 2024.docx.Tecnológia 2024.docx.Tecnológia 2024.docx.
Tecnológia 2024.docx.Tecnológia 2024.docx.
 
BEDEC Sostenibilidad, novedades 2024 - Laura Silva
BEDEC Sostenibilidad, novedades 2024 - Laura SilvaBEDEC Sostenibilidad, novedades 2024 - Laura Silva
BEDEC Sostenibilidad, novedades 2024 - Laura Silva
 
Actividad 1-PRESENTACIÓN ANIMADA.pptxPreservación y conservación de los docum...
Actividad 1-PRESENTACIÓN ANIMADA.pptxPreservación y conservación de los docum...Actividad 1-PRESENTACIÓN ANIMADA.pptxPreservación y conservación de los docum...
Actividad 1-PRESENTACIÓN ANIMADA.pptxPreservación y conservación de los docum...
 
Inmersión global en ciberseguridad e IA en la conferencia RSA.pdf
Inmersión global en ciberseguridad e IA en la conferencia RSA.pdfInmersión global en ciberseguridad e IA en la conferencia RSA.pdf
Inmersión global en ciberseguridad e IA en la conferencia RSA.pdf
 

Responsive web design

  • 2. ¿Qué es?  Crear sitios web que se adapten al entorno del usuario Fuente: http://en.wikipedia.org/wiki/File:Boston_Globe_responsive_website.jpg
  • 3. Características  Sitio web con grilla flexible  Ajusta de acuerdo al tamaño de la pantalla del dispositivo:  Diseño (layout)  Fuentes  Imágenes  Mostrar/ocultar elementos  Uso de media queries
  • 4. Media Queries  Expresión lógica  Extensión del atributo media types  Contiene expresiones que verifican condiciones de ciertas características (ej: resolución de pantalla)
  • 5. Ejemplos  Sin responsive web design http://www.alistapart.com/d/responsive-web- design/ex/ex-site-flexible.html  Con responsive web design http://www.alistapart.com/d/responsive-web- design/ex/ex-site-FINAL.html
  • 6. Beneficios  Reducción de costo en desarrollo  Eficiencia en actualización  Mejora la usabilidad  Impacto en los visitantes Fuente: http://www.ecbloguer.com/marketingdigital/?p=2635
  • 7. Referencias útiles  http://www.alistapart.com/articles/responsive- web-design/  http://coding.smashingmagazine.com/2011/01/ 12/guidelines-for-responsive-web-design/  http://sixrevisions.com/web_design/understand ing-the-elements-of-responsive-web-design/