Site Overlay

Responsive Web Design

Ethan Marcotte criou o termo Responsive Web Design em um artigo escrito no site A List Apart, que então se tornou um livro referência no assunto. A combinação de elementos fluídos, com dimensões relativas ao espaço disponível no aparelho do usuário, e regras específicas para definir estilos específicos para tamanhos de tela diferentes e funcionalidades diferentes (como, por exemplo, a resolução do iPhone e do iPad).

Sites responsivos adequam os seus elementos e o seu comportamento para cenários, como disponibilizando fluxo de navegação que se adequará ao tamanho da tela utilizada ou mudando as interações do usuário caso ele use um dispositivo sensível ao toque ou não. Além de precisar identificar o tamanho, capacidade e funcionalidades disponíveis, é importante que a disposição dos elementos seja flexível o bastante para se adequar a qualquer dispositivo.

O primeiro passo para se começar a trabalhar com designs responsivos é fazer a transição de elementos fixos – de dimensões fixadas em px – para elementos fluídos – que se baseiam em porcentagens e em. Desta forma, a sua página consegue se expandir ou diminuir de acordo com a largura disponível, em vez de se fixar em algo similar a 960px de largura máxima.

A conversão de tamanhos fixos para fluídos é feita com base em uma fórmula bastante simples: “tamanho fixo”/ “contexto”= “tamanho fluído”. Com ela você consegue converter dimensões em px para porcentagens (para larguras) ou em (para fontes), assim:

body {

/* Utilizando o tamanho de fonte padrão, geralmente 16px */

font: normal 100% Helvetica, Arial, sans-serif;

}

 

h1 {

font-size: 1.5em; /* 24px / 16px = 1.5em */

}

A princípio, esta definição terá o mesmo efeito que definir o tamanho da fonte do h1 como 24px. Porém, em dispositivos que o tamanho padrão de fonte seja diferente, como em smartphones, font-size do elemento irá acompanhar esta mudança de tamanho: em um dispositivo que utilize 12px a fonte do elemento terá 18px de altura, e não 24px.

Esta mesma abordagem pode ser usada para definir as regras do seu grid – tornando-o um grid fluído – e o espaçamento entre elementos. Desta forma você consegue fazer os seus layouts acompanharem as diferenças de largura entre diversos dispositivos, e então você pode tratar as peculiaridades de cada contexto utilizando media queries.

Outra ferramenta do Responsive Web Design são os media queries – uma regra específica para aplicar um bloco de CSS caso a regra seja atendida. Similar ao uso de CSS para estilos específicos de impressão, você também pode indicar regras associadas ao tamanho, orientação ou a resolução de tela.

@media only screen

and (min-device-width : 320px)

and (max-device-width : 480px) {

/*

Esta regra será aplicada em

aparelhos com uma largura de 320px a 480px,

o que atende a maioria de smartphones.

*/

}

 

@media only screen

and (min-device-width : 768px)

and (max-device-width : 1024px)

and (orientation : landscape) {

/*

Além de verificar a largura do dispositivo,

você pode conferir a orientação, utilizando

“landscape” ou “portrait”.

*/

}

Utilizando media queries, você pode definir estilos específicos para tamanhos diferentes, o que é melhor do que focar em um tipo de dispositivo específico. Diversos modelos diferentes de smartphones podem ser atendidos por um mesmo media query, o que também ajuda a atender novos modelos que irão surgir no futuro.

Da mesma forma que um CSS de impressão, você pode sobrescrever definições globais de CSS para adequar a sua página para tamanhos diferentes. Assim você consegue reordenar elementos, reduzir o tamanho de imagens ou exibir elementos alternativos para melhorar a experiência de uso dos seus usuários.

O site Media Queries (http://mediaqueri.es/) possui uma coletânea de sites que possuem diversos formatos para smartphones e tablets, uma ótima referência para se inspirar com outros trabalhos.

Você pode considerar desacerbada toda esta atenção para adequar os seus projetos para diversos dispositivos como o último iPad ou os smartphones do Google, mas esta filosofia também se aplica para o mundo de notebooks e desktops que estamos tão acostumados a ver.

Na retina display da terceira geração da linha do MacBook Pro temos um ótimo exemplo, é possível refinar a experiência de uso para tirar proveito da abundância de pixels ou da qualidade da resolução do usuário. Basta possuir um grupo de estilos para larguras acima de 1824px, por exemplo:

@media only screen and (min-width : 1824px) {

/*

Aqui você pode adicionar estilos para se aproveitar

de uma tela maior: aumentando fontes, ícones, e

largura dos seus elementos

*/

}

A mudança da web para estes diversos dispositivos e formas de uso só está começando: o futuro ainda guarda um universo de aparelhos novos, tecnologias e mudanças na forma em que nos conectamos pela web, e a indústria da internet ainda precisa evoluir para acompanhar estas mudanças.

Nós não podemos prever o que virá por aí, mas podemos nos preparar para seja lá o que o futuro nos reserva.

Em 2011 foi criado o Future Friendy, um manifesto assinado por diversas figuras renomadas do mundo do desenvolvimento web. Lá existem 3 princípios que podemos seguir:

  • Você deve compreender e abraçar a imprevisibilidade;
  • Pense e comporte-se de uma forma amigável para o futuro;
  • Ajude os outros a fazer o mesmo.

O manifesto indica que se deve focar no conteúdo que está em suas mãos – o que realmente importa para os seus usuários e os seus clientes – buscando servir ele da forma mais flexível possível, o que facilita a inclusão de novos formatos e aparelhos que surgirem com o passar do tempo, sem deixar de tirar proveito de aspectos específicos para prover uma experiência adequada.

Todos queremos que o nosso trabalho dure por anos, e para alcançar isso, precisamos trabalhar para que as nossas criações sobrevivam às mudanças de tecnologia. Imagine ter que reescrever sites inteiros daqui a 2 ou 3 anos porque a versão atual não é adequada para o cenário atual de dispositivos e casos de uso? Pense nisso e comece a contemplar um novo formato de desenvolvimento para a web, mais sólido e focado na longevidade.

1

Source: scriptcase / Responsive Web Design

Comments

comments

Leave a Reply

Your email address will not be published.