El primer que la majoria dels dissenyadors consideren quan construeix la seva pàgina web és la resolució per dissenyar. El que això suposa és decidir quina amplitud hauria de ser el vostre disseny. Ja no hi ha tal cosa com un ample del lloc web estàndard.
Per què considerar la resolució
El 1995, els monitors de resolució estàndard de 640x480 eren els millors i millors monitors disponibles. Això va significar que els dissenyadors web es van centrar a fer que les pàgines que semblaven bones als navegadors web es maximitzessin en un monitor de 12 polzades a 14 polzades a aquesta resolució.
En aquests dies, la resolució de 640x480 representa menys de l'1 per cent de la majoria del trànsit del lloc web. La gent utilitza ordinadors amb resolucions molt més altes que inclouen 1366x768, 1600x900 i 5120x2880. En molts casos funciona el disseny d'una pantalla de resolució de 1366x768.
Estem en un moment de la història del disseny web on no ens hem de preocupar gaire per la resolució. La majoria de la gent té grans monitors de pantalla ampla i no maximitza la finestra del navegador. Així, si decideix dissenyar una pàgina que no té més de 1366 píxels d'amplada, probablement la vostra pàgina es veurà bé a la majoria de les finestres del navegador, fins i tot en monitors grans amb resolucions més altes.
Amplada del navegador
Abans de deixar de pensar "està bé, faré que les meves pàgines siguin de 1366 píxels d'amplada", hi ha més en aquesta història. Un problema sovint passat per alt a l'hora de decidir l'amplada d'una pàgina web és la gran quantitat de clients que mantenen els seus navegadors. Concretament, ¿maximitzen els seus navegadors a una mida de pantalla completa o els mantenen més petits que la pantalla completa?
En una enquesta informal de companys de treball que tots utilitzaven un ordinador portàtil de resolució estàndard de 1024x768, es van maximitzar totes les aplicacions. La resta tenia finestres de diferents dimensions obertes per diversos motius. Això demostra que si dissenyeu la intranet d'aquesta empresa amb 1024 píxels d'amplada, el 85 per cent dels usuaris haurien de desplaçar-se horitzontalment per veure la pàgina sencera.
Després de comptar amb els clients que maximitzen o no, pensa en les vores del navegador. Cada navegador web té una barra de desplaçament i voreja els costats que redueixen l'espai disponible de 800 a uns 740 píxels o menys en resolucions de 800x600 i al voltant de 980 píxels en finestres màximes a 1024x768 resolucions. Això s'anomena navegador "chrome" i pot llevar-lo de l'espai útil per al disseny de la pàgina.
Pàgines d'ample fix o líquid
L'amplada numèrica real no és l'únic que cal pensar quan dissenyeu l'amplada del vostre lloc web. També heu de decidir si tindreu un ample fix o ample de líquid . En altres paraules, va a establir l'amplada a un número específic (fixat) o a un percentatge (líquid)?
Ample fix
Les pàgines d'amplada fixa són exactament igual que els sons. L'ample es fixa en un nombre específic i no canvia, independentment del gran o petit que sigui el navegador. Això pot ser bo si necessiteu que el vostre disseny sigui exactament igual, no importa l'ample o reduït dels navegadors dels lectors, però aquest mètode no té en compte els vostres lectors. Les persones amb navegadors més estretes que el disseny hauran de desplaçar-se horitzontalment i les persones amb navegadors amplis tindran grans quantitats d'espai buit a la pantalla.
Per crear pàgines d'amplada fixa, simplement utilitzeu números de píxels específics per a l'amplada de les divisions de pàgina.
Ample líquid
Les pàgines d'amplada de líquid (de vegades anomenades pàgines d'amplada flexible) varien segons l'ample de la finestra del navegador. Això us permet dissenyar pàgines que se centren més en els vostres clients. El problema amb les pàgines d'amplada de líquid és que poden ser difícils de llegir. Si la longitud d' escaneig d'una línia de text té més de 10 a 12 paraules o menys de 4 a 5 paraules, pot ser difícil de llegir. Això significa que els lectors amb finestres grans o petites del navegador tenen problemes.
Per crear pàgines d'amplada flexibles, simplement utilitzeu percentatges o ems per a l'amplada de les divisions de pàgina. També heu de familiaritzar-vos amb la propietat CSS max-width. Aquesta propietat us permet establir un ample en percentatges, però després limitar-lo perquè no sigui tan gran que la gent no pugui llegir-la.
I el guanyador és: consultes de mitjans CSS
La millor solució en aquests dies és utilitzar consultes multimèdia CSS i disseny de resposta per crear una pàgina que s'ajusti a l'amplada del navegador que la visualitza. Un disseny web sensible utilitza el mateix contingut per crear una pàgina web que funcioni si la visualitzeu a 5120 píxels d'ample o 320 píxels d'amplada. Les pàgines de diferents dimensions són diferents, però contenen el mateix contingut. Amb la consulta de mitjans a CSS3, cada dispositiu receptor contesta la consulta amb la seva mida i el full d'estils s'ajusta a aquesta mida en particular.