Llamamos "Diseño Adaptable" una serie de tecnicas en el diseño y desarrollo de sitios web con el fin de que sean utilizables en cualquier dispositivo o entorno, sin necesidad de duplicarlos para hacer versiones para dispositivos concretos.
En los primeros años de expansión de Interner, casi todo el trafico se realizaba desde ordenadores personales, es decir, había un número reducido de sistemas operativos, navegadores, resoluciones, situaciones de uso y dispositivos de entrada. Con la irrupción de los smartphones y de otros dispositivos este panorama ha cambiado totalmente, y es practicamente imposible saber en que dispositivo, resolución, situación o metodo de entrada se consumiran nuestros contenidos y servicios. Esta situación solo puede aumentar, ya que cada vez mas dispositivos (TV, consolas, automóviles, electrodomesticos, etc.) cuentan con un navegador web integrado. Por ello es fundamental establecer tecnicas que permitan que nuestros portales se adapten a cualquier situacion y entorno.
Por ejemplo, entre las visitas a Euskadi.eus durante el año 2018 tenemos esta multitud de variables:
- Tipo de dispositivo: Ordenador personal (62%), movil (34%), tablet (4%)
- Sistemas Operativos: Windows (57%), Android (27%), iOS (11%), MacOS (3%), y asi hasta 26 sistemas distintos.
- Navegadores: Chrome (59%), IE (13%), Safari (11%), Firefox (10%) y así hasta 72 navegadores distintos
- Resolucion: 1366x768 (17%), 360x640 (17%), 1920x1080 (9%) y así hasta mas de 7000 resoluciones de pantalla distintas
A estas variables hay que añadir otras como distintos plugins (PDF, Flash), distintos metodos de entrada (teclado, raton, tactil, mando de TV o consola), distintas velocidades de conexion, etc.
Ventajas del diseño adaptable
- Mejoras en la experiencia de usuario y la gestión: facilitar el consumo de contenidos y servicios con independencia del dispositivo o la situación que tengan las personas usuarias, sin necesidad de hacer versiones extra para determinados entornos y por lo tanto sin necesidad de duplicar el trabajo y el mantenimiento.
- Mejoras en posicionamiento en buscadores: Al evitar duplicidades de contenidos evitamos penalizaciones de SEO. Además, Google da relevancia a sitios que esten adaptados a distintos dispositivos.
- Mejoras en el diseño de la interfaz y la arquitectura de la información: El tener en cuenta los dispositivos con pantalla pequeñas (por ejemplo, los móviles) y que pueden ser utilizados en situaciones de escasa atención o conexión de baja velocidad nos obliga a replantear el diseño clasico de la interaccion y presentacion de los sitios web, lo cual implica una simplificación de los mismo y una mayor facilidad de uso para el usuario. De hecho, al plantear un diseño de interfaz se recomienda pensar primero en los dispositivos moviles ("Mobile First") para lograr interacciones mas claras y simples.
- Mejoras en accesibilidad: El uso intensivo de estandares y la simplificación de las interacciones trae consigo una mejora en la accesiblidad (no en vano, se trata de dos conceptos intimamente ligados).
Diseño adaptable en Euskadi.eus
- Desde hace años el Servicio Web esta realizando esfuerzos por adaptar la red de portales a estos principios de diseño adaptable. Por ejemplo, el rediseño de Euskadi.eus se realizó usando la filosofía "mobile first" lo que ha traido una simplificación de la interfaz, así como una mejora en el uso de estándares web, velocidad de carga de las páginas y accesibilidad. Asimismo, hemos trabajado en la adaptación de diversos portales (en 2017 el 65% de los portales estaban adaptados para móviles, mientras que en el 2019 se ha logrado elevar ese porcentaje al 79%).
- Como consecuencia del rediseño de Euskadi.eus en el año 2017, tanto las páginas principales de Euskadi.eus como los portales del Gobierno Vasco y todos los Departamentos están ya adaptados a multiples dispositivos. Todas las páginas y contenidos que se creen y visualicen dentro de estos portales se beneficiarán de estas tecnicas.
- Hemos basado la adaptabilidad de nuestros portales en el uso de estandares web (HTML5 y CSS3), utilización de unidades relativas y media queries para adaptar el diseño a distintas resoluciones, modificaciones mediante lenguajes de script y uso de frameworks como Bootstrap. En breve daremos pasos para implantar más técnicas (carga de imagenes segun dispositivo, uso de compresion en el lado servidor para acelerar la carga de páginas, etc.).
- Respecto a los portales temátivos y de otros organismos hemos trabajado junto a los responsables de dichos portales para implementar técnicas de Diseño Adaptable. A mediados de 2019, el 80% de los portales de la red estan ya adaptados, y nuestro objetivo es que para finales del 2020 todos los portales de la red utilicen dichas técnicas. El Departamento u organismo titular del portal será el responsable de esta adaptación, para lo que contará en todo momento con la ayuda y asesoría del Servicio Web. Si tienes cualquier duda al respecto ponte en contacto con elGestor Web del Servicio Web asignado a tu departamento u Organismo.
FAQs
Where responsive design relies on changing the design pattern to fit the real estate available to it, adaptive design has multiple fixed layout sizes. When the site detects the available space, it selects the layout most appropriate for the screen.
What is responsive and adaptable style? ›
Pages designed to be responsive may take a bit longer to load because they have to change to fit the screen of the user. With adaptive design, you can simply offer users a different version of your website that's suitable for their device, that way they don't have to load anything unnecessary.
What is alternative to responsive design? ›
Top 10 paid & free alternatives to Responsive Website Design includes InPixio, Wix, web.com, Canva, Figma, Shopify, Adobe XD, Rap Booster, Elementor AND Auto Trader Clone Script.
What is an example of adaptive design? ›
Say there are three separate devices rendering the same web page: a desktop, tablet, and a mobile phone. For an adaptive design, we could create three different layouts for each of the devices. Or we could have two layouts: one for mobile, and one for the desktop/tablet.
What are examples of responsive design? ›
The most common example is using a navigational drawer for the main navigation on mobile devices. Designers can also use progressive disclosure to hide non-critical content and information for a cleaner, more minimalist user interface on all devices and screen sizes.
Can you explain the principle of responsive and adaptive design? ›
The responsive design layout adapts seamlessly regardless of the device used to see it. Adaptive design, however, snaps into place because the page serves something different from the browser size or device it is viewed on.
Which is better responsive or adaptive web design? ›
With all of that in mind, it's safe to say that responsive is usually the preferred technique if only because of the ongoing work that adaptive design demands. However, if a client or company has the budget, then adaptive might be a better choice, according to a test carried out by Catchpoint.
What is an adaptable approach? ›
Adapt to change and new ways of working quickly and easily. Make suggestions for increasing the effectiveness of changes. Show willingness to learn new methods, procedures, or techniques. Shift your priorities in response to the demands of a situation. Bounce back from setbacks and maintain a positive attitude.
Is responsive design still a thing? ›
Responsive web design remains a vital practice due to the increasing use of various devices like smartphones and tablets. Users expect websites to function optimally and look appealing on all devices, thus making responsive design more relevant than ever.
What is the most recommended approach to responsive design? ›
A Mobile-first Approach to Responsive Web Design
Mobile-first web design means designing the mobile website first and working up to the desktop version. There are a number of reasons why this approach works well.
Responsive design can help you solve a lot of problems for your website. It will make your site mobile-friendly, improve the way it looks on devices with both large and small screens, and increase the amount of time that visitors spend on your site. It can also help you improve your rankings in search engines.
What is responsive design rule? ›
In responsive design, you can define rules for how the content flows and how the layout changes based on the size range of the screen. Responsive designs respond to changes in browser width by adjusting the placement of design elements to fit in the available space.
What is a responsive design framework? ›
A responsive design is a fully fluid grid-based system that responds to the size of the device. Your visitors experience an interface that is optimized for smartphones, tablets, desktop monitors and the various-sized devices in between. Learn more about Responsive.
What is the primary benefit of responsive design? ›
Benefits of Responsive
Access to content that is appropriately adapted on any device greatly improves the user experience. A good responsive design also improves readability, increases the time spent on a website, it enhances interaction or, in the case of e-commerce, improves sales.
What do you mean by adaptive design? ›
Adaptive design is an approach to web design that ensures a website's layout and content automatically adjust and adapt to different devices and screen sizes, enhancing user experience and SEO performance across platforms.
What is responsive design in design? ›
Responsive web design (RWD) refers to designing websites to adapt to a user's device. The goal is for a website to retain its optimal usability and appearance regardless of the device it's displayed on.
How to tell if a website is responsive or adaptive? ›
The quickest and simplest way to differentiate the two is to understand that a responsive site uses a single fluid layout that changes to fit any screen size. Adaptive sites use multiple static designs with breakpoints that signal the appropriate layout for various screen sizes.
Llamamos "Diseño Adaptable" una serie de tecnicas en el diseño y desarrollo de sitios web con el fin de que sean utilizables en cualquier dispositivo o entorno, sin necesidad de duplicarlos para hacer versiones para dispositivos concretos.