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


11

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?

Não confunda pixels virtuais com pixels reais.
DA01

Respostas:


6

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.


Obrigado pela resposta, companheiro. Na verdade, sou desenvolvedor e designer da Web. Tentei encurtar minha pergunta, por isso não me aprofundou nos detalhes e nos métodos que utilizo. Você está certo, o design responsivo não tem regras e o que eu sempre digo aos meus colegas de trabalho, mas só recentemente notei que, como os celulares têm altas resoluções, não faz sentido perder tempo em codificar consultas de mídia de 468 px para exemplo? e eu devo direcionar a resolução, certo?
Engineeroholic

Sim, como eu mencionei na última linha, você deve estar mais preocupado com resolução do que o tamanho da tela
Zach Saucier

Zach ... É uma pena que isso não seja um fórum de debate: o) acho totalmente diferente. Vou postar minha resposta. ; o)
Rafael

11
Após uma pesquisa rápida, descobri algo crítico que a maioria dos desenvolvedores sente falta. Se <meta name = "viewport" content = "width = largura do dispositivo, escala inicial = 1.0> estiver sendo usada, a largura do navegador será igual à largura do dispositivo, assim, consultas de mídia deve ser baseada no tamanho da tela não resolução que faz enorme diferença que eu não conseguiu prestar atenção por muito tempo XD tempo!
Engineeroholic

@Engineeroholic que está em meu cartilha design responsivo que eu ligado a :)
Zach Saucier

4

Ó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.


e a altura? e isso foi algo que encontrei hoje no trabalho, em que um cliente solicitou um site responsivo sem rolagem vertical (muito estranho!), foi uma grande dor de cabeça para lidar com todas as resoluções e resultará em muitas consultas de mídia! por fim, usei uma mistura de design fluido, 1 consulta de mídia e truque de CSS; onde pela primeira vez na minha vida eu fiz o rodapé com a posição absoluta e inferior = 0 para fazê-lo ficar no fundo para telas longas. (onde acho que é errado codificação), portanto, eu só usei consulta de mídia para telas menores do que o conteúdo .. Desta forma, eu só precisava usar uma consulta
Engineeroholic

3

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


2
Se você encontrar uma resposta útil que você deve upvote-lo para mostrar assim
Zach Saucier

Você deve projetar para a resolução da tela virtual . O tamanho da tela é inadequado, pois você não está realmente projetando dimensões específicas em polegadas ou cm.
DA01

Além disso, a escala inicial pode ser aplicada a uma página da web que é enorme. Ele será reduzido apenas para caber no que não é responsivo.
DA01 02/12/15

@ZachSaucier, eu adoraria votar nas respostas de minhas faculdades. infelizmente, não posso porque minha reputação é inferior a 15! Eu acho que essa proibição deve ser removida.
Engineeroholic

@ DA01, sim, o tamanho da tela é inadequado, é apenas um termo geral. Aqui, o tamanho da tela que diz slangy refere-se às dimensões da tela em pixels (não como resolução da tela).
Engineeroholic

2

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.


Embora isto seja verdade, eu ainda acho que o importante é se concentrar no design responsivo, não a tela é visto on
Zach Saucier

@ZachSaucier umm ... Concordo? Eu acho que? Eu não sei. É a mesma coisa, não é? O design responsivo é acomodar uma variedade de tamanhos de viewports. Eles parecem andar de mãos dadas. Não é responsivo se você também não está pensando nos vários tamanhos em que irá fluir.
DA01

O que aconteceu com os últimos 9 px?
Janus Bahs Jacquet
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.