Logotipo Design Interativo

Resoluções 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.

Comentários
  1. Thiago disse:

    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!

  2. vital disse:

    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 disse:

      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!

publicidade
publicidade
publicidade

Design Tools

Links

Conheça sites sobre ux, design, front-end, comunicação, inspiração e muito mais, fique por dentro das novidades do mercado com nossa lista.


Profissionais Influentes

Conheça os profissionais que influenciam e trabalham para a comunidade de design e fron-end e user experience, confira o Twitter de cada um.


Curta nossa fanpage e fique por dentro das novidades do site
publicidade
publicidade
publicidade