SlideShare una empresa de Scribd logo
1 de 7
¿QUÉ ES EL DISEÑO RESPONSIVO?
Diseño web Responsivo (RWD) es un enfoque de desarrollo web que
crea cambios dinámicos a la aparición de un sitio web, dependiendo del
tamaño y la orientación del dispositivo que se utiliza para poder verla.
RWD es la solución de diseñar para la multitud de dispositivos
disponibles actualmente, que van desde diminutos teléfonos a los
monitores de escritorio enormes .
RWD utiliza los llamados puntos de corte para determinar cómo
aparecerá el diseño de un sitio:
Uno diseño se utiliza por encima de un punto de ruptura y otro de diseño
se aplica por debajo de ese punto de ruptura. Los puntos de corte se
basan comúnmente en la anchura del navegador.
Este breve video muestra el Transporte de respuesta para el sitio web de
Londres cambiando a medida que la ventana del navegador se estrecha
y se amplia.
La misma HTML sirve a todos los dispositivos, utilizando CSS (que
determina el diseño de la página web) para cambiar la apariencia de la
página. En lugar de crear un sitio separado y una base de código
correspondiente para monitores de pantalla ancha, computadoras de
escritorio, computadoras portátiles, tabletas y teléfonos de todos los
tamaños, una única base de código puede ayudar a los usuarios con
ventanas de diferentes tamaños.
En el diseño de responsivo los elementos de la página ejm. como la
ventana, crece o se reduce. Un diseño de escritorio de tres columnas de
podrá reorganizar a dos columnas para una tableta y una sola columna
para un teléfono inteligente. El diseño responsivo se basa en proporción
a reorganizar contenido y elementos de diseño.
Si bien el diseño responsivo surgió como una forma de ofrecer igualdad
de acceso a la información sin importar el dispositivo, también es posible
ocultar ciertos elementos – tales como imágenes de fondo, como en el
transporte, por ejemplo, por encima de Londres, la página secundaria o
complementaria de navegación – en las pantallas más pequeñas. Las
decisiones sobre el contenido y la funcionalidad ocultar o alterar la
apariencia de diferentes tipos de dispositivos, debe estar basada en el
conocimiento acerca de sus usuarios y necesidades.
RWD tiene ventajas potenciales sobre el desarrollo de sitios para los
diferentes tipos de dispositivos. El uso de un solo código base puede
hacer el desarrollo más rápido, en comparación con el desarrollo de 3 o 4
sitios distintos, y facilita el mantenimiento,RWD es a prueba del futuro, ya
que puede soportar nuevos puntos de corte en cualquier momento. Si un
dispositivo de 5 pulgadas o un dispositivo de 15 pulgadas sale al
mercado, el código se puede agregar a los nuevos dispositivos. RWD no
ata el diseño a un dispositivo en particular.
CREACIÓN DE EXPERIENCIAS UTILIZABLES
Debido a que el diseño responsivo se basa en encajar elementos
alrededor de la página, que el diseño y el desarrollo que tenga trabajen
en estrecha colaboración para asegurar una experiencia utilizable a
través de dispositivos.El diseño responsivo a menudo se convierte en la
solución a un rompecabezas – cómo reorganizar los elementos en las
páginas de mayor tamaño para adaptarse a uno más angosto, las
páginas más alargadas o viceversa. Sin embargo, lo que garantiza que
los elementos encajen dentro de una página no es suficiente. Para un
diseño responsivo exitoso, el diseño también debe ser utilizable en todas
las resoluciones de pantallas y tamaños.
Cuando los elementos se mueven alrededor de la página, la experiencia
del usuario puede ser completamente diferente de una vista de la página
a la siguiente. Lo importante de que los equipos de diseño y desarrollo
trabajen juntos no es determinar hasta qué punto el contenido debe estar
arrastrando los pies alrededor, sino ver también lo que el resultado final
de ese cambio se parece y cómo afecta a la experiencia del usuario.
Muchos equipos buscan framewoks sensibles al diseño responsivo,
como Bootstrap para ayudar a crear diseños. Estos marcos pueden ser
de gran ayuda en el desarrollo del movimiento a lo largo. Sin embargo,
considere cuidadosamente cómo el framework trabajará con el contenido
y la funcionalidad de su sitio, en lugar de cómo funciona en general.
Nosotros siempre recomendamos la realización de las pruebas de
utilidad en los diseños. Para los diseños sensibles, se recomienda la
prueba en todas las plataformas. Ya es bastante difícil de diseñar un sitio
web que se puede utilizar en un escritorio, pero es aún más difícil de
diseñar un sitio web que se puede utilizar en muchos reordenamientos o
configuraciones de sus elementos, a través de diversos tamaños de
pantalla y orientaciones. El mismo elemento de diseño que puede
funcionar a las mil maravillas en un escritorio puede trabajar
horriblemente en un teléfono inteligente, o viceversa.
CENTRÁNDOSE EN EL CONTENIDO
Priorización de contenido es un aspecto clave para hacer bien el diseño
responsivo. Mucho más contenido es visible sin necesidad de
desplazarse en un monitor de escritorio grande que en una pequeña
pantalla del teléfono inteligente. Si los usuarios no ven al instante lo que
quieren en un monitor de escritorio, se puede echar un vistazo fácilmente
alrededor de la página para descubrirlo. En un teléfono inteligente, los
usuarios pueden tener que desplazarse sin cesar para descubrir el
contenido de interés. El priorizar inteligentemente el contenido ayuda a
los usuarios a encontrar lo que necesitan de manera más eficiente.
RENDIMIENTO CONSIDERADO
[mpc_sh_side_image align=»left» hor_offset=»0″ ver_offset=»0″
image=»http://asd.mx/2015/wp-
content/uploads/2014/10/responsive300x400.gif»] Rendimiento también
puede ser un problema con el diseño responsivo. RWD ofrece el mismo
código para todos los dispositivos, independientemente de si la pieza de
código se aplica al diseño o no. Los cambios en el diseño se producen en
el lado del cliente, es decir, cada dispositivo – el teléfono, tablet o
computadora – recibe el código completo para todos los dispositivos y
toma lo que necesita.
Un teléfono inteligente de 4 pulgadas recibe el mismo código como un
monitor de escritorio de 24 pulgadas. Esto puede empantanar el
rendimiento en un teléfono inteligente, lo que puede ser un partido
basado en una conexión de datos más lento. (Esto es por qué algunos
sitios recurren a diseño adaptativo, en el que el servidor que aloja la
página web detecta el dispositivo que hace la solicitud y entrega
diferentes lotes de código HTML basadas en ese dispositivo.)
Para evaluar verdaderamente la experiencia del usuario de un diseño
responsivo, la prueba es que sus diseños no responden sólo en la
comodidad de su propia oficina, en su conexión de alta velocidad, debe
también aventurarse con su smartphone- entre edificios altos en una
ciudad, en salas de conferencias interiores o sótanos, en áreas remotas
con conectividad irregular, en puntos problemáticos conocidos para la
conexión a la red de su propio teléfono celular – y ver cómo su sitio se
presenta en condiciones variadas. El objetivo de muchos diseños
responsivos es dar facilidades equivalentes de acceso a la información
sin importar el dispositivo. Un usuario de smartphone no tiene una
experiencia equivalente a un usuario de escritorio si los tiempos de
descarga son intolerables.
CONCLUSIÓN
Diseño responsivo es una herramienta, no una panacea. El diseño
responsivo tiene muchas ventajas en todos los dispositivos. Los equipos
deben centrarse en los detalles del contenido, diseño, y el rendimiento
con el fin de apoyar a los usuarios en todos los dispositivos.
Para más información sobre el diseño de diferentes dispositivos, consulte
nuestra página web www.asd.m
https://www.silocreativo.com/diseno-banner-web-responsive-html-css/
https://www.silocreativo.com/mejores-frameworks-css/
https://www.silocreativo.com/imagenes-en-diseno-web-responsive-con-css/
https://www.silocreativo.com/imagenes-en-diseno-web-responsive-con-css/
https://www.silocreativo.com/plantillas-wordpress-blogs-con-diseno-responsive/
https://codepen.io/ricardpriet/full/DKjOLW
https://www.silocreativo.com/imagenes-en-diseno-web-responsive-con-css/
https://www.silocreativo.com/diseno-web-responsive-y-accesible-con-temas-wordpress/
https://blog.ida.cl/diseno/como-disenar-elementos-que-se-adapten-al-contenido-y-entregables-
de-mayor-calidad/
TendenciaendiseñoWeb:InspiraciónparaunaCabeceraCreativa• SiloCreativo
5 ConsejosparaDiseñartuWeb conbuenaUX • SiloCreativo
CSS4: La nuevaversiónde CSSque nunca
exihttps://www.silocreativo.com/author/ricardpriet/stirá•SiloCreativo

