Manual de Web Design Responsivo

Manual de Web Design Responsivo
www.chiefofdesign.com.br
Sumrio
Introduo............................................................................................................................................3
Como surgiu o Design Responsivo (RWD)?....................................................................... 7
Elementos do Design Responsivo...........................................................................................9
Resolues Comuns.....................................................................................................................12
Contedo First..............................................................................................................................13
Wireframe para comear............................................................................................................14
Grids para organizar e adaptar................................................................................................16
Prefira cones, CSS e fontes a imagens............................................................................. 26
Otimize as suas imagens........................................................................................................... 27
Dispositivos com Tela de Retina............................................................................................28
Use medidas relativas ao invs de absolutas................................................................. 29
Utilize somente o necessrio...................................................................................................30
Art Direction......................................................................................................................................31
Use mockups para apresentar para o cliente................................................................. 32
Design Responsivo x Design Fluido.................................................................................... 33
Design Responsivo (RWD) ou Design Adaptativo (AWD) ......................................34
Consideraes Finais.................................................................................................................. 37
Referncias.......................................................................................................................................38
Apresentao
Me lembro que comecei a desenvolver as minhas primeiras pginas web por
volta de 2008/2009. Eu peguei uma poca boa, pois os padres web estavam
se fortificando cada vez mais e os sites feitos com tabelas, um jeito de se
estruturar sites atravs de tabelas html, j estavam em decadncia.
Nessa poca j se comeava a se pensar sobre web design responsivo (apesar
que ainda tive que lidar com as horrveis tabelas), mas ainda era muito pouco
e esse termo ainda nem existia. Normalmente os web designers criavam no
Photoshop, no mximo, uma verso desktop e outra para mobile (por vezes
eles eram at bem diferentes.) E quando isso ia para o cdigo a mesma coisa
acontecia: criava-se um site para desktop e outro para mobile e no raro essa
verso mobile era em tabelas.
Apesar de naquela poca no se levar to a srio o conceito que temos hoje
de design responsivo a preocupao de se criar layouts que funcionassem
bem e com mesma qualidade em vrios dispositivos j era um tanto real e
crescia rapidamente, praticamente na mesma medida em que se crescia o
acesso das pessoas aos smartphones e tablets.
Hoje em dia impossvel ao se criar uma interface web no se pensar na
responsividade, ou seja, na adaptao do site para vrias resolues, qui
todas que se pode alcanar.
Este e-book vem para te ajudar nessa questo fundamental na criao de
sites que se chama Design Responsivo ou de forma abreviada RWD.
O que voc encontrar neste e-book?
A ideia deste e-book te ajudar a projetar um site responsivo mesmo antes de
implement-lo no cdigo. Os cdigos HTML, CSS e Javascripts so essenciais
para o funcionamento do Design Responsivo, entretanto neste e-book no

