Manual de Web Design Responsivo - Projete para todos os dispositivos

Embed Size (px)

Citation preview

  • 7/24/2019 Manual de Web Design Responsivo - Projete para todos os dispositivos

    1/39

    1www.chiefofdesign.com.br

    Manual de Web Design Responsivo

    http://www.chiefofdesign.com.br/http://www.chiefofdesign.com.br/http://www.chiefofdesign.com.br/
  • 7/24/2019 Manual de Web Design Responsivo - Projete para todos os dispositivos

    2/39

    2www.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 .....................................................................................................................................31Use 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

    http://www.chiefofdesign.com.br/http://www.chiefofdesign.com.br/http://www.chiefofdesign.com.br/
  • 7/24/2019 Manual de Web Design Responsivo - Projete para todos os dispositivos

    3/39

    3www.chiefofdesign.com.br

    Me lembro que comecei a desenvolver as minhas primeiras pginas web porvolta de 2008/2009. Eu peguei uma poca boa, pois os padres web estavamse fortificando cada vez mais e os sites feitos com tabelas, um jeito de seestruturar sites atravs de tabelas html, j estavam em decadncia.

    Nessa poca j se comeava a se pensar sobre web design responsivo (apesarque ainda tive que lidar com as horrveis tabelas), mas ainda era muito poucoe esse termo ainda nem existia. Normalmente os web designers criavam no

    Photoshop, no mximo, uma verso desktop e outra para mobile (por vezeseles eram at bem diferentes.) E quando isso ia para o cdigo a mesma coisaacontecia: criava-se um site para desktop e outro para mobile e no raro essaverso mobile era em tabelas.

    Apesar de naquela poca no se levar to a srio o conceito que temos hojede design responsivo a preocupao de se criar layouts que funcionassembem e com mesma qualidade em vrios dispositivos j era um tanto real ecrescia 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 naresponsividade, ou seja, na adaptao do site para vrias resolues, quitodas que se pode alcanar.

    Este e-book vem para te ajudar nessa questo fundamental na criao desites 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 deimplement-lo no cdigo. Os cdigos HTML, CSS e Javascripts so essenciais

    Apresentao

    http://www.chiefofdesign.com.br/http://www.chiefofdesign.com.br/http://www.chiefofdesign.com.br/
  • 7/24/2019 Manual de Web Design Responsivo - Projete para todos os dispositivos

    4/39

    4www.chiefofdesign.com.br

    para o funcionamento do Design Responsivo, entretanto neste e-book noiremos a fundo nessa questo, pois ns do Chief j temos um e-book Flunciaem 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 objetivodele: ajudar voc web designer (ou criativo que trablalha com web) a pensare projetar um site responsivo independente do seu grau de conhecimento emcdigos. Ento a ideia te ajudar a comear a criar e projetar um designresponsivo j na parte da elaborao do Design.

    Muitos web designers criam um site desktop e depois ajeitam o site para serresponsivo. 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, depoispara 1024x768...

    No momento atual no devemos pensar em qual resoluo e sim na melhorexperincia que podemos proporcionar aos usurios independentemente dotamanho 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 comoum todo.

    Ento venha comigo e preste ateno nas orientaes, dicas e macetes destee-book. Bele?

    Siga-me os bons! :D

    Esta obra est licenciada com uma Licena Creative Commons Atribuio-NoComercial-CompartilhaIgual 4.0 Internacional.

    http://www.chiefofdesign.com.br/http://www.ebookhtmlcss.com/http://www.ebookhtmlcss.com/http://www.chiefofdesign.com.br/http://www.chiefofdesign.com.br/
  • 7/24/2019 Manual de Web Design Responsivo - Projete para todos os dispositivos

    5/39

    5www.chiefofdesign.com.br

    Sobre o Autor

    David Arty o fundador do BlogChief 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, trabalhouem agncias, empresas de TI,stdios, entre outros. Atua tambmcomo freelancer e em algumastemporadas ministra treinamentosde Web Design.

    Ama comunicao e criao. En-controu no Design e no Desenvolvi-mento Front-End formas de unir eatuar com essas duas coisas.

    Por isso um entusiasta por tudoque envolve design e web, e tenta

    transformar ideias loucas e com-plexas em peas simples, atrativas,bonitas e funcionais.

    http://www.chiefofdesign.com.br/http://www.chiefofdesign.com.br/http://www.chiefofdesign.com.br/
  • 7/24/2019 Manual de Web Design Responsivo - Projete para todos os dispositivos

    6/39

    6www.chiefofdesign.com.br

    O Chief of Design um blog quefala 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 poraprendizado e respostas para suasdvidas em relao as essas reas.

    O blog segue uma linha instrucion-al, ou seja, o objetivo compartilharconhecimento e servir de refern-cia para ajudar profissionais, princi-palmente os iniciantes, da rea cri-ativa a produzirem, criarem, e quemsabe, por que no, e se tornarem

    Chief nesse segmento.

    Para saber mais acesse:www.chiefofdesign.com.br

    Sobre o Blog

    http://www.chiefofdesign.com.br/http://www.chiefofdesign.com.br/http://www.chiefofdesign.com.br/http://www.chiefofdesign.com.br/http://www.chiefofdesign.com.br/http://www.chiefofdesign.com.br/
  • 7/24/2019 Manual de Web Design Responsivo - Projete para todos os dispositivos

    7/39

    7www.chiefofdesign.com.br

    Manual de Web Design Responsivo

    A internet surgiu em 1990 com o cientista Tim Berners-Lee, inventor da webe fundador do W3C (organizao sem fins lucrativos que tem a misso deorientar os desenvolvedores para o uso de boas prticas para que a web sejaacessvel 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 diferentespossibilidades de acesso a internet, anecessidade de se criar sites que ga-rantissem uma boa experincia, inde-pendente da resoluo, foi crescendoe a soluo ideal (pelo menos at ag-ora) surgiu no dia 25 de maio de 2010com o desenvolvedorEthan Marcotte.

    Ethan escreveu um artigo no famososite Alispart (veja aqui)que mudariacompletamente a forma de desenvolvimento de layouts para a web. O artigoabordava 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 quenecessitavam que seus sites tivessem uma boa performance e experinciatambm 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 NicholasNegroponte, que trabalhava para criar ambientes adaptveis e sustentveis ascondies j existentes.

    Como surgiu o Design Responsivo (RWD)?

    http://www.chiefofdesign.com.br/http://alistapart.com/article/responsive-web-designhttp://alistapart.com/article/responsive-web-designhttp://www.chiefofdesign.com.br/http://www.chiefofdesign.com.br/
  • 7/24/2019 Manual de Web Design Responsivo - Projete para todos os dispositivos

    8/39

    8www.chiefofdesign.com.br

    Manual de Web Design Responsivo

    Com isso Ethan mostrou que era preciso criar um layout adaptvel, inteligentee que funcionasse independente das resolues e mdias usadas.

    Esse artigo mudou a forma de pensar no desenvolvimento de sites em todasas camadas: desde a criao a at o desenvolvimento.

    Hoje em dia o RWD uma realidade e criar uma interface para web sem sepensar na responsividade cometer um erro crasso.

    Mais do que criar um layout responsivo o RWD trouxe a importncia de sepensar no visitante garantindo que seu site seja acessvel ao maior nmero dedispositivos e com uma navegao agradavl nos dispositivos menores.

    http://www.chiefofdesign.com.br/http://www.chiefofdesign.com.br/http://www.chiefofdesign.com.br/
  • 7/24/2019 Manual de Web Design Responsivo - Projete para todos os dispositivos

    9/39

    9www.chiefofdesign.com.br

    Manual de Web Design Responsivo

    O Design Responsivo tem alguns elementos fundamentais. Vrios desses ele-mentos fazem parte dos cdigos Front-End. No iremos nos aprofundar muitonesses elementos e focaremos mais na criao do layout, entretanto irei apre-sent-los para voc, at porque voc precisa ter noo de que tudo funcionacomo 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,CSSe 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 atravsdo que chamos de breakspoints.

    Portanto podemos criar um estilo para quando o site for renderizado numaresoluo 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.

    Elementos do Design Responsivo

    http://www.chiefofdesign.com.br/http://www.chiefofdesign.com.br/http://www.chiefofdesign.com.br/
  • 7/24/2019 Manual de Web Design Responsivo - Projete para todos os dispositivos

    10/39

    10www.chiefofdesign.com.br

    Manual de Web Design Responsivo

    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 pelaestruturao do site. HTML5, a verso mais recente do HTML, fundamentalpara estruturao de um site responsivo.

    Javascript: uma linguagem de programao. No RWD ele possibilita, at-ravs de polyfillse scripts, que os navegadores mais antigos reconheam

    os novos elementos do HTML5 tornando assim o design responsivo maisabrangente e atingindo at navegadores antigos.

    Caso voc no tenha conhecimento nessa tecnologia sugiro que adquira oe-book solidrio em Fluncia em HTMl e CSS.

    Mdias adaptveis:so imagens, vdeos, entre outros, com a capacidade dese 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 relativaspara 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 pensarmosno passo anterior a implementao do cdigo, ou seja, a parte da criao.

    http://www.chiefofdesign.com.br/https://remysharp.com/2010/10/08/what-is-a-polyfillhttp://www.ebookhtmlcss.com/http://www.ebookhtmlcss.com/https://remysharp.com/2010/10/08/what-is-a-polyfillhttp://www.chiefofdesign.com.br/http://www.chiefofdesign.com.br/
  • 7/24/2019 Manual de Web Design Responsivo - Projete para todos os dispositivos

    11/39

    11www.chiefofdesign.com.br

    Manual de Web Design Responsivo

    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 dolayout 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 oE-book de HTML e CSS do Chiefof Design neste link!

    http://www.chiefofdesign.com.br/http://www.ebookhtmlcss.com/http://www.ebookhtmlcss.com/http://www.ebookhtmlcss.com/http://www.ebookhtmlcss.com/http://www.ebookhtmlcss.com/http://www.chiefofdesign.com.br/http://www.chiefofdesign.com.br/
  • 7/24/2019 Manual de Web Design Responsivo - Projete para todos os dispositivos

    12/39

    12www.chiefofdesign.com.br

    Manual de Web Design Responsivo

    Com as inmeras resolues impossvel atender a todas com total perfeio,porm importante saber dos tamanhos mais comuns somente para termosuma base para construirmos o layout no software grfico.

    1200 pixels de largura Desktops com monitores widescreen.

    1024 pixels de largura

    Tablets em formato paisageme monitores antigos.

    768 pixels de largura Tablets em formato retrato.

    600 pixels de largura-Tablets pequenos

    480 pixels de largura Smartphones em formato paisagem.

    320 pixels de largura Smartphones em formato retrato

    Pensar em breakpoints, ou pontos de quebra, j no to eficaz devido asinmeras 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.

    Resolues Comuns

    http://www.chiefofdesign.com.br/http://www.chiefofdesign.com.br/http://www.chiefofdesign.com.br/
  • 7/24/2019 Manual de Web Design Responsivo - Projete para todos os dispositivos

    13/39

    13www.chiefofdesign.com.br

    Manual de Web Design Responsivo

    Um conceito usado no desenvolvimento de sites responsivos o mobile first,criado em 2009 pelo desenvolvedor Luke Wrobleswki no site lukew (confiraaqui). Este conceito defende que devemos comear o desenvolvimento de umsite primeiro por sua verso mobile. Indo do menor para o maior (do mobileat desktop). Com isso se economiza e reaproveita cdigos evitando coisasdesnecessrias 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 olayout. Ter definido o contedo que o site vai apresentar essencial. E quan-do falo contedo no digo necessariamente o contedo real, ou seja, aqueletexto bonito e bem escrito que fala do produto, mas sim o objetivo do site, dotipo de contedo, quais os tipos de mdias que o site ter, ter uma estimativado tamanho do texto corrido de cara rea e etc.

    Para saber dessas informaes importante estar alinhado com quem forneceas informaes do proeeto e, claro, ter um briefing bem estruturado (casotenha 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 contedoa estrela do layout. Faremos o design responsivo para que ele brilhe.

    Ento vamos comear a estruturar o site responsivo pelo wireframe.

    Contedo First

    http://www.chiefofdesign.com.br/http://www.lukew.com/ff/entry.asp?933http://www.lukew.com/ff/entry.asp?933http://chiefofdesign.com.br/como-ter-ideias-para-construir-interfaces-digitais-que-realmente-tragam-solucoes/http://chiefofdesign.com.br/como-ter-ideias-para-construir-interfaces-digitais-que-realmente-tragam-solucoes/http://chiefofdesign.com.br/como-ter-ideias-para-construir-interfaces-digitais-que-realmente-tragam-solucoes/http://chiefofdesign.com.br/como-ter-ideias-para-construir-interfaces-digitais-que-realmente-tragam-solucoes/http://www.lukew.com/ff/entry.asp?933http://www.lukew.com/ff/entry.asp?933http://www.chiefofdesign.com.br/http://www.chiefofdesign.com.br/
  • 7/24/2019 Manual de Web Design Responsivo - Projete para todos os dispositivos

    14/39

    14www.chiefofdesign.com.br

    Manual de Web Design Responsivo

    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 precisaser estiloso e nem bonito.

    Wireframe para comear

    http://www.chiefofdesign.com.br/http://www.chiefofdesign.com.br/http://www.chiefofdesign.com.br/
  • 7/24/2019 Manual de Web Design Responsivo - Projete para todos os dispositivos

    15/39

    15www.chiefofdesign.com.br

    Manual de Web Design Responsivo

    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 conferiresse artigo sobre criao de wireframes (clique aqui).

    No primeiro momento, na hora da criao do layout, no temos como prevercom 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 poderver onde o contedo quebra e aplicar as solues necessrias.

    Ento, para comeo e para que voc entenda mais facilmente, iremos abordarsomente trs tipos bsicos: desktops, tablets e smartphones.

    Vamos nessa! :D

    http://www.chiefofdesign.com.br/http://sneakpeekit.com/http://chiefofdesign.com.br/wireframes-dicas-sobre-como-construir-um-wireframes-para-as-suas-interfaces/http://chiefofdesign.com.br/wireframes-dicas-sobre-como-construir-um-wireframes-para-as-suas-interfaces/http://chiefofdesign.com.br/wireframes-dicas-sobre-como-construir-um-wireframes-para-as-suas-interfaces/http://chiefofdesign.com.br/wireframes-dicas-sobre-como-construir-um-wireframes-para-as-suas-interfaces/http://chiefofdesign.com.br/wireframes-dicas-sobre-como-construir-um-wireframes-para-as-suas-interfaces/http://chiefofdesign.com.br/wireframes-dicas-sobre-como-construir-um-wireframes-para-as-suas-interfaces/http://chiefofdesign.com.br/wireframes-dicas-sobre-como-construir-um-wireframes-para-as-suas-interfaces/http://chiefofdesign.com.br/wireframes-dicas-sobre-como-construir-um-wireframes-para-as-suas-interfaces/http://chiefofdesign.com.br/wireframes-dicas-sobre-como-construir-um-wireframes-para-as-suas-interfaces/http://chiefofdesign.com.br/wireframes-dicas-sobre-como-construir-um-wireframes-para-as-suas-interfaces/http://chiefofdesign.com.br/wireframes-dicas-sobre-como-construir-um-wireframes-para-as-suas-interfaces/http://sneakpeekit.com/http://www.chiefofdesign.com.br/http://www.chiefofdesign.com.br/
  • 7/24/2019 Manual de Web Design Responsivo - Projete para todos os dispositivos

    16/39

    16www.chiefofdesign.com.br

    Manual de Web Design Responsivo

    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 gridsvoc 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 guideguidepara Photoshop que facilita bastantea 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:

    Grids para organizar e adaptar

    http://www.chiefofdesign.com.br/http://chiefofdesign.com.br/guia-sobre-grid/http://chiefofdesign.com.br/guia-sobre-grid/http://www.chiefofdesign.com.br/http://www.chiefofdesign.com.br/
  • 7/24/2019 Manual de Web Design Responsivo - Projete para todos os dispositivos

    17/39

    17www.chiefofdesign.com.br

    Manual de Web Design Responsivo

    http://www.chiefofdesign.com.br/http://www.chiefofdesign.com.br/http://www.chiefofdesign.com.br/
  • 7/24/2019 Manual de Web Design Responsivo - Projete para todos os dispositivos

    18/39

    18www.chiefofdesign.com.br

    Manual de Web Design Responsivo

    A tcnica para adaptar a outras verses bem simples, basta diminuir o nmerode colunas no grid. Logo, no nosso exemplo, se na verso maior (desktop) temos12 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 quantoo funcionamento e tambm no prejudicar a rea de toque no dispositivotouch screens. Veja a seguir:

    http://www.chiefofdesign.com.br/http://www.chiefofdesign.com.br/http://www.chiefofdesign.com.br/
  • 7/24/2019 Manual de Web Design Responsivo - Projete para todos os dispositivos

    19/39

    19www.chiefofdesign.com.br

    Manual de Web Design Responsivo

    * 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.

    http://www.chiefofdesign.com.br/http://www.chiefofdesign.com.br/http://www.chiefofdesign.com.br/
  • 7/24/2019 Manual de Web Design Responsivo - Projete para todos os dispositivos

    20/39

    20www.chiefofdesign.com.br

    Manual de Web Design Responsivo

    Por fim a verso mobile que ter apenas 4 colunas e que na prtica o usuriover 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 elessero difceis de selecionar atravs do toque.

    E um exemplo disso o menu!

    O menu como estava na verso desktop ficaria muito pequeno na versomobile, ento opta-se, comumente, em colapsar os elementos em um menu

    drop-down. No caso desse site usaremos o menu com estilo conhecido comohamburguer! (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 apenasdois deles.

    Como so apenas seis destaques isso foi uma opo e eu poderia deixar osseis expostos que provalvemente no iriam prejudicar a usabilidade, porm

    caso o site tivessem muitos destaques (uns 20, por exemplo) a a opo porum slide em que a pessoa ao passar o dedo para o lado muda de destaquecertamente seria essencial.

    Veja:

    http://www.chiefofdesign.com.br/http://www.chiefofdesign.com.br/http://www.chiefofdesign.com.br/
  • 7/24/2019 Manual de Web Design Responsivo - Projete para todos os dispositivos

    21/39

    21www.chiefofdesign.com.br

    Manual de Web Design Responsivo

    http://www.chiefofdesign.com.br/http://www.chiefofdesign.com.br/http://www.chiefofdesign.com.br/
  • 7/24/2019 Manual de Web Design Responsivo - Projete para todos os dispositivos

    22/39

    22www.chiefofdesign.com.br

    Manual de Web Design Responsivo

    Agora depois de estruturado, aplica-se ao layout elementos estticos formais.Veja o resultado:

    http://www.chiefofdesign.com.br/http://www.chiefofdesign.com.br/http://www.chiefofdesign.com.br/
  • 7/24/2019 Manual de Web Design Responsivo - Projete para todos os dispositivos

    23/39

    23www.chiefofdesign.com.br

    Manual de Web Design Responsivo

    http://www.chiefofdesign.com.br/http://www.chiefofdesign.com.br/http://www.chiefofdesign.com.br/
  • 7/24/2019 Manual de Web Design Responsivo - Projete para todos os dispositivos

    24/39

    24www.chiefofdesign.com.br

    Manual de Web Design Responsivo

    http://www.chiefofdesign.com.br/http://www.chiefofdesign.com.br/http://www.chiefofdesign.com.br/
  • 7/24/2019 Manual de Web Design Responsivo - Projete para todos os dispositivos

    25/39

    25www.chiefofdesign.com.br

    Manual de Web Design Responsivo

    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 iremosa fundo neste tpico, porm seguem algumas dicas importantes.

    http://www.chiefofdesign.com.br/http://www.chiefofdesign.com.br/http://www.chiefofdesign.com.br/
  • 7/24/2019 Manual de Web Design Responsivo - Projete para todos os dispositivos

    26/39

    26www.chiefofdesign.com.br

    Manual de Web Design Responsivo

    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 tipode 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 pessoaque estiver fazendo os cdigos do site para utilizar tais tcnicas.

    Prefira cones, CSS e fontes a imagens

    http://www.chiefofdesign.com.br/http://www.chiefofdesign.com.br/http://www.chiefofdesign.com.br/
  • 7/24/2019 Manual de Web Design Responsivo - Projete para todos os dispositivos

    27/39

    27www.chiefofdesign.com.br

    Manual de Web Design Responsivo

    Fique atento as imagens do seu site. Lembre-se que por mais que voc adapteo 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 usetcnicas 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 semperda de qualidade como:

    Kraken.io

    TinyPNG

    Jpgemini

    Compressor.io

    JpegOptimizer

    Otimize as suas imagens

    http://www.chiefofdesign.com.br/https://kraken.io/http://tinypng.com/http://www.jpegmini.com/https://compressor.io/http://jpeg-optimizer.com/http://jpeg-optimizer.com/https://compressor.io/http://www.jpegmini.com/http://tinypng.com/https://kraken.io/http://www.chiefofdesign.com.br/http://www.chiefofdesign.com.br/
  • 7/24/2019 Manual de Web Design Responsivo - Projete para todos os dispositivos

    28/39

    28www.chiefofdesign.com.br

    Manual de Web Design Responsivo

    Tela Retina ou Retina Display um termo criado pela Apple para nomear assuas telas de alta resoluo de cristal lquido. Essas telas de retina tem umadensidade de pixels DPI (quantidade de pixels por polegada) maior do que osmonitores 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, aimagem deve ser feita com 640 X 48px.

    O padro para nomear essas imagens paradispositivos de retina o @2X, que umpadro que a prpria Apple criou para no-mear as imagens de alta resoluo.

    Portanto, o nome do arquivo ficaria assim: [email protected].

    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.

    Dispositivos com Tela de Retina

    http://www.chiefofdesign.com.br/http://www.chiefofdesign.com.br/http://www.chiefofdesign.com.br/
  • 7/24/2019 Manual de Web Design Responsivo - Projete para todos os dispositivos

    29/39

    29www.chiefofdesign.com.br

    Manual de Web Design Responsivo

    Mesmo que no seja voc o responsvel por fazer a parte do cdigo impor-tante saber que para o Design Responsivo sempre melhor usar unidadesrelativas ao invs de unidades absolutas.

    Unidades absolutas (cm, mm, in, pt e pc) so medidas expressas que nodependem de valores de referncia. Ento, por exemplo, um box com umalargura de 800cm ter 800cm em todas as verses, desde desktop at mobile,independentemente do tamanho da tela.

    Use medidas relativas ao invs de absolutas

    % em ex chrem

    Unidades relativas (%, em, ex, rem, ch, etc) so medidas que se baseiam em

    um valor de referncia definido anteriormente. Portanto essas unidades para oRWD so mais teis, porque podem mudar de acordo com o tamanho da telase adaptando ao contexto em que esto inseridas.

    A unidade px (pixel) pode ser considera como hbrida, pois apesar de ser fixa (sevoc colocar 50px sempre ser 50px) ela calculada com base na resoluo datela 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 fontescom unidades em ao invs de pixels ou pts.

    http://www.chiefofdesign.com.br/http://www.chiefofdesign.com.br/http://www.chiefofdesign.com.br/
  • 7/24/2019 Manual de Web Design Responsivo - Projete para todos os dispositivos

    30/39

    30www.chiefofdesign.com.br

    Manual de Web Design Responsivo

    Quando falamos de imagens no RWD devemos pensar em dois tipos: imagensde 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 versesdesktop, 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 versodesktop, com uma conexo de internet estvel, talvez isso no seja problema,porm em um aparelho mobile com menos memria de processamento e umaconexo 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 necessitamaparecer em resolues menores. Numa resoluo menor o espao que te-

    mos para trabalhar reduzido e devemos aproveit-lo ao mximo com o querealmente importante para o visitante ver.

    Utilize somente o necessrio

    http://www.chiefofdesign.com.br/http://www.chiefofdesign.com.br/http://www.chiefofdesign.com.br/
  • 7/24/2019 Manual de Web Design Responsivo - Projete para todos os dispositivos

    31/39

    31www.chiefofdesign.com.br

    Manual de Web Design Responsivo

    Essa tcnica consiste cortar partes superficiais da imagem e focar no temaprincipal. 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 umadeterminada faixa de resoluo. Sendo assim quanto maior a resoluo, maiscompleta a imagem com menos foco no tema central, quanto menor a res-oluo maior o foco no tema principal. Veja o exemplo a seguir:

    Art Direction

    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 pesofica 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 podefazer verificaes das telas dos dispositivos atravs de cdigos (CSS, js, php,etc) e com isso criar imagens para cada tipo de resoluo.

    http://www.chiefofdesign.com.br/http://www.chiefofdesign.com.br/http://www.chiefofdesign.com.br/
  • 7/24/2019 Manual de Web Design Responsivo - Projete para todos os dispositivos

    32/39

    32www.chiefofdesign.com.br

    Manual de Web Design Responsivo

    Mocukp uma representao de forma mais realista, ou seja, como o projetoficar 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.

    Use mockups para apresentar para o cliente

    http://www.chiefofdesign.com.br/http://www.chiefofdesign.com.br/http://www.chiefofdesign.com.br/
  • 7/24/2019 Manual de Web Design Responsivo - Projete para todos os dispositivos

    33/39

    33www.chiefofdesign.com.br

    Manual de Web Design Responsivo

    Muita gente se confunde ao ver um site com design fludo e logo pensa quemaquele mesmo um site responsivo, porm so coisas diferentes.

    O Design Responsivo pensa muito mais na usabilidade e na experincia dousurio. muito mais que uma tcnica e sim um conceito. Ele adapta a ex-perincia de navegao de acordo com o dispositivo do usurio, com issoprocura-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 coma rea de visualizao do dispositivo. como se fosse uma sanfona, esticae contrai, sem pensar na usabilidade ou como o usurio daquele dispositivoacessa a interface.

    Veja o exemplo a seguir e note as diferenas na verso mobile:

    Design Responsivo x Design Fluido

    http://www.chiefofdesign.com.br/http://www.chiefofdesign.com.br/http://www.chiefofdesign.com.br/
  • 7/24/2019 Manual de Web Design Responsivo - Projete para todos os dispositivos

    34/39

    34www.chiefofdesign.com.br

    Manual de Web Design Responsivo

    Muito provavelmente voc j deve ter visto um design adaptativo e pensouque era Responsivo. Hoje em dia usa-se muito o termo Design Responsivopara 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 mesmoassim eles so coisas distintas.

    O conceito do Design Responsivo acompanhar exatamente a resoluo

    do dispositivo, j o Design Adaptativo trabalha com medidas fixas para cadaresoluo, 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.

    Design Responsivo (RWD) ouDesign Adaptativo (AWD)

    http://www.chiefofdesign.com.br/http://www.chiefofdesign.com.br/http://www.chiefofdesign.com.br/
  • 7/24/2019 Manual de Web Design Responsivo - Projete para todos os dispositivos

    35/39

    35www.chiefofdesign.com.br

    Manual de Web Design Responsivo

    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 acessandode uma tela com 620px.

    Isso acontece porqu os breakspoints para as menores resolues, do nossoexemplo, so 480px e 768px . No existe um breakpoint para o 620px, portantoo 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 queo AWD mais restritivo.

    E sabe qual delas a melhor tcnica? Eu te respondo a seguir :)

    http://www.chiefofdesign.com.br/http://www.chiefofdesign.com.br/http://www.chiefofdesign.com.br/
  • 7/24/2019 Manual de Web Design Responsivo - Projete para todos os dispositivos

    36/39

    36www.chiefofdesign.com.br

    Manual de Web Design Responsivo

    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 garantirque o site seja acessvel ao maior nmero de pessoas independentemente dotamanho da tela.

    Avalie o projeto e veja suas possibilidade e objetivos.

    http://www.chiefofdesign.com.br/http://www.chiefofdesign.com.br/http://www.chiefofdesign.com.br/
  • 7/24/2019 Manual de Web Design Responsivo - Projete para todos os dispositivos

    37/39

    37www.chiefofdesign.com.br

    Manual de Web Design Responsivo

    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 olayout vai encaixar no dispositivo e sim em como podemos contribuir para queo 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-bookno seria capaz de conter, como por exemplo a parte do cdigo.

    Prefiri no adentrar no assunto neste ebook, pois no era esse o foco. Massaiba 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 ede acessar, para que voc possa consultar sempre que precisar.

    Qualquer coisa pode entrar em contato comigo, bele?

    At mais!

    Forte abrao!

    Consideraes Finais

    http://www.chiefofdesign.com.br/http://www.chiefofdesign.com.br/http://www.chiefofdesign.com.br/
  • 7/24/2019 Manual de Web Design Responsivo - Projete para todos os dispositivos

    38/39

    38www.chiefofdesign.com.br

    Manual de Web Design Responsivo

    Livro:

    Web Design Responsivo do Maurcio Samy Silva (Maujor), editora Novatec.

    Sites:

    tableless.comblog.popupdesign.com.br

    smashingmagazine.com

    Referncias

    http://www.chiefofdesign.com.br/http://www.chiefofdesign.com.br/http://www.chiefofdesign.com.br/
  • 7/24/2019 Manual de Web Design Responsivo - Projete para todos os dispositivos

    39/39

    https://www.youtube.com/user/ChiefofDesignhttps://www.facebook.com/chiefofdesignhttps://twitter.com/ChiefofDesignhttps://plus.google.com/+Chiefofdesign