Desenvolvimento Mobile: como ficar responsivo

Até pouco tempo atrás, a única forma de acessar a internet era por meio dos desktops. O primeiro celular capaz de fazer consultas na internet foi lançado em 1996 pela Nokia, mas o serviço era muito limitado.
Com o passar dos anos, as tecnologias foram evoluindo e, atualmente, até os modelos mais simples de smartphones conseguem navegar na internet.
Em 2014, o acesso à internet por meio de dispositivos móveis ultrapassou os feitos com computadores no Brasil.

• Entre os domicílios conectados à internet, a taxa de uso do computador caiu de 88,40% para 76,60%, de 2013 para 2014.
• Nesse mesmo período, os usuários que utilizavam a internet a partir de celulares aumentaram de 53,60% para 80,40%.

Esses números evidenciam uma mudança no comportamento dos usuários de internet e expõem a importância de uma boa qualidade de acesso aos sites pelos dispositivos móveis.
Devido à infinidade de resoluções e proporções de tela de computadores, celulares e tablets, surgiu um problema de compatibilidade dos sites com os diversos dispositivos. A versão de uma página para desktops pode exigir que o usuário do dispositivo móvel tenha que realizar o movimento de pinça para aumentar a visibilidade do conteúdo. Essa situação pode fazer com que a pessoa deixe de navegar na página.
Para solucionar o problema dos dispositivos móveis, despontou o desenvolvimento mobile, cuja finalidade é elaborar aplicações e sistemas especificamente para os aparelhos móveis. Entretanto, isso não resolvia completamente o problema. As empresas tinham que manter mais de um site para se ajustar aos variados tamanhos de telas.

Assim, o design responsivo surge como uma solução para o problema de multi-telas. Esse conceito não é uma simples tendência do design, mas um conjunto de ferramentas e técnicas avançadas que determina como o layout será apresentado para o usuário.

O que é design responsivo?

O termo design responsivo foi publicado pela primeira vez em 2010, no blog A List Apart, pelo web designer Ethan Marcotte. O autor faz uma comparação do web design com projetos arquitetônicos responsivos, nos quais há um ajuste automático de um espaço de acordo com o número e fluxo de pessoas dentro dele. Afinal, o que é design responsivo?
O design responsivo é um método de estruturação HTML e CSS, em que o site consegue se adequar ao browser do visitante. O layout é flexível, adaptando a sua aparência de acordo com o tamanho e resolução da tela.
Quando esse tipo de design é adotado, o servidor envia o mesmo código HTML para todos os tipos de dispositivo e o CSS é usado para modificar o processamento da página no aparelho específico.
Dessa forma, o site consegue identificar quais são as dimensões de cada dispositivo e assim ajusta os elementos presentes na página para que eles fiquem enquadrados na tela do aparelho utilizado. Ou seja, o mesmo layout adapta-se a qualquer resolução, de modo que o usuário possa ter a melhor experiência independente do dispositivo.

O que esse design inclui?

O design responsivo compreende diversos fatores, como:

• adequação do layout do site conforme a tela e a resolução do dispositivo utilizado;
• utilização de imagens flexíveis, por meio de media queries – essa técnica permite a manutenção da qualidade das imagens enquanto elas são redimensionadas e ajustadas ao layout da página;
• redução de elementos da tela e retirada de dados desnecessários para os dispositivos móveis, já que quanto menor o dispositivo, menos tempo o usuário gasta durante a navegação; e

• adaptação das dimensões de botões e links para interfaces touch nos dispositivos em que o ponteiro do mouse é substituído pelo dedo do utilizador.

Diferenças entre o design responsivo e mobile template

O site responsivo é aquele compatível com todos os tamanhos de tela. Ele reposiciona os elementos da página com a finalidade de garantir a melhor visualização do conteúdo.
Já o mobile template, é um site desenvolvido apenas para dispositivos móveis com a intenção de melhorar a navegabilidade nesses tipos de aparelho.
É importante destacar que os sites em geral podem ser acessados em qualquer dispositivo, entretanto, se a página tiver sido desenvolvida de forma convencional, a usabilidade será prejudicada.

Vantagens em atualizar o site para responsivo

