Ebook Web Design Responsivo PDF

Manual de Web Design Responsivo
www.chiefofdesign.com.br 1
Sumrio
Apresentao.....................................................................................................................................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 for-

mado em Tcnico em Multimdia.
Trabalha como Web Designer des-

de 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. En-

controu no Design e no Desenvolvi-
mento 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 com-
plexas 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, prin-

cipalmente, com quem est inician-
do na rea e que est buscando por
aprendizado e respostas para suas
dvidas em relao as essas reas.
O blog segue uma linha instrucion-

al, ou seja, o objetivo compartilhar
conhecimento e servir de refern-
cia para ajudar profissionais, princi-
palmente os iniciantes, da rea cri-
ativa a produzirem, criarem, e quem
sabe, por que no, e se tornarem
Chief nesse segmento.
Para saber mais acesse:
www.chiefofdesign.com.br
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 mui-
tos 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 dif-
erentes dispositivos e das diferentes
possibilidades de acesso a internet, a
necessidade de se criar sites que ga-
rantissem uma boa experincia, inde-
pendente da resoluo, foi crescendo
e a soluo ideal (pelo menos at ag-
ora) 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 au-
mentava, 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 arquite-

tura 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 agradvel tambm nos dispositivos menores.
Elementos do Design Responsivo
O Design Responsivo tem alguns elementos fundamentais. Vrios desses ele-

mentos fazem parte dos cdigos Front-End. No iremos nos aprofundar muito
nesses elementos e focaremos mais na criao do layout, entretanto irei apre-
sent-los para voc, at porque voc precisa ter noo de que tudo funciona
como uma engrenagem e que cada pecinha importante para o funciona-
mento dessa mquina.
Ento mesmo que voc no desenvolva os cdigos da parte Frotn-End im-

portante 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 lin-
guagem responsvel pela formatao do estilo, do design do site) que possi-
bilita 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 as-
sim vai.... No existem regras especficas para isso. Existem sim alguns taman-
hos 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 possibili-
dades 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, at-

ravs 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 res-
olues 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.
Para o Web Designer responsvel pelo design do projeto web importants-

simo 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 lay-
out responsivo. E caso voc tenha interesse nos outros tpicos citados o pri-
meiro passo que voc pode dar adquirir o E-book de HTML e CSS do Chief
of Design neste link!
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 largura-

Tablets 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 aten-
da resolues entre 1200px e 300px.
A seguir veremos o porqu no devemos nos prender aos breakpoints.
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 quan-
do 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 apresen-

ta-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.
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.
Caso queira usar um template especfico para RWD voc pode encontrar al-
guns 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 co-
locando 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
Grids para organizar e adaptar
Vamos utilizar o que fizemos no wireframe s que agora de uma forma estru-
turada e organizada, atravs dos grids.
Grids so um conjunto de linhas verticais e horizontais que nos ajudam a or-

ganizar os elementos de um layout dentro do espao determinado. Caso que-
ira 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. Nor-
malmente para interfaces web usa-se entre 12 a 24 colunas em verses desk-
top, mas no existe uma regra especfica.
Comearemos fazendo primeiro a verso desktop. No exemplo a seguir usare-

mos 12 colunas. Veja:
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 deter-

mina 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 identi-
dade, sem excluir contedos e proporcionando uma boa experincia.
Ento no tablet reorganizaremos o contedo passando de 3 contedos por fil-

eira para 2 contedos por fileira. Alm disso outros ajustes nos espaamentos
e nos tamanhos dos elementos do site, como por exemplo, logo, menu, ima-
gens, 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:
* 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.
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 exem-

plo 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:
Agora depois de estruturado, aplica-se ao layout elementos estticos formais.

Veja o resultado:
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.
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.
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 sem-
pre 300kb independente do modo que ela est sendo apresentada.
Por isso, otimize as imagens do seu site. Voc pode fazer isso de vrias manei-
ras e existem vrios servios online que diminuem o peso das imagens sem
perda de qualidade como:
Kraken.io
TinyPNG
Jpgemini
Compressor.io
JpegOptimizer
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 dispos-

itivo 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 no-
mear 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 ima-
gem @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 mel-
hor caminho para a sua situao.
Use medidas relativas ao invs de absolutas
Mesmo que no seja voc o responsvel por fazer a parte do cdigo impor-
tante 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 largu-

ras em porcentagem larguras fixas com pixels, prefira tamanhos de fontes
com unidades em ao invs de pixels ou pts.
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 entendimen-
to 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 ve-
locidade de carregamento do site.
Nessas situaes preciso avaliar se essas imagens realmente necessitam