iremos a fundo nessa questo, pois ns do Chief j temos um e-book Fluncia
em HTML e CSS (voc pode adquiri-lo aqui) onde introduzimos o assunto.
E tambm porque este e-book ficaria muito longo e fugiria do principal objetivo
dele: ajudar voc web designer (ou criativo que trablalha com web) a pensar
e projetar um site responsivo independente do seu grau de conhecimento em
cdigos. Ento a ideia te ajudar a comear a criar e projetar um design
responsivo j na parte da elaborao do Design.
Muitos web designers criam um site desktop e depois ajeitam o site para ser
responsivo. Ns no queremos isso. Queremos que pense no funcionamento,
na usabilidade, na experincia do usurio desde a criao do site no Photoshop
(ou no seu software favorito).
Quando comecei a criar para web crivamos um layout para 800x600, depois
para 1024x768...
No momento atual no devemos pensar em qual resoluo e sim na melhor
experincia que podemos proporcionar aos usurios independentemente do
tamanho da tela e que o design seja capaz de atender as caractersticas do
dispositivo ao qual est sendo aplicado.
Design se trata somente daqulio que se v, mas tambm como funciona como
um todo.
Ento venha comigo e preste ateno nas orientaes, dicas e macetes deste
e-book. Bele?
Siga-me os bons! :D
Esta obra est licenciada com uma Licena Creative Commons Atribuio-NoComercial-CompartilhaIgual 4.0 Internacional.
Sobre o Autor
David Arty o fundador do Blog
Chief of Design.
natural de So Paulo, Brasil.
Graduado em Design Grfico e formado em Tcnico em Multimdia.
Trabalha como Web Designer desde 2009.
Autodidata por natureza, trabalhou
em agncias, empresas de TI,
stdios, entre outros. Atua tambm
como freelancer e em algumas
temporadas ministra treinamentos
de Web Design.
Ama comunicao e criao. Encontrou no Design e no Desenvolvimento Front-End formas de unir e
atuar com essas duas coisas.
Por isso um entusiasta por tudo
que envolve design e web, e tenta
transformar ideias loucas e complexas em peas simples, atrativas,
bonitas e funcionais.
Sobre o Blog
O Chief of Design um blog que
fala sobre Web Design, Front-End,
Design Grfico, entre outras coisas.
O intuito do blog contribuir, principalmente, com quem est iniciando na rea e que est buscando por
aprendizado e respostas para suas
dvidas em relao as essas reas.
O blog segue uma linha instrucional, ou seja, o objetivo compartilhar
conhecimento e servir de referncia para ajudar profissionais, principalmente os iniciantes, da rea criativa a produzirem, criarem, e quem
sabe, por que no, e se tornarem
Chief nesse segmento.
Para saber mais acesse:
Como surgiu o Design Responsivo (RWD)?

A internet surgiu em 1990 com o cientista Tim Berners-Lee, inventor da web
e fundador do W3C (organizao sem fins lucrativos que tem a misso de
orientar os desenvolvedores para o uso de boas prticas para que a web seja
acessvel para todos de forma igual). Naquela poca os sites eram todos muitos simples em termos visuais e tambm ainda no tnhamos internet mvel,
smartphones, tablets e etc.
Tudo mudou muito rpido. A partir dos
anos 2000, com a chegada dos diferentes dispositivos e das diferentes
possibilidades de acesso a internet, a
necessidade de se criar sites que garantissem uma boa experincia, independente da resoluo, foi crescendo
e a soluo ideal (pelo menos at agora) surgiu no dia 25 de maio de 2010
com o desenvolvedor Ethan Marcotte.
Ethan escreveu um artigo no famoso
site Alispart (veja aqui) que mudaria
completamente a forma de desenvolvimento de layouts para a web. O artigo
abordava a mudana na forma de uso da web com o crescimento, que s aumentava, de usurios mobile e como isso afetava (em 2010) as empresas que
necessitavam que seus sites tivessem uma boa performance e experincia
tambm nos novos dispositivos.
A grande sacada do artigo foi a comparao com um movimento da arquitetura ps-moderno, tendo com um dos principais nomes o arquiteto Nicholas
Negroponte, que trabalhava para criar ambientes adaptveis e sustentveis as
condies j existentes.
Com isso Ethan mostrou que era preciso criar um layout adaptvel, inteligente
e que funcionasse independente das resolues e mdias usadas.
Esse artigo mudou a forma de pensar no desenvolvimento de sites em todas
as camadas: desde a criao a at o desenvolvimento.
Hoje em dia o RWD uma realidade e criar uma interface para web sem se
pensar na responsividade cometer um erro crasso.
Mais do que criar um layout responsivo o RWD trouxe a importncia de se
pensar no visitante garantindo que seu site seja acessvel ao maior nmero de
dispositivos e com uma navegao agradavl nos dispositivos menores.
Elementos do Design Responsivo

O Design Responsivo tem alguns elementos fundamentais. Vrios desses elementos fazem parte dos cdigos Front-End. No iremos nos aprofundar muito
nesses elementos e focaremos mais na criao do layout, entretanto irei apresent-los para voc, at porque voc precisa ter noo de que tudo funciona
como uma engrenagem e que cada pecinha importante para o funcionamento dessa mquina.
Ento mesmo que voc no desenvolva os cdigos da parte Frotn-End importante estar alinhado com o desenvolvedor que ir faz-lo, pois HTML,CSS
e JS so algumas dessas pecinhas fundamentais do RWD.
Ento as tecnologias essenciais para o Design Responsivo, so:

