El Responsive Web Desing, una solució que surt a compte

El Responsive Web Design és el sistema de maquetació que permet que els continguts d’un web s’adaptin a diversos dispositius com ara tauletes, telèfons intel·ligents i ordinadors.

Exemple de web responsive

Fins fa un parell o tres d’anys quan volíem tenir un web que funcionés en un mòbil havíem de fer una versió específica pel mòbil. Tots recordem la moda dels webs .mobi. Però ni en una versió específica per mòbils aconseguíem que el web es veiés bé a tots els mòbils. El problema venia de la diversitat de tipus i mides de pantalla.

Amb l’aparició del iPhone i el desplegament dels telèfons intel·ligents, resoldre la correcte visió d’un web en un mòbil es va convertir en una urgència, ja que la gent començava a utilitza el mòbil permanentment, també per veure webs. Per tant, si volies tenir una presència efectiva a la xarxa calia que el teu web es pogués veure dignament en un mòbil.

L’aparició del Responsive Web Design, ho resolt amb escreix. Es tracte d’una tècnica de maquetació que fa que segons la mida de la pantalla el web es reordeni i s’adapti de manera que sempre es vegi correctament. El més important és que tant text com imatge tenen la mida adient a cada dispositiu.

Fixeu-vos en les imatge i crec que us quedarà clar.

La maquetació pensada per un ordinador: visualitzem 

5 columnes

La maquetació pensada per a una tauleta:  

visualitzem 3 columnes, i el contingut de la dreta

és a sota.  

La imatge de sota, el cas 

del telèfon amb 1 columna

El dissenyador i el maquetador han de definir com s’ordenarà el web a cada mida, ja que, per exemple, si a l’ordinador hem resolt el web en tres columnes, al telèfon en disposarem d’una, i el què a l’ordinador veiem en una mateixa fila, al mòbil ho veurem una cosa després de l’altre.

Fer un web amb aquesta tècnica, és més lent que fer-ho com abans, per tant és una mica més car, però molt més barat que la doble versió i mot més eficient ja que el manteniment només l’haurem de fer una vegada i es veurà bé arreu.

Una de les avantatges d'aquest tipus de maquetació ens que es obliga a estructura-la de manera que facilita l'accessibilitat i el posicionament en cercadors.

Ara bé, el Responsive Web Design no resolt tota la problemàtica, ja que els continguts no es poden redactar per un sol dispositiu i que es readaptin sols, per adaptar-los ens cal la ma humana i diverses versions del web. Si sempre hem defensat que els continguts han de ser sintètics, si es pensa fer un disseny adaptatiu encara ho han de ser més o tindrem problemes de lectura en pantalla petita.

El què si ens permet el Responsive Web Design, es dir-li que certs parts del contingut no es publiquin en formats de pantalla petits, d’aquesta manera podem obviar parts que poden ser poc útils en una pantalla petita i que fins i tot poden afegir soroll a la lectura.

Si bé el Responsive Web Design, resolt la problemàtica d’adaptació del disseny a cada tipus de pantalla, no resolt –encara que la millora- la problemàtica dels continguts.

L’augment de "cost de construcció” del web queda compensat per només haver de mantenir un web que podem veure correctament en tota mena de dispositius, fixes i mòbils.

Heu fet algun web responsive? Ens expliqueu l’experiència?

Per cert diuen les revistes que enguany (2014) és l'any de Responsive Web Design (o disseny adaptatiu). Tens el teu web adaptat? Et podem ajudar?

Entrades relacionades

- ¿Por qué las Pymes también deben apostar por el diseño responsive?  (article de PuroMárketing)

- Wordweb, una solució multi-dispositiu

- i IX - El repte de la presència a Internet. Bosses Barcelona com exemple

L'equip de wordweb

La solució per a la PIME 

Troba'ns a:
info@wordweb.cat

VII- Metodologia de la comunicació digital. Pas a pas 4: El desenvolupament tecnològic

Després d’explicar la metodologia de conceptualització: anàlisis, arquitectura de la informació, disseny de la interacció, disseny de continguts i disseny gràfic, avui volem centrar-nos en les implicacions de la tecnològica durant el procés descrit i en el paper a jugar durant el desenvolupament tecnològic.

Fragment de codi de la pagina de google

Sentències

1) La tecnologia és una eina que ha d’estar al servei del projecte.

2) L’equip tecnològic ha de construir allò que s’ha definit prèviament.

3) L’objectiu d’un desenvolupament tecnològic és un producte que els usuaris puguin fer servir de la manera més senzilla possible.

4) L’equip tecnològic ha de saber limitar les opcions que poden encarir el projecte i oferir alternatives.

