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

La personalització dels continguts, un ideal no sempre assolible

Recentment hem llegit diversos articles al voltant de la necessitat de personalitzar els continguts per cada xarxa social i fins i tot, per a cada comunitat de Google+

És cert que en la mesura que personalitzem el contingut, en funció de les característiques de cada entorn, més fàcil serà que arribi als nostres destinataris.

Aquest principi és igualment cert pel què fa als dispositius, no llegim de la mateixa manera en una pantalla d’ordinador que en un mòbil, una tauleta o una tv.

Per tant, si realment volem arribar als usuaris, convindrà que els continguts estiguin personalitzats per a cada públic i situació.

Fins aquí el món ideal, però si ets una PIME i no pots contractar els recursos per què et facin aquest treball d’orfebreria fina, i et trobes que no pots arribar a tot, hauràs d’aprendre a prioritzar, això sí, cuidant que la teva decisió no converteixi la teu esforç de promoció en promoció negativa.

Així, si has de fer una entradeta personalitzada per a diverses comunitats de Google+, busca les que són d’un mateix tema i que tinguin personalitat semblant i aprofita’t-en.

Si has de fer un web sigues especialment sintètic al redactar els continguts per tal que, quan es llegeixin des d’un smartphone, el contingut encara funcioni.

Però no prenguis la decisió sense tenir en compte les conseqüències. Trobar aquesta mena d’estratègies, et faran la vida més fàcil i et poden permetre arribar a qui t’interessa i disposar del temps per treballar en altres aspectes del teu negoci. El que és segur és que és millor no fer, que fer massa malament.

Ser conscient de les teves limitacions i evitar voler arribar a on no pots, t’ha d’ajudar a aconseguir els millors resultats possibles.    

Entrades relacionades

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

I- Com escriure a Internet: recomanacions bàsiques

I- Necessitem un web nou. Per on comencem?

L'equip de wordweb

La solució per a la PIME 

Vull un web ben fet!

Tenir cura de tots els detalls és el que diferència un bon web d’un mal web. Per això l’equip de wordweb et lliura el web quan està ben acabat per tal que el resultat final sigui el que esperes, el que necessites. 

Portal Coneixement BSA (Maqueta)

Per fer un bon web hem de poder respondre a varies preguntes: 

- Per què el volem?
És imprescindible saber-ho, ja que si no mai comunicarà el que ens convé.

- A qui va dirigit?
No és el mateix arribar a experts en la pesca de la tonyina, que a joves expertes en el darrer tattoo.

- Que hem d’explicar, presentar, informar...
Si sabem que volem i per a qui serà molt més fàcil posar-nos a la seva pell i pensar quins seran els continguts adequats.

- Com s’estructuren els continguts
Hem d’estar segur que l’estructura de continguts que proposem serà compresa per l’usuari sense haver de dedicar-hi esforç. El mateix passa amb els camins per navegar, han de ser clars i fàcils d’utilitzar. Si l’usuari es perd, marxarà.

- Sabem les claus per què un contingut d’un web sigui fàcil de llegir?
Coneixent els requisits per a l’escriptura web, serà molt més fàcil que el teu missatge arribi a qui toca.

- Com es preparen les fotos?
Seleccionar les fotos adients amb la resolució adequada per ser vistes en qualsevol dispositiu (ordinador, tauleta i telèfon intel·ligent) és imprescindible per capturar l’atenció de l’usuari.

- I ara com mantindré el web? 

Tots sabem que fer l’esforç per crear un web és relativament fàcil ja que el difícil és mantenir-lo. Descuidar el manteniment del web és el mateix que tirar els diners a les escombraries. Hem d’estar dimensionats i preparats per tenir-lo al dia.


Preguntes com aquestes en surten un munt quan ens proposem fer un web, per això l’equip de wordweb t’acompanya en tot el procés de creació del web per tal de poder donar-hi resposta i aconseguir que el resultat sigui l’idoni.

Wordweb és una solució claus en ma pensada per resoldre la comunicació web de petites i mitjanes empreses.

A més, si ho necessites, l’equip de wordweb et dona suport per mantenir el web i la teva presència a les xarxes socials.

Entrades relacionades

I- Presentació

II.- Context i organització. El fet comunicatiu

III.-Els continguts, l’arquitectura de la informació i el disseny

IV.- Per garantir l’èxit, a la tecnologia posem-li fàcil

IV- Com escriure a Internet: la presentació de la pàgina

• 
  

L'equip de wordweb

La solució per a la PIME 

Vols rentar-li la cara d’una vegada?

Hem renovat la imatge del blog Comunicació digital

Que el blog de wordweb funcionés amb una plantilla estàndard de Blogger, era, com a mínim, sorprenent.

Prova quasi definitiva

Els amics ens ho deien:

- que no veieu que tot queda pengim, penjam?
Total que no ens ha quedat més remei que donar-li una volta.

Hem posat ordre a una plantilla que no en tenia, colors, proporcions, tipografia, etc., s’han adaptat per fer-ho més agradable i, per sobre de tot, més llegible.

No es tractava de fer-nos un blog a mida, sinó, com els passa als nostres clients, saber aprofitar el que Blogger t’ofereix

Esperem que aquesta nova imatge us agradi i sigui motiu per continuar seguint-nos.
:-)

L'equip de wordweb

La solució per a la PIME 

Wordweb, una solució multi-dispositiu

Wordweb s'adapta a tots els dispositius

Un exemple: El Port Vell de Barcelona.

Una de les característiques importants d'un web nou ha de ser que s'adapti als diversos dispositius que poblen les nostres vides,


Ordinador

Tauleta