Media queries e CSS3

HTML5
Javascript
Mdias adaptveis
Grid Fludo
Media queries: uma tecnologia CSS (Estilo em Cascata (CSS) que a linguagem responsvel pela formatao do estilo, do design do site) que possibilita criar folhas de estilos baseadas na largura da tela do dispositivo atravs
do que chamos de breakspoints.
Portanto podemos criar um estilo para quando o site for renderizado numa
resoluo de 1200px (pixels), outro para uma resoluo de 760px, 480px e assim vai.... No existem regras especficas para isso. Existem sim alguns tamanhos mais comuns, mas quem realmente deve determinar esses breakspoints
o contedo do site.
Alm das medias queries o CSS3 como um todo e todas as suas possibilidades um dos pilares do RWD.
HTML: a tecnologia que usamos para criar sites. Ele responsvel pela
estruturao do site. HTML5, a verso mais recente do HTML, fundamental
para estruturao de um site responsivo.
Javascript: uma linguagem de programao. No RWD ele possibilita, atravs de polyfills e scripts, que os navegadores mais antigos reconheam
os novos elementos do HTML5 tornando assim o design responsivo mais
abrangente e atingindo at navegadores antigos.
Caso voc no tenha conhecimento nessa tecnologia sugiro que adquira o
e-book solidrio em Fluncia em HTMl e CSS.
Mdias adaptveis: so imagens, vdeos, entre outros, com a capacidade de

se expandir ou contrair de acordo com a resoluo do dispositivo. Isso pode
ser feito atravs de scripts e/ou sentenas CSS.
As mdias precisam ser fludas para evitar que seja muito grande em resolues pequenas ou muito pequena em resolues grandes.
Grid Fludo : uma tcnica de desenvolvimento que utiliza medidas relativas

para criar um layout de site de maneira fluda, ou seja, que ele possa estender
ou se contrair de acordo com o tamanho da tela do dispositivo acessado.
Existem frameworks CSS que nos ajudam a criar um Grid Fludo na prtica,
visualizando direto no navegador, mas usaremos tal conceito para pensarmos
no passo anterior a implementao do cdigo, ou seja, a parte da criao.
10
Para o Web Designer responsvel pelo design do projeto web importantssimo que ele conhea e use o conceito de Grid Fludo na hora da criao do
layout no photoshop (ou no seu software favorito).
Focaremos nesse conceito e veremos a seguir como us-lo para criar um layout responsivo. E caso voc tenha interesse nos outros tpicos citados o primeiro passo que voc pode dar adquirir o E-book de HTML e CSS do Chief
of Design neste link!
11
Resolues Comuns
Com as inmeras resolues impossvel atender a todas com total perfeio,
porm importante saber dos tamanhos mais comuns somente para termos
uma base para construirmos o layout no software grfico.
1200 pixels de largura
Desktops com monitores widescreen.
Tablets em formato paisagem
e monitores antigos.
Tablets em formato retrato.
600 pixels de larguraTablets pequenos
Smartphones em formato paisagem.
Smartphones em formato retrato
Pensar em breakpoints, ou pontos de quebra, j no to eficaz devido as
inmeras resolues. Portanto devemos fazer um site de qualidade que atenda resolues entre 1200px e 300px.
A seguir veremos o porqu no devemos nos prender aos breakpoints.
12
Contedo First
Um conceito usado no desenvolvimento de sites responsivos o mobile first,
criado em 2009 pelo desenvolvedor Luke Wrobleswki no site lukew (confira
aqui). Este conceito defende que devemos comear o desenvolvimento de um
site primeiro por sua verso mobile. Indo do menor para o maior (do mobile
at desktop). Com isso se economiza e reaproveita cdigos evitando coisas
desnecessrias e refaes durante o projeto.
Focando somente na concepo de um layout, podemos fazer uma analogia
e usarmos o Contedo First.
Portanto o contedo que vai determinar qual a melhor estrutura para o
layout. Ter definido o contedo que o site vai apresentar essencial. E quando falo contedo no digo necessariamente o contedo real, ou seja, aquele
texto bonito e bem escrito que fala do produto, mas sim o objetivo do site, do
tipo de contedo, quais os tipos de mdias que o site ter, ter uma estimativa
do tamanho do texto corrido de cara rea e etc.
Para saber dessas informaes importante estar alinhado com quem fornece
as informaes do proeeto e, claro, ter um briefing bem estruturado (caso
tenha interesse em saber mais sobre briefing leia esse artigo).
Com o contedo em mos, podemos pensar em como organiz-lo e apresenta-lo da melhor forma possvel nas mais vrias resolues. E ser o contedo
a estrela do layout. Faremos o design responsivo para que ele brilhe.
Ento vamos comear a estruturar o site responsivo pelo wireframe.
13
Wireframe para comear