aparecer em resolues menores. Numa resoluo menor o espao que te-
mos para trabalhar reduzido e devemos aproveit-lo ao mximo com o que
realmente importante para o visitante ver.
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 per-
der 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 res-
oluo 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 out-
ro 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.
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.
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 ex-
perincia de navegao de acordo com o dispositivo do usurio, com isso
procura-se atender as necessidades dos visitantes de forma concisa. A estru-
tura 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:
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 mes-
mo 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 especifica-
mente a medida 480px.
Imagine um site AWD onde um dos pontos de quebra foi definido em 480px.
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 :)
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.
Consideraes Finais
Web Design Responsivo no mais luxo: uma necessidade!
Hoje o acesso internet via dispositivos mveis muito superior aos desk-
tops. 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!
Referncias
Livro:
Web Design Responsivo do Maurcio Samy Silva (Maujor), editora Novatec.
Sites:
tableless.com
blog.popupdesign.com.br
smashingmagazine.com

Ebook Web Design Responsivo PDF

Hochgeladen von

Dokumentinformationen

Originaltitel

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Ebook Web Design Responsivo PDF

Hochgeladen von

Copyright:

Verfügbare Formate

Manual de Web Design Responsivo

Me lembro que comecei a desenvolver as minhas primeiras pginas web por

Nessa poca j se comeava a se pensar sobre web design responsivo (apesar

Apesar de naquela poca no se levar to a srio o conceito que temos hoje

Hoje em dia impossvel ao se criar uma interface web no se pensar na

Este e-book vem para te ajudar nessa questo fundamental na criao de

O que voc encontrar neste e-book?

A ideia deste e-book te ajudar a projetar um site responsivo mesmo antes de

No momento atual no devemos pensar em qual resoluo e sim na melhor

David Arty o fundador do Blog

natural de So Paulo, Brasil.

Graduado em Design Grfico e for-

Trabalha como Web Designer des-

Autodidata por natureza, trabalhou

Ama comunicao e criao. En-

Por isso um entusiasta por tudo

O Chief of Design um blog que

O intuito do blog contribuir, prin-

O blog segue uma linha instrucion-

Para saber mais acesse:

Como surgiu o Design Responsivo (RWD)?

A internet surgiu em 1990 com o cientista Tim Berners-Lee, inventor da web

Tudo mudou muito rpido. A partir dos

Ethan escreveu um artigo no famoso

A grande sacada do artigo foi a comparao com um movimento da arquite-

Esse artigo mudou a forma de pensar no desenvolvimento de sites em todas

Mais do que criar um layout responsivo o RWD trouxe a importncia de se pensar

Elementos do Design Responsivo

O Design Responsivo tem alguns elementos fundamentais. Vrios desses ele-

Ento mesmo que voc no desenvolva os cdigos da parte Frotn-End im-

Ento as tecnologias essenciais para o Design Responsivo, so:

Media queries e CSS3

Javascript: uma linguagem de programao. No RWD ele possibilita, at-

Caso voc no tenha conhecimento nessa tecnologia sugiro que adquira o

Mdias adaptveis: so imagens, vdeos, entre outros, com a capacidade de

Grid Fludo : uma tcnica de desenvolvimento que utiliza medidas relativas

Para o Web Designer responsvel pelo design do projeto web importants-

Com as inmeras resolues impossvel atender a todas com total perfeio,

1200 pixels de largura

1024 pixels de largura

768 pixels de largura

600 pixels de largura-

480 pixels de largura

320 pixels de largura

Pensar em breakpoints, ou pontos de quebra, j no to eficaz devido as

A seguir veremos o porqu no devemos nos prender aos breakpoints.

Um conceito usado no desenvolvimento de sites responsivos o mobile first,

Focando somente na concepo de um layout, podemos fazer uma analogia

Portanto o contedo que vai determinar qual a melhor estrutura para o

Com o contedo em mos, podemos pensar em como organiz-lo e apresen-

Ento vamos comear a estruturar o site responsivo pelo wireframe.

Wireframe para comear

Wireframe um esboo: uma simulao de como a interface dever ser.

Podemos construir um wireframe no papel, no computador ou nos dois.

A ideia organizar o contedo para aplicarmos o design depois. No precisa

No primeiro momento, na hora da criao do layout, no temos como prever

Grids para organizar e adaptar

Grids so um conjunto de linhas verticais e horizontais que nos ajudam a or-

Comearemos fazendo primeiro a verso desktop. No exemplo a seguir usare-

Essa tcnica de subtrair 4 colunas no algo determinado, pois quem deter-

Ento no tablet reorganizaremos o contedo passando de 3 contedos por fil-

E um exemplo disso o menu!

O menu como estava na verso desktop ficaria muito pequeno na verso