El diseño web receptivo ( RWD ) es un enfoque del diseño web que hace que las páginas web se muestren bien en una variedad de dispositivos y tamaños de pantalla o ventana desde el tamaño mínimo al máximo. El trabajo reciente también considera la proximidad del espectador como parte del contexto de visualización como una extensión de RWD. [1] El contenido, el diseño y el rendimiento son necesarios en todos los dispositivos para garantizar la usabilidad y la satisfacción. [2] [3] [4] [5]
Un sitio diseñado con RWD [2] [6] adapta el diseño al entorno de visualización mediante el uso de cuadrículas fluidas basadas en proporciones, [7] [8] imágenes flexibles, [9] [10] [11] y consultas de medios CSS3 , [4] [12] [13] una extensión de la regla, de las siguientes maneras: [14]@media
- El concepto de cuadrícula fluida requiere que el tamaño de los elementos de la página esté en unidades relativas como porcentajes, en lugar de unidades absolutas como píxeles o puntos . [8]
- Las imágenes flexibles también se dimensionan en unidades relativas, para evitar que se muestren fuera de su elemento contenedor . [9]
- Las consultas de medios permiten que la página utilice diferentes reglas de estilo CSS basadas en las características del dispositivo en el que se muestra el sitio, por ejemplo, el ancho de la superficie de representación (ancho de la ventana del navegador o tamaño de pantalla física).
- Los diseños receptivos se ajustan y adaptan automáticamente al tamaño de pantalla de cualquier dispositivo, ya sea una computadora de escritorio, una computadora portátil, una tableta o un teléfono móvil.
El diseño web receptivo se ha vuelto más importante a medida que la cantidad de usuarios de dispositivos móviles representa más de la mitad del tráfico total de Internet. [15] En 2015, por ejemplo, Google anunció Mobilegeddon y comenzó a aumentar las calificaciones de los sitios optimizados para dispositivos móviles si la búsqueda se realizaba desde un dispositivo móvil. [16] El diseño web adaptable es un ejemplo de plasticidad de la interfaz de usuario . [17]
Conceptos relacionados
Móvil primero, JavaScript discreto y mejora progresiva
"Móvil primero", JavaScript discreto y mejora progresiva son conceptos relacionados que son anteriores a RWD. [18] Los navegadores de teléfonos móviles básicos no entienden JavaScript o las consultas de medios , por lo que una práctica recomendada es crear un sitio web básico y mejorarlo para teléfonos inteligentes y computadoras personales, en lugar de depender de la degradación elegante para crear una imagen compleja. trabajo pesado en el sitio en teléfonos móviles. [19] [20] [21] [22]
Mejora progresiva basada en el navegador, el dispositivo o la detección de funciones
Debido al alto volumen de tráfico de Internet que utiliza dispositivos móviles, ya no se pueden ignorar. En 2014, por primera vez, más usuarios accedieron a Internet desde sus dispositivos móviles que desde el escritorio. [23] Cuando un sitio web debe admitir dispositivos móviles básicos que carecen de JavaScript, la detección del navegador ("agente de usuario") (también llamada " rastreo del navegador ") y la detección de dispositivos móviles [20] [24] son dos formas de deducir si ciertos HTML y las características de CSS son compatibles (como base para la mejora progresiva); sin embargo, estos métodos no son completamente confiables a menos que se usen junto con una base de datos de capacidades de dispositivo.
Para teléfonos móviles y PC más capaces, los marcos de JavaScript como Modernizr , jQuery y jQuery Mobile que pueden probar directamente la compatibilidad del navegador con funciones HTML / CSS (o identificar el dispositivo o el agente de usuario) son populares. Polyfills se puede utilizar para agregar compatibilidad con funciones, por ejemplo, para admitir consultas de medios (requerido para RWD) y mejorar la compatibilidad con HTML5 en Internet Explorer. La detección de características también puede no ser completamente confiable; algunos pueden informar que una función está disponible, cuando falta o está tan mal implementada que no es funcional. [25] [26]
Desafíos y otros enfoques
Luke Wroblewski ha resumido algunos de los desafíos de diseño de dispositivos móviles y RWD, y ha creado un catálogo de patrones de diseño de dispositivos múltiples. [27] [28] [29] Sugiere que, en comparación con un enfoque simple de RWD, la experiencia del dispositivo o los enfoques RESS (diseño web receptivo con componentes del lado del servidor) pueden proporcionar una experiencia de usuario mejor optimizada para dispositivos móviles. [30] [31] [32] La implementación del generador de CSS del lado del servidor de lenguajes de hojas de estilo como Sass o MML de Incentivated puede ser parte de este enfoque al acceder a una API basada en servidor que maneja las diferencias del dispositivo (típicamente teléfono móvil) junto con base de datos de capacidades del dispositivo para mejorar la usabilidad. [33] RESS es más costoso de desarrollar, requiere algo más que lógica del lado del cliente, por lo que tiende a estar reservado para organizaciones con presupuestos más grandes. Google recomienda un diseño receptivo para sitios web de teléfonos inteligentes sobre otros enfoques. [34] Aunque muchos editores están comenzando a implementar diseños receptivos, un desafío continuo para RWD es que algunos anuncios publicitarios y videos no son fluidos. [35] Sin embargo, la publicidad basada en búsquedas y la publicidad de display (banner) son compatibles con la segmentación por plataforma de dispositivo específica y con diferentes formatos de tamaño de publicidad para ordenadores, teléfonos inteligentes y dispositivos móviles básicos. Se pueden usar diferentes URL de página de destino para diferentes plataformas, [36] o se puede usar Ajax para mostrar diferentes variantes de publicidad en una página. [24] [28] [37] Las tablas CSS permiten diseños híbridos fijos + fluidos. [38]
Ahora hay muchas formas de validar y probar diseños de RWD, [39] que van desde validadores de sitios móviles y emuladores móviles hasta herramientas de prueba simultáneas como Adobe Edge Inspect. [40] Los navegadores Chrome, Firefox y Safari y la consola Chrome ofrecen herramientas de cambio de tamaño de viewport de diseño receptivo, al igual que los terceros. [41] [42]
Los casos de uso de RWD ahora se expandirán aún más con un mayor uso de dispositivos móviles; Según Statista, las visitas a motores de búsqueda orgánicos en los EE. UU. provenientes de dispositivos móviles han alcanzado el 51% y están aumentando. [43]
Historia
El primer sitio en presentar un diseño que se adapta al ancho de la ventana del navegador fue Audi .com lanzado a finales de 2001, [44] creado por un equipo de razorfish formado por Jürgen Spangl y Jim Kalbach (arquitectura de información), Ken Olling (diseño) y Jan Hoffmann (desarrollo de interfaces). Las capacidades limitadas del navegador significaban que para Internet Explorer, el diseño podía adaptarse dinámicamente en el navegador, mientras que para Netscape, la página tenía que volver a cargarse desde el servidor cuando se cambiaba de tamaño.
Cameron Adams creó una demostración en 2004 que todavía está en línea. [45] En 2008, se utilizaban varios términos relacionados, como "flexible", "líquido", [46] "fluido" y "elástico" para describir los diseños. Las consultas de medios CSS3 estaban casi listas para el horario de máxima audiencia a finales de 2008 / principios de 2009. [47] Ethan Marcotte acuñó el término diseño web receptivo [48] (RWD), y lo definió como cuadrícula fluida / imágenes flexibles / consultas de medios - Artículo de mayo de 2010 en A List Apart . [2] Describió la teoría y la práctica del diseño web receptivo en su breve libro de 2011 titulado Diseño web receptivo . El diseño receptivo fue catalogado como el n. ° 2 en las principales tendencias de diseño web de 2012 por la revista .net después de una mejora progresiva en el n. ° 1.
Mashable llamó a 2013 el Año del Diseño Web Responsive. [49] Muchas otras fuentes han recomendado el diseño receptivo como una alternativa rentable a las aplicaciones móviles debido a su capacidad para albergar todo el código en un solo sitio web. Tanto los usuarios como los desarrolladores empezaron a darse cuenta de los beneficios y la importancia de los diseños adaptados a dispositivos móviles a medida que el uso de dispositivos móviles seguía aumentando. Esta comprensión de la importancia se confirmó cuando Google anunció que los motores de búsqueda iban a recompensar a los sitios web receptivos con un mayor ranking.
Beneficios del diseño web receptivo
- Una URL
- Un contenido
- Ranking de Google mejorado
- Experiencia de usuario mejorada
- Más clientes potenciales del sitio web
- Bajo costo
Ver también
- Diseño web adaptable
- Bootstrap (marco de interfaz de usuario)
- Marco CSS
- Em (tipografía) § CSS
- Fundación (marco)
- Mejora progresiva
- Diseño receptivo asistido por computadora
- Diseño web sin mesa
Referencias
- ^ Tafreshi, Amir E. Sarabadani; Marbach, Kim; Norrie, Moira C. (5 de junio de 2017). Adaptación basada en proximidad de contenido web en pantallas públicas . Congreso Internacional de Ingeniería Web (ICWE): Ingeniería Web . Apuntes de conferencias en Ciencias de la Computación. 10360 . págs. 282-301. doi : 10.1007 / 978-3-319-60131-1_16 . ISBN 978-3-319-60130-4.
- ^ a b c Marcotte, Ethan (25 de mayo de 2010). "Diseño Web Responsive" . Una lista aparte .
- ^ "20 sitios receptivos favoritos de Ethan Marcotte" . Revista .net. 11 de octubre de 2011.
- ^ a b Gillenwater, Zoe Mickley (15 de diciembre de 2010). Ejemplos de diseños flexibles con consultas de medios CSS3 . Impresionante CSS3. pag. 320. ISBN 978-0-321-722133.
- ^ Schade, Amy (4 de mayo de 2014). "Diseño Web Responsive (RWD) y Experiencia de Usuario" . Nielsen Norman Group . Consultado el 19 de octubre de 2017 .
- ^ Pettit, Nick (8 de agosto de 2012). "Guía para principiantes de diseño web adaptable" . Blog de TeamTreehouse.com.
- ^ "Conceptos básicos del diseño web adaptable" . 8 de septiembre de 2014.
- ^ a b Marcotte, Ethan (3 de marzo de 2009). "Rejillas fluidas" . Una lista aparte.
- ^ a b Marcotte, Ethan (7 de junio de 2011). "Imágenes fluidas" . Una lista aparte.
- ^ Hannemann, Anselm (7 de septiembre de 2012). "El camino hacia las imágenes receptivas" . Revista net.
- ^ Jacobs, Denise (24 de abril de 2012). "50 fantásticas herramientas para el diseño web adaptable" . Revista .net.
- ^ Gillenwater, Zoe Mickley (21 de octubre de 2011). "Elaboración de consultas de medios de calidad" .
- ^ "Diseño receptivo: aprovechar el poder de las consultas de medios" . Centro para webmasters de Google. 30 de abril de 2012.
- ^ Regla W3C @media
- ^ "Índice de redes visuales de Cisco: Informe técnico de actualización de pronóstico de tráfico de datos móviles globales 2014-2019" . Cisco . 30 de enero de 2015 . Consultado el 4 de agosto de 2015 .
- ^ "Blog oficial del Centro para webmasters de Google: implementación de la actualización optimizada para dispositivos móviles" . Blog oficial del Centro para webmasters de Google . Consultado el 4 de agosto de 2015 .
- ^ Thevenin, D .; Coutaz, J. (2002). "Plasticidad de las interfaces de usuario: marco y agenda de investigación". Proc. Interact'99, A. Sasse y C. Johnson Eds, IFIP IOS Press . Edimburgo. págs. 110-117.
- ^ "Qué es el Diseño Web Responsive" . 23 de julio de 2012.
- ^ Wroblewski, Luke (3 de noviembre de 2009). "Móvil primero" .
- ^ a b Firtman, Maximiliano (30 de julio de 2011). Programación de la Web móvil . págs. 512 . ISBN 978-0-596-80778-8.
- ^ "Agradable degradación versus mejora progresiva" . 3 de febrero de 2009. Archivado desde el original el 13 de noviembre de 2014.
- ^ Parker, Todd; Wachs, Maggie Costello; Jehl, Scott (febrero de 2010). Diseñar con mejora progresiva . pag. 456. ISBN 978-0-321-65888-3. Consultado el 1 de marzo de 2010 .
- ^ "Sitios web móviles | All The Way Up Media" . All The Way Up Media . 31 de octubre de 2016 . Consultado el 8 de octubre de 2017 .
- ^ a b "Detección de dispositivos del lado del servidor: historial, beneficios y procedimientos" . Revista aplastante. 24 de septiembre de 2012.
- ^ "BlackBerry Torch: el cuadro de mando del desarrollador HTML5 | Blog" . Sencha. 18 de agosto de 2010. Archivado desde el original el 5 de marzo de 2014 . Consultado el 11 de septiembre de 2012 .
- ^ "Motorola Xoom: el cuadro de mando del desarrollador de HTML5 | Blog" . Sencha. 24 de febrero de 2011. Archivado desde el original el 13 de febrero de 2015 . Consultado el 11 de septiembre de 2012 .
- ^ Wroblewski, Luke (17 de mayo de 2011). "Movilismo: jQuery Mobile" .
- ^ a b Wroblewski, Luke (6 de febrero de 2012). "Enrollando nuestras fundas sensibles" .
- ^ Wroblewski, Luke (14 de marzo de 2012). "Patrones de diseño de dispositivos múltiples" .
- ^ Wroblewski, Luke (29 de febrero de 2012). "Responsive Design ... o RESS" .
- ^ Wroblewski, Luke (12 de septiembre de 2011). "RESS: diseño receptivo + componentes del lado del servidor" .
- ^ Andersen, Anders (9 de mayo de 2012). "Introducción a RESS" .
- ^ "Blog adaptable pero no completamente optimizado para dispositivos móviles |" . Incentivado.
- ^ "Creación de sitios web optimizados para teléfonos inteligentes" .
- ^ Snyder, Matthew; Koren, Etai (30 de abril de 2012). "El estado de la publicidad receptiva: la perspectiva de los editores" . Revista .net.
- ^ "Ayuda de Google Partners" . google.com . Consultado el 21 de mayo de 2015 .
- ^ Desarrolladores de Google JavaScript y diseño web adaptable
- ^ "El papel de los diseños de tablas en el diseño web adaptable" . Diseño Web Tuts + . Consultado el 21 de mayo de 2015 .
- ^ Young, James (13 de agosto de 2012). "Principales problemas de diseño web receptivo ... pruebas" . Revista .net.
- ^ Rinaldi, Brian (26 de septiembre de 2012). "Prueba del navegador ... con Adobe Edge Inspect" .
- ^ "Vista de diseño receptivo" . Red de desarrolladores de Mozilla . Consultado el 21 de mayo de 2015 .
- ^ Malte Wassermann. "Herramienta de prueba de diseño receptivo - Viewport Resizer - Emula varias resoluciones de pantalla - La mejor barra de herramientas de prueba de dispositivos para desarrolladores" . maltewassermann.com . Consultado el 21 de mayo de 2015 .
- ^ "Cuota móvil de visitas a motores de búsqueda orgánicos en los Estados Unidos desde el tercer trimestre de 2013 al cuarto trimestre de 2016" . Statista . Consultado el 27 de marzo de 2017 .
- ^ Kalbach, Jim (22 de julio de 2012). "El primer sitio web de diseño adaptable: Audi (alrededor de 2002)". [ fuente autoeditada? ]
- ^ Adams, Cameron (21 de septiembre de 2004). "Diseño dependiente de la resolución: diseño variable según el ancho del navegador" . El hombre de azul .
- ^ "G146: Uso de diseño líquido" . w3.org . Consultado el 21 de mayo de 2015 .
- ^ "Consultas de medios" . w3.org . Consultado el 21 de mayo de 2015 .
- ^ "OutSeller Group - Organizar, optimizar, maximizar" . outseller.net . Consultado el 21 de mayo de 2015 .
- ^ Cashmore, Pete (11 de diciembre de 2012). "Por qué 2013 es el año del diseño web adaptable" .
enlaces externos
- Diseño web adaptable en Curlie