Layout da web recomendado para o iPad

Escrito por ashley poland Google | Traduzido por joan diaz
  • Compartilhar
  • Tweetar
  • Compartilhar
  • Pin
  • E-mail
Layout da web recomendado para o iPad
Navegar pelo iPad deixa mais fácil o acesso à internet enquanto se está viajando (Peter Macdiarmid/Getty Images News/Getty Images)

Um pouco mais que 28% dos usuários de aparelhos móveis na internet usam um iPad. Ter um layout de uso fácil para usuários de tablets permite que haja mais acesso de visitantes ao seu site. Ao criar um layout compatível com o iPad, lembre-se das limitações dos navegadores móveis, o jeito que eles são usados e a resolução do iPad. Embora criar um site em separado especificamente para o iPad possa não ser o uso mais prático de seus recursos de web design, você pode usar CSS para reorganizar os mesmos elementos na sua página num layout diferente e mais acessível para usuários de tablets.

Outras pessoas estão lendo

Resolução do iPad

A tela do iPad tem uma resolução de 1024 x 768 pixels. Até pouco tempo, 14% dos usuários online estavam usando a resolução 1024 x 768 como o padrão de seu computador. Como a largura de 1024 pixels não está fora de alcance total, você não precisa, necessariamente, de um layout especial para usuários que usam seu iPad horizontalmente - Dependendo da complexidade e compatibilidade do seu layout com o touch screen. No entanto, você deve pensar em criar uma versão mais "estreita" de seu site para os usuários que forem visualizá-lo verticalmente.

Otimização para touch screens

Certifique-se de que seus elementos clicáveis, como links e imagens, são grandes o bastante e espaçosos para que não dificultem os cliques no touch screen dos usuários. Quem usa um touch screen como no iPad não passa um cursor sobre os elementos, um elemento comum controlado via CSS, como o que mostra um ícone ao se passar sobre uma imagem. Assegure-se que os elementos clicáveis têm um método de disponibilização alternativo para aparelhos móveis. Barras de rolagem também não se fazem presentes em dispositivos móveis, então controlar a barra de rolagem também não se faz necessário.

Fazendo um layout único e flexível

Use porcentagens. Usando uma porcentagem ao invés de uma largura fixa, você dá ao seu layout uma quantidade flexível de compatibilidade com navegadores e tamanhos de tela, incluindo tablets e smartphones diferentes do iPad. Usando camadas "div" e CSS você poderá definir verificações de mídia para especificar qual folha de estilo será utilizada, dependendo da largura da tela. Chris Coyier da CSS Tricks usa verificações de mídia como estas:

<link rel="stylesheet" media="screen and (min-width: 1024px)" href="desktop.css" /> <link rel="stylesheet" media="screen and (max-width: 770px)" href="ipad.css" />

Você pode colocar a largura mínima e máxima à sua escolha, mas configurando a folha de estilo do iPad para se ativar quando a largura do navegador for menor do que 770 pixels, o site irá usar a "folha de estilo ipad.css" quando visto verticalmente com uma largura de 768 pixels. Ao ser virado horizontalmente, o iPad irá retornar à largura de 1024 pixels e o navegador irá usar o layout padrão para o CSS. Usando uma folha de estilo especial de CSS, você pode esconder certos tipos de IDs em sua página - como a remoção de uma barra lateral extra, como Coyier faz na sua demonstração.

Evite usar Javascript e Flash

A versão móvel do Safari, assim como a maioria dos sites móveis acessíveis pelo iPad não aceitam Flash ou Javascript, para que seu site seja compatível com dispositivos móveis. Você pode usar HTML5 e CSS3 para criar mais efeitos dinâmicos, incluindo vídeos embutidos. Se não tem certeza de como usar HTML5 ou CSS3, o site W3Schools.com tem tutoriais básicos de graça.

Não perca

Filtro:
  • Geral
  • Artigos
  • Slides
  • Vídeos
Mostrar:
  • Mais relevantes
  • Mais lidos
  • Mais recentes

Nenhum artigo disponível

Nenhum slide disponível

Nenhum vídeo disponível