Dando continuidade ao artigo anterior, confira dicas para tornar seu site responsivo.

***

10 dicas para tornar seu site responsivo

A abordagem seguida pelo site PHP Classes é implementar páginas web que sejam responsivas. Essa é, de longe, a abordagem que vai dar os melhores resultados em menos tempo.

Não é perfeita, porque pode precisar usar mais HTML do que você usaria para mostrar a mesma página em diferentes dimensões da tela, de modo que suas páginas podem ficar um pouco mais pesadas e mais lentas para carregar do que ficariam em outras abordagens. É um problema que pode ser resolvido até mesmo com menos desenvolvimento e esforço de manutenção.

Enfim, existem algumas dicas que eu gostaria de compartilhar porque ajudam a reduzir o esforço de desenvolvimento e também podem diminuir seus esforços de adaptação de sites para dispositivos móveis se você estiver enfrentando condições semelhantes.

1. Comece com o seu site pelas páginas mais visitadas

Se você estiver usando um sistema de gerenciamento de conteúdo comum como o WordPress, seu esforço será muito menor porque você só precisará substituir seu tema por um dos inúmeros temas responsivos disponíveis para trabalhar com um site responsivo.

Se você tem um site com base em desenvolvimento personalizado, como é o caso do PHP Classes, será necessário fazer algum desenvolvimento personalizado extra para adaptá-lo para usuários móveis.

Se você tem um grande site com milhares de páginas para adaptação como é o caso do PHP Classes, seu esforço será enorme e pode levar meses para ser concluído. Por isso, você precisa usar um critério para começar pelas páginas que irão impactar mais os seus usuários.

No caso do PHP Classes, foi fácil determinar que as páginas mais impactantes para os usuários são as aquelas sobre os pacotes de classes publicadas no site, porque são as que recebem mais visitas. Após as páginas de pacotes, não era tão evidente quais são as páginas mais visitadas.

Portanto, eu precisei olhar para os relatórios do Google Analytics. No entanto, se você está preocupado que o Google lance uma atualização do algoritmo que penaliza sites que não estejam preparados para dispositivos móveis, é melhor olhar para os relatórios do Google Webmaster Tools, especificamente para as consultas de pesquisa e, em seguida, Top Pages.

Uma limitação atual dos relatórios do Google Webmaster Tools é que ele mostra todas as páginas sem qualquer possibilidade de agrupar por padrão de URL. Por isso, usei a classe Webmaster Tools API PHP para extrair as páginas em grupos da maneira que eu precisava. Você também pode tentar usar essa classe para obter esse efeito.

2. Use as ferramentas para desenvolvedores disponíveis para seu navegador para pré-visualizar as páginas em telas pequenas

Uma vez que você tenha configurado as páginas com as quais você deseja trabalhar em primeiro lugar, é preciso descobrir quais os problemas que elas apresentam que poderão impedir as páginas de funcionar bem em telas de dispositivos móveis.

Felizmente, hoje navegadores modernos como o Chrome fornecem ferramentas para mostrar como as páginas serão visualizadas em telas de diferentes dimensões que correspondem aos dispositivos móveis populares. Esse recurso do Chrome também está presente em outros navegadores como o Firefox Developer Edition.

3. Faça o Viewport se adaptar ao tamanho da tela

Uma das primeiras coisas que você precisa fazer é definir como o viewport, ou seja a janela de visualização de cada página será ajustada de acordo com as dimensões da tela. O viewport é a parte visível de uma página.

Se uma página é muito grande e não cabe na resolução de tela atual, ele aparecerá cortada e o usuário pode precisar usar barra de rolagem para visualizar a parte restante da página.

Fazendo a rolagem, o usuário acaba tendo uma má experiência de uso. Portanto, é aconselhável evitar que a tela mostre barras de rolagem, pelo menos na horizontal.

Uma maneira de conseguir isso é definir o viewport da página, de tal forma que a largura de exibição corresponda à largura do dispositivo. Isso pode ser feito usando tags HTML que especificam os parâmetros do viewport. Neste exemplo, vamos definir a largura do viewport para ser a largura do dispositivo e a escala de zoom inicial para começar em 1. Isso significa que o navegador móvel irá ajustar a escala de zoom para ajustar a largura da página na largura do dispositivo.

