Web design responsivo

Da Wikipédia, a enciclopédia livre
Ir para navegação Pular para pesquisar

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 [ editar ]

Móvel primeiro, discreto JavaScript, e melhoria progressiva [ editar ]

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 [ editar ]

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 [ editar ]

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 [ editar ]

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 [ editar ]

Referências [ editar ]

  1. ^ Tafreshi, Amir E. Sarabadani; Marbach, Kim; Norrie, Moira C. (5 de junho de 2017). Adaptação baseada em proximidade de conteúdo da Web em telas públicas . Conferência Internacional sobre Engenharia da Web (ICWE): Engenharia da Web . Notas de aula em Ciência da Computação. 10360 . pp. 282–301. doi : 10.1007 / 978-3-319-60131-1_16 . ISBN 978-3-319-60130-4.
  2. ^ a b c Marcotte, Ethan (25 de maio de 2010). "Web design responsivo" . Uma lista à parte .
  3. ^ "20 sites responsivos favoritos de Ethan Marcotte" . .net magazine. 11 de outubro de 2011.
  4. ^ a b Gillenwater, Zoe Mickley (15 de dezembro de 2010). Exemplos de layouts flexíveis com consultas de mídia CSS3 . CSS3 impressionante. p. 320. ISBN 978-0-321-722133.
  5. ^ Schade, Amy (4 de maio de 2014). "Web Design Responsivo (RWD) e Experiência do Usuário" . Nielsen Norman Group . Recuperado em 19 de outubro de 2017 .
  6. ^ Pettit, Nick (8 de agosto de 2012). "Guia do Iniciante para Web Design Responsivo" . Blog do TeamTreehouse.com.
  7. ^ "Conceitos básicos de Web design responsivo" . 8 de setembro de 2014.
  8. ^ a b Marcotte, Ethan (3 de março de 2009). "Grades fluidas" . Uma lista à parte.
  9. ^ a b Marcotte, Ethan (7 de junho de 2011). "Imagens fluidas" . Uma lista à parte.
  10. ^ Hannemann, Anselm (7 de setembro de 2012). "O caminho para imagens responsivas" . Revista net.
  11. ^ Jacobs, Denise (24 de abril de 2012). "50 ferramentas fantásticas para web design responsivo" . .net Magazine.
  12. ^ Gillenwater, Zoe Mickley (21 de outubro de 2011). "Elaboração de consultas de mídia de qualidade" .
  13. ^ "Design responsivo - aproveitando o poder das consultas da mídia" . Central do webmaster do Google. 30 de abril de 2012.
  14. ^ Regra W3C @media
  15. ^ "Cisco Visual Networking Index: Global Mobile Data Traffic Forecast Update 2014–2019 White Paper" . Cisco . 30 de janeiro de 2015 . Recuperado em 4 de agosto de 2015 .
  16. ^ "Blog oficial da Central do webmaster do Google: Implementando a atualização compatível com dispositivos móveis" . Blog oficial da Central do webmaster do Google . Recuperado em 4 de agosto de 2015 .
  17. ^ Thevenin, D .; Coutaz, J. (2002). "Plasticidade das Interfaces do Usuário: Estrutura e Agenda de Pesquisa". Proc. Interact'99, A. Sasse & C. Johnson Eds, IFIP IOS Press . Edimburgo. pp. 110-117.
  18. ^ "O que é Web Design Responsivo" . 23 de julho de 2012.
  19. ^ Wroblewski, Luke (3 de novembro de 2009). "Mobile First" .
  20. ^ a b Firtman, Maximiliano (30 de julho de 2011). Programando a Web móvel . pp.  512 . ISBN 978-0-596-80778-8.
  21. ^ "Degradação graciosa versus aprimoramento progressivo" . 3 de fevereiro de 2009. Arquivado do original em 13 de novembro de 2014.
  22. ^ Parker, Todd; Wachs, Maggie Costello; Jehl, Scott (fevereiro de 2010). Projetando com aprimoramento progressivo . p. 456. ISBN 978-0-321-65888-3. Recuperado em 1 de março de 2010 .
  23. ^ "Sites móveis | Mídia completa" . Todos os meios de comunicação . 31 de outubro de 2016 . Recuperado em 8 de outubro de 2017 .
  24. ^ a b "Detecção de dispositivo do lado do servidor: história, benefícios e como fazer" . Revista sensacional. 24 de setembro de 2012.
  25. ^ "BlackBerry Torch: O marcador de pontos do desenvolvedor HTML5 | Blog" . Sencha. 18 de agosto de 2010. Arquivado do original em 5 de março de 2014 . Recuperado em 11 de setembro de 2012 .
  26. ^ "Motorola Xoom: The HTML5 Developer Scorecard | Blog" . Sencha. 24 de fevereiro de 2011. Arquivado do original em 13 de fevereiro de 2015 . Recuperado em 11 de setembro de 2012 .
  27. ^ Wroblewski, Luke (17 de maio de 2011). "Mobilismo: jQuery Mobile" .
  28. ^ a b Wroblewski, Luke (6 de fevereiro de 2012). "Arregaçando nossas mangas responsivas" .
  29. ^ Wroblewski, Luke (14 de março de 2012). "Padrões de layout de vários dispositivos" .
  30. ^ Wroblewski, Luke (29 de fevereiro de 2012). "Design Responsivo ... ou RESS" .
  31. ^ Wroblewski, Luke (12 de setembro de 2011). "RESS: Design Responsivo + Componentes do lado do servidor" .
  32. ^ Andersen, Anders (9 de maio de 2012). "Introdução ao RESS" .
  33. ^ "Blog responsivo, mas não totalmente otimizado para celular" . Incentivado.
  34. ^ "Construindo sites otimizados para smartphones" .
  35. ^ Snyder, Matthew; Koren, Etai (30 de abril de 2012). “O estado da publicidade responsiva: a perspectiva dos editores” . .net Magazine.
  36. ^ "Ajuda do Google Partners" . google.com . Recuperado em 21 de maio de 2015 .
  37. ^ Desenvolvedores do Google para JavaScript e design responsivo da Web
  38. ^ "O papel dos layouts de tabelas no design responsivo da Web" . Web Design Tuts + . Recuperado em 21 de maio de 2015 .
  39. ^ Young, James (13 de agosto de 2012). "Principais problemas de web design responsivo ... testes" . .net Magazine.
  40. ^ Rinaldi, Brian (26 de setembro de 2012). "Teste de navegador ... com Adobe Edge Inspect" .
  41. ^ "Visualização de design responsivo" . Rede de desenvolvedores Mozilla . Recuperado em 21 de maio de 2015 .
  42. ^ Malte Wassermann. "Ferramenta de teste de design responsivo - Viewport Resizer - Emular várias resoluções de tela - Melhor barra de ferramentas de teste de dispositivo de desenvolvedor" . maltewassermann.com . Recuperado em 21 de maio de 2015 .
  43. ^ "Compartilhamento móvel de visitas ao mecanismo de pesquisa orgânico nos Estados Unidos do terceiro trimestre de 2013 ao quarto trimestre de 2016" . Statista . Recuperado em 27 de março de 2017 .
  44. ^ Kalbach, Jim (22 de julho de 2012). "O primeiro site de design responsivo: Audi (por volta de 2002)." [ fonte autopublicada? ]
  45. ^ Adams, Cameron (21 de setembro de 2004). "Layout dependente da resolução: layout variável de acordo com a largura do navegador" . O Homem de Azul .
  46. ^ "G146: Usando layout líquido" . w3.org . Recuperado em 21 de maio de 2015 .
  47. ^ "Consultas de mídia" . w3.org . Recuperado em 21 de maio de 2015 .
  48. ^ "Grupo OutSeller - Organize, Otimize, Maximize" . outseller.net . Recuperado em 21 de maio de 2015 .
  49. ^ Cashmore, Pete (11 de dezembro de 2012). "Por que 2013 é o ano do Web design responsivo" .