Estratégias para desenvolver sites adaptáveis

Atualmente, os sites são consumidos em uma ampla faixa de dispositivos, e com a entrada no mercado de todos os novos tablets e PCs otimizados para Windows 8, essa tendência só tende a se intensificar. Sites que possam se adaptar com perfeição às diferentes características de exibição e métodos de entrada do usuário oferecem a melhor experiência possível a uma vasta audiência. Este tópico aborda as estratégias de uso dos recursos do Internet Explorer que ajudam a criar sites e aplicativos da Web com excelente aparência e funcionamento ininterrupto, em uma série de fatores forma e métodos de entrada do usuário de dispositivos com Windows 8.

A visão mais geral do design adaptável

É possível que você já tenha algum conhecimento sobre design da Web responsivo (também chamado de design adaptável). Essencialmente, o design da Web responsivo é a prática de fazer corresponder os recursos do seu site o mais fielmente possível à funcionalidade do dispositivo em que um usuário visualiza o site — "adaptando-o" ao usuário. Isso abrange técnicas como, por exemplo, consultas de mídia CSS (Folhas de Estilos em Cascata), layouts fluentes baseados em grade e imagens dimensionáveis flexíveis para obter um design atraente, mas que também funcione bem em vários dispositivos e navegadores. Você pode contrastar o design responsivo à criação de experiências de site direcionadas para tamanhos específicos de tela e agentes do usuário, que podem resultar em um design feio e distorcido, frustração do usuário ou situações piores -- um site inútil.

Desde sua criação por Ethan Marcotte em 2010, o termo design responsivo expandiu seu significado na comunidade Web para incluir qualquer método capaz de fornecer experiências de site atraente e bem elaborado, independentemente de dimensões de tela, velocidades de conexão, recursos de toque e outras características do dispositivo do usuário.

Se você está procurando recursos gerais de design da Web responsivo, já estão disponíveis artigos excelentes e demonstrações inspiradoras, por exemplo:

O restante deste tópico analisa os novos recursos que dão suporte à criação de sites responsivos e adaptáveis no IE e estratégias de ajuste de dispositivos com IE e Windows 8 aos seus planos de design adaptável de sites maiores.

Duas considerações para a criação de sites adaptáveis: exibição e entrada

A experiência do usuário do seu site abrange não só o que os visitantes veem, mas também o que eles fazem. A forma como eles interagem com o site desempenha um papel crucial na usabilidade global, em termos do layout propriamente dito. Em última análise, o que os usuários veem e a maneira como interagem com seu site são aspectos determinados, em grande parte, pelas características de exibição e pelos recursos de entrada do dispositivo específico usado para navegação.

É impossível criar e testar cada plataforma imaginável usada por sua audiência, e muitos proprietários de sites têm optado pela criação de várias versões do site direcionadas para algumas combinações específicas de "plataforma da Web + dispositivo" disponíveis no mercado. Com tantos dispositivos computacionais disponíveis para usar a Web, o que você enquanto desenvolvedor da Web pode fazer para se preparar para o novo ecossistema de dispositivos com Windows 8? A resposta depende muito da estratégia de conteúdo do seu site, além dos recursos de desenvolvimento e das metas gerais. Entretanto, se seu objetivo geral é oferecer a melhor experiência possível para a mais ampla audiência, será importante avaliar a variedade tanto das características de exibição quanto dos recursos de entrada do usuário nos dispositivos de sua audiência para navegar pelo conteúdo da Web. Embora o layout e a manipulação de entrada do usuário sejam fatores inter-relacionados na equação como um todo do design de interação do Windows 8, o suporte a toque não implica necessariamente determinadas características de exibição e vice-versa. Por exemplo, considere estas experiências discrepantes:

  • Um laptop widescreen sem suporte a toque atualizado para o Windows 8 pode executar o Internet Explorer na nova IU do Windows em sua largura mínima, que mostra uma largura de visor semelhante a um dispositivo móvel típico.
  • Um netbook sem suporte à navegação por toque atualizado para Windows 8 pode ter um tamanho de tela semelhante a um dispositivo de tablet popular com navegação por toque
  • Um computador tudo-em-um com Windows 8 e tela sensível ao toque de 24 polegadas pode ser usado unicamente para executar aplicativos da Windows Store para Windows 8, como o Internet Explorer 10, sem mouse nem teclado conectados