<meta name="viewport" content="width=device-width, initial-scale=1">

Se você não fizer esses ajustes, o navegador normalmente irá mostrar a página reduzida para fazer com que ela caiba na largura do dispositivo. Isso não é bom, porque o usuário terá que ampliar a página para ler o que está escrito lá.

4. Inicie com página de cabeçalhos e rodapés

Uma vez que você fez a largura do viewport coincidir com a largura do dispositivo, você pode perceber que a página exibida para usuários de desktop não se encaixa em nas telas de dispositivos móveis pequenos, e assim ela transborda horizontalmente.

Você precisa começar a trabalhar para tornar seu HTML responsivo. Normalmente, todos os sites têm páginas com cabeçalho e rodapé HTML comuns. Aqui é precisamente onde você deve começar, porque as alterações realizadas em cabeçalhos e rodapés afetarão todas as suas páginas.

5. Use um botão de menu para encolher barras de navegação largas

No caso do site do PHP Classes, utilizo dois tipos de menu horizontais: um para navegação comum e outro para ações de usuários, dependendo se eles estão autenticados ou não.

Menus horizontais foram feitos para aproveitar o espaço horizontal disponível. A solução utilizada para fazer esses menus se ajustarem em telas pequenas é criar versões alternativas das barras de navegação que podem ser puxadas para baixo sob a forma de botões de menu.

Então, basicamente, todas as páginas responsivas podem conter duas versões dos menus de navegação: uma para quando a tela é ampla onde podem ser exibidos os menus integrais horizontalmente, e outra versão pequena, com dois menus suspensos, uma pequena versão do logotipo do site e uma pequena barra de pesquisa.

Essa é a desvantagem da abordagem responsiva. Você pode precisar colocar mais HTML na página do que seria necessário para usuários que visualizam a página em uma tela de única resolução.

O site usa media queries para mostrar um tipo de navegação. Ele usa dois estilos para esconder um menu ou outro, conforme a largura da tela esteja abaixo ou acima de um determinado valor. Aqui está a versão simplificada do HTML e do CSS para isso.

<div class="c1025">Desktop menu here</div>
<div class="u1025">Mobile menu here</div>

 

@media (max-width: 1024px) {
.c1025 {
 display: none;
}
}

@media (min-width: 1025px) {
.u1025 {
 display: none;
}
}

Botões de menu sem JavaScript

Os botões de menu utilizados no site PHP Classes usam um truque para evitar a necessidade de usar JavaScript para abrir o conteúdo do menu quando você clica em um botão. Eles usam um campo checkbox de formulário oculto para controlar a visibilidade do menu.

Abaixo está uma versão simplificada do HTML e do CSS usado para gerar esses menus. Ele funciona de tal maneira que, quando você clica no botão de ícone de menu, o menu aparece abaixo do botão. Se você clicar novamente, o menu desaparece.

<div id="navigation-menu">
 <input type="checkbox" id="navigation-button">
 <div class="menu-items">
  <div><a href="/browse/"> All class groups </a></div>
  <div><a href="/browse/latest/latest.html"> Latest entries </a></div>
  <div><a href="/browse/top/top.html"> Top 10 charts </a></div>
  <div><a href="/blog/"> Blog </a></div>
  <div><a href="/discuss/"> Forums </a></div>
  <div><a href="/faq/"> Help FAQ </a></div>
 </div>
 <label for="navigation-button" id="navigation-label">
  <span class="drop-icon">Icon Image here</span>
 </label>
</div>

 

.menu-items {
 position: absolute;
 z-index: 1001;
 background-color: #103754;
 border-color: #cccccc;
 border-style: solid;
 border-width: 1px;
 padding: 4px;
 top: 32px;
 line-height: 36px;
}

.menu-items a {
 color: #C3F0FF;
 font-weight: bold;
 text-decoration: none;
}

#navigation-menu {
 display: inline-block;
 padding: 6px 10px 0px 10px;
}

