11
abr

Design Responsivo

O conceito de design responsivo n√£o √© uma grande novidade, mas tem chamado bastante aten√ß√£o nos √ļltimos tempos com o crescimento do mercado de dispositivos m√≥veis, principalmente por conta dos¬†tablets¬†e celulares de tamanhos e resolu√ß√Ķes cada vez mais variadas.

Só para você saber, o layout do Midiatismo é um exemplo de design responsivo.

Neste novo contexto dos navegadores e v√°rias resolu√ß√Ķes, o design responsivo surge como uma evolu√ß√£o l√≥gica do design de¬†sites, tamb√©m conhecido como¬†web design. Antes grande parte da internet era acessada por resolu√ß√Ķes e navegadores muito semelhantes. At√© pouco tempo atr√°s bastava fazer um¬†site¬†que funcionava em Internet Explorer com resolu√ß√£o m√°xima de 1024√ó768 pixels que tudo estava resolvido, claro existiam outras caracter√≠sticas, mas a grande maioria estava nesse mesmo grupo ‚Äď no m√°ximo havia os usu√°rios de Mozilla Firefox. Hoje tudo mudou, temos TVs de 50‚Ä≥ polegadas acessando internet, temos celulares que tem telas de 2‚Ä≥ at√© 5‚Ä≥, tablets de 6‚Ä≥ at√© 11‚Ä≥ polegadas e sem contar os pr√≥prios computadores, que tem telas denetbook¬†at√© os mais novos iMacs da Apple, colocando uma margem de 11‚Ä≥ at√© 26‚Ä≥ polegadas.

 

midiatismo design responsivo exemplo 640x312 Design Responsivo: Entenda o que é a técnica e como ela funciona.
Layout do Midiatismo utiliza a técnica de design responsivo. Clique para ampliar.

 

Esta característica demonstra que um site pode ser visto de diversas formas e em diversos contextos, e é para isto que os sites devem estar preparados. O design responsivo, como o próprio nome já indica, consegue responder ao tamanho da tela para se adequar da melhor forma. Ao invés de criar dois sites separados, um para mobile e um para desktops, como era muito comum hoje, você faz apenas um site que vai se adaptar muito bem a qualquer tela em que ele for carregado.

Você faz um site responsivo ou vai fazer dez sites diferentes

Uma das principais vantagens do design responsivo também se torna um grande problema para as agências digitais. Se você quer que o seu site esteja adaptado aos celulares, smartphones, tablets, notebooks, desktops e TVs, você provavelmente teria que fazer pelo menos 5 sites diferentes. A evolução do design responsivo mudou bastante isto, conseguindo trazer a vantagens de ter diversos sites para um só lugar.

Mas esta facilidade de adaptação também cria um problema para as agências digitais e todos aqueles profissionais que trabalham no desenvolvimento de sites. Como cobrar um site com design responsivo? Você deve somar o valor de vários serviços ou deve ter um valor diferenciado? Você deve oferecer design responsivo em pacotes diferenciados onde cada um tem foco em certos dispositivos?

 

responsive templates 640x260 Design Responsivo: Entenda o que é a técnica e como ela funciona.
Entendendo como o layout responsivo se comporta.
Clique para ampliar.

 

Claro que o design responsivo n√£o resolve todos os problemas e talvez nem seja a solu√ß√£o para todos, mas definitivamente √© um caminho a ser seguido e ainda mais explorado. Muitos defendem que o melhor caminho ainda √© um site dedicado a cada dispositivo que pode ‚Äď e deve ‚Äď se aproveitar de t√©cnicas de design responsivo.

Há também quem aponte que o design responsivo não é a solução completa, já que ainda não consegue ser totalmente otimizado aos celulares (principalmente no quesito peso e velocidade de carregamento), mas ainda parece ser a melhor solução em relação a custo benefício.

A import√Ęncia da ado√ß√£o de padr√Ķes na internet

Apesar da exist√™ncia dos¬†padr√Ķes da W3C¬†para tentar igualar as¬†ferramentas¬†baseadas em web, quem desenvolve para web sabe que os padr√Ķes n√£o s√£o assim t√£o padronizados ‚Äď quem diga o Internet Explorer.

Hoje em dia n√£o h√° apenas dois navegadores centrais para voc√™ se preocupar. At√© pouco tempo atr√°s voc√™ fazia o site funcionar no Firefox e ‚Äď com muito trabalho ‚Äď no Internet Explorer 6 e 7. Hoje temos Internet Explorer (7, 8, 9 e 10), Firefox, Google Chrome (Desktop, tablet e celular), Safari, Opera (desde desktop at√© o da televis√£o) e v√°rios navegadores menores. Tudo isso sem contar a prolifera√ß√£o de sistemas operacionais, hoje em dia n√£o existe ‚Äúapenas‚ÄĚ o Windows, tamb√©m devemos nos preocupar com o Mac, Linux, Android, iOs, Windows Phone e por a√≠ vai.

A ado√ß√£o e evolu√ß√£o dos padr√Ķes de internet nunca foram t√£o necess√°rias como est√£o sendo agora.

 

