Enllaç permanent

2

Què és el responsive web design?

Responsive web design

Responsive web design és un terme utilitzat per primera vegada per Ethan Marcotte en un article del 2010 a la prestigiosa publicació online A List Apart 1. Se sol traduir com a disseny web adaptatiu, o adaptable ja que aquest s’adapta (responds to) als diferents dispositius en que es mostri el web.

Responsive web design

El disseny web sempre ha sigut molt més flexible que el gràfic. Dissenyant per la web, sempre s’ha hagut de contemplar que els diferents ordinadors que accedeixin la nostra web poden ser molt diferents. Les diferències tradicionals són:

  • La resolució de la pantalla, que podia variar de 800×600 a 1680×1050 píxels.
  • El sistema operatiu: Les diferents versions de Windows, Mac i Linux.
  • El navegador: Explorer, Firefox, Chrome, Opera, Safari…
  • Les fonts instal·lades, ja que les fonts se solen enllaçar, i no incrustar, obligant-nos a utilitzar fonts disponibles a l’ordinador.
  • La configuració específica per part de l’usuari.

Moltes de les diferencies se solien fixar amb petits hacks 2i codi específic per les diferents excepcions ja que, dins del que cap, no eren tantes.

Avui dia, l’aparició de nous dispositius, bàsicament mòbils i tauletes, ha complicat l’escena ampliant aquest ventall amb:

  • Resolucions que varien dels 320×240 píxels o menys en mòbils als 2880×1800 píxels dels nous macs amb retina display. I la majoria dels dispositius mitjans i petits, s’utilitzen habitualment de forma vertical, cosa que no era gens habitual anteriorment.
  • Nous sistemes operatius, que se sumen als tradicionals: Android, iOS, Windows PhoneBlackBerry, Symbian, EyeOS
  • Nous navegadors, sobretot versions mòbils dels navegadors d’escriptori.

Comparació de resolucions

Els diversos escenaris són tants, que ja no es poden anar fixant un a un. El responsive web design soluciona el problema amb una aproximació al disseny d’interfície totalment líquida i conscient dels diferents dispositius on es mostrarà. A nivell tècnic es basa en l’utilització de:

  • Estructures fluïdes modulars, que supediten tot el disseny a un sistema de cel·les/columnes.
  • Estils específics de CSS, sobretot media queries referents a l’amplada del dispositiu, per aplicar diferents estils depenent de la mida dels dispositius.
  • Imatges fluïdes que defineixen la seva mida en unitats percentuals en comptes de píxels fixes.

El disseny del meu web és totalment adaptatiu. Podeu comprovar aquest o qualsevol altre lloc web redimensionant la finestra del vostre navegador, o si esteu llegint aquest article des d’un mòbil podeu canviar l’orientació del vostre dispositiu d’horitzontal a vertical. També hi ha moltes eines per testejar en varis dispositius concrets, com per exemple responsinator, que ofereix una previsualització en varis mòbils i tauletes populars.

La meva opinió personal és que el disseny web adaptatiu ja no és una opció, sinó un requisit en qualsevol projecte web. Estàs d’acord? Fes-m’ho saber als comentaris.

Potser t'interessen aquests altres articles:

Notes:

  1. A List Apart va néixer el 1997 com a llista de correu, i es va consolidar com a revista digital el 1998. És una publicació dedicada al disseny i el desenvolupament web amb articles d’investigació de noves bones pràctiques segons els estàndards de la indústria.
  2. La viquipèdia, en anglès, té un petit recull d’alguns dels hacks més utilitzats en CSS.

2 Comentaris

  1. Pels desenvolupadors web aficionats com jo aquesta “adaptació” ens pot suposar o bé un problema, o una nova eina per aprofundir en el disseny web, si un te ganes d’anar més enllà. Sense tenir coneixements de programació (o molt simples) i emprant eines de disseny molt establertes com wordpress o joomla, i en la meva més sincera ignorància, com, i de manera breu, es poden utilitzar les diferents eines per a fer que un disseny web ADAPTABLE basat en una plantilla joomla, per exemple?

    Felicitats per lloc i fer-lo creixer!!

    • Nani,

      Conèixer el problema és part de la solució. Aquest web utilitza WordPress i em vaig limitar* a buscar una plantilla que oferís responsive web design i descartar qualsevol altra que no seguís aquest principi. No vaig necessitar cap coneixement tècnic al respecte. Si vols fer-ho amb Joomla et recomano fer el mateix. Posar-te de cap al codi amb el disseny adaptable pot ser una mica massa dur.

      Gràcies per l’aportació!

      *Dic “em vaig limitar” però he d’acceptar que després vaig remenar un piló de coses. Va ser capritxós i per que em venia de gust. Realment ho podria haver deixat tot tal qual estava.

      PD: Et passo una mica de codi CSS d’exemple per que vegis com va (part) de la cosa. En primer lloc defineixo un estil per defecte, després sobreescric (recorda que CSS vol dir fulla d’estil en CASCADA) aquest estil depenent de l’amplada de la finestra.

      #main { width: 1000px; }

      @media screen and (max-width: 1024px) {
      #main { width: 700px; }
      }

      @media screen and (max-width: 900px) {
      #main { width: 600px; }
      }

      @media screen and (max-width: 550px) {
      #main { width: 400px; }
      }

Deixa un comentari

Els camps obligatoris se senyalen amb *.