El disseny web responsive (o reactiu) | Artrivity

Bloc

El disseny web responsive (o reactiu)

responsive_web_design

En un món en el que sembla que la tònica serà que hi hagi més dispositius mòbils que persones, on la tendència és estar sempre connectat (ja sigui des del nostre Smartphone o des d’una Tablet), a casa o al carrer, a l’oficina o al metro…és necessari que, a l’hora de crear el nostre disseny web, aquest pugui adaptar-se a aquests formats de pantalla.

Per això explicarem què és el disseny web adaptatiu o, com es coneix mundialment, el responsive web design (RWD). El disseny web adaptatiu és una tècnica de disseny i desenvolupament web en el que una pàgina web s’adaptarà mitjançant un ús d’estructures i imatges fluïdes al dispositiu.

Fa uns anys, per aconseguir adaptar-se a diferents dispositius, s’havien de crear tants webs com dispositius hi haguessin. Això incrementava el treball a realitzar i, per tant, el preu final. Als usuaris se’ls redireccionava a la versió adaptada al seu dispositiu. Però no només això, sinó que amb certs dispositius i resolucions, s’havien de crear tants webs com possibilitats es volguessin oferir. Això acabava desembocant en un projecte inviable econòmicament pel client. A més, els usuaris que es conectaven des de telèfons mòbils eren encara una minoria, i la despesa no era rendible.

Afortunadament, la tecnologia ha evolucionat i han sorgit alternatives més assequibles.

Quin benefici s’obté amb el ‘responsive’?

Al fer servir aquesta tècnica, amb una sola versió de la pàgina en HTML i CSS es cobreixen totes les resolucions de pantalla i per a tots els dispositius; des de monitors de grans polzades fins a la resolució més petita. D’aquesta manera es minimitzen els costos del client final i pot oferir als seus usuaris una pàgina adaptada.

Parlant de resolucions, per posar alguns exemples, el darrer dispositiu que Apple ha tret al mercat, l’iPhone 5S té una pantalla de 1136×640 píxels. I Google, amb el seu nou Nexus 5, té una pantalla de 1920×1080. El que intento explicar amb això, és que, tot i que avui en dia existeixen dispositius mòbils amb resolucions més grans que un monitor de 17”, l’experiència d’ús és molt diferent que si es fes des d’un ordinador de sobretaula. Per això mateix és molt important adaptar el web a tots els dispositius. Els classifiquem, com a minim, en quatre categories que serien:

  • Versió mòbil.
  • Versió mòbil mode apaïsat (horitzontal).
  • Versió per tablets.
  • Versió d’escriptori.

I per acabar, i per entendre com funciona, podeu entrar a aquest blog (mediaqueri.es), on se’ns mostren diferents pàgines webs amb dissenys responsive. Els exemples es corresponen al mateix web, però adaptat a les quatre mides diferents.

Com a informació addicional, per saber si la pàgina té aquesta tecnologia, es tant senzill com redimensionar horitzontalment el vostre navegador, si a mesura que aneu disminuint l’ample veieu que els elements es van adaptant, enhorabona, està veient un web ‘responsive’.

Pujar!
Aquest lloc web utilitza cookies, si continues navegant suposa l'acceptació de la Política de Cookies. Accepto No accepto