Augmenten els usuaris que accedeixen a Internet a través de tablets i telèfons mòbils. Això, com ja sabeu, fa que ja no només n'hi ha prou amb dissenyar una bona pà gina web que es vegi bé en el nostre ordinador: també s'ha de veure en cada dispositiu mòbil. ¿El problema? Diferents mides de pantalla i resolucions. Per això és tan complicat fer un disseny que s'adapti correctament a tots els mitjans (el famós disseny sensible, Traduït com disseny adaptatiu).
A continuació et donem uns consells a tenir en compte a l'hora de realitzar un disseny d'aquestes caracterÃstiques. ¡Fes atenció!
Consells per a un disseny adaptatiu
- Fes una plantilla simpleAmb simple no em refereixo a sosa. Estic parlant de la estructura HTML del teu lloc web: com més clara sigui, millor. Tingues en compte que en una pantalla d'ordinador et poden cabre tres columnes verticals; a la pantalla d'un mòbil, només et cabrà un. Pensa en això i en com recolocarás els elements.
- Elimina tot el innecessariEvita els efectes jQuery, animacions en Flash i qualsevol altre codi que alenteixi la cà rrega de la teva pà gina. Com menys contingut d'aquest tipus tinguis, més rà pida serà la cà rrega del web.
- Defineix un estil css per cada "mida"Crear un tiny.css, small.css i big.css (per exemple) que s'executi en funció de el dispositiu sobre el qual es vegi. Per exemple:
@import url (tiny.css) (min-width: 300px);
@import url (small.css) (min-width: 600px);
@import url (big.css) (min-width: 900px);
- Les resolucions més usades320px / 480px / 720px / 768px / 900px / 1024px
- Fes la teva plantilla FLEXIBLESempre que puguis, treballa amb percentatges en lloc de quantitats fixes. A continuació unes equivalències de referència: 200px = 15'38% / 300px = 23'07% / 800px = 61'5384615384%
- la tipografia és més important que nuncaEn ocasions, la pantalla d'el dispositiu pot ser tan petita que l'únic que es vegi en ella sigui text. Per això hem de seleccionar amb molt de compte les millors tipografies del nostre lloc, perquè a l'quedar reduït la seva mida no perdin llegibilitat. A més, hem de saber combinar fonts més neutres amb altres amb personalitat que li donin el carà cter necessari a la web. Per tant, el primer consell és que li dediquis temps a seleccionar les tipografies que vas a utilitzar.
- EUA imatges d'alta qualitatA l'reduir-se el espai, les imatges l'acompanyaran. Selecciona aquelles que no perdin qualitat a l'veure reduïdes, i que funcionin igual a l'escalar-les. Una imatge de baixa qualitat donarà un pèssim aspecte al teu lloc web.
- Que els teus imatges es vegin sempre a el completEvita que se't tallin les fotografies afegint el codi img (width: 100%;) en el teu css. D'aquesta manera li estàs indicant a el dispositiu que recalculi l'alçada que ha de donar-li a la imatge perquè es vegi el seu ample a el cent per cent.
- tot sota una mateixa URLOblida't dels subdominis de l'tipus www.misitio.com/movil, ja que un mateix arxiu index.html a la carpeta arrel servirà per a tots els dispositius (si fas correctament el disseny adaptatiu). Ja coneixes l'avantatge: com menys subdominis, més rà pida serà la cà rrega de la pà gina.
- Aprofita els suports: Sé imaginativoNo és el mateix accedir a una web des d'un ordinador de taula que des d'un iPad o un telèfon mòbil. Amb el primer, navegaràs de forma reposada i calmada. Amb els últims, ho faràs en hores mortes i tancaràs la finestra tan aviat t'avorreixis. Aprofita aquestes condicions per entretenir l'usuari i fer que es diverteixi en aquests pocs minuts que et dedicarà . Potser quan arribi a casa decideixi tornar a visitar-te de forma més relaxada.
- Inspira't en les publicacions digitalesTe preguntarà s el perquè d'aquest consell. Molt fà cil: les revistes digitals (Bones) saben aprofitar el suport i el seu disseny és molt intel·ligent. Inspira't-hi i fes un lloc web de què sigui difÃcil anar-se'n.
Més informació - Les revistes digitals
font - splio, 960.gs, columnal