Web design responsivo: ele baixa a mesma quantidade de dados em todos os dispositivos?

11

Quero redesenhar meu blog e site no wordpress para acomodar usuários cada vez maiores de dispositivos móveis e tablets.

Também estou ouvindo sobre design responsivo. Quero saber se um web design responsivo baixa a mesma quantidade de dados na tela do computador e em um dispositivo móvel?

Também vi muitas grandes empresas de marketing que não investiram em web design responsivo e ainda estão buscando um site separado, otimizado para dispositivos móveis. Então, o que devo procurar, um web design responsivo ou um site separado otimizado para dispositivos móveis?

Nikhil
fonte

Respostas:

8

Conforme definido por Ethan Marcotte no ALA 306 , o termo "design responsivo" refere-se à técnica de aplicar regras de estilo diferentes ao seu HTML, dependendo do tamanho da tela do usuário. Para mais explicações sobre o design responsivo, aqui está um belo deck de Mike Bollinger .

Nesse modelo, você envia exatamente o mesmo HTML para o cliente, seja a tela pequena ou grande. No entanto, se os recursos (principalmente imagens) mencionados no CSS não forem exibidos para determinadas resoluções de tela, eles não poderão ser baixados. Por exemplo, para telas grandes que você pode usar high-res.pngem seu CSS e telas pequenas low-res.png- o cliente da Web pode optar por baixar apenas a imagem no estilo ativo. (Veja o comentário do @ DBUK para pelo menos um cliente importante que atualmente baixa os dois! Esperemos que os clientes sejam espertos!)

Essa técnica pode fazer sentido no seu caso, ou pode fazer mais sentido criar um site para celular separado.

Dispositivos diferentes podem implicar contextos de uso diferentes. Os telefones celulares estão sempre no seu bolso - como o usuário usaria seu site na linha de compras? Deseja enviar o site inteiro para eles? Ou apenas alguns recursos? Ou recursos totalmente diferentes? E se eles estiverem no sofá com a TV examinando casualmente o iPad?

Os dispositivos móveis tendem a ter processadores mais lentos, menos memória e taxas de conexão mais lentas (todas essas "verdades" se tornam menos verdadeiras todos os anos, btw) - você pode enviar um site móvel separado estritamente por razões de desempenho.

Atrevo-me a que, em geral, quanto mais estático, textual e direcionado ao conteúdo (ou seja, um blog), maior a chance de usar o HTML existente e o design responsivo. Quanto mais interativo, multimídia e orientado ao usuário (ou seja, uma loja), maior a chance de você adaptar sites separados para tipos de dispositivos individuais.

Além disso, não se esqueça que, atualmente, existe também a questão de saber se a experiência móvel deve ser um site ou aplicativo .

peteorpeter
fonte
Acho que, irritantemente, as imagens ainda serão baixadas. Os testes do cloudfour são um exemplo - cloudfour.com/examples/mediaqueries/image-test .
DBUK
@DBUK Obrigado pela correção - eu estava hesitando ao afirmar "não baixará" vs. "pode ​​não baixar" nas edições anteriores deste post. Atualizei minha resposta para ser mais preciso.
Peteorpeter
É novo para mim, então não tenho certeza se é apenas o iPhone. Por que nada é simples com a web :(
DBUK 9/11/11
1
@DBUK De fato. De acordo com esse teste, quando as duas regras de estilo de plano de fundo estão por trás das consultas de mídia, apenas baixa resolução é baixada, é somente quando a alta resolução é a regra de estilo padrão e é substituída por uma consulta de mídia que ambas são baixadas. Basicamente, é complicado!
Peteorpeter
Portanto, uma primeira abordagem móvel contornaria esse problema, por exemplo, estilo padrão para menor resolução e uso de consultas de mídia para todas as maiores, além da área de trabalho?
DBUK 13/12
1

O design responsivo não deve baixar a mesma quantidade de dados em todos os dispositivos, pois nem todos os dispositivos têm os mesmos requisitos de multimídia. Os sites para celular devem usar imagens de baixa resolução e ter uma natureza menos gráfica do que os sites para desktops / laptops / tablets. E se você deseja combinar seus sites para celular e sites regulares, precisa levar isso em consideração, caso contrário, seu site não é muito responsivo, é?

O peteorpeter de slidedeck vincula o script Imagens responsivas do Filament Group, que permite exibir a imagem do tamanho certo para o dispositivo apropriado usando JavaScript, idealmente sem baixar mais de uma versão. Para ativos de imagem de layout, isso normalmente seria feito por meio de consultas de mídia especificando estilos diferentes para diferentes resoluções de tela.

Lèse majesté
fonte
1

Eu acho que muitas empresas levarão muito tempo para atualizar seus sites, inferno, ainda existem algumas por aí usando tabelas. Responsivo, e a primeira abordagem móvel, são definitivamente as palavras de ordem do momento.

Como o pôster acima mencionado, você deve usar imagens em baixa resolução para seu telefone celular / dispositivos de resolução mais baixa. As consultas de mídia ajudarão você a atingir todas as resoluções mais baixas. No entanto, ouvi dizer que o safari móvel ignorará a tela: nenhuma regra e também fará o download das versões para desktop das imagens. Além disso, se você seguir a rota da imagem responsiva, isso pressionará bastante o processador móvel - 3 bytes por 1 pixel ... eu acho. Existem muitas soluções para contornar o download de conteúdo extra - algumas bastante hacky - https://docs.google.com/spreadsheet/ccc?key=0AisdYBkuKzZ9dHpzSmd6ZTdhbDdoN21YZ29WRVdlckE&hl=pt_BR#gid=0

Para obter algumas informações sobre as desvantagens do design responsivo da web, visite http://www.webdesignshock.com/responsive-design-problems/ . Não deixe que essa postagem do blog o deixe de lado. A Book Apart escreveu um livro fantástico sobre o assunto - http://www.abookapart.com/products/responsive-web-design . Definitivamente vale a pena pegar a versão do e-book.

DBUK
fonte
Você pode elaborar a declaração de 3kb por 1px? Não vejo como usar o JavaScript para buscar uma imagem em tamanho real apenas se a resolução da tela for maior que 480px teria esse efeito. Além disso, você nunca deve usar display: nonepara ocultar imagens de usuários móveis. Isso é apenas uma má prática.
Lèse majesté
"Algumas operadoras de rede, por exemplo, compactam imagens antes de serem transmitidas pelo ar para o dispositivo móvel" - w3.org/TR/mobile-bp Isso significaria que o celular precisaria descompactá-las (?) Ao custo de 3 bytes por pixel (@ 24 bits RGB, por exemplo, um JPG)? Opa, eu coloquei kb acima, caramba. Isso é puramente do ponto de vista CSS, com o celular baixando todas as imagens .. móveis e desktops, e sem levar em consideração as soluções javascript.
DBUK