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

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?

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 .

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.

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.