Não é surpresa que um relatório recente da agência da ONU, o União Internacional de Telecomunicações , previu que haverá mais assinaturas móveis no planeta do que as pessoas nos próximos 9 meses. A "revolução dos smartphones" está definitivamente sobre nós e, como tal, o design da web para dispositivos móveis explodiu nos últimos anos.
Isso significou que os desenvolvedores da Web tiveram que lidar com o design de sites para dispositivos móveis, se quiserem competir e proteger seus negócios. Tendo isso em mente, encontrei algumas dicas para dar aos desenvolvedores um ponto de partida, com algumas coisas que devem ser lembradas antes de prosseguir.
Um rápido olhar sobre até que ponto os dispositivos móveis vieram desde a introdução do iPad confirmará que a tecnologia móvel é uma indústria em constante mudança e em constante mudança e, por essa razão, é sensato considerar como você pode projetar a prova do futuro.
Isso significa que acompanhar as últimas tendências é vital para garantir que o site seja viável dentro de alguns anos. Design responsivo é, naturalmente, toda a raiva no momento e é provável que isso faça parte do seu plano.
Embora seja seguro assumir que a maioria de seus visitantes terão smartphones, vale a pena considerar que nem todos o farão, e talvez seja necessário trabalhar isso no design. Vale a pena pesquisar o público-alvo nos estágios de planejamento, para que você possa se familiarizar com os dispositivos comuns usados, bem como com o comportamento do usuário.
Os visitantes da Web para dispositivos móveis não acessam necessariamente websites em movimento e isso é algo a ser considerado. Muitas vezes, a navegação móvel é feita enquanto aguarda; no trem, no carro ou até mesmo no sofá em casa.
Isso significa que despir o design de modo que seja simplista demais pode ser contraproducente. Se você tem um site básico com nada de conteúdo, isso pode ser desanimador para o público, já que seu site não oferece muito uso real e pode ser considerado nada além de um anúncio de banner superdimensionado.
Atualmente, o celular é usado tanto quanto, se não mais do que, na área de trabalho para navegação na Internet, portanto, tenha isso em mente durante o processo de design e garanta que seu site seja fácil de usar, mas rico em conteúdo.
A otimização de sites para dispositivos móveis também é vital, especialmente para páginas de destino, pois esses são o ponto de entrada para o site. Isso significa que um site para dispositivos móveis deve ser otimizado com o usuário em mente, bem como o mecanismo de pesquisa, para proporcionar uma experiência de navegação simples, texto simples, formulários fáceis de um clique e meta tags e informações relevantes.
Os tamanhos dos arquivos devem ser considerados em termos de peso e uma forte chamada para ação deve ser incluída nas páginas de destino. Se você tiver que usar formulários, mantenha-os o mais simples possível, com o mínimo possível de campos de entrada para que o usuário não fique frustrado e saia.
O mesmo vale para ações; mantenha-os simples e use somente quando necessário. Embora seja bom ter um sistema de navegação sofisticado, se for inutilizável, espere uma alta taxa de rejeição.
Quando os botões tiverem que ser usados, certifique-se de que eles passam no 'teste do polegar', o que significa que você deve poder pressionar um botão usando o polegar, sem atingir outro conteúdo que possa levá-lo a uma página indesejada.
Otimização é algo que precisa ser considerado ao construir um site responsivo também. Tem havido muito debate sobre como o design responsivo está diminuindo a velocidade da Web e se isso significa essencialmente o fim de sites responsivos. No entanto, existem técnicas de carregamento condicional que podem ajudar a acelerar um site para garantir que os dispositivos não baixem automaticamente a versão completa do desktop do site todas as vezes.
Recursos CSS e JavaScript devem ser compactados e há muitos softwares de código aberto disponíveis para ajudar com isso. Por exemplo, UglifyJS pode ser usado com JavaScript para compactar código e Bússola pode ser usado para criar marcações mais limpas, bem como sprites e extensões, sem muito barulho e trabalho duro.
Ao usar o design responsivo, uma das principais coisas a definir no início é a grade e seus pontos de interrupção. Mais uma vez, existem numerosos ferramentas online que pode ajudá-lo a definir colunas e sua largura e calhas.
Alguns desenvolvedores gostam de definir pontos de interrupção baseados em resolução, mas essa não é realmente a melhor solução, pois há muitos dispositivos móveis no mercado e as resoluções mudam com o tempo.
Isso significa que os pontos de interrupção devem ser baseados em design e conteúdo, em vez de resolução. Para testar pontos de interrupção e grades, a janela do navegador pode ser usada durante o projeto de design para ver como o conteúdo se comporta quando redimensionado.
O ideal é que ele flua naturalmente e você pode usar quantos pontos de interrupção forem necessários para conseguir isso.
Nem todos os sistemas operacionais móveis são criados da mesma forma, como você sabe, por isso vale a pena observar as diretrizes quando se trata de criar para Android e iOS, por exemplo, e os navegadores que podem ser usados neles.
Lembre-se de que os usuários navegarão em vários sistemas operacionais e alguns deles serão versões mais antigas, por isso é útil garantir que o site para dispositivos móveis seja compatível com versões anteriores. Aqui, é útil analisar as análises do site principal, se aplicável, pois você poderá ver em quais dispositivos seu público está acessando o site.
Obviamente, observar as análises após a conclusão do site também ajudará você a fazer as mudanças necessárias e a aprender o futuro.
Como todos sabemos, o conteúdo é o principal da web novamente e, portanto, é importante planejar os módulos de conteúdo. O comportamento dos módulos de conteúdo terá que ser definido para garantir que eles sejam exibidos como deveriam, à medida que o usuário navega e executa ações.
Isso significa que você precisa analisar e definir como o conteúdo é exibido ao alternar entre uma tela de desktop e móvel para determinar como os módulos vão se empilhar e se reordenar.
A este respeito, muitas vezes é mais fácil conseguir isso na fase de planejamento. Faça um esboço de como você visualiza a exibição de conteúdo e, em seguida, analise como isso pode ser alcançado.
No entanto, tente não ficar muito preso a definir tudo. Embora suas páginas principais precisem de wireframes, isso não significa necessariamente que todas as páginas serão necessárias. Criar um conjunto mestre para tamanhos de tela e orientação deve ser realmente suficiente.
Construa um protótipo primeiro e teste completamente, certificando-se de que todos os aspectos funcionem à medida que avança. Também é aconselhável manter o usuário em mente ao testar, garantindo que a navegação seja simples e, de preferência, com um máximo de três camadas. Tente encontrar alguém que não seja tecnologicamente preocupado, mas use dispositivos diferentes para testar o site.
Web design móvel é um desafio necessário para se familiarizar com o designer, a fim de oferecer um serviço completo ao cliente. Como muitas coisas na vida, um dos aspectos mais importantes é o planejamento para que você tenha uma ideia clara de como ir adiante.
O planejamento eficaz e a preocupação do usuário ajudarão a superar a maioria dos obstáculos que você provavelmente enfrentará, e os testes minuciosos recolherão o restante. Pense responsivo, rápido e simples, com excelente conteúdo útil e você não pode ir muito longe.
Imagem em destaque / miniatura, imagem da Web para dispositivos móveis via Shutterstock.