Resoluções para o design responsivo


resolucoes-para-o-design-responsivo

O design responsivo esta cada vez mais presente nos sites do mundo todo, e cada profissional tem sua maneira de criar as media queries no CSS para cada resolução no design responsivo, não há regra mas sempre fica aquela pergunta, qual range de pixels eu crio para cada situação de adaptação do site?

Cada projeto tem suas variações, mas eu costumo adotar um padrão para facilitar a cada novo site que desenvolvo. Utilizando deste padrão consigo ter mais rapidez para atender a demanda de jobs.

Como sempre penso até nas menores telas como no Samsung Galaxy Y eu crio 4 arquivos CSS separadamente para facilitar no desenvolvimento.

Primeiro para o desktop e chamo de style-desktop.css que o minimo de pixels é 990px.

<link href=”style-desktop.css” rel=”stylesheet” type=”text/css” />

Segundo para tablets e chamo de style- tablet.css que fica entre o máximo de 989px até o minimo de 600px.

<link href=”style-tablet.css” rel=”stylesheet” media=”screen and (min-width: 600px) and (max-width: 989px)” type=”text/css” />

Terceiro para smartphones e chamo de style- smartphone.css que fica entre o máximo de 599px até o minimo de 320px.

<link href=”style-smartphone.css” rel=”stylesheet” media=”screen and (min-width: 320px) and (max-width: 599px)” type=”text/css” />

Quarto para “celulares” e chamo de style- celular.css que fica entre o máximo de 319px até o minimo de 0px. Chamo de celular mas é feito para smartphones de telas com resoluções de 240×320 px, que apesar de ser minimo a quantidade de acessos acho importante manter qualidade de visualização também  para este público.

<link href=”style-celular.css” rel=”stylesheet” media=”screen and (min-width: 0px) and (max-width: 319px)” type=”text/css” />

 

E você como trata as suas media queries? Quais os mínimos e máximos estipulados para cada resolução, como você nomeia esses arquivos?

Comente e contribua com a escolha de outros desenvolvedores front-end! E se você estava em dúvida ou esta começando a trabalhar com design responsivo agora pode utilizar este padrão que sigo é bem simples e funciona na maioria dos projetos.





Artigos Relacionados


Designer de Interface pós graduado em Arquitetura da Informação. UI/UX Designer e Front-end Developer, atualmente atendo empresas como freelancer e sou colaborador em uma agência de comunicação onde desenvolvo interfaces criativas com foco na experiência do usuário. Organizador por natureza acredito que o caos é a matéria-prima necessária.

4 comentários em “Resoluções para o design responsivo

  1. Thiago 17 de agosto de 2015 17:47

    Olá, Robson. Tudo bem?

    Você menciona o seguinte:

    Segundo para tablets e chamo de style- tablet.css que fica entre o máximo de 989px até o minimo de 600px.

    A largura máxima de um tablet não seria 2014px?

    Obrigado!

    • Thiago 17 de agosto de 2015 17:48

      Aliás, 1024px.

  2. vital 17 de março de 2014 11:17

    Acho que você não esta tratando o responsive design com se deve tratar a partir do momento que você menciona que para “celular ” você usa tal style, acho que o objetivo do responsive design não é ser dependente de aparelho e sim de resolução ou os diferentes modos de se acessar o meio de entretenimento web que deseja.

    Só um critica construtiva, achei legal o post, mais acho que deveria tratar o tema do post de forma mais convincente aos profissionais da área :).

    • Robson Moulin 17 de março de 2014 14:11

      Então vital, na verdade não estou tratando para aparelho de celular mais sim para resoluções de tela, os nomes são apenas para identificação das resoluções, o range que proponho tem perfeita adaptação para qualquer resolução e dispositivo.

Deixe o seu comentário

Seu endereço de email não será publicado.

Você pode usar HTML tags e atributos: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>