Saltar para o conteúdo

Web design responsivo: diferenças entre revisões

Origem: Wikipédia, a enciclopédia livre.
Ver a alteração posterior →
Conteúdo apagado Conteúdo adicionado
VisualTexto wiki
Criada por tradução da página "Responsive web design"
(Sem diferenças)

Revisão das 03h00min de 25 de julho de 2021

Uma captura de tela da Wikipédia com um skin responsivo (Timeless).
A mesma skin (Timeless) no celular; observe como os elementos se reorganizam para serem mais amigáveis aos dispositivos móveis.
O conteúdo é como a água, um ditado que ilustra os princípios do WDR
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 (WDR) é 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 WDR.[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 WDR[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 as media queries CSS3,[4][12][13] uma extensão da @media, das seguintes formas:[14]

  • 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 media queries permitem que a página use regras de estilo CSS diferentes com base nas características do dispositivo em que 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 web design responsivo 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 avaliações de sites compatíveis com mobile se a busca fosse feita em um dispositivo móvel.[16] O web design responsivo é um exemplo de plasticidade da interface do usuário.[17]  

Conceitos relacionados

Dispositivos móveis primeiro, JavaScript discreto e aprimoramento progressivo

  O design móvel primário e o aprimoramento progressivo são conceitos relacionados anteriores ao WDR.[18] Navegadores de telefones celulares básicos não entendem JavaScript ou media queries, então uma prática recomendada é criar um site básico e aprimorá-lo para smartphones e computadores pessoais, em vez de depender da degradação normal para fazer um site complexo e cheio de imagens funcionar celulares.[19][20][21][22]

Aprimoramento progressivo com base no navegador, dispositivo ou detecção de recurso

Em 2014, pela primeira vez, mais usuários acessaram a internet dos 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 determinados recursos HTML e 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.[carece de fontes?]

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 media queries (necessário para WDR) 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 WDR 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 WDR, 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] A implementação do gerador CSS do lado do servidor de linguagens de folha de estilo como Sass ou MML do Incentivated pode fazer parte de tal abordagem, acessando uma API baseada em servidor que lida com as diferenças do dispositivo (normalmente celular) em conjunto com um banco de dados de recursos do dispositivo para melhorar a usabilidade.[33] O desenvolvimento de 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 WDR é 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, ou Ajax pode ser usado para exibir diferentes variantes de anúncio em uma página.[24][28][36] As tabelas CSS permitem layouts híbridos fixos + fluidos.[37]

Existem agora muitas maneiras de validar e testar designs WDR,[38] variando de validadores de sites móveis e emuladores móveis a ferramentas de teste simultâneas como o Adobe Edge Inspect.[39] 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.[40][41]

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

Modelo para design de aplicativo móvel e desktop.

Notas

  • Este artigo foi inicialmente traduzido, total ou parcialmente, do artigo da Wikipédia em inglês cujo título é «Responsive web design».

Referências

  1. ↑ Tafreshi, Amir E. Sarabadani; Marbach, Kim; Norrie, Moira C. (5 June 2017). Proximity-Based Adaptation of Web Content on Public Displays. Col: Lecture Notes in Computer Science (em inglês). 10360. [S.l.: s.n.] pp. 282–301. ISBN 978-3-319-60130-4. doi:10.1007/978-3-319-60131-1_16  Verifique data em: |data= (ajuda)
  2. ↑ a b Marcotte, Ethan (May 25, 2010). «Responsive Web design». A List Apart  Verifique data em: |data= (ajuda) Erro de citação: Código <ref> inválido; o nome "fluid_grid" é definido mais de uma vez com conteúdos diferentes
  3. ↑ «Ethan Marcotte's 20 favourite responsive sites». .net magazine. October 11, 2011  Verifique data em: |data= (ajuda)
  4. ↑ a b Gillenwater, Zoe Mickley (December 15, 2010). Examples of flexible layouts with CSS3 media queries. Col: Stunning CSS3. [S.l.: s.n.] 320 páginas. ISBN 978-0-321-722133  Verifique data em: |data= (ajuda) Erro de citação: Código <ref> inválido; o nome "ZMGflexEx" é definido mais de uma vez com conteúdos diferentes
  5. ↑ Schade, Amy (4 de maio de 2014). «Responsive Web Design (RWD) and User Experience». Nielsen Norman Group. Consultado em 19 de outubro de 2017 
  6. ↑ Pettit, Nick (August 8, 2012). «Beginner's Guide to Responsive Web Design». TeamTreehouse.com blog  Verifique data em: |data= (ajuda)
  7. ↑ «Core concepts of Responsive Web design». September 8, 2014  Verifique data em: |data= (ajuda)
  8. ↑ a b Marcotte, Ethan (March 3, 2009). «Fluid Grids». A List Apart  Verifique data em: |data= (ajuda) Erro de citação: Código <ref> inválido; o nome "EM_FG" é definido mais de uma vez com conteúdos diferentes
  9. ↑ a b Marcotte, Ethan (June 7, 2011). «Fluid images». A List Apart  Verifique data em: |data= (ajuda) Erro de citação: Código <ref> inválido; o nome "EM_FI" é definido mais de uma vez com conteúdos diferentes
  10. ↑ Hannemann, Anselm (September 7, 2012). «The road to responsive images». net Magazine  Verifique data em: |data= (ajuda)
  11. ↑ Jacobs, Denise (April 24, 2012). «50 fantastic tools for responsive web design». .net Magazine  Verifique data em: |data= (ajuda)
  12. ↑ Gillenwater, Zoe Mickley (October 21, 2011). «Crafting quality media queries»  Verifique data em: |data= (ajuda)
  13. ↑ «Responsive design—harnessing the power of media queries». Google Webmaster Central. April 30, 2012  Verifique data em: |data= (ajuda)
  14. ↑ W3C @media rule
  15. ↑ «Cisco Visual Networking Index: Global Mobile Data Traffic Forecast Update 2014–2019 White Paper». Cisco. January 30, 2015. Consultado em August 4, 2015  Verifique data em: |acessodata=, |data= (ajuda)
  16. ↑ «Official Google Webmaster Central Blog: Rolling out the mobile-friendly update». Official Google Webmaster Central Blog. Consultado em August 4, 2015  Verifique data em: |acessodata= (ajuda)
  17. ↑ Thevenin, D.; Coutaz, J. (2002). Plasticity of User Interfaces: Framework and Research Agenda. pp. 110–117 
  18. ↑ «What is Responsive Web Design». July 23, 2012  Verifique data em: |data= (ajuda)
  19. ↑ Wroblewski, Luke (November 3, 2009). «Mobile First»  Verifique data em: |data= (ajuda)
  20. ↑ a b Firtman, Maximiliano (July 30, 2011). Programming the Mobile Web. [S.l.: s.n.] pp. 512. ISBN 978-0-596-80778-8  Verifique data em: |data= (ajuda) Erro de citação: Código <ref> inválido; o nome "Firtman" é definido mais de uma vez com conteúdos diferentes
  21. ↑ «Graceful degradation versus progressive enhancement». February 3, 2009. Cópia arquivada em November 13, 2014  Verifique data em: |arquivodata=, |data= (ajuda)
  22. ↑ Parker, Todd; Wachs, Maggie Costello; Jehl, Scott (February 2010). Designing with Progressive Enhancement. [S.l.: s.n.] 456 páginas. ISBN 978-0-321-65888-3. Consultado em March 1, 2010  Verifique data em: |acessodata=, |data= (ajuda)
  23. ↑ «Mobile Websites | All The Way Up Media». All The Way Up Media (em inglês). 31 de outubro de 2016. Consultado em 8 de outubro de 2017 
  24. ↑ a b «Server-Side Device Detection: History, Benefits And How-To». Smashing magazine. September 24, 2012  Verifique data em: |data= (ajuda) Erro de citação: Código <ref> inválido; o nome "SSDD" é definido mais de uma vez com conteúdos diferentes
  25. ↑ «BlackBerry Torch: The HTML5 Developer Scorecard | Blog». Sencha. August 18, 2010. Consultado em September 11, 2012. Cópia arquivada em 5 de março de 2014  Verifique data em: |acessodata=, |data= (ajuda)
  26. ↑ «Motorola Xoom: The HTML5 Developer Scorecard | Blog». Sencha. February 24, 2011. Consultado em September 11, 2012. Cópia arquivada em 13 de fevereiro de 2015  Verifique data em: |acessodata=, |data= (ajuda)
  27. ↑ Wroblewski, Luke (May 17, 2011). «Mobilism: jQuery Mobile»  Verifique data em: |data= (ajuda)
  28. ↑ a b Wroblewski, Luke (February 6, 2012). «Rolling Up Our Responsive Sleeves»  Verifique data em: |data= (ajuda)
  29. ↑ Wroblewski, Luke (March 14, 2012). «Multi-Device Layout Patterns»  Verifique data em: |data= (ajuda)
  30. ↑ Wroblewski, Luke (February 29, 2012). «Responsive Design ... or RESS»  Verifique data em: |data= (ajuda)
  31. ↑ Wroblewski, Luke (September 12, 2011). «RESS: Responsive Design + Server Side Components»  Verifique data em: |data= (ajuda)
  32. ↑ Andersen, Anders (May 9, 2012). «Getting Started with RESS»  Verifique data em: |data= (ajuda)
  33. ↑ «Responsive but not completely mobile optimised | Blog». Incentivated 
  34. ↑ «Building Smartphone-Optimized Websites» 
  35. ↑ Snyder, Matthew; Koren, Etai (April 30, 2012). «The state of responsive advertising: the publishers' perspective». .net Magazine  Verifique data em: |data= (ajuda)
  36. ↑ JavaScript and Responsive Web Design Google Developers
  37. ↑ «The Role of Table Layouts in Responsive Web Design». Web Design Tuts+. Consultado em May 21, 2015  Verifique data em: |acessodata= (ajuda)
  38. ↑ Young, James (August 13, 2012). «Top responsive web design problems... testing». .net Magazine  Verifique data em: |data= (ajuda)
  39. ↑ Rinaldi, Brian (September 26, 2012). «Browser testing... with Adobe Edge Inspect»  Verifique data em: |data= (ajuda)
  40. ↑ «Responsive Design View». Mozilla Developer Network. Consultado em May 21, 2015  Verifique data em: |acessodata= (ajuda)
  41. ↑ Malte Wassermann. «Responsive design testing tool – Viewport Resizer – Emulate various screen resolutions - Best developer device testing toolbar». maltewassermann.com. Consultado em May 21, 2015  Verifique data em: |acessodata= (ajuda)
  42. ↑ «Mobile share of organic search engine visits in the United States from 3rd quarter 2013 to 4th quarter 2016». Statista. Consultado em 27 March 2017  Verifique data em: |acessodata= (ajuda)

Ligações externas

Obtida de "https://pt.wikipedia.org/w/index.php?title=Web_design_responsivo&oldid=61702818"