Web adaptatiu

Definició

El disseny web adaptatiu o adaptable (en anglès, responsive web design) és una tècnica de disseny i desenvolupament web que mitjançant l’ús d’estructures i imatges fluïdes, i de media-queries en el full d’estil CSS, aconsegueix adaptar el lloc web a l’entorn de l’usuari.

El dissenyador i autor nord-americà Ethan Marcotte va crear i difondre aquesta tècnica a partir d’una sèrie d’articles a A List Apart, publicació en línia especialitzada en disseny i desenvolupament web, idea que després ampliaria en el seu llibre Responsive web design.

Font: Wikipedia.org

La proliferació de dispositius amb accés a Internet pot convertir-se en un malson quan creem una pàgina web, ja que no solament ens obliga a dissenyar pensant en diverses plataformes (ordinadors, mòbils, tauletes, wereables, smart TV, netbooks, etc.) sinó també en infinitat de mides i resolucions de pantalla.

El disseny adaptatiu ens ofereix una solució a aquest problema permetent-nos utilitzar el mateix HTML en tots els dispositius, mentre que és el full d’estils CSS l’encarregat de canviar l’aspecte de la pàgina d’acord amb la mida de la pantalla en què es mostra. Així doncs, en el disseny adaptatiu, els elements presents en la pàgina es reorganitzen segons la pantalla s’ampliï o s’encongeixi.

Vídeo: Disseny adaptatiu de la pàgina web del transport públic a Londres (Nielsen Norman Group).

Aquesta solució ens ofereix diversos avantatges:

  • Més rapidesa i menys costos en el desenvolupament, ja que no treballem amb diferents versions sinó amb una de sola treballada amb una metodologia específica des del començament del desenvolupament.
  • Més facilitat de manteniment.
  • Tranquil·litat de cara a l’aparició de nous dispositius (el disseny s’adaptarà tot sol d’acord amb la grandària de les pantalles).
  • Millorar el posicionament SEO de la web, atès que treballem amb una única versió per a tots els dispositius.
  • Millorar l’experiència d’usuari, ja que tenim un únic disseny principal que mantindrà la coherència amb la visualització des de qualsevol dispositiu.

Tanmateix, no n’hi ha prou amb assegurar-nos que els elements s’adapten a la grandària de la pantalla. Quan treballem amb dissenys adaptatius, també hem de tenir en compte certes qüestions:

  • Usabilitat i experiència d’usuari. El web ha de ser igualment usable, amb independència de la mida del dispositiu amb el qual hi accedim.
  • Jerarquització dels elements. Hem de tenir molt present en quin ordre es reorganitzarà el nostre contingut en les pantalles més petites. Igual que en el monitor d’un PC, el més important ha d’estar situat ben a la vista.
  • Temps de càrrega. Si bé el disseny adaptatiu ens permet fer servir el mateix HTML per a tots, això significa en principi que un smartphone haurà de carregar el mateix codi que un ordinador de sobretaula —el mostri tot o no—, la qual cosa podria afectar el temps de càrrega de la pàgina al mòbil. Una solució és detectar el tipus de dispositiu i que el servidor proveeixi només les parts de codi necessàries.

Font: Responsive Web Design (RWD) and User Experience.

Més informació:
– Manual de disseny web responsiu (de Wilfredo Salas G.).
– Disseny web responsiu segons Ethan Marcotte.
– Història del disseny web adaptatiu.
– Design process in the responsive age.
– 7 consells per fer bon responsive design.
– Responsive web design: what it is and how to use it.
– Articles sobre disseny adaptatiu a A List Apart.
– Responsive web design tips from BBC News.
– El responsive i la importància al SEO.

Eines i recursos

Eines

  • Responsive web design Testing tool. Aquesta eina ens permet introduir una URL i comprovar a l’instant el seu aspecte en diferents grandàries de pantalla (240 px, 320 px, 480 px, 768 px, 1.024 px).
  • Responsinator. Eina en línia que permet executar un test de responsivitat, simulant la visualització d’una web en diversos dispositius mòbils.
  • ScreenQueries. Pixel Perfect Media Query Debugging Tool.
  • Gridpak. The responsive grid generator.

Exemples de webs adaptatives

Tutorials

Responsive CSS Frameworks

  • Skeleton. Skeleton is a small collection of CSS files that can help you rapidly develop sites that look beautiful at any size, be it a 17″ laptop screen or an iPhone.
  • Base. A super simple, responsive framework built for all devices big, small and in-between.
  • Gumby. Gumby 2 is an amazing responsive CSS Framework built with the power of Sass.
  • Amazium. The clean and simple responsive framework.
  • Foundation. Foundation 5 is the most advanced responsive front-end framework in the world.
  • Bootstrap. The most popular front-end framework for developing responsive, mobile first projects on the web. Desenvolupat per la gent de Twitter.
  • The Goldilocks Approach. Ofereix arxius CSS i HTML per programar webs adaptatives.
  • Proportional Grids. Simplement, graelles proporcionals que funcionen fins i tot en IE7.
  • Responsive Grid System. Ofereix arxius i recursos per iniciar-se en el disseny web adaptatiu.
  • This is responsive. Interessant col·lecció de patrons i recursos adaptatius del dissenyador web Brad Frost.