É possível perceber que o design responsivo é uma ótima opção para o desenvolvimento mobile, por isso vale entender melhor as diversas vantagens existentes.
Devido à flexibilidade do conteúdo de se adaptar a diferentes resoluções, o usuário tem uma experiência agradável de navegação, podendo ter um acesso de qualidade por meio de qualquer dispositivo. Além disso, como o site é mais leve e otimizado para os dispositivos móveis, há uma maior rapidez no carregamento de dados desse site do que na versão para desktop.
Por sua vez, como o conteúdo consegue se ajustar a todos os tipos de tela, é necessário apenas um site, e é mais fácil gerir um site do que uma página para dispositivos móveis e outro para desktop. Sem considerar que existem vários tipos de celulares e tablets, o que exigiria mais de um site para atender esses aparelhos.
O Google privilegia os sites que operam da melhor forma para a praticidade do usuário, além de penalizar aqueles que não são adaptados para diferentes dispositivos. Desse modo, um site responsivo aparece melhor posicionado nas buscas.
Outra vantagem é que um site responsivo reduz o número de usuários que entram e saem do site sem interação, já que permite uma melhor usabilidade, além de proporcionar maior facilidade de compartilhamento do conteúdo, pois existe apenas uma URL para qualquer dispositivo de acesso e, consequentemente, maior captação de Leads.
Como a navegabilidade é melhor nos sites responsivos, essa maior geração de Leads pode gerar aumento no número de vendas.
Se você utiliza as redes sociais para promover seus produtos, é fundamental que as páginas sejam responsivas. Como o acesso à internet por meio dos dispositivos móveis é significativo, é importante considerar que o usuário provavelmente estará utilizando um smartphone quando visualizar seu link no feed de notícias.

Conceitos necessários para desenvolver um site responsivo

Para fazer um design responsivo, é necessário desenvolver um código utilizando a combinação de HTML5, CSS3 e Javascript.

• HTML5

HTML é uma linguagem utilizada para o desenvolvimento de sites baseada em marcações, ou seja, utiliza tags de marcação para descrever as páginas da internet.
A nova versão, HTML5, foi criada para facilitar a manipulação dos elementos, fornecendo ferramentas para que o CSS e o Javascript realizem o melhor trabalho possível. Dessa forma, os sites e aplicações podem ser desenvolvidos de forma leve e funcional.

• CSS3

CSS é uma linguagem de folhas de estilos utilizada para determinar como os documentos escritos em HTML devem ser exibidos em termos de cores, fontes, alinhamento; isto é, o HTML estrutura o conteúdo e o CSS formata-o.
A nova versão do CSS é o CSS3, o qual possui nova capacidade de formatação visual, incorporando elementos inéditos para construir animações em 2 e 3 dimensões, além de ter um maior controle sobre o estilo.

• Javascript

Javascript é uma linguagem que é processada pelo próprio navegador. A partir da utilização desse sistema, é possível criar efeitos especiais para os sites, proporcionando uma melhor interatividade com os usuários.

O Javascprit é utilizado para controlar o HTML e o CSS, ficando responsável pelo comportamento. Em outras palavras, esses códigos ficam encarregados da movimentação e cliques.

Principais pontos para o design responsivo

Depois de aprender um pouco sobre as linguagens apresentadas acima, vamos para os três pontos essenciais para o design responsivo, que são: grids fluídos, imagens flexíveis e media queries.

• Grids fluídos

O grid é o esqueleto do design, é um conjunto de linhas guias, colunas e margens que viabilizam uma estrutura para o layout. O grid permite o alinhamento, a proporção e o posicionamento dos elementos no plano de exibição.
O grid fluido é o tipo de codificação de layout em que há proporções relativas entre os seus componentes. Os layouts tradicionais são baseados em valores de pixel fixos, ou seja, as grades de largura são estáticas para posicionar os elementos.
Utilizando esses layouts tradicionais, o conteúdo não se enquadra nos vários tamanhos de tela disponíveis no mercado, prejudicando a usabilidade no acesso à internet. Como os grids fluidos são codificados considerando a porcentagem ou o tamanho relativo e não altura e largura de cada item, o conteúdo consegue se ajustar em todos os dispositivos.

• Imagens flexíveis

Para garantir que a experiência do usuário seja agradável, as imagens e vídeos também devem ser flexíveis. A largura da imagem ou mídia deve ser definida no CSS3, para que o browser adeque seu tamanho de acordo com a tela do dispositivo.
Da mesma forma que os grids fluídos, as imagens flexíveis são consideradas a partir de uma porcentagem, para que assim, o tamanho final da imagem esteja adequado às dimensões da tela de acesso.
É importante ter cuidado, pois as imagens são baseadas em pixels. Se o tamanho da imagem for aumentado além do seu tamanho original, o layout ficara pixelizado. Se as imagens tiverem alta resolução, diminuí-las via código deixará a página muito carregada.
Assim, o interessante é servir a imagem certa para cada dispositivo por meio da utilização da media queries.

