O web design responsivo já é a palavra-chave da década e é ideal para o mundo conectado em várias telas em que vivemos. No entanto, a desvantagem disso é o desempenho devido a tamanhos maiores de arquivos.
Isso levou alguns especialistas a dizer que, assim como os primeiros dias do Flash, o design responsivo é algo que todos nós poderíamos estar entusiasmados sem um bom motivo. No entanto, enquanto no momento existem problemas de desempenho, estes podem ser superados até certo ponto com alguns pequenos ajustes, compressão e redimensionamento de imagem.
O design responsivo carrega todos os mesmos elementos HTML para cada dispositivo, incluindo aqueles destinados à entrega em tablets e desktops. Isso significa que todo o conteúdo é frequentemente entregue, incluindo imagens e scripts, independentemente do dispositivo em que está sendo visualizado.
Um estudo realizado no ano passado mostrou que 86% dos sites responsivos atualmente online entregam uma página de área de trabalho completa para dispositivos móveis. Esta é claramente uma tendência para a técnica de design que precisa ser abordada, se quisermos parar o progresso de páginas da web inchadas em suas trilhas.
No momento, o design responsivo está aumentando os tamanhos de página, e essa é a tendência que precisa ser abordada, especialmente quando você considera que 57% dos usuários móveis sairão se o site não carregar dentro de 3 segundos.
Para quem já tem um design no lugar e quer otimizar agora, Mobitest pode ser usado para medir o desempenho, a fim de continuar e abordá-lo. É claro que, ao planejar um projeto, a otimização será mais simples de ser executada neste estágio, e o desempenho deve sempre ser considerado uma parte essencial do projeto, em vez de uma reflexão posterior.
Para melhorar o desempenho, o tamanho das páginas e recursos carregados com ele precisam ser reduzidos. Isso pode ser feito usando várias técnicas, sem alterar seriamente a aparência do site.
A primeira coisa a considerar é como garantir que apenas os recursos necessários sejam enviados para o dispositivo de destino. Isso pode ser feito minimizando o número de solicitações HTTP, para que o usuário gaste menos tempo aguardando o carregamento do DOM. Isso pode ser feito por meio da compactação de recursos CSS e Javascript, para os quais ferramentas como Bússola - uma estrutura de autoria CSS de software livre - pode ser usada. Isso permite que os desenvolvedores criem marcações mais limpas e criem sprites e extensões com o mínimo de confusão.
Com relação ao JavaScript, ferramentas como UglifyJS pode ser usado, o que comprime o código.
Isso pode ser considerado uma técnica importante quando se trata de design responsivo, pois ele pode ser usado para garantir que os usuários de dispositivos móveis e smartphones não baixem os aspectos do site que diminuem a velocidade ou que não serão usados.
O carregamento condicional pode ser usado para impedir que todos os tipos de conteúdo sejam carregados, incluindo widgets sociais, imagens, mapas e muito mais. É importante observar neste ponto que o site deve ser totalmente testado em cada estágio de otimização, para que seja fácil ver o que fez a diferença conforme você avança.
Nós todos sabemos que as imagens são geralmente responsáveis por ocupar a maior quantidade de kilobytes em uma página da web. Também é seguro dizer que as imagens projetadas para um navegador de desktop ficarão abaixo do desempenho quando entregues a um dispositivo móvel.
Se um site também tiver muito conteúdo legado, isso afetará ainda mais o desempenho e uma maneira de impedir que esse conteúdo seja carregado deverá ser implementada. Embora isso possa ser feito alterando a marcação alterando os elementos src ou img, a solução PHP Imagens adaptativas é provavelmente mais fácil. O software detecta o tamanho da tela e cria, armazena em cache e cria automaticamente as imagens HTML incorporadas reduzidas, sem a necessidade de alterar a marcação. Para ser usado em conjunto com as técnicas da Fluid Image, é uma solução útil e que economizará muito tempo. Adaptive Images usa um arquivo htaccess, um arquivo php e uma única linha de Javascript para determinar o tamanho da tela dos visitantes do site.
Vale a pena pensar sobre o texto também, pois isso envolve naturalmente quando o dispositivo é reduzido e pode causar problemas de exibição. FitText é uma ferramenta que pode ajudar a resolver isso, um plugin jQuery que atualiza automaticamente o tamanho da fonte, com opções para os tamanhos mínimo e máximo que serão permitidos.
Isso é ideal para títulos que podem ser exibidos incorretamente em um dispositivo móvel e permite que o tamanho de fonte especificado do CSS3 seja ignorado. No entanto, o FitText destina-se apenas a títulos e não deve ser usado no texto do parágrafo.
Embora o design responsivo tenha seus problemas, assim como qualquer tecnologia ou técnica relativamente nova, ainda vale a pena optar por criar um site dessa maneira. Ninguém quer retroceder e, embora possa ser mais fácil criar um website para dispositivos móveis, é muito melhor ser o mais inovador possível.
O Google concorda seu conselho é usar o design responsivo como a melhor maneira de projetar para dispositivos móveis. É claro que para os gigantes da pesquisa, isso significa que eles só têm um URL para rastrear, em vez de vários URLs para o que é essencialmente o mesmo site, por isso é realmente do interesse deles.
No entanto, nesse momento de compartilhamento social, também faz sentido, já que os usuários de dispositivos móveis podem compartilhar uma página com alguém usando um desktop. Para criar uma experiência uniforme, isso deve fornecer o mesmo conteúdo.
Além disso, ter um site responsivo melhora a produtividade da força de trabalho, pois há muito menos o que fazer. Isso se aplica ao conteúdo, atualizações e SEO, pois isso precisará ser executado separadamente se sites diferentes forem criados.
Dispositivos móveis e tablets estão se tornando a norma para se conectar à Internet e navegar nesta era quase pós-PC. As vendas de tablets em todo o mundo dispararam em apenas um ano, mais do que duplicando nesse período e com muitos consumidores escolhendo agora dispositivos diferentes que executam o Android, bem como o iOS.
Há pouca dúvida de que até agora o design responsivo está tendo um impacto positivo, apesar das preocupações com o desempenho. De acordo com um relatório , perguntando a algumas das principais marcas do mundo como o site responsivo afetou o tráfego, as visitas em todos os dispositivos aumentaram consideravelmente.
Isso incluiu um aumento médio de 23% dos visitantes em dispositivos móveis, bem como uma taxa de rejeição reduzida de 26%, com os visitantes gastando cerca de 7,5% mais tempo nos sites do que o visto anteriormente.
O'Neill, o varejista de roupas de surf da moda, reporta uma taxa de conversão 65,7% maior no iPad e no iPhone como resultado do desenvolvimento de um site responsivo. Isso representou um crescimento de receita de 101,2% apenas nesses dispositivos.
No que diz respeito aos dispositivos Android, a taxa de conversão foi ainda melhor, com 407,3%, representando um enorme crescimento de receita de 591,4%. Uma menor taxa de conversão foi observada em dispositivos não móveis, embora o crescimento ainda tenha sido observado.
Esta é apenas uma das marcas que divulgam seus números e é muito difícil obter os dados dos outros agora, assim como foi com o impacto das mídias sociais há alguns anos. No entanto, isso serve para provar que os retornos da criação de um website responsivo podem ser substanciais.
Tendo isso em mente, qual é a razão pela qual algum designer precisa começar a projetar responsavelmente para seus clientes e tentar garantir que eles funcionem tão bem quanto possível? Não existe um, e aqueles designers que não querem se dar ao trabalho de aprender como projetar, construir e otimizar um site usando técnicas responsivas podem ficar na poeira.
67% dos usuários dizem que compraram por meio de um site para dispositivos móveis e acredita-se que o uso da Internet móvel ultrapassará o de desktops no próximo ano. Tendo tudo isso em mente, é fácil entender por que as empresas se tornarão cada vez mais interessadas nas melhores soluções para web móvel que podem oferecer.
O design responsivo pode ainda estar em sua infância no momento, mas parece claro que a demanda do mercado fará com que ele cresça rapidamente, então vale a pena aprender o máximo possível de aspectos da disciplina.
Quais técnicas você usou para otimizar sites responsivos? A entrega de conteúdo alternativo nega os benefícios do design responsivo? Deixe-nos saber nos comentários.