Web design responsivo

Uma captura de tela da Wikipedia com uma pele responsiva ( Atemporal ).

A mesma skin ( Timeless ) no celular; observe como os elementos se reorganizam para que sejam mais amigáveis ​​aos dispositivos móveis.

O conteúdo é como a água , um ditado que ilustra os princípios do RWD

Um exemplo de como vários elementos de uma página da web se adaptam ao tamanho da tela de diferentes dispositivos, como a tela de um computador desktop, tablet PC e um smartphone

Web design responsivo ( RWD ) é uma abordagem ao design da Web que faz as páginas da Web renderizarem bem em uma variedade de dispositivos e tamanhos de janela ou tela do mínimo ao máximo. Trabalhos recentes também consideram a proximidade do visualizador como parte do contexto de visualização como uma extensão para RWD. ^[1] Conteúdo, design e desempenho são necessários em todos os dispositivos para garantir usabilidade e satisfação. ^{[2] [3] [4] [5]}

Um site projetado com RWD ^{[2] [6]} adapta o layout ao ambiente de visualização usando grades fluidas e baseadas em proporção, ^{[7] [8]} imagens flexíveis, ^{[9] [10] [11]} e consultas de mídia CSS3 , ^{[4] [12] [13]} uma extensão da regra, das seguintes maneiras: ^[14]@media

• O conceito de grade fluida exige que o dimensionamento do elemento da página seja em unidades relativas, como porcentagens, em vez de unidades absolutas como pixels ou pontos . ^[8]
• As imagens flexíveis também são dimensionadas em unidades relativas, de modo a evitar que sejam exibidas fora do elemento que as contém . ^[9]
• As consultas de mídia permitem que a página use regras de estilo CSS diferentes com base nas características do dispositivo no qual o site está sendo exibido, por exemplo, largura da superfície de renderização (largura da janela do navegador ou tamanho físico da tela).
• Os layouts responsivos se ajustam e se adaptam automaticamente a qualquer tamanho de tela do dispositivo, seja um desktop, um laptop, um tablet ou um telefone celular.

O design responsivo da Web tornou-se mais importante à medida que a quantidade de usuários de dispositivos móveis passou a representar mais da metade do tráfego total da Internet. ^[15] Em 2015, por exemplo, o Google anunciou o Mobilegeddon e começou a aumentar as classificações de sites compatíveis com dispositivos móveis se a pesquisa fosse feita a partir de um dispositivo móvel. ^[16] Web design responsivo é um exemplo de plasticidade da interface do usuário . ^[17]

Conceitos relacionados

Móvel primeiro, discreto JavaScript, e melhoria progressiva

O design móvel primeiro e o aprimoramento progressivo são conceitos relacionados anteriores ao RWD. ^[18] Navegadores de telefones celulares básicos não entendem JavaScript ou consultas de mídia , portanto, uma prática recomendada é criar um site básico e aprimorá-lo para smartphones e computadores pessoais , em vez de depender de degradação suave para criar uma imagem complexa e pesada trabalho local em telefones celulares. ^{[19] [20] [21] [22]}

Melhoria progressiva com base no navegador, dispositivo ou detecção de recurso

Em 2014, pela primeira vez, mais usuários acessaram a internet de seus dispositivos móveis do que de desktop. ^[23] Quando um site deve oferecer suporte a dispositivos móveis básicos sem JavaScript, a detecção de navegador ("agente de usuário") (também chamada de " detecção de navegador ") e a detecção de dispositivo móvel ^{[20] [24]} são duas maneiras de deduzir se determinado HTML e recursos CSS são suportados (como base para aprimoramento progressivo) - no entanto, esses métodos não são totalmente confiáveis, a menos que sejam usados ​​em conjunto com um banco de dados de recursos do dispositivo.

Para telefones móveis e PCs mais capazes, estruturas JavaScript como Modernizr , jQuery e jQuery Mobile que podem testar diretamente o suporte do navegador para recursos HTML / CSS (ou identificar o dispositivo ou agente do usuário) são populares. Polyfills pode ser usado para adicionar suporte para recursos - por exemplo, para oferecer suporte a consultas de mídia (necessário para RWD) e aprimorar o suporte a HTML5, no Internet Explorer. A detecção de recursos também pode não ser totalmente confiável; alguns podem relatar que um recurso está disponível, quando está ausente ou tão mal implementado que efetivamente não funciona. ^{[25] [26]}