Wireframe um esboo: uma simulao de como a interface dever ser.
Nele ns prevemos como o contedo ser exposto de forma organizada.
Podemos construir um wireframe no papel, no computador ou nos dois.

A ideia organizar o contedo para aplicarmos o design depois. No precisa
ser estiloso e nem bonito.
14
Caso queira usar um template especfico para RWD voc pode encontrar alguns na internet, como este por exemplo: http://sneakpeekit.com/
E caso queira saber mais sobre como criar um Wirefamre, voc pode conferir
esse artigo sobre criao de wireframes (clique aqui).
No primeiro momento, na hora da criao do layout, no temos como prever
com exatido todas as resolues. Conforme o projeto avana e voc vai colocando o site no cdigo HTML (ou algum da sua equipe) que voc poder
ver onde o contedo quebra e aplicar as solues necessrias.
Ento, para comeo e para que voc entenda mais facilmente, iremos abordar
somente trs tipos bsicos: desktops, tablets e smartphones.
Vamos nessa! :D
15
Grids para organizar e adaptar
Vamos utilizar o que fizemos no wireframe s que agora de uma forma estruturada e organizada, atravs dos grids.
Grids so um conjunto de linhas verticais e horizontais que nos ajudam a organizar os elementos de um layout dentro do espao determinado. Caso queira saber mais sobre grids voc pode ler este artigo (clique aquil).
Por muito tempo usamos o grid 960. Mas isso ficou no passado...
Hoje em dia existem vrios templates de Grids na web melhores que o 960.
Tambm temos a ferramenta guideguide para Photoshop que facilita bastante
a criao de grids.
Ento primeiro voc deve determinar o nmero de colunas do seu grid. Normalmente para interfaces web usa-se entre 12 a 24 colunas em verses desktop, mas no existe uma regra especfica.
Comearemos fazendo primeiro a verso desktop. No exemplo a seguir usaremos 12 colunas. Veja:
16
17
A tcnica para adaptar a outras verses bem simples, basta diminuir o nmero
de colunas no grid. Logo, no nosso exemplo, se na verso maior (desktop) temos
12 colunas, na verso para tablet teremos 8 colunas e para smartphone 4 colunas.
Essa tcnica de subtrair 4 colunas no algo determinado, pois quem determina isso o contedo do seu layout e a forma como voc quer apresent-lo.
O contedo deve-se se adaptar a estrutura menor, mas sem perder a identidade, sem excluir contedos e proporcionando uma boa experincia.
Ento no tablet reorganizaremos o contedo passando de 3 contedos por fileira para 2 contedos por fileira. Alm disso outros ajustes nos espaamentos
e nos tamanhos dos elementos do site, como por exemplo, logo, menu, imagens, devem ser realizados para garantir tanto a harmonia do layout quanto
o funcionamento e tambm no prejudicar a rea de toque no dispositivo
touch screens. Veja a seguir:
18
* No exemplo acima temos apenas 4 itens na parte de serivos, pois a imagem ficaria muito grande e prejudicaria no visual do ebook.
O template usado apenas para fins didticos. Caso fosse um projeto real todos os elementos deveriam estar presentes.
19
Por fim a verso mobile que ter apenas 4 colunas e que na prtica o usurio
ver apenas uma. Para mobile a ateno para a rea de toque de ser redobrada.
O ideal que o visitante consiga navegar sempre precisar dar zoom no site.
Por isso cuidado com links pequenos e/ ou muitos prximos, pois assim eles
sero difceis de selecionar atravs do toque.
E um exemplo disso o menu!
O menu como estava na verso desktop ficaria muito pequeno na verso
mobile, ento opta-se, comumente, em colapsar os elementos em um menu
drop-down. No caso desse site usaremos o menu com estilo conhecido como
hamburguer! (e que voc j deve ter visto ao navegar a no seu celular).
E tambm os elementos em destaque ficam um abaixo do outro. Neste exemplo usei uma navegao em slide para os destaques e deixei visvel apenas
dois deles.
Como so apenas seis destaques isso foi uma opo e eu poderia deixar os
seis expostos que provalvemente no iriam prejudicar a usabilidade, porm
caso o site tivessem muitos destaques (uns 20, por exemplo) a a opo por
um slide em que a pessoa ao passar o dedo para o lado muda de destaque
certamente seria essencial.
Veja:
20
21
Agora depois de estruturado, aplica-se ao layout elementos estticos formais.

