O primeiro que a maioría dos deseñadores consideran á hora de construír a súa páxina web é a resolución para deseñar. O que realmente supón é decidir o tamaño do seu deseño. Non existe tal cousa máis que un ancho estándar do sitio web.
Por que considerar a resolución
En 1995, os monitores de resolución estándar de 640x480 foron os monitores máis grandes e mellores dispoñibles. Isto fixo que os diseñadores web centráronse en facer páxinas que parecían bos en navegadores web maximizadas nun monitor de 12 polgadas a 14 polgadas a esa resolución.
Nestes días, a resolución de 640x480 representa menos do 1% da maioría do tráfico do sitio web. As persoas usan computadoras con resolucións moito maiores, incluíndo 1366x768, 1600x900 e 5120x2880. En moitos casos funciona o deseño para unha pantalla de resolución de 1366x768.
Estamos nun momento da historia do deseño web onde non debemos preocuparnos moito pola resolución. A maioría das persoas teñen monitores de pantalla grande e grandes, e non maximizan a xanela do seu navegador. Entón, se decidiu deseñar unha páxina que non teña máis de 1366 píxeles de ancho, a súa páxina probablemente se ve ben na maioría das fiestras do navegador incluso en grandes monitores con maiores resolucións.
Ancho do navegador
Antes de que saias a pensar "estou de acordo, faré as miñas páxinas de 1366 píxeles de ancho", hai máis para esta historia. Un problema frecuentemente ignorado cando se decide o ancho dunha páxina web é o grande que os seus clientes manteñen os seus navegadores. En concreto, ¿maximizan os seus navegadores cun tamaño de pantalla completa ou os mantén máis pequenos que a pantalla completa?
Nunha enquisa informal de compañeiros de traballo que todos usaron un portátil de resolución estándar de 1024x768, dúas empresas tiñan todas as aplicacións maximizadas. O resto tiña fiestras de diferentes tamaños abertas por varias razóns. Isto ilustra que se está a deseñar a intranet desta empresa con 1024 píxeles de ancho, o 85% dos usuarios tería que desprazarse horizontalmente para ver a páxina completa.
Despois de ter en conta os clientes que maximizan ou non, pensa nos bordos do navegador. Cada navegador web ten unha barra de desprazamento e bordos nos lados que reducen o espazo dispoñible de 800 a aproximadamente 740 píxeles ou menos en resolución de 800x600 e preto de 980 píxeles en fiestras maximizadas a 1024x768 resolucións. Este chámase navegador "chrome" e pode aproveitar o espazo útil para o deseño da páxina.
Páxinas de ancho fixo ou líquido
O ancho numérico real non é o único que debes pensar ao deseñar o ancho do teu sitio web. Tamén cómpre decidir se terá un ancho fixo ou un ancho de líquido . Noutras palabras, vai establecer o ancho a un número específico (fixo) ou a unha porcentaxe (líquido)?
Ancho fixo
As páxinas de ancho fixado son exactamente como soan. O ancho fíxase nun número específico e non cambia sen importar o tamaño ou o tamaño do navegador. Isto pode ser bo se necesitas que o teu deseño pareza exactamente igual sen importar o ancho ou estreito dos navegadores dos lectores, pero este método non ten en conta os teus lectores. As persoas con navegadores máis estreitas que o teu deseño terán que percorrer horizontalmente e as persoas con navegadores amplos terán grandes cantidades de espazo baleiro na pantalla.
Para crear páxinas de ancho fixo, simplemente use números de píxeles específicos para o ancho das divisións de páxina.
Ancho líquido
As páxinas de ancho líquido (ás veces chamadas páxinas de ancho flexíbel) varían de ancho dependendo da súa amplitude. Isto permítelle deseñar páxinas que se centren máis nos seus clientes. O problema coas páxinas de ancho de líquido é que poden ser difíciles de ler. Se a lonxitude de escaneo dunha liña de texto ten máis de 10 a 12 palabras ou menos de 4 a 5 palabras, pode ser difícil de ler. Isto significa que os lectores con fiestras de navegador grandes ou pequenas teñen problemas.
Para crear páxinas de ancho flexible, simplemente use porcentaxes ou ems para o ancho das divisións de páxina. Tamén debería familiarizarse coa propiedade de ancho max CSS. Esta propiedade permítelle definir un ancho en porcentaxes, pero limítelo de xeito que non sexa tan grande que a xente non poida le-lo.
E o ganador é: CSS Media Queries
A mellor solución nestes días é usar consultas mediáticas CSS e deseño sensible para crear unha páxina que axuste ao ancho do navegador que o vexa. Un deseño web sensible usa o mesmo contido para crear unha páxina web que funcione se a ves en 5120 píxeles de ancho ou 320 píxeles de ancho. As páxinas de distintas dimensións son diferentes, pero conteñen o mesmo contido. Coa consulta de medios en CSS3, cada dispositivo receptor responde a consulta co seu tamaño e a folla de estilo axústase a ese tamaño específico.