meme testando navegadores 466x400 Design Responsivo: Entenda o que é a técnica e como ela funciona.
Meme do desenvolvedor de websites.
(clique para ampliar)

 

Media Queries e o User Agent

Estes dois termos s√£o essenciais para entender como os navegadores interpretam os sites. Em primeiro o¬†user agent, comumente utilizado para diferenciar o usu√°rio quando ele est√° acessando atrav√©s do celular ou do navegador desktop. O ‚Äúagente de usu√°rio‚ÄĚ (tradu√ß√£o literal, por favor, n√£o utilizem ela) √© a fun√ß√£o dentro do site que identifica as quest√Ķes t√©cnicas que envolvem o usu√°rio que esta o visitando.

Geralmente esta fun√ß√£o √© utilizada para diferenciar o site mobile do site normal fazendo apenas uma verifica√ß√£o de navegador e sistema operacional ‚Äď na verdade ele verifica algumas outras quest√Ķes mais t√©cnicas que n√£o vem ao caso agora. Mas o problema √© que muitos dispositivos e navegadores acabam n√£o entrando na lista, portanto n√£o s√£o direcionados para o site correto.

Por exemplo, quando você acessa o fictício www.exemplodesite.com.br e é redirecionado para om.exemplodesite.com.br é porque provavelmente ele identificou que o seu user agent era mobile. O problema é que se você usar, por exemplo, o Firefox para Android, ele não vai ser identificado e irá mostrar o www.exemplodesite.com.br (Obs.: usei Firefox para Android como exemplo porque isto ocorreu recentemente comigo).

O uset-agent do primeiro iPad era este:

Mozilla/5.0 (iPad; U; CPU OS 3_2_1 like Mac OS X; en-us) AppleWebKit/531.21.10 (KHTML, like Gecko) Mobile/7B405

J√° os¬†media queries¬†(que podemos traduzir como ‚ÄúConfer√™ncia de M√≠dia‚ÄĚ[?]) s√£o uma propriedade do CSS (‚Äúc√≥digo de estilo‚ÄĚ das p√°ginas web) que identifica qual a m√≠dia aquele site est√° sendo carregado e atribui determinado estilo a ela. O design responsivo atual trabalha basicamente com esta fun√ß√£o, modificando tamanhos, dimens√Ķes e formatos conforme o tamanho da tela do usu√°rio.

Por exemplo, se voc√™ abrir o Midiatismo e redimensionar a tela do seu navegador, quando esta fun√ß√£o do CSS identificar que se trata de uma tela menor que 760 pixels de largura, ele ir√° mudar o visual do blog, sem ter nenhuma altera√ß√£o no conte√ļdo carregado, apenas na forma como eles est√£o dispostos.

Você pode entender mais sobre as media queries através desta documentação da W3C.

S√≥ media queries n√£o bastam. Seria impratic√°vel criar uma media querie para cada resolu√ß√£o existente ‚ÄĒ seriam milhares! Devemos usar poucas media queries e fazer o¬†layout fluir entre os breakpoints.

O segredo é não usar pixels nas medidas, mas priorizar um layout mais fluído e flexível baseado em porcentagens e ems.

Seria at√© poss√≠vel criar um site mobile apenas com essa ideia, sem usar media queries. Se tudo for porcentual, o design se adaptaria a todas as resolu√ß√Ķes. Mas, na pr√°tica, n√£o seria um design capaz de aproveitar o potencial de cada dispositivo. As media queries permitem ajustar o design pensando em adaptar e melhorar a experi√™ncia do usu√°rio.

Sérgio Lopes

Como o design responsivo é visto pelos buscadores

Esta t√©cnica de design j√° √© defendida por muitos j√° faz algum tempo, mas s√≥ recentemente come√ßou a ganhar destaque depois que o Google confirmou indiretamente que para a¬†√°rea¬†de SEO (otimiza√ß√£o para buscadores) o design responsivo √© o mais indicado. √Č mais f√°cil para o Google perceber que o¬†www.exemplodesite.com.br¬†tem um layout que se adapta a qualquer tela do que entender que o¬†www.outroexemplo.com.br, o¬†m.outroexemplo.com.br¬†e otablet.outroexemplo.com.br¬†s√£o todos o mesmo sites e n√£o est√£o apenas copiando conte√ļdo um do outro.

Segundo a página de ajuda do Google para design em smartphones, a recomendação é a seguinte:

Google recommends webmasters follow the industry best practice of using responsive web design, namely serving the same HTML for all devices and using only CSS media queries to decide the rendering on each device.

If responsive design is not the best option to serve your users, Google supports having your content being served using different HTML. The different HTML can be on the same URL or on different URLs, and Googlebot can handle both setups appropriately if you follow our recommendations.

Google Webmaster

Ou em tradução literal:

Google recomenda que os webmasters sigam a melhor pr√°tica da ind√ļstria usando design responsivos, oferecendo o mesmo c√≥digo HTML para todos os dispositivos e usando apenas¬†media queries¬†de CSS para decidir como a informa√ß√£o deve ser renderizada.