Veja o resultado:
22
23
24
Veja a seguir uma simulao de como ficaria o layout na prtica.
Aps voc criar o design do seu site seguindo as tcnicas e conceitos do RWD
ele estar pronto para ser implementado no cdigo. Neste e-book no iremos
a fundo neste tpico, porm seguem algumas dicas importantes.
25
Prefira cones, CSS e fontes a imagens

Prefira trabalhar com grficos vetoriais ao invs de imagens.
Use SVG, Icon Fonts e efeitos CSS3 (sombras, gradientes, cores, etc).
Tudo isso ajuda na manuteno do site e funciona muito bem em qualquer tipo
de resoluo. E tambm ajuda na perfomance do site deixando-o mais leve.
Por mais que voc faa apenas o design do site, oriente e d suporte a pessoa
que estiver fazendo os cdigos do site para utilizar tais tcnicas.
26
Otimize as suas imagens

Fique atento as imagens do seu site. Lembre-se que por mais que voc adapte
o tamanho de uma imagem ao dipositivo ela sempre ter o tamanho inicial.
Por exemplo:
Se voc utilizar uma imagem com 300 kb no seu site, por mais que voc use
tcnicas para redimension-la isso no ir diminuir o peso dela. Ela ter sempre 300kb independente do modo que ela est sendo apresentada.
Por isso, otimize as imagens do seu site. Voc pode fazer isso de vrias maneiras e existem vrios servios online que diminuem o peso das imagens sem
perda de qualidade como:

Kraken.io
TinyPNG
Jpgemini
Compressor.io
JpegOptimizer
27
Dispositivos com Tela de Retina

Tela Retina ou Retina Display um termo criado pela Apple para nomear as
suas telas de alta resoluo de cristal lquido. Essas telas de retina tem uma
densidade de pixels DPI (quantidade de pixels por polegada) maior do que os
monitores comuns, logo as imagens ficam muito mais ntidas.
Ento para telas assim ideal criar imagens com o dobro de tamanho.
Por exemplo:
Se voc vai criar uma imagem para um dispositivo de retina com o tamanho 320 X 240px, a
imagem deve ser feita com 640 X 48px.
O padro para nomear essas imagens para
dispositivos de retina o @2X, que um
padro que a prpria Apple criou para nomear as imagens de alta resoluo.
Portanto, o nome do arquivo ficaria assim: minha-imagem@2x.jpg.
E voc deve estar se perguntando?
Mas como vou determinar que o dispositivo com tela de retina use a imagem @2x?
Bom... Isso se consegue atravs de CSS, javascripts ou funes php, por exemplo.
Cabe a pessoa que estiver cuidando dessa parte pesquisar e encontrar o melhor caminho para a sua situao.
28
Use medidas relativas ao invs de absolutas