Desafios e outras abordagens

Luke Wroblewski resumiu alguns dos desafios de RWD e design de dispositivos móveis e criou um catálogo de padrões de layout para vários dispositivos. ^{[27] [28] [29]} Ele sugere que, em comparação com uma abordagem simples de RWD, as abordagens de experiência do dispositivo ou RESS (web design responsivo com componentes do lado do servidor) podem fornecer uma experiência do usuário mais otimizada para dispositivos móveis. ^{[30] [31] [32]} Implementação do gerador de CSS do lado do servidor de linguagens de folha de estilo como Sass ou MML do Incentivated pode ser parte de tal abordagem, acessando uma API baseada em servidor que lida com as diferenças de dispositivo (normalmente telefone móvel) em conjunto com um banco de dados de recursos do dispositivo para melhorar a usabilidade. ^[33] O desenvolvimento do RESS é mais caro, exigindo mais do que apenas lógica do lado do cliente e, portanto, tende a ser reservado para organizações com orçamentos maiores. O Google recomenda um design responsivo para sites de smartphones em vez de outras abordagens. ^[34] Embora muitos editores estejam começando a implementar designs responsivos, um desafio contínuo para RWD é que alguns anúncios em banner e vídeos não são fluidos. ^[35] No entanto, a publicidade de pesquisa e a publicidade de exibição (banner) suportam segmentação de plataforma de dispositivo específica e diferentes formatos de anúncio de tamanho para desktop, smartphone e dispositivos móveis básicos. Diferentes URLs de página de destino podem ser usados ​​para diferentes plataformas, ^[36]ou Ajax pode ser usado para exibir diferentes variantes de anúncio em uma página. ^{[24] [28] [37]} As tabelas CSS permitem layouts híbridos fixos + fluidos. ^[38]

Existem agora muitas maneiras de validar e testar designs RWD, ^[39] variando de validadores de sites móveis e emuladores móveis a ferramentas de teste simultâneas como o Adobe Edge Inspect. ^[40] Os navegadores Chrome, Firefox e Safari e o console do Chrome oferecem ferramentas de redimensionamento de janela de visualização de design responsivo, assim como terceiros. ^{[41] [42]}

Os casos de uso de RWD agora se expandirão ainda mais com o aumento do uso de dispositivos móveis; de acordo com o Statista, as visitas a mecanismos de busca orgânica nos EUA provenientes de dispositivos móveis atingiram 51% e estão aumentando. ^[43]

Modelo para design de aplicativo móvel e desktop.

História

O primeiro site a apresentar um layout que se adapta à largura da janela de visualização do navegador foi o Audi .com, lançado no final de 2001, ^[44] criado por uma equipe da razorfish composta por Jürgen Spangl e Jim Kalbach (arquitetura de informação), Ken Olling (design) e Jan Hoffmann (desenvolvimento de interface). As capacidades limitadas do navegador significam que, para o Internet Explorer, o layout pode se adaptar dinamicamente no navegador, enquanto para o Netscape, a página deve ser recarregada do servidor quando redimensionada.

Cameron Adams criou uma demonstração em 2004 que ainda está online. ^{[ quando? ] [45]} Em 2008, uma série de termos relacionados como "flexível", "líquido", ^[46] "fluido" e "elástico" estavam sendo usados ​​para descrever layouts. Consultas de mídia CSS3 estavam quase prontas para o horário nobre no final de 2008 / início de 2009. ^[47] Ethan Marcotte cunhou o termo web design responsivo ^[48] (RWD) - e o definiu para significar grade fluida / imagens flexíveis / consultas de mídia - em um Artigo de maio de 2010 em A List Apart . ^[2] Ele descreveu a teoria e a prática do web design responsivo em seu breve livro de 2011 intitulado Responsive Web Design. O design responsivo foi listado como # 2 nas principais tendências de design da Web de 2012 pela revista .net após aprimoramento progressivo em # 1.

Mashable chamou 2013 de o Ano do Web Design Responsivo. ^[49] Muitas outras fontes recomendaram o design responsivo como uma alternativa econômica para aplicativos móveis devido à sua capacidade de hospedar todo o código em um único site. Usuários e desenvolvedores começaram a perceber os benefícios e a importância dos designs responsivos à medida que o uso móvel continuava a crescer. Essa percepção da importância foi confirmada quando o Google anunciou que os motores de busca iriam recompensar os sites responsivos com melhores classificações.

Veja também

Referências