• Media Queries

Por meio da media queries, a CSS3 consegue verificar o navegador e em que tipo de mídia ou dispositivo o acesso está sendo realizado, o que permite a especificação de estilos diferentes para cada aparelho.
Utilizando as expressões da media queries, é possível constatar o tipo e a capacidade do equipamento, possibilitando assim a adequação do layout de acordo com cada tipo de dispositivo, sem que o conteúdo seja modificado.
Com relação ao problema das imagens, a media queries auxilia na escolha da imagem mais apropriada de acordo com as características do aparelho, como densidade de pixels e dimensão da tela.

Por onde começar?

Para garantir um bom design responsivo, primeiramente deve-se pensar no layout para os dispositivos móveis, com menor resolução, e só depois expandir para os dispositivos maiores.
Essa estratégia é conhecida como Mobile First, a qual prioriza o conteúdo da página e depois adiciona mais elementos de acordo com o tipo de dispositivo. Essa técnica não se aplica somente ao conteúdo do site, mas também à parte do layout, que é mais simples nos dispositivos móveis e torna-se mais complexo nos aparelhos com resoluções maiores.
O desenvolvimento de uma página com design responsivo busca rapidez, acessibilidade e paridade de conteúdo. Por isso, ao iniciar a criação considerando os dispositivos móveis, o conteúdo é priorizado e, assim, a versão para desktops também passa a ter uma melhor navegabilidade.
Para certificar que haja uma melhor acessibilidade ao site e verificar se está tudo de acordo com a página em cada dispositivo, é muito importante a realização de testes antes do lançamento do site.

Como testar um site responsivo

Para garantir o sucesso de um site responsivo, é muito importante testar seu funcionamento. Existem diversas ferramentas que podem ser utilizadas para essa finalidade. Vamos dar alguns exemplos!

• Dimensions Toolkit: ferramenta para testar projetos de sites responsivos disponível como extensão do Chrome e como um aplicativo. Além de testar seu projeto, você também pode testar páginas hospedadas localmente;
• Responsive: site com ferramenta para testar a página desejada com 8 diferentes resoluções;
• Responsive Design Testing Tool: ferramenta que apresenta o layout do seu site em diferentes resoluções, como 480×640, 768×1024, 1024×768, 240×320;
• Designmodo: esse site possui diversas resoluções para teste. A ferramenta é dividida em 4 categorias: celular, tablet/iPad, notebook e tela de desktop. Dentro de cada um desses grupos, existem várias opções de marca e modelo de dispositivos;
• Screenfly: como as ferramentas citadas anteriormente, o Screenfly simula o layout da página em vários dispositivos, inclusive em televisores;
• PageSpeed Insights: essa ferramenta do Google mede o desempenho de um site em dispositivos móveis e computadores. Ela apresenta os pontos positivos da página, bem como os negativos e o que deve ser feito para corrigi-los;
• Google’s Mobile-Friendly Test: essa também é uma ferramenta do Google que testa a usabilidade do seu site em dispositivos móveis. O teste mostra a compatibilidade do site com esses aparelhos e apresenta possíveis problemas que podem interferir de forma negativa na experiência do usuário; e
• Biblioteca de dispositivos: os testes também podem ser realizados em dispositivos reais. No Brasil, existe a DeviceLab que possibilita a realização de testes de aplicações digitais em um grande número de dispositivos móveis em laboratório com ambiente controlado.

Investimento no desenvolvimento mobile responsivo

Para estimar o investimento em um site, alguns itens devem ser considerados, como domínio, hospedagem, planejamento web, design e desenvolvimento. Os custos que serão apresentados abaixo são relativos a empresas de médio porte:

• Domínio (www.nomeempresa.com.br): pode variar anualmente de R$ 40,00 a R$ 60,00;
• Hospedagem (varia de acordo com o tráfego do site, contas de e-mail e espaço utilizado no servidor de dados) oscila de R$ 30,00 a R$ 100,00 mensais; e
• Serviço de planejamento web, design e desenvolvimento: pode custar de R$ 1.500,00 a R$ 10.000,00.

Também é importante considerar o custo de campanhas de marketing digital, que são muito importantes para promover seu site. Para montar essas campanhas, pode ser cobrado um valor a partir de R$250,00 por mês.
Considerando um site responsivo, sua criação pode custar de 20% a 30% mais caro do que um local para um navegador de desktop. Esse valor é justificado pelo fato do designer precisar analisar o site sob o ponto de vista de vários dispositivos. Além disso, mais testes deverão ser realizados para colocar a página em funcionamento.
É bom lembrar que é mais barato ter um único site compatível com a necessidade de todos os dispositivos do que ter várias soluções específicas. Manter mais de um site custa tempo e dinheiro.
Se você já tem uma página na internet, você pode adaptá-la para dispositivos móveis de forma gratuita se houver a possibilidade de eleger um tema ou modelo responsivo para o seu site.

