El disseny adaptatiu (responsive design)

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

1. 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.
2. 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.
3. 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);

4. Les resolucions més usades320px / 480px / 720px / 768px / 900px / 1024px
5. 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%
6. 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.
7. 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.
8. 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.
9. 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.
10. 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.
11. 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