Web design responsivo é baseado na resolução ou tamanho da tela?

Para dispositivos móveis, a resolução é realmente grande, apenas o tamanho da tela é pequeno. baseado nisso:

• Para o design de sites , direcionamos a resolução da tela (por exemplo, 1920x1080)?
• E para aplicativos móveis . segmentamos o tamanho da tela?

O design responsivo não se baseia na resolução nem no tamanho da tela. Em vez disso, o design responsivo é baseado no conteúdo e na forma como é feito, o que permite que ele se ajuste a todos os tamanhos e resoluções.

A maneira como você pensa sobre o design responsivo está errada. Suponho que você tenha um histórico de design de impressão mais convencional, sim? Projetar para a web é muito mais gratuito. Os sites responsivos geralmente não têm os mesmos pontos de interrupção convencionais ou tamanhos / resoluções específicos para os quais são criados, porque a web permite mais do que isso - permite que todos os tamanhos de tela sejam alcançados. Assim, você pode projetar usando os tamanhos que forem adequados para o que estiver projetando, desde que sejam razoáveis.

Com isso dito, a melhor prática é projetar da maneira móvel primeiro , que realmente deve ser chamada de móvel mais importante . Isso força você a se concentrar no conteúdo que é mais importante e possível e, em seguida, permite adicionar mais para telas maiores em vez de forçar você a começar com mais em telas grandes e remover coisas ao projetar para telas menores. Você pode ler mais sobre isso em minha cartilha de design responsivo .

Mas também precisamos projetar de maneiras que permitam responsividade. A melhor prática é um exemplo ao vivo, seja na forma de protótipo ou em algum programa de wireframing, não em um documento estático como um PSD. Quando se trata do lado do desenvolvedor, devemos usar unidades responsivas e estruturar nosso código de uma maneira que faça sentido.

Com isso dito, você deve colocar as coisas em termos de pixels, significando resolução, não tamanho da tela.

Ótima pergunta, de fato!

Minha longa e confusa resposta: nenhuma e ambas

Apenas alguns pensamentos aqui comentando um pouco as contradições que estamos enfrentando hoje.

A tecnologia não é o que deveria ser desde as idades.

Todos nós devemos projetar com base em unidades da vida real (ou tamanho percived) , com algum grau de flexibilidade e liberdade para permitir que o usuário faça alguns ajustes adicionais.

Mas, para conhecer as medidas da vida real, precisamos de ambas as informações. Dimensões físicas e resolução do dispositivo = densidade de pixels.

Mas acontece que apenas alguns anos atrás, os dispositivos de tela estão começando a declarar a densidade de pixels. E alguns não o declaram ao servidor, apenas fazem muita publicidade sobre ele. (Aka Ipad, Iphone)

A resolução da tela pode ser detectada pelo sistema operacional, pois é imperativo enviar um sinal de acordo, mas para o tamanho real da tela, precisamos de um enorme banco de dados de cada modelo. Não é bom.

Isso nos deixa com apenas esta resolução de tela que são algumas informações que podemos saber.

Mas é totalmente diferente projetar para um grande monitor FullHD do que a mesma resolução em um dispositivo móvel. Ambos 1920x1080. Ai.

Um caso especial é que, nos projetores, porque não temos idéia da distância projetada e da distância dos espectadores.

Uma solução parcial são as consultas de mídia, os elementos vetoriais etc.

Uma resposta curta

Para webdesign: pelo menos até encontrarmos algo melhor.

Projeto de fluido (porcentagens) e fluxo natural, seções bem definidas.

• 1920 wide

• com consulta de mídia provavelmente em 1280

• e / ou em 1024

• provavelmente em 720

• e 480.

com detecção de dispositivo para suporte adicional.

Para aplicativos nativos para celular

Como é muito específico, basta seguir as orientações da marca em relação à interface do usuário e aos ícones.

Editado.

Por que escolher uma resolução de tela pequena em um dispositivo móvel FullHD?

Um smartphone tem uma resolução real de FullHD, mas normalmente está declarando uma pequena resolução para o servidor e o navegador. Você pode testar este artigo https://www.google.com/search?q=what+is+my+screen+resolution para que as consultas da mídia funcionem.

Primeiro, obrigado a todos pelas respostas e orientações preciosas, com certeza ajudaram!

