Eai pessoal post para dar aquela luz na hora de adaptar seu site para vários dispositivos, antigamente umas das maiores dificuldades para o desenvolvedor era renderizar o site em todos os navegadores, ainda mais quando tratava-se do Internet Explorer.
Mas hoje em dia nosso grande desafio é a infinidade de tamanhos e resoluções de tela existentes nos dispositivos mobile, celulares, tablets etc...
Segue algumas dicas para nos ajudar no dia-a-dia e tornar mais fácil essa adaptação para a geração mobile.
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]
@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]
/* 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]
@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
Plugins JQuery
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.
Fonte: weblizards
O que acharam? de sua opinião, comente curta e compartilhe.
Nenhum comentário:
Postar um comentário