Designs de página para paisagem e retrato Visualizações
Quando você liga um iPhone ou iPad, a orientação de uma página web ajusta automaticamente em conformidade. O navegador web Safari amplia inteligente (ou reduz) páginas para caber na tela, mas não é perfeito. Mesmo se o Safari pode fazer suas páginas caber no espaço bem no geral, seus projetos podem sofrer porque:
Quando a página é ampliada para se ajustar o modo paisagem em um iPad, imagens otimizadas pode ficar embaçada.
Reduzir o tamanho das páginas pode tornar o texto impossível de ler.
Durante anos, a maioria das pessoas têm otimizado largura e altura 'páginas da web para os monitores de computador mais comumente utilizados:
Largura: Nos primeiros dias da web, usando essa estratégia significava que você criou desenhos que eram não mais do que 780 pixels de largura para que eles se encaixam dentro de uma resolução do monitor definido para 800 x 600 pixels. A maioria das pessoas escolheu 780 pixels, porque essa configuração deixou um pouco espaço para a barra de rolagem em cada lado da janela do navegador.
Em anos mais recentes, como monitores maiores se tornaram mais acessíveis e mais amplamente utilizado, a maioria dos web designers atualizou o tamanho do alvo de 960 para 980 pixels, que se encaixa confortavelmente em monitores com uma resolução de 1024 x 768 pixels.
Altura: Embora a maioria dos designers concordam com a largura de um design otimizado para estes tamanhos de tela (dar ou tomar 10 ou 20 pixels), um debate tem sido travado sobre se designs de página web deve caber a uma altura destes projetos.
A teoria por trás limitar a altura de páginas da web é baseada em estudos que sugerem que os usuários não gostam de rolar para baixo uma página e que qualquer conteúdo que não é visível quando a página é carregada pela primeira vez é ignorado. Possivelmente rolagem tem obtido um mau rap ao longo dos anos. É hora de abandonar a noção de que projetos web nunca deve exceder 600 pixels para baixo uma página.
Esta figura ilustra por que o iPad mudou para sempre o debate sobre quanto tempo uma página web deve ser. Aqui você vê uma imagem da tela do site direto do ING como ele aparece em um iPad no modo retrato. Para ser justo com os projetistas da ING Direct, o site se encaixa confortavelmente dentro das limitações de um monitor com uma resolução de 800 x 600 pixels.
Ao limitar o conteúdo do site para o corte de 600 pixel, no entanto, o projeto ocupa apenas cerca de um terço da tela do iPad no modo retrato. Mesmo no modo paisagem no iPad, o projeto não ocupar o espaço vertical, em vez de encher o quarto inferior da tela com a cor de fundo laranja brilhante.
Se você quiser criar apenas um projeto para um web site, a sua melhor aposta é a de projetar suas páginas para ser 980 pixels de largura e, em seguida, estendê-los, pelo menos, 980 pixels para baixo na tela. Se você fizer isso, tanto o iPad eo iPhone automaticamente ajustar o projeto para preencher a tela nos modos retrato e paisagem, ajustando o tamanho para caber.
No entanto, se você realmente se preocupam com projeto e querem suas páginas para olhar seu melhor no iPad e iPhone, a sua melhor aposta é a criação de dois modelos diferentes.
As regras para Cascading Style Sheets (CSS) incluem a opção de criar várias folhas de estilo para melhor aproveitar o tamanho e as características de cada dispositivo. Por exemplo, você pode criar estilos direcionados para a orientação paisagem ou retrato do iPhone ou iPad (como no desenho mostrado aqui).
Da mesma forma, você pode direcionar diferentes dispositivos com diferentes folhas de estilo, criando um conjunto de estilos para uma página quando ela é exibida em um computador desktop e um conjunto diferente de estilos quando a página é enviada para uma impressora.