5) La tecnologia és un facilitador i un limitador                                                                                                                            és qui ens marca que podem fer.

El suport de l’equip tecnològic

Per poder explotar al màxim les opcions de l’eina que es faci servir en el desenvolupament cal que coneguem les diverses opcions i possibilitats que ens ofereix. No pensem que podem arribar a tot. La col·laboració de l’equip tecnològic ens ha de facilitar la vida.

Un dels riscos que correm les persones que ens dediquem a definir com ha de ser i s’ha de comportar un web, és que pensem solucions que o bé no es poden fer o encareixen el cost i/o el temps de desenvolupament.

No hi ha res més negatiu en un projecte que frustrar les expectatives del client. Si ja li hem venut una solució i ens hem de fer enrere per requeriments tecnològics tenim assegurat un problema de gesti  e e﷽﷽﷽﷽﷽ assegurat un problema de gesti expectatives del client. Si ja li hem venut una solució de projecte i de relació amb el client.

El tecnòleg ha de ser responsable de validar tot el que proposem i d’oferir-nos solucions alternatives que poden millorar el resultat. Ha de saber veure, a més, quines conseqüències pot tenir quan es vulgui evolucionar el projecte incorporant noves funcions.

En definitiva, tenir-lo a l’equip és una garantia per aconseguir que el projecte arribi a bon port.

El suport a l’equip tecnològic

En la darrera entrada sobre el disseny gràfic del web, dèiem: “Cal treballar molt estretament amb els programadors html i revisar el resultat. El disseny i la programació html són el nexe d’unió entre la conceptualització i el resultat final. Si les plantilles estan ben fetes, el resultat final de la interfície serà el previst.”

En aquest punt comença la relació directe amb l’equip tecnològic que és on ens juguem la credibilitat de la nostra feina.

És per això que a l’equip de wordweb creiem que cal fer un bon traspàs, donar suport durant tot el desenvolupament i validar que el què s'està programant respon al que es va definir, de manera molt especial, hem de revisar amb detall les plantilles maquetades.

Aquesta feina moltes vegades s’obvia, com que ja vàrem lliurar la nostra part de projecte, ja podem oblidar-nos-en. Res menys cert. Tots hem treballat en projectes que una vegada vist el resultat ja no els volem signar. No fer el seguiment que proposem fa augmentar exponencialment aquest risc.

Això sí, caldrà pactar amb el client que el pagament d’aquestes tasques no aturi el cobrament de la resta del projecte.

Propera entrada

A la propera entrada parlarem del manteniment, l’avaluació i l’evolució.

Entrades anteriors de la sèrie: Metodologia de la comunicació digital

I- Esquema conceptual

II- Procés metodològic

