iPhone & iPad Web Design For Dummies

As pessoas agora ver páginas da web em tudo, desde pequenas telas de celulares para projetores que iluminam o lado de um celeiro. Os constrangimentos que enfrentam em web design móvel para a tela do iPhone pequena pode sentir como pintar ovos de Páscoa em uma camisa de força. E até mesmo profissionais experientes encontrar design de websites móveis que ficam bem em telas de todos os tamanhos e dimensões desafiador - até mesmo na tela do iPhone da aparência lisa.

Um dos aspectos mais interessantes de criação de sites para o iPhone, iPad e iPod touch é que eles oferecem-lhe a oportunidade de repensar completamente como você projeta para o Internet.

O design é altamente subjetivo - ou você ama rosa ou você odeia isso e provavelmente não há muito que possamos fazer para mudar sua mente. Mas, além das opções de cores e preferências de fonte (que deixam até você), aqui estão duas abordagens para web design móvel para o iPhone e iPad:

  • Criar vários projetos para exibição ideal no iPhone, iPad e iPod touch. Esta estratégia permite que você faça o melhor uso da tela seja em modo retrato ou paisagem. Você também pode tirar proveito da tela do iPad maior ao furar com um design de coluna única que funciona melhor no iPhone e iPod touch. Criação de todos esses projetos é, naturalmente, mais trabalho intensivo do que criar uma página web ou página da web móvel. Se o seu público utiliza dispositivos móveis como o iPhone e iPad para visitar seu site, no entanto, o trabalho vale a pena o esforço.

  • Projetando um layout de página flexível que pode adaptar-se às diferenças de tamanho de um iPhone, iPad, e até mesmo laptops e os monitores as pessoas ainda manter em suas mesas. Se você escolher esta estratégia de design web móvel, você não tem a flexibilidade que teve como alvo projetos oferecer. Você pode entregar um site que atenda às necessidades dos seus visitantes e funciona bem em uma variedade de dispositivos aderindo a algumas orientações. Em primeiro lugar, não usar o Flash em seu design do site porque o Flash não funciona no iPhone ou iPad. Além disso, você quer que seu site para preencher a tela em um iPad em modo retrato, por isso não cortar a duração da sua página a 600 pixels. Em vez disso, o tamanho da página para 980 pixels de largura por, pelo menos, 980 pixels de comprimento. Por último, mas não menos importante, ao testar, ver o seu site sobre os dispositivos mais importantes para o seu público, certificando-se de carregar as imagens de forma rápida e clara olhar não importa o que os tamanhos de telas dos seus visitantes são.

Otimizando seus móveis Web Designs para o iPhone

Sim, a tela do iPhone é pequeno, mas você deve parar de pensar em restrições e começar a se concentrar sobre as incríveis novas oportunidades para iPhone oferece um design web - como atrair um público de pessoas em movimento, pessoas que podem estar de pé direito fora de sua restaurante, por exemplo, enquanto eles olham para seu menu em seus iPhones e considerar a possibilidade de comer lá.

Ao projetar um site para o iPhone, lembre-se os seguintes pontos-chave:

  • Cada pixel conta. Você não tem muito espaço para brincar, por isso não deixe de não desperdiçar um único pixel em seus projetos de web móvel.

  • Criar desenhos móvel iPhone com apenas uma coluna de informações. layouts de várias colunas simplesmente não se encaixam bem em telas pequenas, como a tela do iPhone.

Quando você cria um projeto especial para o iPhone, não se esqueça de incluir um link para a versão desktop do seu site. Os visitantes do seu site móvel pode já estar familiarizado com a versão desktop e pode preferir visitar a versão que já está familiarizado com eles, mesmo se eles estão usando um iPhone. A versão móvel do navegador Safari pretende exibir qualquer site desktop, bem como um computador desktop faz, e com excepção do tamanho de tela menor, se trata darned perto.

Como criar iPad-Friendly Web Mobile Designs

O iPad, com sua grande tela bonita, pode levar você a acreditar que você não precisa fazer nada especial em sua web design móvel, mas as melhores técnicas de web design para o iPad não são os mesmos que os para o desktop.

Embora o iPad oferece muito mais espaço na tela do que o iPhone, ele ainda cria novos desafios para os designers de web móvel. Lembre-se o seguinte no design de websites móveis para o iPad:

  • Projetar para ambas as orientações: A capacidade de transformar o iPad de paisagem para o modo retrato altera drasticamente o espaço de tela para seus projetos web.

  • Aproveite ao máximo o HTML5 e CSS 3: Quando você está projetando para o iPad, você não precisa se preocupar com todos os navegadores da web ainda são utilizados em computadores, para que possa tirar o máximo partido da mais recente nestas tecnologias de web design.

  • projeta iPad teste em um iPad: Ao criar conteúdo para o iPad, você provavelmente está usando uma máquina que é bastante diferente do iPad. Não testar o seu trabalho no mesmo lugar que você desenvolvê-lo. Você ainda pode ter que fazer a maior parte do desenho e codificação dos seus sites iPads enquanto está sentado em um computador desktop ou laptop, mas quando estiver pronto, levante-se, esticar, e ir se sentar em uma cadeira confortável para ver como o seu site parece e funciona em um iPad.

Teste seus desenhos de páginas da web em diferentes situações de iluminação. Leve o iPad fora para ver como suas páginas olhar sob luz solar intensa, e trazer o iPad para a cama com você para ver como o seu design web móvel parece quando você se esconde no escuro debaixo das cobertas. (Você apenas não ama não precisar de uma lanterna para ler no iPad, da forma como fizemos quando queríamos ficar até tarde para ler livros como as crianças?)

menu