Hoje em dia existem vários tipos de monitores e com resoluções variadas. Por exemplo, você cria um site, com um serviço extremamente útil, para tela com resolução de 1024px ou superior, com muito conteúdo, imagens grandes e etc. E que recebe uma média de 20 mil visitas diárias.
Com o tempo você descobre que, 20% ~ 30% dos usuários utilizam resolução 800 x 600 e que alguns ainda utilizam a resolução 640 x 480. Com certeza o seu site terá uma taxa de rejeição relativamente alta, pois a experiência dos usuários não está agradável tanto quanto deveria.
Para tentar resolver este problema, listamos abaixo um código que pega via JavaScript a resolução da tela e altera o CSS da tela, assim você pode criar dois CSS, um para cada tipo de resolução:
Ps: Vale lembrar que, aplicando técnicas Tableless, podemos criar um Layout fluído que se adapte em qualquer resolução, sem a necessidade de usar JavaScript e folhas de estilos diferentes para isso. O que vamos mostrar aqui, é apenas uma dica e uma das formas. Mas o mais recomendado é: Refazer o layout aplicando técnicas Tableless.
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ /><title>Detectando Resolução da tela</title>
<link rel=”stylesheet” href=”geral.css” type=”text/css” media=”screen” />
<script type=”text/javascript” language=”javascript”>
if (screen.width >= "1024") {
document.write('<link rel=”stylesheet” href=”geral.css” type=”text/css” />')
}
else {
document.write('<link rel=”stylesheet” href=”auxiliar.css” type=”text/css” />')
}
</script>
</head>
<body>
...
</body>
</html>Então a dica é: Esteja sempre atento ao seu público alvo. O Google Analytics fornece características dos seus visitantes, a partir disso, você pode trabalhar em uma estratégia, oferecendo uma navegação amigável a eles.
Fonte: Conteúdo intertextualizado a partir do artigo de: Felipe Torquato – Código Fonte
Tags: Dicas