Les nostres xarxes socials

Newsletter

Vols rebre les ˙ltimes novetats de Montaweb?

Subscriu-te a la nostra Newsletter.

Enviar

Les nostres xarxes socials


El més llegit

  1. 1Errores al promocionar un post de Instagram

El més comentat

  1. 3Què és un troll i com controlem el seu atac a les xarxes socials d'una empresa
  2. 2Els quatre components del marketing online
  3. 1Claus per a l'estratègia de Posicionament web SEO empresarial
  4. 110 tendències en e-commerce per al 2017
  5. 1LA TIENDA TOP MODEL, disseny fashion i SEO a la botiga online de Top Model

Categories

BlogVeure més

BlogBlog

tornar
  • 1
  • Març
  • 2017

La importància del disseny web responsive per a cada dispositiu

Publicat per Natàlia (català) en Disseny web comentar
Disseny responsive

Al Mobile World Congress, que aquesta setmana es celebra a Barcelona, ​​podem veure dispositius cada vegada més lleugers, entre els quals destaquen els smartphones i les tablets. Aquesta tendència explica el significatiu descens en la venda d'ordinadors (portàtils i de sobretaula), que va caure un 11,8% el 2016, passant de 3.636 milions d'unitats venudes a 3.244.

 

Naveguem cada vegada més en dispositius mòbils i això ens obliga a dissenyar pàgines web i botigues online responsive, que s'adaptin a les particularitats de cada suport.

 

Com ho aconseguim de la manera més pràctica i professional?

A Montaweb sabem que Google premia, des de fa uns anys, als webs que han sabut optimitzar el seu disseny per adaptar-se als dispositius mòbils. Però anem encara més enllà, ja que pensem que no és únicament una qüestió "d’adaptar visualment" a una pantalla més petita, sinó que una pàgina web o una e-commerce han de tenir un disseny web diferent per a cada dispositiu.

 

En aquest sentit, partim d'una premissa clau: cada pantalla té un "llenguatge" particular, per la qual cosa dissenyem la versió web per a ordinadors, d'una banda, i la versió web per a dispositius mòbils, de l'altra, de forma independent.

 

En aquest procés de disseny web responsive, tenim en compte factors visuals, perquè les pàgines web i botigues online siguin atractives per als seus visitants. També prestem atenció a criteris d'usabilitat web, per determinar de quina manera els visitants del web o de la webshop poden satisfer d'una manera fàcil, ràpida i molt intuïtiva el seu objectiu en el site (buscar informació, comprar, registrar, descarregar-se un arxiu, etc.).

Com sabem si un web és responsive? Molt senzill. Només hem d'augmentar o reduir la mida de la finestra des del navegador de l'ordinador i observar si el contingut de la pàgina web o de la botiga online s'adapta o es reubica.

 

Per entendre millor el nostre treball de disseny web independent per a la versió de sobretaula i per a la dels dispositiu mòbils, res millor que un exemple visual.

 

Es tracta de la pàgina web corporativa de Brillantbarcelona.com, una botiga multimarca d'alta bijuteria i línies prêt-à-porter.

 

En primer lloc veiem la versió per a dispositiu mòbil de la pàgina principal del web; a sota veiem el disseny de la versió per a ordinador. A continuació expliquem les principals característiques dels dos dissenys:

 

Disseny web per a Brillant Barcelona

 

1- Menú:

En la versió mòbil, el disseny del menú web es simplifica a: logo, icones de les xarxes socials i selecció de l'idioma. Les tres barres de l'esquerra indiquen un menú desplegable des del qual es pot accedir a les diferents seccions de la pàgina web.

En la versió de sobretaula el menú presenta el logotip de la marca al costat de les seccions visibles en una barra superior, amb les icones de les xarxes socials, el telèfon de contacte i la selecció de l'idioma de la pàgina.

 

2- Banner web i accessos directes principals:

En ambdues versions s'ha dissenyat un banner web principal, amb tres imatges que van passant i tres títols superposats. Cada imatge enllaça amb una secció de la web (opció auto administrable).

Els tres accessos directes principals "Localització i horari", "La nostra botiga" i "Brillant 's Collection" també són iguals a la versió mòbil i a la d’ordinador de sobretaula.

 

3- Accessos directes productes i seccions

En la versió mòbil les imatges d'aquests accessos directes es desplacen a l'esquerra i els títols de les seccions enllaçades queden a la dreta. Els diferents accessos es presenten un a sobre de l'altre.

En el disseny de sobretaula es presenten els tres accessos directes en una única filera.

 

4- Menú inferior (només versió mòbil)

En la versió mòbil de la pàgina inicial es presenta el menú principal a sota dels accessos directes. Aquesta vegada es presenta amb les seves cinc seccions visibles. Aquesta opció de disseny fa visible el menú, que quedava més amagat a la barra superior.

 

5- Peu de pàgina web

En la versió mòbil les tres informacions del peu de pàgina web (la de contacte, l'accés a les xarxes socials i el camp per subscriure’s a la newsletter de l'empresa) es presenten una a sobre de l'altra.

En la versió de sobretaula aquestes informacions es presenten una al costat de l'altra en la mateixa línia visual.

 

Una de les particularitats del sistema de programació propi que portem a terme en Montaweb, i que gairebé ningú ofereix, és la possibilitat de posar diferents imatges per a un mateix espai al web per a la versió de sobretaula i per a la versió mòbil.

 

Un exemple molt pràctic seria l'adaptació d'una infografia web amb molt de contingut per a la versió web mòbil, que compta amb un espai molt més limitat. El sistema ens permet posar una infografia més simplificada, que expliqui els aspectes més importants, per a la versió mòbil.

 

Aquest sistema permet adaptar, encara més, el contingut web a cada dispositiu per assegurar la millor navegació web per als visitants.

Categories: Disseny web

Deixi'ns el seu comentari

Ens encantaria conèixer la seva opinió. Si us plau, procuri que els seus comentaris estiguin relacionats amb aquesta entrada. Respecteu també als altres lectors d'aquest blog. Els comentaris off-topic, promocionals, ofensius o ilĽlegals seran editats i esborrats.

 

Enviar comentari
*Camp obligatori
Informació legal
x

Empresa: MONTAWEB SL

NIF: B-64982762

Direcció: Pl. de l'└ngel 15, 2n 2a 08202 - Sabadell - Barcelona

Telèfon: 93 727 50 56

e-mail: info@montaweb.com

 

[...]
Carregant...
[...]
Carregant...

Accés Àrea de Clients

  • Contrasenya*
  • ¿Ha oblidat la contrasenya?
  • >Entrada Àrea de Clients