Página Designs para Landscape and Portrait Views - dummies

Quando você liga um iPhone ou iPad, a orientação de uma página da Web se ajusta automaticamente de acordo. O navegador da Web do Safari amplia inteligentemente (ou reduz) páginas da web para se ajustarem à tela, mas não é perfeito. Mesmo que o Safari possa tornar suas páginas adequadas ao espaço em geral, seus projetos podem sofrer porque:

• Quando a página é ampliada para se adequar ao modo paisagem em um iPad, imagens otimizadas podem ficar embaçadas.

• Reduzir o tamanho das páginas pode tornar o texto impossível de ler.

Por anos, a maioria das pessoas tem otimização da largura e altura das páginas da web para os monitores de computador mais usados:

• Largura: Nos primeiros dias da web, usar essa estratégia significava que você criou projetos que eram não tem mais de 780 pixels de largura, de modo que cabem dentro de uma resolução de monitor configurada para 800 x 600 pixels. A maioria das pessoas escolheu 780 pixels porque essa configuração deixou um pequeno espaço para a barra de rolagem em cada lado da janela do navegador.

  Nos anos mais recentes, como monitores maiores se tornaram mais acessíveis e mais amplamente utilizados, a maioria dos web designers atualizou o tamanho do alvo de 960 a 980 pixels, o que se encaixa confortavelmente em monitores com uma resolução de 1024 x 768 pixels.

• Altura: Embora a maioria dos designers concordem com a largura de um design otimizado para esses tamanhos de tela (dê ou pegue 10 ou 20 pixels), um debate enfureceu se os projetos de páginas web devem caber no auge desses projetos.

  A teoria de limitar a altura das páginas da web baseia-se em estudos que sugerem que os usuários não gostam de se deslocar para baixo em uma página e que qualquer conteúdo que não seja visível quando a primeira página é carregada é ignorada. Possivelmente, a rolagem conseguiu um mau golpe ao longo dos anos. É hora de abandonar a noção de que os designs web nunca devem estender mais de 600 pixels em uma página.

Esta figura ilustra por que o iPad mudou para sempre o debate sobre quanto tempo uma página da web deve ser. Aqui você vê uma captura de tela do site ING Direct tal como aparece em um iPad no modo retrato. De forma justa para os designers da ING Direct, o site se encaixa confortavelmente dentro das restrições de um monitor com uma resolução de 800 x 600 pixels.

Ao limitar o conteúdo do site ao ponto de corte de 600 pixels, no entanto, o design ocupa apenas cerca de um terço da tela do iPad no modo retrato. Mesmo no modo paisagem no iPad, o design não ocupa o espaço vertical, em vez disso, enche o quarto inferior da tela com a cor de fundo laranja brilhante.

Se você quiser criar apenas um design para um site, sua melhor aposta é projetar suas páginas para ter 980 pixels de largura e, em seguida, estendê-las pelo menos 980 pixels na tela.Se você fizer isso, tanto o iPad quanto o iPhone ajustam automaticamente o design para preencher a tela nos modos paisagem e retrato ajustando o tamanho para caber.

No entanto, se você realmente se preocupa com o design e deseja que suas páginas sejam as melhores do iPad e iPhone, a sua melhor opção é criar dois projetos diferentes.

As regras para Cascading Style Sheets (CSS) incluem a opção para criar várias folhas de estilo para melhor aproveitar o tamanho e os recursos de cada dispositivo. Por exemplo, você pode criar estilos direcionados à orientação horizontal ou vertical do iPhone ou iPad (como no design mostrado aqui).

Da mesma forma, você pode segmentar diferentes dispositivos com diferentes folhas de estilo, criando um conjunto de estilos para uma página quando ele é exibido em um computador desktop e um conjunto diferente de estilos quando a página é enviada para uma impressora.