Criar desenhos da Web específicos para iPhone e iPad

Se você deseja otimizar suas páginas para olhar seu melhor, é preciso considerar as diferenças de tamanho de tela e resolução entre o iPhone e iPad. Observe o diagrama simplificado, que ilustra uma forma comum designers de alterar as suas páginas para cada dispositivo: ordenando o esquema para o melhor ajuste sobre os diferentes tamanhos de tela.

Simplificar seus projetos para a tela menor do iPhone

No iPad, mostrado no lado esquerdo da figura, você vê muito espaço para uma segunda coluna para que os apartes pode ser alinhado à direita do artigo. No lado direito da figura, você vê que a melhor prática é limitar o seu projeto para uma coluna sobre as pequenas iPhone e iPod touch screens.

Se você olhar para a figura e pensar, # 147 Espere um minuto - o iPad está no modo paisagem e do iPhone está no modo retrato, e que faz uma grande diferença, # 148- você está certo.

Agora confira esta figura para ver como o site da American Airlines usa apenas uma coluna para o projeto iPhone, mesmo no modo paisagem, e utiliza várias colunas no iPad, mesmo quando está no modo retrato.

Repare no iPhone que a equipe American Airlines mudou não só o design, mas também a informação que é apresentada, focando os elementos com maior probabilidade de ser importante para uma pessoa em movimento, incluindo fácil de vôo check-ins.

Visualizar vários designs em Dreamweaver

Se você usar o Adobe Dreamweaver, certifique-se de obter o Dreamweaver HTML5 Pack. Esta extensão está incluída nas atualizações Dreamweaver CS5 e versões posteriores e pode ser adicionado como uma extensão para o Dreamweaver versões 3 e 4. Como você pode ver neste exemplo, a extensão HTML5 permite visualizar facilmente três versões diferentes de suas folhas de estilo em um tempo exibindo cada um em uma seção separada da tela.

O Dreamweaver HTML5 Pack para o Dreamweaver CS3 e CS4 é uma maneira útil para verificar rapidamente seus projetos para ver como diferentes folhas de estilo CSS afetá-los, mas ele não suporta todas as variações de HTML5 e CSS 3 ainda. Também estar ciente de que o limitado # 147 imobiliário # 148- na proporção vertical destas previews torna difícil garantir que você está usando todo o espaço disponível no modo retrato.

Para usar o Adobe Dreamweaver para ver um blog criado com WordPress, como a mostrada no exemplo, você precisa configurar o computador como um servidor web - um processo que não é tão difícil quanto você possa imaginar. Você pode encontrar instruções detalhadas para fazer Dreamweaver e trabalhar WordPress no seu computador desktop.