Meu primeiro site responsivo

Fiz meu primeiro trabalho responsivo e deu trabalho para adaptá-lo para as principais plataformas mobiles existentes.

Inicialmente, usei as seguintes ferramentas:

Então iniciei meu trabalho realizando os wireframes, depois levei para o Photoshop e em seguida programando o template, ainda não havia nenhuma dificuldade, até o momento que iniciei as adaptações responsivas com os media queries(http://www.w3.org/TR/css3-mediaqueries/) .

Ainda não sabia como funcionava durante a implementação a aplicação dos media queries, assim segui as especificações do Twitter Bootstrap de como tornar o site responsivo.

Com isto copiei e colei este código no meu style.less:

  1. /* Landscape phones and down */
  2. @media (max-width: 480px) { … }
  3. /* Landscape phone to portrait tablet */
  4. @media (max-width: 767px) { … }
  5. /* Portrait tablet to landscape and desktop */
  6. @media (min-width: 768px) and (max-width: 979px) { … }
  7. /* Large desktop */
  8. @media (min-width: 1200px) { … }

Comecei a incluir as adaptações de CSS em cada media querie, como diminuir padding de menu, reduzir o tamanho da fonte de titulo, mudar o estilo do menu e entre outros. Durante todas essas alterações eu diminuía a resolução do browser para testar as alterações, isto foi bastante dispendioso, onde perdi algumas horas, até as adaptações estarem corretas (ainda não conhecia uma maneira melhor). Nisto eu já usava o FireBug (http://getfirebug.com/) e o Web Developer (http://chrispederick.com/work/web-developer/) constantemente para me auxiliar.

Quando fui testar no IPad e no IPhone percebi que as adaptações não eram ativadas e assim o site não se adaptava as plataformas, nisto fui pesquisar outras ferramentas e media queries melhores que a do Twitter BootStrap e encontrei o 320andUp (http://stuffandnonsense.co.uk/projects/320andup/), onde este me ajudou a finalizar meu trabalho.

O 320andUp me trouxe novas media queries que quando apliquei ao meu projeto, as mesmas funcionaram no IPhone e no IPad:

  1. @media only screen and (min-width: 480px) { … }
  2. @media only screen and (min-width: 600px) { … }
  3. @media only screen and (min-width: 768px) { … }
  4. @media only screen and (min-width: 992px) { … }
  5. @media only screen and (min-width: 1382px) { … }

Entretanto ele não traz a media querie que permite a visualização no IPhone no modo retrato, que possui 320px de largura, com isto acrescentei mais uma linha:

  1. @media only screen and (min-width: 320px) { }
  2. @media only screen and (min-width: 480px) { … }
  3. @media only screen and (min-width: 600px) { … }
  4. @media only screen and (min-width: 768px) { … }
  5. @media only screen and (min-width: 992px) { … }
  6. @media only screen and (min-width: 1382px) { … }

No 320andUp ele traz um html (responsive.html) que possui todas as principais dimensões das plataformas mobiles em iframes onde só necessita colocar o caminho do nosso site para visualizar como ele se apresentará em diferentes resoluções. Isto me ajudou bastante no momento de testá-las.

Outra ferramente muito boa para testar seu site responsivo: http://screenqueri.es/  / http://resizemybrowser.com/

Algumas observações importantes que percebi:

  • Se você estiver usando !important dentro dos media queries, tem algo errado na sua implementação. Não é preciso usar !important pois os atributos se sobrepõe em cada media querie seguinte;
  • Sérgio Lopes (http://sergiolopes.org/responsive-web-design/) afirma “O segredo é não usar pixels nas medidas, mas priorizar um layout mais fluído e flexível baseado em porcentagens e ems”. Isto é fato, então priorize isto.

É isto, espero ter sido útil. O site é este: http://hemersondaniel.com/

No próximo projeto utilizarei o Foundation (http://foundation.zurb.com/) ao invés do Twitter Bootstrap e analisar se é melhor.

Existe também outros frameworks que podem te ajudar: http://www.gumbyframework.com/

5 comentários

  1. Muito bom meu rapaz, familia agradece
    aqui na aula todo mundo agradece, o bira, o jair, o jaja, o nego drama e até o sasa ( que nem curte muito ainda o responsive design e nem o mobile first)
    Depois dessa leitura vamos todos comemorar no bar do jair

    Att,
    Cornélio José Wiedemann ( TI & DBA )

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s