#navigation-menu .menu-items {
 display: none;
}

#navigation-button:checked + .menu-items {
 display: inline-block;
}

#navigation-label {
 z-index: 1001;
 display: inline-block;
}

#navigation-label img {
 pointer-events: none;
}

#navigation-menu input[type="checkbox"] {
 display: none;
}

 

6. Sacrifique informações menos importantes progressivamente

Uma vez que você tenha feito alterações nos cabeçalhos e rodapés da página, você precisa passar para o corpo de cada tipo de página que você tem no seu site. Basta seguir as prioridades dos tipos mais visitados de páginas mencionadas acima.

Aqui você pode usar as ferramentas para desenvolvedores do seu navegador para visualizar a página em telas pequenas. Basta arrastar o separador de janela de exibição para reduzir a largura até ver os elementos da página transbordando na janela de exibição.

Em seguida, descubra quais são os elementos da página menos importantes e que você pode sacrificar e esconder usando os estilos CSS controlados por media queries, para que esses elementos só sejam visíveis quando a largura for superior a um determinado limite.

Você não precisa esconder todos os elementos transbordantes da página de uma vez. É possível definir vários limiares de largura e diferentes estilos CSS controlados por media queries para ser capaz de cortar diferentes elementos da página em diferentes larguras de tela.

As folhas de estilo responsivas do PHP Classes definiram vários limites em diferentes larguras, mas, em seu site, você pode definir suas próprias larguras de corte, como achar necessário. Aqui está uma amostra das consultas de mídia que definem pontos de corte utilizados para esconder diferentes elementos da página progressivamente.