Mesmo que no seja voc o responsvel por fazer a parte do cdigo importante saber que para o Design Responsivo sempre melhor usar unidades
relativas ao invs de unidades absolutas.
Unidades absolutas (cm, mm, in, pt e pc) so medidas expressas que no
dependem de valores de referncia. Ento, por exemplo, um box com uma
largura de 800cm ter 800cm em todas as verses, desde desktop at mobile,
independentemente do tamanho da tela.
em
ex
rem ch
Unidades relativas (%, em, ex, rem, ch, etc) so medidas que se baseiam em
um valor de referncia definido anteriormente. Portanto essas unidades para o
RWD so mais teis, porque podem mudar de acordo com o tamanho da tela
se adaptando ao contexto em que esto inseridas.
A unidade px (pixel) pode ser considera como hbrida, pois apesar de ser fixa (se
voc colocar 50px sempre ser 50px) ela calculada com base na resoluo da
tela onde o documento visualizado, logo poder variar de tela para tela.
No RWD conveniente sempre preferir medidas relativas. Logo, prefira larguras em porcentagem larguras fixas com pixels, prefira tamanhos de fontes
com unidades em ao invs de pixels ou pts.
29
Utilize somente o necessrio

Quando falamos de imagens no RWD devemos pensar em dois tipos: imagens
de contedo e imagens decorativas.
Muitas das imagens que usamos nos websites tem apenas a funo decorativa.
Esse tipo de imagem caso seja retirada do site no vai interferir no entendimento do contedo. Elas podem ajudar a deixar o site mais bonito, etc, para verses
desktop, porm para resolues menores talvez elas no sejam fundamentais.
E ainda podem prejudicar a performance do site.
Quanto mais imagens tem um site mais tempo ele leva para carregar. Na verso
desktop, com uma conexo de internet estvel, talvez isso no seja problema,
porm em um aparelho mobile com menos memria de processamento e uma
conexo que nem sempre estvel, esse tipo de imagem pode atrapalhar a velocidade de carregamento do site.
Nessas situaes preciso avaliar se essas imagens realmente necessitam
aparecer em resolues menores. Numa resoluo menor o espao que temos para trabalhar reduzido e devemos aproveit-lo ao mximo com o que
realmente importante para o visitante ver.
30
Art Direction
Essa tcnica consiste cortar partes superficiais da imagem e focar no tema
principal. Com isso pode-se reduzir o peso e tamanho da imagem sem perder o significado.
Ento, cria-se verses da imagem que sero aplicadas de acordo com uma
determinada faixa de resoluo. Sendo assim quanto maior a resoluo, mais
completa a imagem com menos foco no tema central, quanto menor a resoluo maior o foco no tema principal. Veja o exemplo a seguir:
Note que quanto maior a tela mais detalhes do fundo aparecem, quanto menor
a tela menos detalhes do fundo e maior foco na figura principal da foto, o skatista.
Caso a imagem tenha sido otimizada e comprimida, em vrias situaes, o peso
fica pequeno o bastante e uma troca de imagens no se faz necessrio. Por outro lado, caso a imagem seja pesada para verses de telas maiores, voc pode
fazer verificaes das telas dos dispositivos atravs de cdigos (CSS, js, php,
etc) e com isso criar imagens para cada tipo de resoluo.
31
Use mockups para apresentar para o cliente

Mocukp uma representao de forma mais realista, ou seja, como o projeto
ficar depois de pronto.
Na hora de apresentar um design responsivo para seu cliente use mockups,
pois assim ele ter uma noo maior de como ser o projeto depois de pronto.
32
Design Responsivo x Design Fluido

Muita gente se confunde ao ver um site com design fludo e logo pensa quem
aquele mesmo um site responsivo, porm so coisas diferentes.
O Design Responsivo pensa muito mais na usabilidade e na experincia do
usurio. muito mais que uma tcnica e sim um conceito. Ele adapta a experincia de navegao de acordo com o dispositivo do usurio, com isso
procura-se atender as necessidades dos visitantes de forma concisa. A estrutura pode no ser necessariamente a mesma em todos os dispositivos.
J o Design Fludo somente aumenta ou diminui de tamanho de acordo com
a rea de visualizao do dispositivo. como se fosse uma sanfona, estica
e contrai, sem pensar na usabilidade ou como o usurio daquele dispositivo
acessa a interface.
Veja o exemplo a seguir e note as diferenas na verso mobile:
33
Design Responsivo (RWD) ou