Permita-me adicionar minha conclusão:

Praticamente, segmentar a resolução da tela do celular não é um bom UX, a resolução é muito alta para a tela pequena, as fontes serão pequenas demais para ler, os ícones serão pequenos demais para clicar etc.

Portanto, é melhor criar o design com base no tamanho real da janela de visualização! Dessa forma, é baseado no que um usuário pode ver e sentir.

Para conseguir isso na vida real, devemos adicionar uma metatag de largura de viewport dentro <head>dos documentos HTML:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Isso indica ao navegador para renderizar a página com uma largura igual à largura da tela, para garantir que a largura da página HTML seja igual à largura da tela em termos de pixels. O desenvolvimento pode ser facilmente planejado com consultas de mídia direcionadas a diferentes tamanhos de viewport para dispositivos móveis (que são próximos um do outro) e produzirá elementos visualmente mais claros.

Por favor corrija-me se eu estiver errado.

Atualizar:

Com base na minha humilde experiência, sugiro as etapas abaixo para um melhor desenvolvimento do site responsivo:

1- use a meta de view-port (veja a parte superior), também aumentará o ranking da página nos resultados de pesquisa para dispositivos móveis, de acordo com o google. http://googlewebmastercentral.blogspot.com/2015/04/faqs-april-21st-mobile-friendly.html

Após o teste, parece que a adição da meta de porta de visualização sozinha dará notas ao seu site nas ferramentas de teste para dispositivos móveis https://developers.google.com/speed/pagespeed/insights/

2- você pode considerar a possibilidade de aplicar a abordagem para dispositivos móveis, é sempre mais fácil aumentar do que diminuir (depende da complexidade do seu site)

3- Aplique um sistema responsivo híbrido, uma mistura entre adaptativo (fluido) e responsivo (css media-queries), para fazer isso:

• Use porcentagem para largura e margens horizontais / preenchimentos. (as margens verticais podem ter um tamanho fixo de pixels, se você preferir. a rolagem não é mais um problema)

• Use em para fontes, desta maneira, quando você alterar o tamanho da fonte para o corpo (ou html) na consulta de mídia, todos os elementos CSS se adaptarão a esse tamanho, usando px o tornará um pesadelo, porque você precisará ir para cada classe CSS e altere o tamanho da fonte.

• Flutue divs para a esquerda, para que eles se alinhem corretamente ao espaço disponível (ou à direita, se o seu design exigir).

4- Defina os pontos de interrupção , use uma ferramenta de teste responsiva para isso. Eu uso a exibição de design responsivo do firefox, basta diminuir a largura até chegar ao ponto em que o site está com defeito (por exemplo, 500px), que é um ponto de interrupção.

Aplique as novas regras CSS dentro da consulta de mídia para esse ponto de interrupção (500px),

5- lembre-se de preservar a qualidade e a clareza do site! se os elementos ficarem claros e muito próximos um do outro, expanda a largura dos elementos para ocupar a largura do contêiner e faça com que eles sejam empilhados verticalmente,

e lembre-se de fornecer um novo tamanho de fonte para o corpo, para que todos os subelementos herdem uma fonte maior e se tornem mais legíveis.

6- Repita o teste responsivo e defina seu segundo ponto de interrupção. Provavelmente, você não terá muitos pontos de interrupção porque estamos usando o design de fluidos aqui e é aí que o uso de porcentagens trará retorno!

Eu trabalhei em um grande site com elementos de design pesados ​​antes e isso exigia apenas 2 consultas de mídia :)

Espero que ajude

O modo como uma página responsiva reflui é baseado nas dimensões da janela de exibição (não na tela) em pixels virtuais ( pixels não reais).

Em uma área de trabalho tradicional em que 1 pixel virtual = 1 pixel real, se o navegador estiver definido como 1000 px de largura, a página será refletida para se ajustar a isso.

Em um iPhone 6, em que 1 pixel virtual (a Apple chama esses pontos ) = 3 pixels reais, a largura do navegador é a largura da tela e o conteúdo é refletido para caber na largura de 417 px (mesmo que na verdade sejam 1242 pixels reais)

Portanto, é um pouco estranho, pois nos exemplos acima, o dispositivo com menos pixels reais pode ser visto como uma janela de visualização mais ampla em um layout responsivo.