Tamanhos de Web Design

Esse é um dos meus principais problemas atualmente. Estou usando o Retina Macbook Pro de 15 ". Ao criar sites no Photoshop, normalmente uso as seguintes configurações,

• width = 2560, para facilitar a visualização em telas grandes; no entanto, mantenho todo o texto na grade de conteúdo de 12 colunas (2000px)
• res > 300

O problema é que, quando visualizo o site no meu navegador em uma tela de 1080p, ele fica enorme. No Photoshop, no meu Macbook Pro, no entanto, parece normal.

Eu não entendo a teoria por trás disso. Quais são as práticas recomendadas para que seu site seja dimensionado para diferentes resoluções?

O que realmente está acontecendo no site quando você cria um design responsivo? Quais tamanhos de fonte devo usar no photoshop para que eles sejam dimensionados corretamente?

Vou comentar um pouco sobre seus passos antes de tentar responder brevemente.

Quando estou criando sites no Photoshop

Projetar não é o mesmo que "tirar uma foto". Design é um processo em que você sabe o que é esse processo. Fazer uma "maquete" é apenas uma parte do processo de design.

Normalmente, uso as seguintes configurações,
width = 2560, para facilitar a visualização em telas grandes; no entanto, mantenho todo o texto na grade de conteúdo de 12 colunas (2000px)

Você está assumindo que pixels é a unidade correta. Não é, mas sim um ponto de partida.

res> 300

O PPI não tem nada a ver com webdesign. Mas como você está usando o Photoshop como ponto de partida, defina seu ppi para 72 ou 96.

Um guia básico

Eu não entendo a teoria por trás disso. Quais são as práticas recomendadas para que seu site seja dimensionado para diferentes resoluções?

Eu separaria "melhores práticas" de "práticas básicas"

A teoria básica é que o web design não é baseado em bitmap, mas proporcional. Por exemplo:

Use sua imagem (pense em um arquivo jpg) do tamanho de pixel que você escolher.

• Um processo proporcional NÃO diz: esta é uma grande foto de XXpixels.

• Ele diz "Isso deve ser tão largo quanto sua tela".

Aqui está minha dica em um post sobre como uma maquete pode ser apresentada: Como você apresenta wireframes e desenhos para sites longos de uma página?

Se você usar esse código, a imagem será redefinida para caber em qualquer tamanho de tela moderno.

Essa é a primeira ideia básica. A partir daí, você começa a pensar em como uma página da Web deve aparecer em um dispositivo físico. Principalmente:

• Um grande monitor de desktop

• Um tablet

• Um telefone

Mas isso deve ser codificado mais especificamente na folha de estilos.

Você notou que eu não mencionei nenhum tamanho de pixel ainda?

O Problema da Retina

Uma questão especial são as telas de alta densidade.

Se você acha que pode criar um site usando um monitor grande e as mesmas informações podem ser usadas em um telefone pequeno ... Não. Não importa se ele tem os mesmos 1920x1080 pixels do seu monitor de 24 polegadas.

Mais uma vez, você pensa nisso como um telefone ou como um grande monitor, não como pixels.

A "retina" é um caso especial em que você fornece uma imagem alternativa para ser visualizada mais nítida do que uma tela normal.

O navegador está "declarando" um tamanho de pixel normal para o telefone, por exemplo, 480px, mas ao mesmo tempo "sussurra" para o site "Ei, mas me envie as imagens de alta resolução que você tem, porque eu posso mostrá-las com mais clareza" para você pode receber uma foto 2x ou 3x vezes maior.

A propósito, você está começando com esta resolução de tela retina, que nem sempre é o caso.

Algumas dicas:

• Tente com uma resolução mais padronizada, como largura de 1920 px, mas apenas um ponto de partida.

• Use o código que forneci no link para visualizar sua imagem em diferentes monitores.

• Faça um furo em uma folha de papel do mesmo tamanho da tela de um tablet e outro no mesmo tamanho de um telefone e imagine o conteúdo. Faça a adaptação necessária.

As melhores práticas

• Pense em termos de proporções. <= (As práticas básicas estão aqui)

• Comece a explorar o que são consultas de mídia. <= (As práticas padrão estão aqui)

• Explore o uso de uma estrutura. <= (Algumas práticas comuns aqui)

• Estude profundamente HTML e CSS, design, resolução de UX, etc. <= (As melhores práticas estão aqui)

Os pixels não têm um 'tamanho' padrão associado a eles. Portanto, uma imagem de 2.000 pixels de largura em uma tela Retina (2880 pixels por 1800 pixels) tem cerca de 2/3 da largura da tela. No entanto, a mesma imagem em uma tela 1080p (1920 pixels por 1080 pixels) é maior que as dimensões da tela.