Exemplos e cases de sucesso

Veja abaixo alguns números que demonstram como o design responsivo pode melhorar o número de acessos ao seu site, além de contribuir para um aumento da sua receita.
A O’Neill Clothing é uma loja inglesa de roupas que trabalha com e-commerce. Foi feito um redesign responsivo do site da empresa e o resultado foi analisado durante 6 semanas. Com relação à utilização da página pelo Android, a pesquisa apontou:

• aumento de 407,32% na taxa de conversão;
• aumento de 333,33% nas transações; e
• crescimento de 591,42% na receita.

A Skinny Ties é uma loja de gravatas norte-americana e, em 2012, a loja desenvolveu uma plataforma mais amigável por meio do design responsivo. Um estudo comparou as vendas das 2,5 semanas posteriores ao lançamento da nova página com os três meses anteriores ao funcionamento do site responsivo. Os resultados encontrados foram:

• 42,40% de crescimento na receita com acesso por meio de todos os dispositivos;
• aumento de 13,60% da taxa de conversão;
• taxa de rejeição reduzida em 23,20%; e
• crescimento de 44,60% no tempo de visitação da página.

A HOMEPAGE, também localizada nos Estados Unidos, é uma loja especializada em vendas de roupas e acessórios. Em fevereiro de 2013, a loja lançou seu site responsivo e foram notados os seguintes resultados até final de agosto do mesmo ano:

• aumento de 66,12% no acesso ao site (162,40% em smartphones);
• 17% de aumento na taxa de conversão (82% em smartphones); e
• crescimento de 69,26% nas receitas (359,50% em smartphones).

A Regent College é uma faculdade de teologia, fundada em 1968 e está localizada no Canadá. Com o intuito de abrir novos caminhos, a Regent College adotou o design responsivo do seu site no início de 2012. O site foi tão inovador que ganhou prêmios, menções e até copycats. As estatísticas analisadas após 8 meses de funcionamento do site indicaram:

• aumento de 99% de visitantes únicos;
• crescimento de 77% das visualizações da página;
• 63% de aumento das aplicações onlines;
• aumento de 226% de doações completas; e
• aumento de 22% de pedidos de informações.

A Cyber-Duck é mais um exemplo de sucesso na utilização do design responsivo. A empresa é uma agência digital localizada na Inglaterra e para solucionar o problema de compatibilidade, havia criado sites diferentes para os respectivos locais de acesso.
Devido à dificuldade de gerenciar conteúdos diferentes, além do surgimento de vários modelos de tablets e smartphones, a Cyber-Duck decidiu desenvolver um único site que se adaptasse aos variados dispositivos. Depois de algumas semanas do lançamento do site, os números encontrados foram:

• aumento de mais de 200% só no tráfego móvel;
• crescimento de 18% na duração média da visita; e
• redução de mais de 4000% na taxa de saída da página inicial para usuários de dispositivo móvel.

Os exemplos apresentados acima demonstram a importância do site responsivo para atrair mais visitantes, diminuir a taxa de rejeição e aumentar a duração do acesso, além de majorar as vendas e receitas.
Não foram encontrados estudos de casos para sites brasileiros, mas já existem várias páginas que utilizam o design responsivo, como:

• Impacta;
• Marketing de conteúdo;
• Rock Content; e
• Globo

Conclusão

Apesar de não ser um conceito novo, muitas empresas ainda criam seus sites a partir do método convencional ou adotam o desenvolvimento mobile antigo, criando mais de um site para atender aos diferentes dispositivos.

Para garantir a melhor usabilidade do usuário, é necessário adequar seu site para o design responsivo. Os números apresentados comprovam que a melhor navegabilidade de um site conduz a um aumento no número de visitantes e a uma redução na taxa de rejeição.
Ao ter uma melhor experiência de navegação, há um fortalecimento das relações entre o usuário e o site, o que pode resultar em maior receita para as empresas.
Viu como é importante ter um site que permita uma ótima experiência para o usuário, independente do dispositivo de acesso? Aprendeu um pouco mais sobre o design responsivo e a importância do desenvolvimento mobile?
Para saber mais, não deixe de nos acompanhar no Facebook, no Twitter ou no LinkedIn!