Más contenido relacionado

La actualidad más candente

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
 
Diseño de Interfaces Graficas de Usuarios
Diseño de Interfaces Graficas de UsuariosDiseño de Interfaces Graficas de Usuarios
Diseño de Interfaces Graficas de UsuariosJoaquin Paronzini
 
Introducción Responsive design
Introducción Responsive designIntroducción Responsive design
Introducción Responsive designEduard Zora
 
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
 

La actualidad más candente (7)

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 de Interfaces Graficas de Usuarios
Diseño de Interfaces Graficas de UsuariosDiseño de Interfaces Graficas de Usuarios
Diseño de Interfaces Graficas de Usuarios
 
Usabilidad
UsabilidadUsabilidad
Usabilidad
 
Introducción Responsive design
Introducción Responsive designIntroducción Responsive design
Introducción Responsive design
 
Presentaciones en linea
Presentaciones en lineaPresentaciones en linea
Presentaciones en linea
 
Diseño Web Adaptativo
Diseño Web AdaptativoDiseño Web Adaptativo
Diseño Web Adaptativo
 
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
 

Similar a QUÉ ES EL DISEÑO RESPONSIVO.docx

Responsive web design
Responsive web designResponsive web design
Responsive web designG2K Hosting
 
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
 
Articulo (Responsive Web Desing)
Articulo (Responsive Web Desing)Articulo (Responsive Web Desing)
Articulo (Responsive Web Desing)Giovanni Quagliano
 