Telèfon intel·ligent

No és el mateix veure i llegir en una pantalla d'ordinador, que en una tauleta o en un telèfon intel·ligent, el contingut s'ha d'adaptar per tal que l’experiència d’usuari sigui òptima en totes les circumstàncies.

Es tracte d'aconseguir que amb un sol disseny i un sol manteniment puguem mantenir totes les sortides. En termes professionals parlem de Responsive Web Design o disseny adaptatiu [Dues tècniques amb un resultat similar].

Us emplacem a conèixer aquest exemple fet amb wordweb i veureu com un web complex es pot adaptar, sense perdre qualitat, a tots els dispositius. www.portvellbcn.com

L'equip de wordweb

La solució per a la PIME 

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

Conceptes tranversals

Per fer un projecte global de presencia a Internet cal tenir en compte alguns aspectes que van més enllà de cada projecte concret comentats en aquesta sèrie sobre la botiga fictícia Bosses Barcelona. Destaquem els següents:

Aprofitament de les dades

L’objectiu de la presència les xarxes socials és nodrir una base de dades de contactes (convindrà donar-la d’alta segons la LOPD[1]). Aquesta base de dades ha de servir per fer publicitat dirigida.

Un dels usos habituals és l’enviament periòdic de butlletins digitals, que es poden gestionar des del mateix web.

Atenció al client/usuari

En el moment que obrim qualsevol dels projectes esmentats a la xarxa hem de ser conscients que hem obert un canal d’atenció amb les persones interessades, siguin clients o no. La resposta ràpida i clara serà un valor important de cara la nostra credibilitat.

Haurem d’aprendre a gestionar les crisis i els comentaris negatius oferint, si cal, una compensació abans que es generi un efecte bola de neu perjudicial per a la nostra credibilitat.

Estil i to

Cada canal demana un to concret, per exemple el to distès de les xarxes socials no és adequat per al web, però a la vegada cal tenir un estil que ens identifiqui sigui quin sigui el canal. Cal haver definit una estratègia de comunicació que tingui en compte tots els canals.

Idioma

Els idiomes faciliten el contacte amb diferents col·lectius. Quan més personalitzat millor (un alemany sempre preferirà ser tractat en alemany per molt bé que entengui l’anglès) però al mateix temps van fent més complexa la gestió i el manteniment i quan més personalitzat més complex es fa. Per tant incloure un nou idioma ha d’estar condicionat a poder-li donar la resposta adequada.

Si bé és cert que en el web ens en podem sortir amb una traducció, ja no és tant obvi que funcioni per un blog, i a Facebook en molts cassos no tindrà cap sentit, ja que els valors del diàleg i la conversa hauran de ser diferents, d’acord amb la cultura de cada país.

Els mitjans

No hem d’oblidar els mitjans, especialment els digitals. Sortir als mitjans ens posiciona de manera substancial i dóna credibilitat, en generar enllaços des dels mitjans cap al nostra web i Facebook.

En el món actual cal entendre per mitjans tant els tradicionals com els blogs i pàgines de referència del sector.

Sempre que hi hagi oportunitat s’enviarà una nota de premsa als mitjans, especialment als digitals, per tal d’anar guanyant la confiança dels redactors. (S’haurà d’anar buscant i mantenint les adreces de correu electrònic dels mitjans. A mesura que ens anem allunyant de l’entorn proper també caldrà ampliar la cerca a mitjans d’altres països).

Quan els tinguem mínimament “madurs” serà el moment de convidar-los a visitar, en el cas de BB, el taller. Convidar a visitar quelcom que tingui sentit acostuma a tenir molt bon ressò ja que és el model al que els redactors estan acostumats.

Publicitat

Tot i que els projectes no estan pensat per tes no ser diferents, d'ebook en molts cassos no tindrfinit una streategia de comunicacit d'ductes de laterno estan pensats per ser suportats per publicitat pagada, no s’ha de descartar que pugui ser necessària per a l’arrencada i per potenciar algunes campanyes concretes. Pensem especialment amb Adwords (la publicitat que apareix al costat dels cercadors), però sense descartar algun baner en algun espai web de referència.

També pot tenir sentit publicitat a Facebook, amb les històries patrocinades, que tenen un bon rendiment.

Dispositius

En el context actual el web i la botiga han de ser multi-dispositiu, és a dir, han d’estar resolts per veure’s bé tant en un ordinador com en una tauleta o telèfon intel·ligent. En el cas de BB, les característiques dels productes fan pensar que el telèfon no serà el canal preferit dels clients. Les estadístiques ho deixaran clar.

El web ha d’estar maquetat amb els criteris del Responsive Web Desing, que encara que impliquen un cost inicial més alt, garanteixen que amb un sol manteniment podem donar resposta a tots els dispositiu i, per tant, acaba essent molt més rendible. Wordweb està maquetat seguint aquests criteris multi-dispositiu.

Conclusions

Aquesta sèrie és una aproximació a un model de presència internet per a un comerç, però caldrà estudiar en cada cas què cal fer. Ara bé fem el què fem no pot ser de manera improvisada, cal definir, fer, analitzar i avaluar.

Si no ens podem donar aquest temps, per fer-ho ben fet, correm un risc molt alt de fracassar, de tenir aquella sensació d’haver perdut el temps i els diners.


L’equip de wordweb vol ser l’acompanyant dels petits i mitjans comerços en la seva travessia pel món digital.

La solució per a la PIME 

---

[1] LOPD = Ley Orgànica de Protección de Datos. Segons la naturalesa de les dades demana una tipus o altres de requisits. Una base de dades de contactes està en la gamma baixa de la protecció.