url

Como converter um site em um site responsivo

Esse post tem como objetivo jogar uma luz sobre layouts responsivos. Antigamente, a principal dificuldade enfrentada por um desenvolvedor web era fazer o site renderizar da mesma forma em todos os navegadores. Isso não seria uma tarefa tão árdua não fosse pelo nosso “querido amigo” Internet Explorer.

Hoje em dia esse cenário já melhorou bastante neste aspecto. O IE 9  ainda dá trabalho mas bem menos que seus antecessores. Só que agora temos que enfrentar um novo desafio: A infinidade de tamanhos e resoluções de tela existentes nos dispositivos mobile. Por dispositivos mobile, leia-se, celulares, smartphones e tablets.

Com o crescimento da utilização destes dispositivos com acesso à internet, nós, desenvolvedores, devemos nos adaptar aos novos tempos. Estatísticas mostram o crescimento constante e acelerado do uso destes dipositivos e atender à esta nova demanda é imperativo nos dias de hoje.

O desenvolvimento web está ganhando força e com o surgimento de novas ferramentas para auxiliar os desenvolvedores está cada vez mais fácil fazer um site. Quer dizer, em um aspecto sim. Por outro lado, a diversidade de linguagens de marcação e programação que devemos conhecer para desenvolver um site é cada vez maior.

 

O que é esse negócio de responsividade?

Um dia, dispositivos mobile serão muito mais utilizados do que desktops. Isso é um fato. A responsividade visa atender à esse novo paradigma no desenvolvimento web: Simplesmente ajustar o seu site à qualquer resolução existente, aumentando significativamente a acessibilidade à ele. Então, se o usuário possui uma tela pequena, automaticamente os elementos do site irão se redimensionar, reagrupar e até mesmo serão substituídos por outros mais adequados ao tamanho de tela.

 

 Tamanhos de tela


Dispositivos mobile tem resolução entre 320×240 até 640×960, portanto não podemos mais definir valores absolutos, como fazemos no desenvolvimento para desktops.

 

CSS @media queries, mais fácil do quê você imagina.

Essas media queries são simplesmente regras que adicionamos no CSS para atender somente os dispositivos definidos em suas regras.

É como programação, veja o código abaixo:

[cc lang=”css”]
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
body {
background: red;
}
}
[/cc]

Com isso estou dizendo: SE (é um dipositivo de tela) E (sua largura está entre 320 e 480), o <body> terá um background vermelho.

O site csstricks.com nos deu esse fantástico snippet

[cc lang=”css”]
/* Smartphones (portrait and landscape) ———– */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}
/* Smartphones (landscape) ———– */
@media only screen
and (min-width : 321px) {
/* Styles */
}
/* Smartphones (portrait) ———– */
@media only screen
and (max-width : 320px) {
/* Styles */
}
/* iPads (portrait and landscape) ———– */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}
/* iPads (landscape) ———– */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}
/* iPads (portrait) ———– */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
}
/* Desktops and laptops ———– */
@media only screen
and (min-width : 1224px) {
/* Styles */
}
/* Large screens ———– */
@media only screen
and (min-width : 1824px) {
/* Styles */
}
/* iPhone 4 ———– */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}
[/cc]

Tudo o que você precisa fazer é incluir as novas regras CSS. =)

 

 Rearranjando tudo

Quando você começar a trabalhar nisso, notrarà que não se trata apenas de fazer um site de uma coluna, ao invés de multiplas colunas. Na verdade, alguns elementos irão ocupar muito espaço e você precisará removê-los. Existem algumas opções que você pode utilizar:

 

Substituir o menu por uma caixa de seleção

Você pode usar a técnica utilizada pelo site CSS tricks. É sobre utilizar as media queries e Javascript para fazer essa substituição.

 

Escondendo um elemento

 

Utilize as media queries para esconder elementos de uma barra lateral, por exemplo

[cc lang=”css”]
@media (max-width: 960px) {
#sidebar .hideme { display: none; }
}
[/cc]

 

Reposicionamento de elementos

Dependendo de como seu HTML foi feito, você pode querer mudar o conteúdo para o topo do HTML e mover a barra lateral para baixo ou até mesmo usar o Javascript para apenas mostrá-la quando o usuário clicar em “exibir” ou algo assim.

 

Pular direto para os links

É uma boa prática ter algo assim em seu código, para que leitores de tela e usuários mobile possam simplesmente pular diretamente para o conteúdo em vez de rolar a tela passando pela barra lateral ou um menu até chegar ao conteúdo principal.

[cc lang=”html”]

[/cc]

 

Atalhos e ferramentas

Abaixo, alguns plugins que podem lhe ajudar nesse processo:

 

Plugins WordPress

Wp Fluid Images

 

 

WordPress Mobile Pack

 

 

Any Mobile Theme Switcher

 

 

 Plugins JQuery

ResponsiveSlides.js

 

 

Isotope

 

 

TinyNav.Js

 

 

 Mais coisas legais

Você pode também usar um sistema de GRID para lhe ajudar, como o 1140px Grid, o Zurb Foundation ou o Bootstrap (desenvolvido pelo twitter).

Uma boa ferramenta que nos auxiliará nos testes é o http://quirktools.com/screenfly/. Ele simplesmente renderiza seu site em vários dos principais formatos possíveis.

 

O que você achou?

Em grande parte, este post é uma tradução adaptada do post do Rochester Oliveira. O que você achou? Acha que foi útil para você? Comente!

27 comentários sobre “Como converter um site em um site responsivo

  1. Boas, preciso muito de ajuda, porque comigo não resulta, talvez eu não esteja a fazer certo, mas me ajudem. Eu apenas coloquei o código que aparece aí no site no meu ficheiro css, penso que é só isso, mas não resulta. Ajudem por favor!

  2. parabéns muito bom estou só com um problema aonde que eu posso colocar esse código colo em todo lugar e n funciona no meu site

Deixe uma resposta

O seu endereço de email não será publicado Campos obrigatórios são marcados *

Você pode usar estas tags e atributos de HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">