De modo semelhante, embora o IE no Windows 8 seja apresentado em dois formatos—Internet Explorer na IU do Windows e Internet Explorer para área de trabalho—as características de exibição e o suporte a toque não podem ser usados para indicar, de forma confiável, em que experiência do IE o usuário está navegando. O Internet Explorer na interface do usuário do Windows pode ser redimensionado da largura mínima de 320 pixels para a tela inteira da exibição do dispositivo host, e o Internet Explorer para área de trabalho pode entrar ou sair do modo Tela Inteira (pressionando a tecla F11); com hardware habilitado para interação por toque, há suporte para entrada por toque em ambos. De modo geral, não há um método de programação para detectar se o usuário está executando o Internet Explorer na interface do usuário do Windows ou no Internet Explorer para área de trabalho.

Para garantir a melhor compatibilidade possível entre os navegadores do seu site, a prática recomendada é detectar recursos em vez de navegadores ao determinar o tipo de experiência de site que será oferecida ao usuário. A mesma estratégia se aplica às duas experiências de navegação do Internet Explorer no Windows 8. É útil usar as diferentes características de exibição e os vários métodos de entrada do usuário empregados pela audiência do seu site como as duas principais considerações que embasarão a criação de layouts amigáveis e as melhorias opcionais de entrada por toque, para que funcionem corretamente nos inúmeros dispositivos com Windows 8.

Estratégias para design de site adaptável com dispositivos Windows 8

Em resumo, aqui estão algumas práticas recomendadas gerais para a criação de sites adaptáveis com o IE no Windows 8.

Use a detecção de recurso em vez de ficar fazendo suposições sobre recursos específicos do navegador ou do dispositivo. O IE no Windows 8 é uma plataforma da Web única com duas experiências separadas de interface do usuário, não sendo possível detectar qual delas o usuário está usando para navegação. Use consultas de mídia e métodos de detecção de toque para determinar informações sobre as características da tela e os recursos de entrada de dispositivo do usuário.

Adapte a experiência do seu site com base nas características da tela e nos recursos de entrada do dispositivo. Evite suposições de design que associam larguras ou intervalos de largura de visor às limitações ou aos recursos de entrada. Em vez disso, considere separadamente o layout do seu site e a manipulação de entrada do usuário; ou, melhor ainda, tenha em mente as várias combinações de telas e métodos de entrada que possivelmente serão usadas pela audiência de usuários do Windows 8. Use consultas de mídia e ouvintes de consultas de mídia para ajustar o layout e os estilos do site referentes a uma série de características de exibição. E não se esqueça de usar a adaptação de dispositivo CSS para substituir a escala de zoom automático. Siga as diretrizes de design para navegação por toque, aproveite o modelo de ponteiro do IE para manipular facilmente mouses, canetas, entradas por toque e multitoque e, assim, melhorar a experiência do seu site para a navegação por toque com eventos de gesto.

Teste em uma matriz de diversas larguras e métodos de entrada. À medida que você projeta e cria um site adaptável, teste-o continuamente usando pelo menos um conjunto básico de variáveis e combinações, como o teste de matriz sugerido no diagrama a seguir.

Duas tabelas separadas por um x: a tabela de larguras do visor lista 320 pixels, 768 pixels e 1024+ pixels; a tabela de métodos de entrada lista mouse e teclado, toque e caneta

Se o seu site já vem em vários formatos específicos, forneça-os de acordo com algumas características gerais e ofereça aos usuários a opção de alternância. Se você já tiver criado várias versões do site direcionadas a classes de dispositivo específicas no mercado, use a tabela anterior para ajudar a mapear a experiência em celulares, tablets e áreas de trabalho para diferentes tamanhos de visor e métodos de entrada do usuário no IE no Windows 8.

Se as suas experiências de tablet e área de trabalho forem funcionalmente equivalentes, opte pela experiência de tablet com suporte a toque. Caso contrário, escolha entre as experiências de tablet e área de trabalho a seu critério. Além disso, para garantir aos usuários a melhor experiência de site possível, ofereça a eles a opção de alternar para outro formato na experiência padrão.

Tópicos relacionados

Exibição e layout
Adaptação de Dispositivo
Eventos de orientação de dispositivo
Layout da caixa flexível ("Flexbox")
Layout de grade
Ouvintes e consultas de mídia
Layout com várias colunas
API de orientação da tela
Manipulação de entrada
Prepare o seu site para a navegação por toque

 

 

Mostrar:
© 2014 Microsoft