III- Pas a pas, 1: Immersió i entorn. 1a part  [Formulació d'un projecte nou]

IV- Pas a pas, 1: immersió i entor. 2a part.  [Re-formulació d'un projecte ja existent]

V- Pas a pas 2: Arquitectura de la informació i disseny de la interacció

VI- Pas a 3: Disseny gràfic


Entrades relacionades

- Tota la sèrie: Necessitem un web nou. Per on comencem?

- Vull un web ben fet

- Tota la sèrie: Com escriure a Internet

L'equip de wordweb

La solució per a la PIME 

VI- Metodologia de la comunicació digital. Pas a pas 3: Disseny gràfic

En la darrera entrada vàrem parlar del procés de conceptualització centrant-nos en l’arquitectura de la informació i el disseny de la interacció. Vàrem comentar la importància que té per a l’equip de wordweb el prototip com a eina de suport a la conceptualització al facilitar la visualització i el testeig i permetre tancar el què serà el web abans d’invertir una sola hora en desenvolupament.

Del prototip al disseny gràfic

El disseny tanca el procés de conceptualització i com a part de la conceptualització, ha d’estar regit pels objectius del client i les necessitats/expectatives dels usuaris.

El disseny gràfic és la formalització (donar forma) del que hem definit (el que veiem en el prototip) en les tasques anteriors, una forma que s'ha de basar en el concepte i la funció.

El disseny d’un web ha facilitar la usabilitat del web i a la vegada l’ha de fer atractiu. El disseny d’un web no pot ser merament creativitat, ja que el web no serà usable, i per tant no seria disseny.

Per nosaltres el disseny va lligat a la funció i aporta la capa estètica imprescindible per fer atractiu el web. Per fer-ho s’ha de recolzar amb els valors de la imatge corporativa o els que s’hagin definit en el projecte (no tots els webs han de fer referència a la imatge corporativa del client).

Si estem d’acord que el disseny és responsable d’una part important de la usabilitat i l’accessibilitat, de la imatge i de facilitar la comunicació dels valors de la marca, estarem d’acord que no és un repte fàcil, que no n'hi ha prou amb saber fer anar les eines. El disseny gràfic és el facilitador d'un acte de comunicació que si no arriba al receptor és per què la solució gràfica no és correcte.

Per fer la seva feina, el dissenyador té una sèrie de recursos propis com ara, la tipografia, el color, la retícula, el tractament de les imatges, etc... de la correcta combinació d’aquets elements en depèn el resultat.

Del disseny a les plantilles

Si amb el prototip hem establert les jerarquies dels continguts, la manera com navegarem i l’estructura de la informació, amb el disseny hem de incorporar, entre d’altres.:

- l’estructura gràfica del web en base a una retícula.

Si volem que les diferents pàgines del web mantinguin una coherència visual necessitarem definir una retícula que les sustenti. Això ens permetrà tenir plantilles diferents per a les diverses necessitats i que l’usuari percebi el web com una unitat.

Però quina retícula? Dependrà dels continguts que haurà de contenir i de l’estètica que es busqui.

(La millor manera d’entendre què és una retícula es pensar en una revista on les diverses seccions mostren el contingut de manera diferent però mantenen una unitat visual).

- la llegibilitat, tant dels continguts textuals com gràfics: fotos, vídeos, etc.

Que un web sigui fàcil de mirar i de llegir és una de les tasques prioritàries del disseny.

(No es llegeix de la mateixa manera una línia de 12 paraules que una de 3 o de 20 o en un smartphone que en un ordinador).

- l’estètica.

Una de les preguntes que cal fer al client és quins són els referents visuals a tenir en compte. Generalment és la imatge corporativa. En base aquest criteris o referents visuals crearem la imatge gràfica.

Hem de tenir clares totes les tipologies de pàgines a resoldre, en això el prototip ens facilita la vida, i començar per les més complexes per acabar amb la home que generalment té un tractament específic però que ha de reflectir un estil fruit de les pagines interiors.

L’estètica juntament amb les imatges que seleccionem defineix també la lectura emocional del web. Per tant el disseny a més de resoldre la funció, aporta la sensació i la suggestió. 

- la iconografia.

La iconografia i demés botons són elements crítics per facilitar la navegació, per això la solució no pot ser la mateixa en un web d’una sola visita que en una intranet corporativa. En el primer cas no ens podem permetre que l’usuari tingui que pensar per entendre el què li proposem. En el cas de la intranet, podem demanar un cert esforç inicial a l’usuari sempre que una vegada apresa la iconografia se li simplifiqui la navegació.

Abusar de la iconografia o inventar-se referents iconogràfics pot penalitzar molt. Quan ja hi ha referents d’estandarditzats hem de fer-los servir a menys que estiguem convençuts que la nostra solució aportarà facilitat d'ús i comprensió del missatge.

Tot el treball de disseny caldrà fer-lo a prop dels responsables del contingut, com en una revista o un diari, ajustant el contingut amb el disseny per aconseguir que el producte resultant millori.

El dissenyador ha de poder dir al redactor que faci la redacció d’una altre manera, i el redactor que els dissenyador resolgui una problemàtica concreta d’una manera diferent.

Ara bé, el dissenyador no només està condicionat per la fase de conceptualització prèvia i els continguts, sinó, i de manera molt significativa, per la tecnologia. Dependrà de la plataforma tecnològica, dels recursos per evolucionar-la, i del coneixement dels programadors html, que puguem apostar per una solució gràfica o una altra.

Cal treballar molt estretament amb els programadors html i revisar el resultat. El disseny i la programació html són el nexe d’unió entre la conceptualització i el resultat final. Si les plantilles estan ben fetes, el resultat final de la interfície serà el previst.

El programador html, com l’impressor en el cas del paper, pot fer bo o dolent el treball del dissenyador i de retruc tot el procés de conceptualització, en les seves mans queda l’accessibilitat, la adaptabilitat del web a diversos dispositius [responsive] i l’encaix amb la programació.

Dit d’altre manera del disseny i de la seva concreció en plantilles en depèn com l’usuari percebrà el web, és a dir, en depèn l’èxit o el fracàs. 

Propera entrada

A la propera entrada parlarem de la relació amb la tecnologia i de manera especial amb l’equip de desenvolupament tecnològic.

Entrades anteriors de la sèrie: Metodologia de la comunicació digital

I- Esquema conceptual

II- Procés metodològic

III- Pas a pas, 1: Immersió i entorn. 1a part  [Formulació d'un projecte nou]

IV- Pas a pas, 1: immersió i entor. 2a part.  [Re-formulació d'un projecte ja existent]

V- Pas a pas 2: Arquitectura de la informació i disseny de la interacció


Entrades relacionades

- Tota la sèrie: Necessitem un web nou. Per on comencem?

- Vull un web ben fet

- Tota la sèrie: Com escriure a Internet

L'equip de wordweb

La solució per a la PIME 

Com hauria de ser un contingut de qualitat

Tots els que intentem tirar endavant un blog o qualsevol altre publicació digital, hem llegit que el rei és el contingut i que aquest ha de ser de qualitat si es vol reeixir: és a dir, aconseguir més seguidors,  més interacció i més negoci.

Però què entenem per un contingut de qualitat? i un contingut de qualitat és aquell que té molt èxit?

Intentarem respondre a aquestes dues preguntes a partir de la nostra experiència i de la informació que hem llegit i compartit. És per tant una visió subjectiva. Segur que ni ha d’altres. Esperem que digueu la vostra.

Un contingut de qualitat

Estarem tots d’acord que si publiquem en un blog és per explicar alguna cosa. Per tant la primera asseveració podria ser:

- un contingut que vol ser compartit ha de dir alguna cosa als lectors.

Sembla una xorrada però no ho és, només cal tafanejar per la xarxa.

La segona asseveració que segurament compartim és:

- un contingut ha de ser original

Tot i que en aquest cas s’ha de matisar, ha de ser original en la forma, en la manera que explica les idees. Ser original en les idees és verdaderament difícil i no necessàriament positiu. Ara bé, quan menys originals (quan més conegudes) siguin les idees, més original ha de ser la forma per què convidi a llegir l’article.  

El que marcarà la qualitat del blog és la coherència, costa acceptar un blog (d’un autor) que cada dia canvia de parer. Per tant podrem asseverar que:

- cada contingut d’un blog ha de formar part d’un discurs.

És a dir, cada entrada ha de tenir un fil argumental que reforci el discurs global del blog. Per tant ha de formar part d’una estratègia.

Per seguir un blog li exigim que sigui un referent per nosaltres, li exigim coherència i consistència. Ens hem d’aplicar el mateix criteri en el moment d'escriure.

Però segurament i per sobre de tot demanem que els continguts estiguin ben escrits i que siguin honestos.

Quan parlem d’estar ben escrit volem dir que no tinguin faltes d’ortografia, que la construcció de les frases sigui correcte, que les paraules escollides expliquin bé el que volem dir, ...  ...i que estiguin escrits pensant en el suport on seran llegits. Tots sabem per experiència que no té res a veure la lectura en un mòbil que en un tablet o un ordinador.

Honestos: segurament tots hem llegit continguts que ens volen vendre gat per llebre, continguts que han “agafat” literalment fragments de tercers i no ens ho diuen, continguts que prometen el cel i una vegada fet l’esforç de llegir-los resulta que no corresponen al què el títol ens pressuposava.... 

No ser honest en el que es publica se'ns tornarà en contra com un bumerang, tard o d’hora. Per ser honest, entra d’altres coses, caldrà respectar les normes de conducte d’internet.

 

Qualitat i èxit del contingut, són sinònims?

La resposta a la pregunta és òbvia. No tots els continguts de qualitat tenen èxit, ni tant sols aquells que estan pensats tenint en compte als destinataris. Ara bé, en la gran majoria de cassos, els continguts que tenen èxit tenen qualitat, sobre tot si l'èxit és sostingut en el temps.

         
  

Al nostre entendre, un dels grans perills per a la qualitat dels continguts és caure en el parany de “tot per l’èxit”.

Si només pensem en l'èxit, fàcilment farem un contingut mecànic sense creativitat personal (ha de complir amb les normes de SEO, ha de fer servir les paraules de moda, ha de dir el què l’usuari vol sentir, etc...), és a dir, un contingut sense qualitat.

Segurament (és només una hipòtesi no contrastada) el contingut de qualitat que acaba triomfant és aquell que manté un grau suficient de creativitat i visió personal.

En un món on les idees s’expressen simultàniament en mil canals i que tot el què és nou ho deixa de ser en mil·lèsimes de segon, agraïm com a lectors, que els textos aportin una dosi de creativitat i que 
sostinguin una visió personal.

Hi esteu d’acord?

Entrada relacionada

- Un text ben treballat és imprescindible per aconseguir un web usable

Enllaç d'interès

- Ballenas, girasoles y Contenido de Calidad [Blog optimando]

L'equip de wordweb

La solució per a la PIME