MENU

Design Responsivo: Entenda o que a tcnica e como ela funciona.

Layout / Design (http://www.midiatismo.com.br/category/layout-design/) Mobile
(http://www.midiatismo.com.br/category/o-mobile/)
Postado tera-feira, 20/11/12
Atualizado: sexta-feira, 02/05/14
O conceito de design responsivo no uma grande novidade, mas tem
chamado bastante ateno nos ltimos tempos com o crescimento do
mercado de dispositivos mveis, principalmente por conta dos tablets e
celulares de tamanhos e resolues cada vez mais variadas.
S para voc saber, o layout do Midiatismo um exemplo de design
responsivo. (http://www.midiatismo.com.br/interno/midiatismo-6-e-o-
design-responsivo)
Neste novo contexto dos navegadores e vrias resolues, o design responsivo
surge como uma evoluo lgica do design de sites, tambm conhecido como
web design. Antes grande parte da internet era acessada por resolues e
navegadores muito semelhantes. At pouco tempo atrs bastava fazer um site
que funcionava em Internet Explorer com resoluo mxima de 1024768
pixels que tudo estava resolvido, claro existiam outras caractersticas, mas a
grande maioria estava nesse mesmo grupo no mximo havia os usurios 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 prprios computadores, que tem telas de
netbookat os mais novos iMacs da Apple, colocando uma margem de 11 at
26 polegadas.
(http://i2.wp.com/www.midiatismo.com.br/wp-
content/uploads/2012/08/midiatismo-design-responsivo-exemplo.jpg)
Layout do Midiatismo utiliza a tcnica de design responsivo. Clique para ampliar.
Esta caracterstica 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 prprio nome j indica, consegue responder ao
Pgina 1 de 10 Design Responsivo: Entenda o que a tcnica e como ela funciona.
25/06/2014 http://www.midiatismo.com.br/o-mobile/design-responsivo-entenda-o-que-e-a-tecnica...
tamanho da tela para se adequar da melhor forma. Ao invs 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 tambm se torna um
grande problema para as agncias 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 evoluo do
design responsivo mudou bastante isto, conseguindo trazer a vantagens de ter
diversos sites para um s lugar.
Mas esta facilidade de adaptao tambm cria um problema para as agncias
digitais e todos aqueles profissionais que trabalham no desenvolvimento de
sites. Como cobrar um site com design responsivo? Voc deve somar o valor de
vrios servios ou deve ter um valor diferenciado? Voc deve oferecer design
responsivo em pacotes diferenciados onde cada um tem foco em certos
dispositivos?
(http://i2.wp.com/www.midiatismo.com.br/wp-content/uploads/2012/11/responsive-
templates.jpg)
Entendendo como o layout responsivo se comporta.
Clique para ampliar.
Claro que o design responsivo no resolve todos os problemas e talvez nem
seja a soluo 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 tcnicas de
design responsivo.
Pgina 2 de 10 Design Responsivo: Entenda o que a tcnica e como ela funciona.
25/06/2014 http://www.midiatismo.com.br/o-mobile/design-responsivo-entenda-o-que-e-a-tecnica...
H tambm quem aponte que o design responsivo no a soluo completa, j
que ainda no consegue ser totalmente otimizado aos celulares
(principalmente no quesito peso e velocidade de carregamento), mas ainda
parece ser a melhor soluo em relao a custo benefcio.
A importncia da adoo de padres na internet
Apesar da existncia dos padres da W3C (http://www.w3c.br/Padroes) para
tentar igualar asferramentasbaseadas em web, quem desenvolve para web
sabe que os padres no so assim to padronizados quem diga o Internet
Explorer.
Hoje em dia no h apenas dois navegadores centrais para voc se preocupar.
At pouco tempo atrs 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 televiso) e vrios navegadores menores. Tudo isso sem
contar a proliferao de sistemas operacionais, hoje em dia no existe
apenas o Windows, tambm devemos nos preocupar com o Mac, Linux,
Android, iOs, Windows Phone e por a vai.
A adoo e evoluo dos padres de internet nunca foram to necessrias
como esto sendo agora.
Pgina 3 de 10 Design Responsivo: Entenda o que a tcnica e como ela funciona.
25/06/2014 http://www.midiatismo.com.br/o-mobile/design-responsivo-entenda-o-que-e-a-tecnica...
(http://i2.wp.com/www.midiatismo.com.br/wp-content/uploads/2012/11/meme-
testando-navegadores.jpg)
Meme do desenvolvedor de websites.
(clique para ampliar)
Media Queries e o User Agent
Estes dois termos so essenciais para entender como os navegadores
interpretam os sites. Em primeiro o user agent, comumente utilizado para
diferenciar o usurio quando ele est acessando atravs do celular ou do
navegador desktop. O agente de usurio (traduo literal, por favor, no
utilizem ela) a funo dentro do site que identifica as questes tcnicas que
envolvem o usurio que esta o visitando.
Geralmente esta funo utilizada para diferenciar o site mobile do site normal
fazendo apenas uma verificao de navegador e sistema operacional na
verdade ele verifica algumas outras questes mais tcnicas que no vem ao
caso agora. Mas o problema que muitos dispositivos e navegadores acabam
no entrando na lista, portanto no so direcionados para o site correto.
Por exemplo, quando voc acessa o fictciowww.exemplodesite.com.br e
redirecionado para o m.exemplodesite.com.br porque provavelmente ele
identificou que o seu user agent era mobile. O problema que se voc usar, por
Pgina 4 de 10 Design Responsivo: Entenda o que a tcnica e como ela funciona.
25/06/2014 http://www.midiatismo.com.br/o-mobile/design-responsivo-entenda-o-que-e-a-tecnica...
exemplo, o Firefox para Android, ele no vai ser identificado e ir mostrar o
www.exemplodesite.com.br (Obs.:usei Firefox para Android como exemplo
porque isto ocorreu recentemente comigo).
Ouset-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 Conferncia de Mdia[?])
so uma propriedade do CSS (cdigo de estilo das pginas web) que identifica
qual a mdia aquele site est sendo carregado e atribui determinado estilo a
ela. O design responsivo atual trabalha basicamente com esta funo,
modificando tamanhos, dimenses e formatos conforme o tamanho da tela do
usurio.
Por exemplo, se voc abrir o Midiatismo e redimensionar a tela do seu
navegador, quando esta funo 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 alterao no contedo carregado, apenas na forma como eles esto
dispostos.
Voc pode entender mais sobre asmedia queries atravs desta documentao
da W3C (http://www.w3.org/TR/css3-mediaqueries/).
S media queries no bastam. Seria impraticvel criar uma media
querie para cada resoluo existente seriam milhares! Devemos
usar poucas media queries e fazer olayout fluir entre os breakpoints.
O segredo no usar pixels nas medidas, mas priorizar um layout
mais fludo e flexvel baseado emporcentagens e ems.
Seria at possvel criar um site mobile apenas com essa ideia, sem
usar media queries. Se tudo for porcentual, o design se adaptaria a
todas as resolues. Mas, na prtica, no seria um design capaz de
aproveitar o potencial de cada dispositivo. As media queries
permitem ajustar o design pensando em adaptar e melhorar a
experincia do usurio.
Srgio Lopes
Pgina 5 de 10 Design Responsivo: Entenda o que a tcnica e como ela funciona.
25/06/2014 http://www.midiatismo.com.br/o-mobile/design-responsivo-entenda-o-que-e-a-tecnica...
Como o design responsivo visto pelos buscadores
Esta tcnica de design j defendida por muitos j faz algum tempo, mas s
recentemente comeou a ganhar destaque depois que o Google confirmou
indiretamente que para areade SEO (otimizao para buscadores) o design
responsivo o mais indicado. mais fcil 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 o
tablet.outroexemplo.com.br so todos o mesmo sites e no esto apenas
copiando contedo um do outro.
Segundo a pgina de ajuda do Google para design em smartphones
(https://developers.google.com/webmasters/smartphone-sites/), a
recomendao 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 traduo literal:
Google recomenda que os webmasters sigam a melhor prtica da
indstria usando design responsivos, oferecendo o mesmo cdigo
HTML para todos os dispositivos e usando apenasmedia queries de
CSS para decidir como a informao deve ser renderizada.
[...]
Design responsivo, design adaptivo, design fixo, design lquido ou
Pgina 6 de 10 Design Responsivo: Entenda o que a tcnica e como ela funciona.
25/06/2014 http://www.midiatismo.com.br/o-mobile/design-responsivo-entenda-o-que-e-a-tecnica...
design fludo?
Com a utilizao em larga escala do conceito de design responsivo, surgem
todos os dias novas teorias e nomes para definir melhor esta tcnica. Nesta
discusso acabam entrando diversos novos nomes, como design lquido, fludo,
adaptivo e fixo. Mas o que exatamente significam todos estes termos?
No h um consenso ainda para a utilizao destes termos, vrios autores e
profissionais da rea defendem diferentes vises 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 viso e a definio de cada termo pode variar conforme o autor que voc
procurar. De fato, estes termos ainda esto sendo discutidos e possivelmente
em um futuro prximos vamos ter definio 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 pgina tem tamanho fixo para tudo, independente de onde est
sendo visto. Se o site tem tamanho de 1024x600px, este ser o tamanho dela
em qualquercircunstncia. Quando utilizada est tcnica, 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.apple.com/br/),http://www.ubuntu.com/
(http://www.ubuntu.com/) (O site do Ubuntu agora responsivo tambm)
Design adaptivo ou responsivo:Nesta tcnica o site construdo de forma que
ele tente se adaptar o melhor possvel a tela em que esta sendo carregado. Ela
utiliza principalmente asmedia queries para definir como o site deve se
comportar em cada momento. Neste caso utilizado uma mistura do design
fixo e design fludo. Muitos concordam que o do design adaptivo e o responsivo
so a mesma coisa, porm outros autores acreditam que h pequenas
diferenas entre eles, cruciais para a identificao de cada um.
Exemplo:http://www.midiatismo.com.br/
(http://www.midiatismo.com.br/),http://foundation.zurb.com/
(http://foundation.zurb.com/)
Pgina 7 de 10 Design Responsivo: Entenda o que a tcnica e como ela funciona.
25/06/2014 http://www.midiatismo.com.br/o-mobile/design-responsivo-entenda-o-que-e-a-tecnica...
Design fludo ou lquido: Apesar de ter ainda outras variaes no nome, esta
tcnica na verdade uma verso menos complexa do design adaptivo. Este
tipo de design se preocupa em construir tudo em porcentagens, nunca
utilizando nmeros fixos na sua construo. O tamanho do site ser, por
exemplo, 80% da tela. Na TV ele ocupara 80%, no desktop 80% e no celular, 80%.
Na utilizao desta tcnica geralmente voc ter que ter uma verso para
celular e uma para desktop da mesma forma, mas a vantagem que dentro do
desktop ele ir se adaptar melhor a vrios tamanhos de tela, ao contrrio do
fixo, que ser igual para todos.
Exemplo:http://thenextweb.com/
(http://thenextweb.com/),http://pt.wikipedia.org/
(http://pt.wikipedia.org/wiki/Wikip%C3%A9dia:P%C3%A1gina_principal)
Obs.: importante lembrar que um site pode unir estas trs tcnicas 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 comear?
Depois que voc descobre a existncia do design responsivo, geralmente fica
empolgado querendo aplicar isto a seu site tambm. Mas como comear?
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
so estruturas de cdigo j prontas que trazem consigo diversas linhas em
CSS, JavaScript e HTML j escritas, facilitando bastante o trabalho do
desenvolvedor do site.
Entre osframeworks mais conhecidos podemos citar os seguintes:
Foundation (http://foundation.zurb.com/ (http://foundation.zurb.com/))
Boostrap (http://twitter.github.com/bootstrap/
(http://twitter.github.com/bootstrap/))
Semantic Grid System (http://semantic.gs/ (http://semantic.gs/))
Frameless (http://framelessgrid.com/ (http://framelessgrid.com/))
Skeleton (http://www.getskeleton.com/ (http://www.getskeleton.com/))
Golden Grid (http://goldengridsystem.com/ (http://goldengridsystem.com/))
Fluid Baseline (http://fluidbaselinegrid.com/ (http://fluidbaselinegrid.com/))
Pgina 8 de 10 Design Responsivo: Entenda o que a tcnica e como ela funciona.
25/06/2014 http://www.midiatismo.com.br/o-mobile/design-responsivo-entenda-o-que-e-a-tecnica...
Facebook
(http://www.facebook.com/sharer.php?
ERROR: stackunderflow
OFFENDING COMMAND: ~
STACK: