Aquí la traducció via Google Translate d’aquesta última pàgina:
9 principis bàsics de
disseny de pàgines web responsive
El disseny web responsive és una gran solució al nostre problema multi-pantalla, però entrar-hi des de la perspectiva d’impressió és difícil. Sense mida de pàgina fixa, no hi ha mil·límetres o polzades, no hi ha limitacions físiques per lluitar-hi en contra. Dissenyar en píxels per Desktop i Mobile forma part del passat, a mesura que més i més gadgets poden obrir una pàgina web. Per tant, anem a aclarir alguns dels principis bàsics del disseny web responsive aquí per entendre la web adaptable, en lloc de lluitar-hi en contra. Per fer-ho simple ens centrarem en els dissenys (sí, responsive va molt més enllà que això i si en voleu aprendre més, aquest és un bon començament).
1.- Responsive vs disseny web adaptatiu
Pot semblar el mateix, però no ho és. Tots dos enfocaments es complementen entre sí, per la qual cosa no hi ha una manera correcta o incorrecta de fer-ho. Deixeu que el contingut ho decideixi.
2.- El fluxe (flow)
Com les mides de pantalla es fan més petits, el contingut comença a ocupar un espai més vertical i res per sota serà empès cap avall, es diu el fluxe. Això pot ser difícil d’entendre si estàs acostumat a dissenyar amb píxels i punts, però té tot el sentit quan un s’hi acostuma.
3.- Les unitats relatives
El llenç pot ser un ordinador d’escriptori, pantalla del mòbil o qualsevol altra cosa. La densitat de píxels també pot variar, per la qual cosa necessitem unitats que siguin flexibles i treballen a tot arreu. Aquí és on les unitats relatives com els percentatges són útils. Així que fer alguna cosa 50% d’ample vol dir que sempre tindrà la meitat de la pantalla (o finestra, que és la mida de la finestra del navegador oberta).
4.- Els punts d’interrupció (breakpoint)
Els punts d’interrupció permeten la disposició per canviar punts predefinits, per exemple, si té 3 columnes en un escriptori, però només 1 columna en un dispositiu mòbil. La majoria de les propietats CSS es poden canviar des d’un punt d’interrupció a un altre. En general, quan se’n posa un depèn del contingut. Si hi ha un final de texte, potser s’hi haurà de afegir un punt d’interrupció. Però cal usar-los amb precaució, doncs pot causar problemes amb la rapidesa quan és difícil d’entendre el que està influint en el que passi.
5.- Valors màxim i mínim
De vegades el contingut ocupa tot l’ample de la pantalla i és més gran que aquesta, com en un dispositiu mòbil, però tenir el mateix contingut que s’estén a tota l’amplada de la pantalla sovint té menys sentit. Aquesta és la raó perquè els valors Min / Max ajuden. Per exemple que té una amplada de 100 % i l’amplada màxima de 1.000 px significaria que el contingut va a omplir la pantalla, però no anar més de 1.000 px.
6.- Objectes niats (nested objects)
Recordeu la posició relativa? Tenir una gran quantitat d’elements en funció de si seria difícil de controlar, per tant, elements d’embalatge en un contenidor que manté de forma més comprensible, net i ordenat. Aquí és on les unitats estàtiques com els píxels poden ajudar. Són útils per al contingut que no ha d’anar a escala, com logotips i botons.
7.- Mòbil o d’escriptori primer
Tècnicament no hi ha molta diferència si un projecte s’inicia a partir d’una pantalla més petita a una més gran (mòbil primer) o viceversa (d’escriptori primer). No obstant això, afegeix limitacions addicionals i ajuda a prendre decisions si comencem amb el mòbil per primera vegada. Sovint, la gent comença a partir d’ambdós extrems a la vegada, així que realment, cal provar-ho i veure què ens funciona millor.
8.- Tipografies web vs. tipografies del sistema
Volem tenir un aspecte atractiu Futura o Didot a la pàgina web? Utilitzeu TypeDNA Font Manager! Tot i que es veurà impressionant, recordeu que cada tipografia s’haurà de descarregar i com més n’hi hagin més temps es trigarà a carregar la pàgina. Les fonts del sistema, d’altra banda van a la velocitat del llamp, excepte quan l’usuari no treballa a nivell local i es recorrerà a una font per defecte.
9.- Imatges en mapa de bits vs. vectors
Les vostres icones tenen molts detalls i alguns efectes fantàstics? En cas afirmatiu, utilitzeu un mapa de bits. Si no, considereu l’ús d’un vector d’imatge. Per a mapes de bits utilitzeu un JPG, PNG o GIF, per als vectors la millor opció seria un SVG o una icona de tipografia. Cadascun té alguns avantatges i alguns inconvenients. No obstant això, tinguem en compte la mida. Si no hi ha fotografies han d’anar en línia sense optimització. Els vectors per contra sovint són petits, però alguns navegadors antics no li donaran suport. A més, si hi han moltes corbes podria ser més pesat que un mapa de bits, així que cal triar sàviament.
Cap comentari:
Publica un comentari a l'entrada