Layout Responsivo, quais resoluções usar?

[Thiago Nunes 0]

Amigos,

 

Estou na fase de planejamento do site da minha empresa e pretendo fazer o mesmo responsivo. Além de desenvolver para abrir em tablets, smart phones e netbooks, quais resoluções de desk tops vocês aconselham usar em meu projeto?

Além disso, se eu desejar que o website abra em todos os tamanhos disponíveis de tablets, quais resoluções devo usar além de 768 x 1024 e 1024 x 768?

Obrigado!

[Diéssica 140]

Thiago, minha sugestão: faça um site responsivo, e não um site que fica se modificando em resoluções muito específicas. Abuse das medidas relativas e evite muitas modificações com media queries. Evite.

Recomendo extremamente esse artigo sobre breakpoints. Tem exatamente o que você precisa exatamente da forma que deveria ter.

Em suma, pense em um site responsivo acima de quaisquer breakpoints. Eu utilizo 1920x1080 e vejo muitos sites minúsculos na minha resolução, que quebram lindamente em resoluções como 320x480. Isso poderia ser resolvido sem criar um breakpoint exclusivo, mediaqueries; apenas fazendo um uso inteligente das medidas relativas.

Se está iniciando, abaixo estão as melhores referências, e todas foram essenciais no meu aprendizado. O Sérgio Lopes, desenvolvedor web, mantém um blog com um conteúdo muito relevante e pensa o web design responsivo de forma inteligente.

 

Uma experiência que tive com sites responsivos foi o mobile first. As pessoas tendem a evitar porque, inicialmente, pensam que resultará em um site mal projetado para desktops, mas muito pelo contrário. É legal e você tem outra visão enquanto desenvolvedor e usuário.

:seta: Web Design Responsivo: as melhores referências em português pra você aprender do básico ao avançado (Dê uma atenção especial a essa referência)
:seta: Mobile First: a arte de pensar com foco
:seta: Tudo que você precisa saber sobre resoluções, telas retina, devicePixelRatio, DPI, CSS pixels e etc

[Cristianoferr 32]

Usa bootstrap: http://getbootstrap.com

Esse site ajuda bastante: responsinator.com

o site para testar não precisa estar na web, eu uso dessa forma, por exemplo: responsinator.com/?url=127.0.0.1/projects

[Thiago Nunes 0]

Olá Diéssica,

Primeiramente obrigado pela sua resposta, ela esclareceu muito e com certeza vai me ajudar no desenvolvimento de sites responsivos.

Só não entendi muito bem o que você disse no terceiro parágrafo: "Eu utilizo 1920x1080 e vejo muitos sites minúsculos na minha resolução, que quebram lindamente em resoluções como 320x480." Poderia falar um pouco mais a respeito?

Abraço!

[Diéssica 140]

Só não entendi muito bem o que você disse no terceiro parágrafo: "Eu utilizo 1920x1080 e vejo muitos sites minúsculos na minha resolução, que quebram lindamente em resoluções como 320x480." Poderia falar um pouco mais a respeito?

Falei sobre sites que quebram (se dimensionam no breakpoint) na famosa resolução 320x480 por serem muito grandes nela, mas que não fazem nada quando são muito pequenos, no caso da resolução 1920x1080. Enfim, foi para reforçar a questão de pensar o desenvolvimento web responsivo de forma mais inteligente.

 

:)