Nos dias de hoje quase todos os novos clientes querem uma versão mobile do seu site. E para isso é preciso antes de tudo: uma design para o BlackBerry, outro para o iPhone, outro iPad, Netbook, Kindle – e todas resoluções tela devem ser compatíveis. Nos próximos cinco anos, vamos provavelmente precisar de design adicional para as próximas invenções. E quando irá parar esta loucura? A resposta é nunca!
Na campo do web design e desenvolvimento, estamos rapidamente chegando ao ponto de ser incapaz de prosseguir com as resoluções infinitas e novos dispositivos. Para muitos websites, foi criando uma versão website para cada resolução e novo dispositivo seria impossível, ou pelo menos impraticável. Devemos apenas sofrer as conseqüências de perder visitantes de um dispositivo? Ou existe outra opção?
Responsive Website é a abordagem que sugere onde design e desenvolvimento deve responder ao comportamento do usuário e ambiente baseado na plataforma, tamanho de tela e orientação. A prática consiste em uma mistura de grades flexíveis, layouts, imagens e um uso inteligente de consultas de media CSS. Como o usuário hoje é “portável”, ele sai de seu laptop e vai para iPad, o website deve alternar automaticamente para acomodar o novo tamanho de tela, resolução imagem e habilitar scripts específicos. Em outras palavras, o site deve ter a tecnologia para responder automaticamente a preferências do usuário. Isso eliminaria a necessidade de um design diferente para cada novo dispositivo no mercado.
O Conceito de Responsive Website
“Ethan Marcotte” escreveu um artigo introdutório sobre a abordagem, “Responsive Web Design“, para o “A List Apart”, dando uma noção de design arquitetônico responsável, no qual fala sobre “espaços” que se ajusta automaticamente ao número e fluxo de pessoas dentro dele.
“Recentemente, surgiu uma disciplina chamada de “arquitetura inteligente” e começou a perguntar como espaços físicos pode responder à presença de pessoas passando através deles. Através da combinação de robótica incorporado e materiais trançados. Arquitetos estão experimentando instalações e estruturas com paredes flex, que se encolhem e se expande conforme a multidão. Por exemplo: Sensores de movimento pode ser emparelhado com sistemas de controle climático para ajustar a iluminação e temperatura de um quarto.”
Transpondo esta disciplina para o Design de sites, temos uma idéia similar. Por que deveríamos criar um design web personalizados para cada grupo de usuários; afinal, arquitetos não projetam um edifício para cada tamanho e tipo de pessoas que passes através dela? Como na arquitetura inteligente o site deve se ajustar automaticamente. Não deve requerem incontáveis soluções personalizadas para cada nova categoria de usuários.
Obviamente, não podemos usar sensores de movimento e robótica para realizar isto. Um Design Web “adaptável” exige uma forma mais abstrata de pensar. Entretanto, algumas idéias já estão sendo praticadas: layouts fluido, media queries e scripts que podem reformatar uma página web e fazer um “mark-up” automaticamente.
Mas um Responsive Website não é somente sobre resoluções de tela ajustável e imagens automaticamente redimencionadas, mas sobre uma maneira inteiramente nova de pensar sobre design web. Vamos falar sobre todos esses recursos e os conceitos associados.
Ajustando a Resolução da Tela
Com novos dispositivos no mercado, a variedade de resoluções de tela, definições e orientações são cada vez maiores. Novos dispositivos com novos tamanhos de tela estão sendo desenvolvidos diariamente, e cada um desses dispositivos pode ter variações nas corres, tamanho e funcionalidade. Alguns estão na orientação paisagem, outras em retrato, e outro ainda completamente quadrado. Como sabemos, a partir da crescente popularidade dos smartphones, iPhone e iPad, os novos dispositivos são capazes de mudar de retrato para paisagem no capricho da vontade do usuário. E como fazer um projeto para essas situações?
Além de projetar para ambos, paisagem e retrato, devemos considerar as centenas de diferentes tamanhos de tela. Sim, é possível agrupa-los em categorias principais e fazer cada design ficar tão flexível quanto necessário.
“Morten Hjerde” e alguns de seus colegas identificaram, em estatísticas, que aproximadamente 400 dispositivos vendidos entre 2005 e 2008 usam alguns dos tamanhos abaixo:
Desde então mais dispositivos saíram para o mercado. E é óbvio que não podemos manter/criar soluções personalizadas para cada um deles. Mas como lidamos com a situação?
Parte da Solução: Deixe tudo Flexível
Alguns anos atrás, quando layouts flexíveis eram quase um “luxo” para websites, as únicas coisas que eram flexíveis em um design foram as colunas do layout e o texto. Imagens poderiam facilmente quebrar seu layout, e mesmo tendo uma elementos estruturais flexíveis, quebrava o layout. Designs flexíveis não eram realmente tão flexível; eles poderiam dar ou ocupar algumas centenas pixels, mas eles freqüentemente não poderia ajustar a uma tela de computador grande para uma de netbook.
Agora podemos tornar as coisas mais flexível. Imagens podem ser automaticamente ajustadas, e temos soluções alternativas para o layout não quebrar. Embora não seja uma correção completa, a solução nos dá uma opção. É perfeito para dispositivos que alternam de orientação facilmente (de retrato para paisagem) ou para quando os usuários passam de um computador grande para um iPad.
No artigo de “Ethan Marcotte”, ele criau um “Responsive Website” de demonstração que mostra melhor as características este layout flexível:
O design inteiro é uma mix encantador de grids fluido, imagens fluido e mark-up inteligente onde necessário. Criando grids fluido é razoavelmente é uma prática comum, e há um número de técnicas para criar imagens fluido:
- Escondendo e Revelando Parte de Imagens
- Criando Sliding Composite Images
- Images Foreground escaláveis com o tamanho do layout
Para mais informações sobre criação de websites fluido, recomendo o livro “Flexible Web Design: Creating Liquid and Elastic Layouts with CSS” por Zoe Mickley Gillenwater, e baixar o capítulo exemplo “Criando Imagens Flexíveis“, além de uma extensa lista de tutorials, resources e melhores práticas sobre criação de grids flexível e layouts: “Essential Resources for Creating Liquid and Elastic Layouts”
Enquanto que do ponto de vista técnico tudo isso é facilmente possível, mas não se trata apenas de ligar esses recursos e tudo está feito.
Imagens flexível
Um grande problema que precisa ser resolvido com um “Responsive Website” são as imagens. Há uma série de técnicas para redimensionar imagens proporcionalmente, e muitos são facilmente aplicadas. A opção mais popular é usar CSS max-width para um reparo fácil.
img { max-width: 100%; }Enquanto nenhuma outra regra de largura em imagem for usada para substituir essa, cada imagem será carregada em seu tamanho original, a menos que a área de visualização torna-se menor que a largura original da imagem. A largura máxima da imagem é definido como 100% da tela ou largura do navegador, então quando que 100% torna-se mais estreito, o mesmo acontece com a imagem. Essencialmente, como Jason Grigsby observou: “A idéia por trás imagens de fluidos é fornecer imagens no tamanho máximo que será usado. Você não declarar a altura e a largura em seu código, mas sim você deixa o browser redimensionar as imagens quando necessário ao usar CSS para orientar seu tamanho relativo”. É uma grande técnica e simples para redimensionar imagens.
Note-se que max-width não é suportada no IE, mas um bom uso de width: 100% em um arquivo CSS específico resolveria o problema. Mais uma questão é que quando uma imagem é redimensionada para um espaço menor, em alguns navegadores mais antigos no Windows, a renderização não é tão clara como deveria ser. Mas existe alguns scripts JS quem corrigem este problema.
Sabemos que o tamanho da imagem original é destinado a dispositivos de grande porte. Mas se as imagens forem renderizadas em um dispositivo móvel, o que poderiamos fazer para não impactar significativamente o tempo de download e ocupar um espaço desnecessário?
Imagens Responsável por Grupo
Esta técnica, apresentada por Grupo, leva em consideração não apenas o redimensionamento de imagens proporcionalmente, mas também em diminui a resolução da imagem em dispositivos menores, paras as imagens grandes não desperdiçarem um espaço desnecessário em telas pequenas.
Esta técnica requer alguns arquivos, os quais estão disponíveis no Github. Primeiro, o arquivo JavaScript (rwd-images.js) e o arquivo .htaccess. Então, podemos usar apenas um pouco de HTML para fazer referência tanto a resolução de imagens maiores e menores:
- Primeiro, a imagem pequena e em seguida uma referência para a imagem maior usando o parâmetro “full“.
<img src="smallImg.jpg?full=largeImg.jpg">
O parâmetro “full” definido no arquivo relacionado acima e para qualquer tela que é maior do que 480 pixels, a imagem de maior resolução (largeImg.jpg) será carregado; telas menores não precisariam carregar a imagem maior, e assim a imagem menor (smallImg.jpg) será carregada.
O JavaScript insere no arquivo de imagem um elemento base que permite a página decidir qual a melhor usar para aquela determinada resolução. Quando a página carrega, todos os arquivos são reescritos para sua forma original, e apenas as imagens grandes ou pequenas são carregadas quando necessário. Com outras técnicas, todas as imagens de alta resolução teriam que ser carregados, mesmo que as versões maiores nunca seriam usados. Principalmente para sites com muitas imagens, esta técnica pode economizar muito no consumo de banda e tempo de carregamento.
Esta técnica é totalmente suportado em navegadores modernos, como o IE8+, Safari, Chrome e Opera, bem como os dispositivos móveis que usam esses navegadores mesmo (iPhone, iPad, etc.) Navegadores mais antigos (IE7 e Firefox) degradam muito bem e ainda redimensionam a imagem de resposta quando esta sendo carregada, mas para ambos em resoluções menores esta técnica é nula.
Redimensionamento de imagens no iPhone
Uma coisa legal sobre o iPhone e iPod Touch é que website se redimensiona automaticamente para caber na tela pequena. Um projeto normal só iria diminuir proporcionalmente no browser para um tamanho minúsculo, sem a necessidade de deslocamento para uma versão mobile. Então, o usuário poderia facilmente dar um “zoom in/out”, conforme necessário.
Mas isso gera um problemas quando redimencionamos as imagens proporcionalmente conforme o tamanho da tela. As imagens ainda são carregadas na sua forma original.
Para resolver este problema podemos usar uma meta tag específicas da Apple, colocando em seu site, dentro da tag <head> o código abaixo:
<meta name="viewport" content="width=device-width; initial-scale=1.0">
Definindo o initial-scale para 1 substitui o padrão de redimensionamento das imagens, deixando como é que a largura do site fique com a mesma largura do dispositivo (nos modos retrato ou paisagem). A documentação da Apple tem muito mais informações sobre a meta tag viewport.
Estrutura de layout personalizado
Para mudanças de tamanhos extremos, podemos querer alterar o layout totalmente, através de uma folha de estilo separada ou, de forma mais eficiente, através de uma consulta de mídia CSS. Este mudança não deve ser problemática, a maioria dos estilos pode permanecer o mesmo, enquanto as folhas de estilo específicas podem herdar estes estilos e os elementos podem ser decorados como “carros alegóricos”.
Por exemplo, poderíamos ter uma folha de estilo principal (que também seria o padrão) que define todos os principais elementos estruturais, tais como #conteiner, #header, #content , #sidebar, #nav, #footer, juntamente com cores, fundos e tipografia. Larguras com padrões flexíveis também poderia ser definido.
Se uma folha de estilo fez o layout muito estreito/curto (largura ou altura), poderíamos então detectar isso e mudar para uma nova folha de estilo. Esta nova folha de estilo “filha” adotaria esta a folha de estilo padrão e acrescentaria apenas o necessário para redefinir a estrutura do layout.
Aqui está o base.css (padrão) de conteúdo:
* link para o arquivo base.css
Media Queries
O CSS3 suporta todos os mesmos tipos de mídia como CSS 2.1, tais como screen, print e handheld, mas acrescentou dezenas de novos recursos de mídia, incluindo max-width, device-width, orientation e color. Novos dispositivos feitos após o lançamento do CSS3 (como o iPad e dispositivos Android) vai certamente dar suporte a recursos de mídia. Então, chamar uma consulta de mídia usando recursos CSS3 para esses dispositivos iria funcionar muito bem, e seria ignorado se acessado por um computador com um navegador mais antigo que não suporta CSS3.
Exemplo:
<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 480px) href="sheetland.css" />
Esta consulta de mídia é bastante auto-explicativa: se o navegador exibe esta página em uma tela (ao invés de impressão, etc), e se a largura da tela (não necessariamente o viewport) é de 480 pixels ou menos, então carregar sheetland.css.
Novos recursos CSS3 também incluem “orientation” (paisagem e retrato), device-width, min-device-width e muito mais. Pode-se criar várias folhas de estilo, bem como alterações no layout básico, definido para atender faixas de larguras e orientações (paisagem/retrato). Não deixe de olhar o artigo “Meet the media query” para mais exemplos e uma explicação mais aprofundada.
Várias consultas de mídia também podem ser descartadas para uma folha de estilo único, que é a opção mais eficiente quando utilizado:
/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
....
styles here
....
}
/* Smartphones (landscape) ----------- */
@media only screen and (min-width : 321px) {
....
styles here
....
}
/* Smartphones (portrait) ----------- */
@media only screen and (max-width : 320px) {
....
styles here
....
}
O código acima é de um modelo livre para várias consultas de mídia entre dispositivos populares por Andy Clark. Veja as diferenças entre esta abordagem e incluindo arquivos estilo diferente folha no mark-up como mostrado no post “Hardboiled CSS3 Media Queries”
Consultas de Mídia CSS3
Acima estão alguns exemplos de consultas como a mídia, tanto do CSS 2.1 e CSS3 poderia funcionar. Vamos agora olhar para alguns casos específicos de como usar consultas de mídia em CSS3 para criar projetos Web responsáveis. Muitos destes usos são facilmente aplicados hoje, e todos serão definitivamente aplicáveis em um futuro próximo.
As propriedades min-width e max-width fazer exatamente o que eles sugerem. O min-width propriedade define um browser mínimo ou largura da tela que um determinado conjunto de estilos (ou folha de estilo separada) seria aplicada. Se alguma coisa está abaixo deste limite, o link folha de estilo ou estilos serão ignorados. O max-width propriedade faz exatamente o oposto. Qualquer coisa acima da largura do navegador ou na tela de máxima especificada não se aplica à consulta respectivas mídias.
Nota nos exemplos abaixo que estamos usando a sintaxe para consultas de mídia que poderiam ser usados todos em um folha de estilo. Como mencionado acima, a forma mais eficiente de usar consultas de mídia é colocá-los todos em uma folha de estilo CSS, com o resto dos estilos para o site. Desta forma, várias solicitações não têm que ser feitas para várias folhas de estilo.
@media screen and (min-width: 600px) {
.myClass { width: 30%; float: right; }
}Na consulta de mídia acima a classe ( .myClass ) irá funcionar apenas se o navegador ou a largura da tela for acima de 600 pixels. Em outras palavras, esta consulta de mídia será executado somente se a largura mínima for de 600 pixels.
@media screen and (max-width: 600px) {
.aClassforSmallScreens { clear: both; font-size: 1.3em; }
}Agora, com o uso do max-width, esta consulta de mídia só se aplica a quando a largura da tela (ou navegador) for no máxima de 600 pixels ou mais estreita.
As consultas min-width/max-width podem ser aplicadas em qualquer tamanho de tela ou largura de navegador, às vezes é necessário fazer uma consulta de mídia que é relevante para um dispositivo específico. Isto significa que mesmo se um navegador ou área de visualização for minimizado para algo menor, a consulta de mídia ainda se aplicam ao tamanho do dispositivo real. O min-device-width e max-device-width são propriedades de consulta de mídia usados para atender um grupo de dispositivos com dimensões definidas, sem aplicar os mesmos estilos de outros tamanhos em um navegador que “imita” o tamanho do aparelho.
@media screen and (max-device-width: 480px) {
.classForiPhoneDisplay { font-size: 1.2em; }
}
@media screen and (min-device-width: 768px) {
.minimumiPadWidth { clear: both; margin-bottom: 2px solid #ccc; }
}Há também outros truques com consultas de mídia para dispositivos de destino específico. Thomas Maier escreveu dois pequenos trechos e explicações para a segmentação do iPhone e do iPad apenas:
- CSS for iPhone 4 (retina display)
Para o iPad especificamente, há também uma propriedade consulta de mídia chamado de orientação. O valor pode ser paisagem (orientação horizontal) ou retrato (orientação vertical).
@media screen and (orientation: landscape) {
.iPadLandscape { width: 30%; float: right; }
}
@media screen and (orientation: portrait) {
.iPadPortrait { clear: both; }
}Infelizmente, esta propriedade só funciona no iPad. Para determinar a orientação para o iPhone e outros dispositivos o truque é usar o max-device-width e min-device-width.
Há também muitas consultas de mídia que fazem sentido quando combinados. Por exemplo, o min-width e max-width podem definir um estilo específico.
@media screen and (min-width: 800px) and (max-width: 1200px) {
.classForaMediumScreen { background: #cc0000; width: 30%; float: right; }
}O código acima nesta consulta de mídia só se aplica quando a tela/browser tiver uma larguras entre 800 e 1200 pixels. Um bom uso dessa técnica é mostrar determinados conteúdos ou sidebars inteiro, dependendo da quantidade de espaço horizontal disponível.
Alguns desenvolvedores front-end preferem um link para uma folha de estilo separada para determinadas consultas de mídia. Se os benefícios organizacionais superarem a eficiência perdida – Tudo bem!. Para dispositivos que não mudam de orientação ou para telas cuja largura não podem ser alterados manualmente, usar uma folha de estilo separada são uma ótima alternativa.
Outro exemplo é um projeto flexível, destinado a telas de computadores com navegadores redimensionável. Se o navegador pode ser redimensionado manualmente, colocar todas as consultas variáveis de mídia em uma folha de estilo é a melhor saida.
No entanto, a organização pode ser a chave, e um desenvolvedores front-end pode querer definir consultas de mídia em uma tag de link HTML:
<link rel="stylesheet" media="screen and (max-width: 600px)" href="small.css" />
<link rel="stylesheet" media="screen and (min-width: 600px)" href="large.css" />
<link rel="stylesheet" media="print" href="print.css" />
JavaScript
Outro método que pode ser usado é o JavaScript, especialmente como um back-up para dispositivos que não suportam todas as opções de consulta de mídia CSS3. Felizmente, já existe uma biblioteca JavaScript pronta que faz com que os navegadores mais antigos (IE5+, Firefox 1+, Safari 2) oferecer suporte a consultas de mídia CSS3. Se você já está usando essas consultas, basta pegar uma cópia da biblioteca e incluí-lo no seu código: css3-mediaqueries.js.
Além disso, você pode optar por uma abordagem mais “hands-on” como no código jQuery abaixo. Que detecta a largura do navegador e muda a folha de estilo.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js">
<script type="text/javascript">
$(document).ready(function(){
$(window).bind("resize", resizeWindow);
function resizeWindow(e){
var newWindowWidth = $(window).width();
// If width width is below 600px, switch to the mobile stylesheet
if(newWindowWidth < 600){
$("link[rel=stylesheet]").attr( {href : "mobile.css"} );
}
// Else if width is above 600px, switch to the large stylesheet
else if(newWindowWidth > 600){
$("link[rel=stylesheet]").attr( {href : "style.css"} );
}
}
});
</script>
Existem muitas soluções em JavaScript para consultas de mídia CSS. Lembre-se que as consultas de mídia não são uma resposta absoluta, mas são ótimas opções para Web Developers quando se trata de soluções baseadas em CSS puro. Com a adição do JavaScript que podem acomodar variações muito mais abrangentes. Para obter mais informações leia o artigo “Combinação de consultas Mídia e JavaScript”
Mostrando ou ocultando Conteúdo
É possível diminuir as coisas proporcionalmente e reorganizar os elementos necessário para fazer caber tudo (razoavelmente bem), quando uma tela fica menor. Mas fazer todo o conteúdo de telas grandes disponíveis em uma tela menor ou dispositivo móvel nem sempre é a melhor alternativa. Temos como boas práticas para ambientes móveis: uma navegação mais simples, o conteúdo mais focado, listas/linhas em vez de múltiplas colunas.
O Web Developer não deve apenas saber como criar um layout flexível em uma ampla gama de plataformas e tamanhos de tela. Ele deve também deixar o usuário escolher o conteúdo. Felizmente, via CSS é possível mostrar e ocultar o conteúdo com facilidade!. Utilizando o “display: none;”
Basta declarar “display: none” para o elemento HTML que precisa ser escondido, em uma folha de estilo específica ou detectar a largura do navegador, e fazê-lo através de JavaScript. Além de esconder o conteúdo em telas menores, também podemos esconder os blocos em nossa folha de estilo padrão.
Note que não falamos do “visibility: hidden”, isso apenas deixa o conteúdo invisível (embora ele ainda está lá), enquanto a propriedade “display: none” esconde dele completamente. Para dispositivos menores, não há necessidade de manter o mark-up na página – isso poderia causar uma deslocamento desnecessário ou até quebrar o layout.
Aqui está o nosso mark-up:
<p>
<a href="#">Left Sidebar Content</a> | <a href="#">Right Sidebar Content</a>
</p>
<div id="content">
<h2>Main Content</h2>
</div>
<div id="sidebar-left">
<h2>A Left Sidebar</h2></span>
</div>
<div id="sidebar-right">
<h2>A Right Sidebar</h2>
</div>
Em nossa folha de estilo padrão a seguir, temos escondido os links para o conteúdo da barra lateral. Porque a nossa tela é grande o suficiente, podemos exibir este conteúdo no carregamento da página.
Aqui está o base.css (padrão) de conteúdo:
#content { width: 54%; float: left; margin-right: 3%; }
#sidebar-left { width: 20%; float: left; margin-right: 3%; }
#sidebar-right { width: 20%; float: left; }
.sidebar-nav { display: none; }Agora em seguida, nós escondemos as duas barras laterais e mostramos os links de navegação para estes pedaços de conteúdo. Como alternativa, os links de navegação poderiam ser chamados via JavaScript, apenas para cancelar o “display: none”, quando clicado as barras laterais poderiam ser exibidas abaixo do conteúdo (#content).
Aqui está o conteúdo (mais simples) mobile.css:
#content { width: 100%; }
#sidebar-left { display: none; }
#sidebar-right { display: none; }
.sidebar-nav { display: block; }Com a facilmente mostrar e ocultar conteúdo, reorganizar os elementos de layout e redimensionar automaticamente imagens, elementos de formulário e muito mais, um projeto pode ser transformado para atender a uma enorme variedade de tamanhos de tela e tipos de dispositivos. Quando a tela fica menor, reorganizar os elementos para se adequar as diretrizes móveis, por exemplo, use um script ou folha de estilo alternativa para aumentar o espaço em branco ou para substituir imagens de navegação em dispositivos móveis para uma melhor usabilidade (ícones seria mais benéfico em telas menores).
Abaixo estão alguns dos recursos pertinentes:
- Mobile Web Design Trends For 2009
- 7 Usability Guidelines for Websites on Mobile Devices
Alguns exemplos de Responsive Website
Abaixo temos alguns exemplos de Responsive Websites em prática hoje. Para muitos desses sites, existe várias soluções para uma variedade de navegadores, e alguns até mesmo ajustam os elementos dinamicamente dependendo do tamanho da tela e dimensões específicas do navegador. Visite cada um destes, e ajuste o tamanho do navegador ou dispositivos de mudança de vê-los em ação.
Galeria de “Media Queries”
Food Sense
 |  |  |  |
Fonte: Smashing Magazine, A List Apart, 24 ways, Impressive Webs