[…]

Design responsivo, design adaptivo, design fixo, design líquido ou design fluído?

Com a utilização em larga escala do conceito de design responsivo, surgem todos os dias novas teorias e nomes para definir melhor esta técnica. Nesta discussão acabam entrando diversos novos nomes, como design líquido, fluído, adaptivo e fixo. Mas o que exatamente significam todos estes termos?

N√£o h√° um consenso ainda para a utiliza√ß√£o destes termos, v√°rios autores e profissionais da √°rea defendem diferentes vis√Ķes sobe este mesmo problema, mas o fato √© que o termo ‚Äúdesign responsivo‚ÄĚ √© amplamente aceito e utilizado no mercado.

Vamos entender um pouco melhor cada conceito. Lembrando que está é a minha visão e a definição de cada termo pode variar conforme o autor que você procurar. De fato, estes termos ainda estão sendo discutidos e possivelmente em um futuro próximos vamos ter definição mais aceitas.

Design de largura fixa:¬†Este √© o formato que se utilizava anteriormente e muito usado ainda hoje em dia, talvez o mais comum por enquanto. Neste modelo a p√°gina tem tamanho fixo para tudo, independente de onde est√° sendo visto. Se o site tem tamanho de 1024x600px, este ser√° o tamanho dela em qualquer¬†circunst√Ęncia. Quando utilizada est√° t√©cnica, o desenvolvedor acaba se obrigando a criar um site para desktop e um totalmente novo para os smartphones.

Exemplo: http://www.apple.com/br/, http://www.ubuntu.com/

Design adaptivo ou responsivo: Nesta técnica o site é construído de forma que ele tente se adaptar o melhor possível a tela em que esta sendo carregado. Ela utiliza principalmente as media queries para definir como o site deve se comportar em cada momento. Neste caso é utilizado uma mistura do design fixo e design fluído. Muitos concordam que o do design adaptivo e o responsivo são a mesma coisa, porém outros autores acreditam que há pequenas diferenças entre eles, cruciais para a identificação de cada um.

Exemplo: http://www.midiatismo.com.br/, http://foundation.zurb.com/

Design flu√≠do ou l√≠quido:¬†Apesar de ter ainda outras varia√ß√Ķes no nome, esta t√©cnica √© na verdade uma vers√£o menos complexa do design adaptivo. Este tipo de design se preocupa em construir tudo em porcentagens, nunca utilizando n√ļmeros fixos na sua constru√ß√£o. O tamanho do site ser√°, por exemplo, 80% da tela. Na TV ele ocupara 80%, no desktop 80% e no celular, 80%. Na utiliza√ß√£o desta t√©cnica geralmente voc√™ ter√° que ter uma vers√£o para celular e uma para desktop da mesma forma, mas a vantagem √© que dentro do desktop ele ir√° se adaptar melhor a v√°rios tamanhos de tela, ao contr√°rio do fixo, que ser√° igual para todos.

Exemplo: http://thenextweb.com/, http://pt.wikipedia.org/

Obs.:¬†√Č importante lembrar que um site pode unir estas tr√™s t√©cnicas em apenas um site, misturando blocos fixos com blocos em porcentagens e utilizando¬†media queries¬†para adaptar a diferentes telas.

Quero fazer o meu site responsivo. Por onde é melhor começar?

Depois que você descobre a existência do design responsivo, geralmente fica empolgado querendo aplicar isto a seu site também. Mas como começar?

A verdade é que você provavelmente precisará reconstruir boa parte do seu site. Mas para ter um pouco menos de trabalho, recomendo que procure utilizar frameworks que já trabalhem com o design responsivo. Frameworks são estruturas de código já prontas que trazem consigo diversas linhas em CSS, JavaScript e HTML já escritas, facilitando bastante o trabalho do desenvolvedor do site.

Entre os frameworks mais conhecidos podemos citar os seguintes:

Como você pode ver, existem dezenas.

 Leituras Recomendadas:

Retirado do site Midiatismo -> http://www.midiatismo.com.br/o-mobile/design-responsivo-entenda-o-que-e-a-tecnica-e-como-ela-funciona

Conheça mais sobre o criador do Sites por Assinatura:

Rodrigo Bahiense – Webdesigner e Designer gr√°fico
www.sitesporassinatura.com.br

Sou formado em Desenho Industrial, moro no Rio de Janeiro e trabalho h√° mais de 10 anos na profiss√£o. Sou focado em design de interfaces para aplica√ß√Ķes web e desenvolvimento de sites em WordPress e Joomla. Al√©m disso atuo na √°rea gr√°fica como ilustrador e designer gr√°fico. Crist√£o, casado e nas horas vagas toco contrabaixo.

 

Meu Facebook pessoal: https://www.facebook.com/rodrigobahiense

Página: https://www.facebook.com/sitesporassinatura

Twitter: https://twitter.com/rodrigobahiense

email: sitesporassinatura@gmail.com

Telefone: (21) 982402115

Share Button
0 No comments

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *