Projetando para navegadores da web móveis
Qual é a melhor abordagem para projetar um site para rodar na maioria dos navegadores móveis modernos?
A segmentação por navegadores baseados no WebKit é suficiente?
Não, segmentar o WebKit não é suficiente. A primeira coisa a fazer é considerar que existem dois segmentos do mercado móvel: baseado no toque e não no toque. Isso afeta como você cria sua experiência de usuário móvel. Felizmente, os baseados em toque tenderão significativamente para o WebKit (Android, iPhone e WebOS). Os outros serão principalmente: IE Móvel (IE Mobile 6 no Windows Mobile 6.5 e um novo baseado no IE7/IE8 no Windows Phone 7)) e Opera = (Mobile e Mini) Consulte este lista de navegadores móveis na Wikipedia para obter mais informações sobre mecanismos e recursos de renderização.
Para plataformas baseadas em toque, uma biblioteca como Sencha Touch pode ajudar a criar experiências comparáveis em todos os dispositivos, mas será difícil criar experiências iguais em todos os dispositivos. Na verdade, eu recomendo que você não tente . A diferença entre plataformas móveis sensíveis ao toque e não sensíveis ao toque está se tornando tão grande que é quase como a diferença de UX de tentar ajustar uma interface do usuário baseada em desktop em uma tela de tamanho móvel - o que funciona bem em plataformas baseadas em toque, pois elas usam o paradigma de "zoom" do iPhone - mas você terá dificuldade em obter algo útil dessa abordagem para plataformas mais antigas ou não sensíveis ao toque.
No entanto, considere o artigo de LukeW e as palestras subsequentes sobre projetando primeiro para dispositivos móveis , que não são necessariamente uma resposta para sua pergunta, mas podem ser considerados um bom princípio: comece a projetar identificando o que os consumidores desejam fazer no seu site e disponibilize essas coisas com rapidez e facilidade. Isso é consistentemente bom design em plataformas all, portanto, nesse sentido, você pode usá-lo como um padrão para orientar seu design para dispositivos móveis.
Ontem fiz algumas experiências com um iPhone 3. Aqui estão minhas experiências:
Não assuma que a largura é de 320 pixels, use um layout de largura de fluido.
Use o doctype certo. Eu uso o XHTML Mobile 1.2. Mas não tenho certeza se esse é o caminho certo.
Faça os botões enormes.
Sem passar o mouse, use ícones para indicar o que os diferentes elementos da interface do usuário fazem.
O termo móvel está crescendo fora do campo dos telefones e começando a incluir dispositivos como tablets, que envolvem telas sensíveis ao toque de cinco a nove polegadas. Além disso, um design móvel deve levar em consideração as orientações horizontal e vertical. Além do que neoneye disse, mais algumas recomendações/sugestões.
- Use alguma margem ou preenchimento para garantir que nenhum texto fique na borda da tela.
- Além de usar um layout de largura de fluido (as larguras podem variar de 320px a 1024px), verifique se os elementos de design que você usa envolvem bem. Por exemplo, os botões parecem melhor agrupados do que uma lista horizontal.
- O texto precisa ser um pouco maior, mas ainda legível. Na minha opinião, um bom estilo tipográfico é pelo menos tão importante quanto aqui. Os Elementos do Estilo Tipográfico Aplicado à Web é uma boa referência.
Se seu público puder se qualificar um pouco mais, talvez seja possível fazer algumas suposições informadas de que a maioria dos clientes está usando um dispositivo principal ou um navegador de renderização. Atenda primeiro às principais necessidades do seu público-alvo. Tentar distribuir seu aplicativo por todas as plataformas igualmente no "início" pode ser uma tarefa muito assustadora.
Aqui estão alguns artigos úteis que me deparei:
Referência para celular http://www.quirksmode.org/mobile/