Web design responsivo

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 em 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

Modelo para design de aplicativo móvel e desktop

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]

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 de junho de 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 
  2. ↑ a b Marcotte, Ethan (25 de maio de 2010). «Responsive Web design». A List Apart 
  3. ↑ «Ethan Marcotte's 20 favourite responsive sites». .net magazine. 11 de outubro de 2011 
  4. ↑ a b Gillenwater, Zoe Mickley (15 de dezembro de 2010). Examples of flexible layouts with CSS3 media queries. Col: Stunning CSS3. [S.l.: s.n.] 320 páginas. ISBN 978-0-321-722133 
  5. ↑ Schade, Amy (4 de maio de 2014). «Responsive Web Design (WDR) and User Experience». Nielsen Norman Group. Consultado em 19 de outubro de 2017 
  6. ↑ Pettit, Nick (8 de agosto de 2012). «Beginner's Guide to Responsive Web Design». TeamTreehouse.com blog 
  7. ↑ «Core concepts of Responsive Web design». 8 de setembro de 2014 
  8. ↑ a b Marcotte, Ethan (3 de março de 2009). «Fluid Grids». A List Apart 
  9. ↑ a b Marcotte, Ethan (7 de junho de 2011). «Fluid images». A List Apart 
  10. ↑ Hannemann, Anselm (7 de setembro de 2012). «The road to responsive images». net Magazine 
  11. ↑ Jacobs, Denise (24 de abril de 2012). «50 fantastic tools for responsive web design». .net Magazine 
  12. ↑ Gillenwater, Zoe Mickley (21 de outubro de 2011). «Crafting quality media queries» 
  13. ↑ «Responsive design—harnessing the power of media queries». Google Webmaster Central. 30 de abril de 2012 
  14. ↑ W3C @media rule
  15. ↑ «Cisco Visual Networking Index: Global Mobile Data Traffic Forecast Update 2014–2019 White Paper». Cisco. 30 de janeiro de 2015. Consultado em 4 de agosto de 2015 
  16. ↑ «Official Google Webmaster Central Blog: Rolling out the mobile-friendly update». Official Google Webmaster Central Blog. Consultado em 4 de agosto de 2015 
  17. ↑ Thevenin, D.; Coutaz, J. (2002). Plasticity of User Interfaces: Framework and Research Agenda. pp. 110–117 
  18. ↑ «What is Responsive Web Design». 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). Programming the Mobile Web. [S.l.: s.n.] pp. 512. ISBN 978-0-596-80778-8 
  21. ↑ «Graceful degradation versus progressive enhancement». 3 de fevereiro de 2009. Cópia arquivada em 13 de novembro de 2014 
  22. ↑ Parker, Todd; Wachs, Maggie Costello; Jehl, Scott (fevereiro de 2010). Designing with Progressive Enhancement. [S.l.: s.n.] 456 páginas. ISBN 978-0-321-65888-3. Consultado em 1 de março de 2010 
  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. 24 de setembro de 2012 
  25. ↑ «BlackBerry Torch: The HTML5 Developer Scorecard | Blog». Sencha. 18 de agosto de 2010. Consultado em 11 de setembro de 2012. Cópia arquivada em 5 de março de 2014 
  26. ↑ «Motorola Xoom: The HTML5 Developer Scorecard | Blog». Sencha. 24 de fevereiro de 2011. Consultado em 11 de setembro de 2012. Cópia arquivada em 13 de fevereiro de 2015 
  27. ↑ Wroblewski, Luke (17 de maio de 2011). «Mobilism: jQuery Mobile» 
  28. ↑ a b Wroblewski, Luke (6 de fevereiro de 2012). «Rolling Up Our Responsive Sleeves» 
  29. ↑ Wroblewski, Luke (14 de março de 2012). «Multi-Device Layout Patterns» 
  30. ↑ Wroblewski, Luke (29 de fevereiro de 2012). «Responsive Design ... or RESS» 
  31. ↑ Wroblewski, Luke (12 de setembro de 2011). «RESS: Responsive Design + Server Side Components» 
  32. ↑ Andersen, Anders (9 de maio de 2012). «Getting Started with RESS» 
  33. ↑ «Responsive but not completely mobile optimised | Blog». Incentivated 
  34. ↑ «Building Smartphone-Optimized Websites» 
  35. ↑ Snyder, Matthew; Koren, Etai (30 de abril de 2012). «The state of responsive advertising: the publishers' perspective». .net Magazine 
  36. ↑ JavaScript and Responsive Web Design Google Developers
  37. ↑ «The Role of Table Layouts in Responsive Web Design». Web Design Tuts+. Consultado em 21 de maio de 2015 
  38. ↑ Young, James (13 de agosto de 2012). «Top responsive web design problems... testing». .net Magazine 
  39. ↑ Rinaldi, Brian (26 de setembro de 2012). «Browser testing... with Adobe Edge Inspect» 
  40. ↑ «Responsive Design View». Mozilla Developer Network. Consultado em 21 de maio de 2015 
  41. ↑ Malte Wassermann. «Responsive design testing tool – Viewport Resizer – Emulate various screen resolutions - Best developer device testing toolbar». maltewassermann.com. Consultado em 21 de maio de 2015 
  42. ↑ «Mobile share of organic search engine visits in the United States from 3rd quarter 2013 to 4th quarter 2016». Statista. Consultado em 27 de março de 2017 

Ligações externas

Strategi Solo vs Squad di Free Fire: Cara Menang Mudah!