Estrutura

Design Responsivo: Padrão a Seguir ou “Modinha” Passageira?

Google+ Pinterest LinkedIn Tumblr
Anúncios Google

Temas que se adaptam ao tamanho do monitor, esteja seu leitor num minúsculo celular ou numa baita estação de trabalho com um telão, passando por tablets e telas comuns de desktops. Isso é o que prometem os designs responsivos.

Surgidos com o propósito de atender ao crescente número de aparelhos portáteis abrindo páginas como a do seu blog, esses templates podem ser vistos como uma variação do original, já que ao acessar seu conteúdo com design responsivo o leitor terá uma diferente coleção de regras em CSS, definindo a estilização da página para se adaptar àquela tela.

O problema é que nem todos esses temas são feitos direito, e alguns não cuidam de detalhes importantes como impedir o carregamento de arquivos desnecessários em certas condições – como imagens grandes em pequenas conexões 3G. E depois do boom, eis que fica a dúvida: será que design responsivo é mesmo tão legal e um padrão inexorável a seguir?

Onde Começou a “Onda”?

Tudo veio deste post: Responsive Web Design by ETHAN MARCOTTE. No artigo, o designer sugere a solução para adaptar a aparência e conteúdo do seu site ou blog a qualquer dispositivo em que ele seja visualizado, seja um iPhone, monitores de desktop, celulares, tablets… Tudo isso com um único template, que faz uso de uma estrutura flexível através de CSS Media Queries.

Para quem não entendeu bulhufas, uma explicação rápida: em CSS é possível criar regras para cada tipo de dispositivo, com os Media Types, e assim estilizar a página quando aberta em um monitor, ou impressa, entre outros. Com os Media Queries, um conjunto de estilos pode ser apontado para cada Media Type (tipo de mídia).

Na prática, você já deve ter visto o resultado. Com colunas calculadas em porcentagem, o conteúdo da página se ajusta ao tamanho da tela. Dependendo do caso, alguns elementos são eliminados, normalmente pela propriedade display:none (o que nem sempre ajuda). Fontes mudam de tamanho, imagens somem ou mudam de posição, para uma melhor organização na tela em que estão.

Veja uma grande coleção de sites usando design responsivo em MediaQueri.es. Abra um deles e reduza o tamanho da janela do seu navegador, veja como o conteúdo se adapta à nova largura.

Depois da enorme repercussão do artigo de Marcotte, o design responsivo virou quase um padrão, até que a W3C integrou as Media Queries em suas recomendações (ou seja, hoje é um padrão oficial no desenvolvimento web). O que seria excelente se todos os templates chamados de “responsivos” realmente o fossem…

Os Problemas

Para quem usa WordPress, antes seria normal usar um plugin (ou atacar o código) para ter um tema próprio para celulares, por exemplo. Assim, quando o leitor estivesse num dispositivo móvel, seu template padrão saía totalmente de cena e entrava o alternativo, criado só para aquele ambiente.

Com o responsivo, o mesmo template “normal” tem que ser adaptado, o que quando feito direito é excelente… e aí entram os problemas. Alguns desenvolvedores esquecem – ou ficam com preguiça – de detalhes importantes, como impedir o carregamento de coisas que deixam de ter utilidade em certas condições. Se o blog será aberto em uma minúscula tela, pra que permitir o carregamento de uma imagem enorme, que além de tudo vai consumir banda de sua conexão móvel? O mesmo acontece com scripts e partes de código.

O site WebDesignShock publicou um artigo com os principais erros em temas responsivos; vou destacar alguns aqui e palpitar sobre outros. Pra quem entende inglês, leia o original 11 Reasons Why Responsive Design Isn’t That Cool!

Redimensionamento de imagens – existem scripts que fazem a redução das imagens quando o site é aberto em dispositivos menores, mas nem sempre isso resolve. Imagens grandes continuam sendo baixadas para depois processadas, e esse processo de redimensioná-las consome memória e recursos da CPU, coisa que os pequenos dispositivos nem sempre tem de sobra.

Invisível é carregado – alguns temas usam propriedades como display:none para esconder partes que não devem ser vistas em dispositivos menores, mas isso não quer dizer que ela “some” de fato. Imagens continuam sendo carregadas, consumindo banda e ainda por cima não são usadas, quando em vez de escondidas  poderiam ser redimensionadas, mantendo sua usabilidade (desculpe, Tite…). O mesmo acontece com marcações e scripts – podem ficar escondidos, mas ainda são carregados.

Esconder ou substituir imagens de fundo – usar display:none não impede a imagem de ser carregada, e tentar trocar uma imagem de fundo por outra pode ser ainda pior: em vez de uma, serão duas imagens carregadas.

Códigos arcaicos – tentar “responsivar” um tema com código ruim é má ideia. Uso incorreto de marcações como H1 para estilizar fontes (sem o intuito de indicar importância de título), colocar JavaScript na seção head e outros pode prejudicar o carregamento do site no dispositivo móvel mais que nos desktops, já que as conexões são bem mais pobres.

Não é 100% compatível – por mais que a “propaganda” seja de que o blog será adaptável a qualquer dispositivo, não é bem assim. É verdade que a maioria dos aparelhos modernos vão se ajustando ao padrão com a atualização de sistemas operacionais, mas alguns não tem suporte a Media Queries, e o design próprio não será carregado. Se o público dos dispositivos portáteis é vital no seu nicho, o melhor é ter um tema bem direcionado, ou pode ficar na mão.

Desktop e mobile, necessidades diferentes – às vezes simplesmente empacotar o conteúdo do blog versão desktop para o móvel não ajuda o leitor. Se ele está navegando do celular, talvez precise ler mais depressa, ou queira informações resumidas. Para a maior parte dos blogs isso não faz diferença, mas em outras situações o contexto da navegação muda o que deve estar na versão móvel do seu projeto.

Sobriedade por igual – alguns temas responsivos são belíssimos e cheios de “quinquilharias” na versão desktop, aí você abre o site no tablet e vê algo totalmente diferente, descaracterizado. Se for pra ser responsivo, precisa ser leve e limpo para os dispositivos móveis, então que siga essa linha também na versão desktop.

Apesar dos pesares, a ideia do design responsivo é excelente, e ver uma página ajustando-se perfeitamente no seu computador ou iPhone é bonito, até artístico. Só precisamos atentar para esses detalhes quando comprarmos – ou desenvolvermos – um tema, para não ficar com um abacaxi depois – deixar o blog meio responsivo é bem pior que seguir o método “antigo” de apontar um tema portátil.

Fundador do Tutoriart em 2010, é ex-instrutor de Photoshop, design web e gráfico. Em quase uma década de redação online, tem cerca de 1500 artigos publicados. Gerencia também o Memória BIT.

Deixe um Comentário

Pin