@media (max-width: 1024px) {
.c1025 {
 display: none;
}
@media (min-width: 1025px) {
.u1025 {
 display: none;
}
}
@media (max-width: 499px) {
.c499 {
 display: none;
}
}
@media (max-width: 799px) {
.c799 {
 display: none;
}
}
@media (max-width: 640px) {
.c640 {
 display: none;
}
}
@media (max-width: 360px) {
.c360 {
 display: none;
}
}

7. Use o Google Page Speed Insights para visualizar pendências a corrigir

Conforme você progride com seu trabalho, é importante conferir se tudo é exibido corretamente nas larguras de tela que o Google vai tentar verificar se já está adaptado para o mundo móvel.

A montagem do conteúdo da página visível no visor é apenas um critério. Existem vários outros que não são tão triviais para avaliar, como a proximidade de pontos de contato, tais como links e botões.

Felizmente, o Google oferece uma ferramenta para ajudar a entender todas as questões que podemos precisar de corrigir. Elas fazem parte do pacote de ferramentas Google Page Speed ​​Insights.

Você só precisa digitar a URL de uma página na qual tenha trabalhado e a ferramenta vai mostrar uma nota entre 0% e 100% para que você saiba como estão suas notas de página em termos de usabilidade móvel. Se houver quaisquer questões pendentes ou correções a fazer, essa ferramenta permitirá que você saiba quais são elas.

8. Adaptação das imagens aos limites da largura da página

Uma questão pendente comum que você pode encontrar quando precisa adaptar suas páginas para telas pequenas é a presença de imagens largas. Por exemplo, artigos do meu site podem ter imagens que não se encaixam quando a largura da tela é reduzida.

Você poderia sacrificar as imagens como sugerido em uma dica anterior, mas isso iria sacrificar o artigo do blog em que a imagem aparecia. Uma abordagem alternativa é ajustar automaticamente a largura e a altura da imagem para que caibam no espaço disponível na tela menor.

Isso pode ser conseguido estabelecendo a largura da imagem em 100% (ou outro valor definido em porcentagem). Em seguida, defina a altura da imagem para auto. Isso preserva as proporções da imagem original.

Por exemplo, para as páginas do site PHP Classes, há uma media query que vai fazer as imagens do corpo do artigo ser ajustado para a largura da coluna usando definições CSS como esta:

@media (max-width: 55em) {
.blog-post-body p img {
 width: 100%;
 height: auto;
}
}

Outro aspecto relacionado com as imagens é o fato de que, se você usar imagens pequenas para menus e ícones, quando o navegador dimensionar a janela de exibição para corresponder à largura do dispositivo, pequenas imagens ficarão maiores. Se essas imagens estiverem em baixa resolução, poderão ser exibidas com má qualidade quando forem ampliadas.

A solução para esse problema é a utilização de imagens com maior resolução, mas definir a sua largura para valores menores que correspondam à largura que precisa ser exibida. Dessa forma, as imagens não aparecem com má qualidade quando são ampliadas.

9. Segurança em torno de links e botões

Outro problema típico que a ferramenta do Google pode relatar é quando você tem links ou botões que estão muito próximos uns dos outros. Essa circunstância pode fazer o usuário tocar um botão por engano quando pretendia tocar em outro botão que está ao lado dele.

Você pode evitar esse problema usando um estilo CSS que adiciona espaço suficiente ao redor dos botões e links que estão muito perto. A definição da propriedade padding pode ser suficiente em muitos casos, mas às vezes os botões ou links abrangem várias linhas, de modo que você também precisa ter certeza de que o espaçamento entre as linhas é suficiente.

Aqui está um exemplo de estilo CSS para adicionar espaço de preenchimento seguro em torno de links de texto e botões:

.safe-padding {
 padding: 2px;
 line-height: 200%;
}

10. Use relatórios do Google Webmaster Tools Mobile Usability

Você não precisa adaptar todo seu site para tentar seus esforços em produção. É possível implantar progressivamente e ver como as coisas progridem.

Felizmente, o Google oferece outra ferramenta no Google Webmaster Tools, chamada de Mobile Usability. Ela pode lhe dar uma ideia do progresso e quaisquer problemas que você pode não ter visto ou abordado.

Esta ferramenta mostra o número de páginas com questões de vários tipos diferentes: elementos de toque muito próximos, tamanho de fonte pequeno, largura fixa do viewport, conteúdo não dimensionado para a janela de exibição, viewport não configurado, uso de Flash etc.

Ela pode lhe dar um número total de páginas e URLs que têm essas questões e como estão evoluindo ao longo do tempo através de um gráfico. A ferramenta não informa esses números em tempo real. Na verdade, o atraso dos relatórios é de cerca de uma semana. Por isso, pode relatar problemas que você já tenha corrigido.

De qualquer forma, é muito útil, porque você pode ver seu progresso ao longo do tempo. Quaisquer páginas com problemas a serem resolvidas aparecerão com um link para a ferramenta PageSpeed ​​Insights, para que você possa saber imediatamente quais são as questões a serem resolvidas.

Parabéns ao Google, porque todas estas ferramentas são realmente úteis e ajudam a acelerar a resolução dos problemas.

Conclusão

Adaptar seus sites para dispositivos móveis pode ser uma tarefa muito entediante e chata para um desenvolvedor web que não esteja muito animado para fazer trabalho de front-end, mas é um “trabalho sujo” que alguém tem que fazer para o bem dos usuários que acessam seu site a partir de dispositivos móveis.

O trabalho de adaptação móvel do site PHP Clases ainda está em andamento. Apenas uma parte das páginas foi adaptada, de modo que você poderá ver mais alterações ao longo do tempo.

De qualquer forma, a ideia deste artigo é compartilhar informações úteis com aqueles que precisam passar pelo processo de adaptar sites existentes para dispositivos móveis, para que possam ganhar um pouco de tempo resolvendo problemas com soluções conhecidas.

Se você já passou por um esforço semelhante e tem outras ideias para resolver as questões de desenvolvimento móvel, ou mesmo melhorar as ideias apresentadas neste artigo, ou caso tenha outras perguntas, envie um comentário para que todos possam aprender uns com os outros através de nossas experiências.

***

Manuel Lemos faz parte do time de colunistas internacionais do iMasters. A tradução do artigo é feita pela redação iMasters, com autorização do autor, e você pode acompanhar o artigo em inglês no link: http://www.phpclasses.org/blog/post/262-10-Tips-to-Adapt-PHP-Web-Sites-for-Mobile-Devices.html