Design Adaptativo (AWD)
Muito provavelmente voc j deve ter visto um design adaptativo e pensou
que era Responsivo. Hoje em dia usa-se muito o termo Design Responsivo
para sites com Design Adaptativos. Os dois so muito parecidos e tem o mesmo fim: fazer o site se adaptar aos diferentes formatos de tela. Mas mesmo
assim eles so coisas distintas.
O conceito do Design Responsivo acompanhar exatamente a resoluo
do dispositivo, j o Design Adaptativo trabalha com medidas fixas para cada
resoluo, como:
1200px, 1024px, 768px, 480px.
Irei usar a seguir essas medidas para exemplificar o AWD, mais especificamente a medida 480px.
Imagine um site AWD onde um dos pontos de quebra foi definido em 480px.
34
Agora imagine acessar esse mesmo site AWD numa resoluo de 620px.
Veja o que aconteceria:
Note que o visitante teria acesso a verso do site para 480px mesmo acessando
de uma tela com 620px.
Isso acontece porqu os breakspoints para as menores resolues, do nosso
exemplo, so 480px e 768px . No existe um breakpoint para o 620px, portanto
o site assume as definies determinadas no breakpoint 480px (j que 620px
menor que 768px).
Ento o RWD, como j vimos aqui neste e-book, mais flexvel, enquanto que
o AWD mais restritivo.
E sabe qual delas a melhor tcnica? Eu te respondo a seguir :)
35
No existe melhor ou pior!

O que determinar escolher um ou outro a necessidade do projeto.
Em situaes em que se precisa:
adaptar um site j existente as resolues menores;
o layout do site muito complexo;
o projeto precisa passar experincias nicas e diferentes para cada dispositivo.
Talvez seja melhor usar o AWD.

Por outro lado, em casos em que:
o projeto precisa funcionar bem em qualquer tipo de dispositivo;
que o layout menos complexo;
que o projeto tem o foco maior na experincia do usurio.
Aplicar o RWD o indicado.

O mais importante nessa questo no quem melhor ou pior e sim garantir
que o site seja acessvel ao maior nmero de pessoas independentemente do
tamanho da tela.
Avalie o projeto e veja suas possibilidade e objetivos.
36
Consideraes Finais
Web Design Responsivo no mais luxo: uma necessidade!
Hoje o acesso internet via dispositivos mveis muito superior aos desktops. Estamos conectados a todo momento.
Por isso ns desenvolvedores e designers no devemos somente pensar se o
layout vai encaixar no dispositivo e sim em como podemos contribuir para que
o visitante possa navegar no site da maneira mais tranquila e prazerosa possvel.
Existem muito mais coisas para estudar sobre o RWD que esse singelo e-book
no seria capaz de conter, como por exemplo a parte do cdigo.
Prefiri no adentrar no assunto neste ebook, pois no era esse o foco. Mas
saiba que essa parte essncial para se construir interfaces responsivas.
Por isso, no termine seus estudos por aqui.
Espero que tenha sido til para voc. Muito obrigado por ler!
Guarde o Manual de Web Design Responsivo em um local fcil de lembrar e
de acessar, para que voc possa consultar sempre que precisar.
Qualquer coisa pode entrar em contato comigo, bele?
At mais!
Forte abrao!
37
Referncias
Livro:
Web Design Responsivo do Maurcio Samy Silva (Maujor), editora Novatec.
Sites:
tableless.com
blog.popupdesign.com.br
smashingmagazine.com
38
39

Manual de Web Design Responsivo - Projete para Todos Os Dispositivos

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Manual de Web Design Responsivo - Projete para Todos Os Dispositivos

Uploaded by

Copyright:

Available Formats

para o funcionamento do Design Responsivo, entretanto neste e-book no