Qué es el diseño web responsivo
Qué es el diseño web responsivoQué es el diseño web responsivo
Qué es el diseño web responsivoZerozeroestudio
 
PATRONES DE DISEÑO WEB
PATRONES DE DISEÑO WEBPATRONES DE DISEÑO WEB
PATRONES DE DISEÑO WEBMario Martinez
 
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
 
Diseño adaptativo y responsive
Diseño adaptativo y responsiveDiseño adaptativo y responsive
Diseño adaptativo y responsiveRenny Batista
 
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
 
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
 
Las 5 Reglas de Oro del Diseño Web Responsive
Las 5 Reglas de Oro del Diseño Web ResponsiveLas 5 Reglas de Oro del Diseño Web Responsive
Las 5 Reglas de Oro del Diseño Web ResponsiveAntonRoMX
 
Diseño e instalación de sitios web (El reto del espacio en pantalla / plantil...
Diseño e instalación de sitios web (El reto del espacio en pantalla / plantil...Diseño e instalación de sitios web (El reto del espacio en pantalla / plantil...
Diseño e instalación de sitios web (El reto del espacio en pantalla / plantil...KareliaRivas
 

Similar a QUÉ ES EL DISEÑO RESPONSIVO.docx (20)

Responsive web design
Responsive web designResponsive web design
Responsive web design
 
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
 
Articulo (Responsive Web Desing)
Articulo (Responsive Web Desing)Articulo (Responsive Web Desing)
Articulo (Responsive Web Desing)
 
ing.software
ing.softwareing.software
ing.software
 
Qué es el diseño web responsivo
Qué es el diseño web responsivoQué es el diseño web responsivo
Qué es el diseño web responsivo
 
PATRONES DE DISEÑO WEB
PATRONES DE DISEÑO WEBPATRONES DE DISEÑO WEB
PATRONES DE DISEÑO WEB
 
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
 
Mapas de navegación
Mapas de navegaciónMapas de navegación
Mapas de navegación
 
Diseño web responsivo
Diseño web responsivoDiseño web responsivo
Diseño web responsivo
 
Presentación Multimedia - Responsive vs Adaptive
Presentación Multimedia - Responsive vs AdaptivePresentación Multimedia - Responsive vs Adaptive
Presentación Multimedia - Responsive vs Adaptive
 
Diseño adaptativo y responsive
Diseño adaptativo y responsiveDiseño adaptativo y responsive
Diseño adaptativo y responsive
 
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
 
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
 
Que es un diseño web
Que es un diseño webQue es un diseño web
Que es un diseño web
 
Las 5 Reglas de Oro del Diseño Web Responsive
Las 5 Reglas de Oro del Diseño Web ResponsiveLas 5 Reglas de Oro del Diseño Web Responsive
Las 5 Reglas de Oro del Diseño Web Responsive
 
Diseño web
Diseño webDiseño web
Diseño web
 
Diseño web
Diseño webDiseño web
Diseño web
 
Diseño e instalación de sitios web (El reto del espacio en pantalla / plantil...
Diseño e instalación de sitios web (El reto del espacio en pantalla / plantil...Diseño e instalación de sitios web (El reto del espacio en pantalla / plantil...
Diseño e instalación de sitios web (El reto del espacio en pantalla / plantil...
 
Responsive Web Design
Responsive Web DesignResponsive Web Design
Responsive Web Design
 

Último

GRUPO 5 Software en el campo de la salud.pptx
GRUPO 5 Software en el campo de la salud.pptxGRUPO 5 Software en el campo de la salud.pptx
GRUPO 5 Software en el campo de la salud.pptxNicolas Villarroel
 
FLUIDEZ-Teatro-Leido-4to-Grado-El-leon-y-el-raton- (1).pdf
FLUIDEZ-Teatro-Leido-4to-Grado-El-leon-y-el-raton- (1).pdfFLUIDEZ-Teatro-Leido-4to-Grado-El-leon-y-el-raton- (1).pdf
FLUIDEZ-Teatro-Leido-4to-Grado-El-leon-y-el-raton- (1).pdfYuriFuentesMartinez2
 
11º Anuncio Nominados Finalistas Premios #LatamDigital 2024 by Interlat Vers...
11º Anuncio Nominados Finalistas Premios #LatamDigital 2024 by Interlat  Vers...11º Anuncio Nominados Finalistas Premios #LatamDigital 2024 by Interlat  Vers...
11º Anuncio Nominados Finalistas Premios #LatamDigital 2024 by Interlat Vers...#LatamDigital
 
que es Planimetría definición importancia en topografia.pptx
que es Planimetría definición importancia en topografia.pptxque es Planimetría definición importancia en topografia.pptx
que es Planimetría definición importancia en topografia.pptxmrzreyes12
 
Practica guiada Menu_ tecnología (Tic's)
Practica guiada Menu_ tecnología (Tic's)Practica guiada Menu_ tecnología (Tic's)
Practica guiada Menu_ tecnología (Tic's)BrianaFrancisco
 
Fisica General.pdf ESCUELA D QUIMICA E INGENIERIA
Fisica General.pdf ESCUELA D QUIMICA E INGENIERIAFisica General.pdf ESCUELA D QUIMICA E INGENIERIA
Fisica General.pdf ESCUELA D QUIMICA E INGENIERIAcoloncopias5
 
2º SOY LECTOR PART 2- MD EDUCATIVO (6).pdf
2º SOY LECTOR PART 2- MD  EDUCATIVO (6).pdf2º SOY LECTOR PART 2- MD  EDUCATIVO (6).pdf
2º SOY LECTOR PART 2- MD EDUCATIVO (6).pdfFernandaHernandez312615
 
CamposGarcia_MariaMagdalena_M1S3AI6.pptx
CamposGarcia_MariaMagdalena_M1S3AI6.pptxCamposGarcia_MariaMagdalena_M1S3AI6.pptx
CamposGarcia_MariaMagdalena_M1S3AI6.pptx241518192
 
GRUPO 10 SOFTWARE DE EL CAMPO DE LA SAULD
GRUPO 10 SOFTWARE DE EL CAMPO DE LA SAULDGRUPO 10 SOFTWARE DE EL CAMPO DE LA SAULD
GRUPO 10 SOFTWARE DE EL CAMPO DE LA SAULDLeslie Villar
 
Tema 1 - Fundamentos de gestión contable.pptx
Tema 1 - Fundamentos de gestión contable.pptxTema 1 - Fundamentos de gestión contable.pptx
Tema 1 - Fundamentos de gestión contable.pptxchinojosa17
 
rodriguez_DelAngel_MariaGPE_M1S3AL6.pptx
rodriguez_DelAngel_MariaGPE_M1S3AL6.pptxrodriguez_DelAngel_MariaGPE_M1S3AL6.pptx
rodriguez_DelAngel_MariaGPE_M1S3AL6.pptxssuser61dda7
 
El uso de las tic en la vida continúa , ambiente positivo y negativo.
El uso de las tic  en la vida continúa , ambiente positivo y negativo.El uso de las tic  en la vida continúa , ambiente positivo y negativo.
El uso de las tic en la vida continúa , ambiente positivo y negativo.ayalayenifer617
 
ChatGPT Inteligencia artificial, funciones, limitaciones y ventajas.
ChatGPT Inteligencia artificial, funciones, limitaciones y ventajas.ChatGPT Inteligencia artificial, funciones, limitaciones y ventajas.
ChatGPT Inteligencia artificial, funciones, limitaciones y ventajas.Aldo Fernandez
 
Software y servicios de internet mapa conceptual.pdf
Software y servicios de internet mapa conceptual.pdfSoftware y servicios de internet mapa conceptual.pdf
Software y servicios de internet mapa conceptual.pdfDanielaEspitiaHerrer
 

Último (14)

GRUPO 5 Software en el campo de la salud.pptx
GRUPO 5 Software en el campo de la salud.pptxGRUPO 5 Software en el campo de la salud.pptx
GRUPO 5 Software en el campo de la salud.pptx
 
FLUIDEZ-Teatro-Leido-4to-Grado-El-leon-y-el-raton- (1).pdf
FLUIDEZ-Teatro-Leido-4to-Grado-El-leon-y-el-raton- (1).pdfFLUIDEZ-Teatro-Leido-4to-Grado-El-leon-y-el-raton- (1).pdf
FLUIDEZ-Teatro-Leido-4to-Grado-El-leon-y-el-raton- (1).pdf
 
11º Anuncio Nominados Finalistas Premios #LatamDigital 2024 by Interlat Vers...
11º Anuncio Nominados Finalistas Premios #LatamDigital 2024 by Interlat  Vers...11º Anuncio Nominados Finalistas Premios #LatamDigital 2024 by Interlat  Vers...
11º Anuncio Nominados Finalistas Premios #LatamDigital 2024 by Interlat Vers...
 
que es Planimetría definición importancia en topografia.pptx
que es Planimetría definición importancia en topografia.pptxque es Planimetría definición importancia en topografia.pptx
que es Planimetría definición importancia en topografia.pptx
 
Practica guiada Menu_ tecnología (Tic's)
Practica guiada Menu_ tecnología (Tic's)Practica guiada Menu_ tecnología (Tic's)
Practica guiada Menu_ tecnología (Tic's)
 
Fisica General.pdf ESCUELA D QUIMICA E INGENIERIA
Fisica General.pdf ESCUELA D QUIMICA E INGENIERIAFisica General.pdf ESCUELA D QUIMICA E INGENIERIA
Fisica General.pdf ESCUELA D QUIMICA E INGENIERIA
 
2º SOY LECTOR PART 2- MD EDUCATIVO (6).pdf
2º SOY LECTOR PART 2- MD  EDUCATIVO (6).pdf2º SOY LECTOR PART 2- MD  EDUCATIVO (6).pdf
2º SOY LECTOR PART 2- MD EDUCATIVO (6).pdf
 
CamposGarcia_MariaMagdalena_M1S3AI6.pptx
CamposGarcia_MariaMagdalena_M1S3AI6.pptxCamposGarcia_MariaMagdalena_M1S3AI6.pptx
CamposGarcia_MariaMagdalena_M1S3AI6.pptx
 
GRUPO 10 SOFTWARE DE EL CAMPO DE LA SAULD
GRUPO 10 SOFTWARE DE EL CAMPO DE LA SAULDGRUPO 10 SOFTWARE DE EL CAMPO DE LA SAULD
GRUPO 10 SOFTWARE DE EL CAMPO DE LA SAULD
 
Tema 1 - Fundamentos de gestión contable.pptx
Tema 1 - Fundamentos de gestión contable.pptxTema 1 - Fundamentos de gestión contable.pptx
Tema 1 - Fundamentos de gestión contable.pptx
 
rodriguez_DelAngel_MariaGPE_M1S3AL6.pptx
rodriguez_DelAngel_MariaGPE_M1S3AL6.pptxrodriguez_DelAngel_MariaGPE_M1S3AL6.pptx
rodriguez_DelAngel_MariaGPE_M1S3AL6.pptx
 
El uso de las tic en la vida continúa , ambiente positivo y negativo.
El uso de las tic  en la vida continúa , ambiente positivo y negativo.El uso de las tic  en la vida continúa , ambiente positivo y negativo.
El uso de las tic en la vida continúa , ambiente positivo y negativo.
 
ChatGPT Inteligencia artificial, funciones, limitaciones y ventajas.
ChatGPT Inteligencia artificial, funciones, limitaciones y ventajas.ChatGPT Inteligencia artificial, funciones, limitaciones y ventajas.
ChatGPT Inteligencia artificial, funciones, limitaciones y ventajas.
 
Software y servicios de internet mapa conceptual.pdf
Software y servicios de internet mapa conceptual.pdfSoftware y servicios de internet mapa conceptual.pdf
Software y servicios de internet mapa conceptual.pdf
 

QUÉ ES EL DISEÑO RESPONSIVO.docx

  • 1. ¿QUÉ ES EL DISEÑO RESPONSIVO? Diseño web Responsivo (RWD) es un enfoque de desarrollo web que crea cambios dinámicos a la aparición de un sitio web, dependiendo del tamaño y la orientación del dispositivo que se utiliza para poder verla. RWD es la solución de diseñar para la multitud de dispositivos disponibles actualmente, que van desde diminutos teléfonos a los monitores de escritorio enormes . RWD utiliza los llamados puntos de corte para determinar cómo aparecerá el diseño de un sitio: Uno diseño se utiliza por encima de un punto de ruptura y otro de diseño se aplica por debajo de ese punto de ruptura. Los puntos de corte se basan comúnmente en la anchura del navegador.
  • 2. Este breve video muestra el Transporte de respuesta para el sitio web de Londres cambiando a medida que la ventana del navegador se estrecha y se amplia. La misma HTML sirve a todos los dispositivos, utilizando CSS (que determina el diseño de la página web) para cambiar la apariencia de la página. En lugar de crear un sitio separado y una base de código correspondiente para monitores de pantalla ancha, computadoras de escritorio, computadoras portátiles, tabletas y teléfonos de todos los tamaños, una única base de código puede ayudar a los usuarios con ventanas de diferentes tamaños. En el diseño de responsivo los elementos de la página ejm. como la ventana, crece o se reduce. Un diseño de escritorio de tres columnas de podrá reorganizar a dos columnas para una tableta y una sola columna para un teléfono inteligente. El diseño responsivo se basa en proporción a reorganizar contenido y elementos de diseño.
  • 3. Si bien el diseño responsivo surgió como una forma de ofrecer igualdad de acceso a la información sin importar el dispositivo, también es posible ocultar ciertos elementos – tales como imágenes de fondo, como en el transporte, por ejemplo, por encima de Londres, la página secundaria o complementaria de navegación – en las pantallas más pequeñas. Las decisiones sobre el contenido y la funcionalidad ocultar o alterar la apariencia de diferentes tipos de dispositivos, debe estar basada en el conocimiento acerca de sus usuarios y necesidades. RWD tiene ventajas potenciales sobre el desarrollo de sitios para los diferentes tipos de dispositivos. El uso de un solo código base puede hacer el desarrollo más rápido, en comparación con el desarrollo de 3 o 4 sitios distintos, y facilita el mantenimiento,RWD es a prueba del futuro, ya que puede soportar nuevos puntos de corte en cualquier momento. Si un dispositivo de 5 pulgadas o un dispositivo de 15 pulgadas sale al mercado, el código se puede agregar a los nuevos dispositivos. RWD no ata el diseño a un dispositivo en particular. CREACIÓN DE EXPERIENCIAS UTILIZABLES Debido a que el diseño responsivo se basa en encajar elementos alrededor de la página, que el diseño y el desarrollo que tenga trabajen en estrecha colaboración para asegurar una experiencia utilizable a través de dispositivos.El diseño responsivo a menudo se convierte en la solución a un rompecabezas – cómo reorganizar los elementos en las páginas de mayor tamaño para adaptarse a uno más angosto, las páginas más alargadas o viceversa. Sin embargo, lo que garantiza que los elementos encajen dentro de una página no es suficiente. Para un diseño responsivo exitoso, el diseño también debe ser utilizable en todas las resoluciones de pantallas y tamaños. Cuando los elementos se mueven alrededor de la página, la experiencia del usuario puede ser completamente diferente de una vista de la página a la siguiente. Lo importante de que los equipos de diseño y desarrollo trabajen juntos no es determinar hasta qué punto el contenido debe estar
  • 4. arrastrando los pies alrededor, sino ver también lo que el resultado final de ese cambio se parece y cómo afecta a la experiencia del usuario. Muchos equipos buscan framewoks sensibles al diseño responsivo, como Bootstrap para ayudar a crear diseños. Estos marcos pueden ser de gran ayuda en el desarrollo del movimiento a lo largo. Sin embargo, considere cuidadosamente cómo el framework trabajará con el contenido y la funcionalidad de su sitio, en lugar de cómo funciona en general. Nosotros siempre recomendamos la realización de las pruebas de utilidad en los diseños. Para los diseños sensibles, se recomienda la prueba en todas las plataformas. Ya es bastante difícil de diseñar un sitio web que se puede utilizar en un escritorio, pero es aún más difícil de diseñar un sitio web que se puede utilizar en muchos reordenamientos o configuraciones de sus elementos, a través de diversos tamaños de pantalla y orientaciones. El mismo elemento de diseño que puede funcionar a las mil maravillas en un escritorio puede trabajar horriblemente en un teléfono inteligente, o viceversa. CENTRÁNDOSE EN EL CONTENIDO Priorización de contenido es un aspecto clave para hacer bien el diseño responsivo. Mucho más contenido es visible sin necesidad de desplazarse en un monitor de escritorio grande que en una pequeña pantalla del teléfono inteligente. Si los usuarios no ven al instante lo que quieren en un monitor de escritorio, se puede echar un vistazo fácilmente alrededor de la página para descubrirlo. En un teléfono inteligente, los usuarios pueden tener que desplazarse sin cesar para descubrir el contenido de interés. El priorizar inteligentemente el contenido ayuda a los usuarios a encontrar lo que necesitan de manera más eficiente. RENDIMIENTO CONSIDERADO [mpc_sh_side_image align=»left» hor_offset=»0″ ver_offset=»0″ image=»http://asd.mx/2015/wp- content/uploads/2014/10/responsive300x400.gif»] Rendimiento también puede ser un problema con el diseño responsivo. RWD ofrece el mismo
  • 5. código para todos los dispositivos, independientemente de si la pieza de código se aplica al diseño o no. Los cambios en el diseño se producen en el lado del cliente, es decir, cada dispositivo – el teléfono, tablet o computadora – recibe el código completo para todos los dispositivos y toma lo que necesita. Un teléfono inteligente de 4 pulgadas recibe el mismo código como un monitor de escritorio de 24 pulgadas. Esto puede empantanar el rendimiento en un teléfono inteligente, lo que puede ser un partido basado en una conexión de datos más lento. (Esto es por qué algunos sitios recurren a diseño adaptativo, en el que el servidor que aloja la página web detecta el dispositivo que hace la solicitud y entrega diferentes lotes de código HTML basadas en ese dispositivo.) Para evaluar verdaderamente la experiencia del usuario de un diseño responsivo, la prueba es que sus diseños no responden sólo en la comodidad de su propia oficina, en su conexión de alta velocidad, debe también aventurarse con su smartphone- entre edificios altos en una ciudad, en salas de conferencias interiores o sótanos, en áreas remotas con conectividad irregular, en puntos problemáticos conocidos para la conexión a la red de su propio teléfono celular – y ver cómo su sitio se presenta en condiciones variadas. El objetivo de muchos diseños responsivos es dar facilidades equivalentes de acceso a la información sin importar el dispositivo. Un usuario de smartphone no tiene una experiencia equivalente a un usuario de escritorio si los tiempos de descarga son intolerables. CONCLUSIÓN Diseño responsivo es una herramienta, no una panacea. El diseño responsivo tiene muchas ventajas en todos los dispositivos. Los equipos deben centrarse en los detalles del contenido, diseño, y el rendimiento con el fin de apoyar a los usuarios en todos los dispositivos. Para más información sobre el diseño de diferentes dispositivos, consulte nuestra página web www.asd.m
  • 7. TendenciaendiseñoWeb:InspiraciónparaunaCabeceraCreativa• SiloCreativo 5 ConsejosparaDiseñartuWeb conbuenaUX • SiloCreativo CSS4: La nuevaversiónde CSSque nunca exihttps://www.silocreativo.com/author/ricardpriet/stirá•SiloCreativo