Web Design Responsivo

Origem: Wikipédia, a enciclopédia livre.
Ir para: navegação, pesquisa

Web Design Responsivo é uma abordagem de web design destinada a elaborar sites para fornecer uma ótima experiência de visualização, fácil leitura e navegação com um mínimo de redimensionamento e visionamento, para uma ampla gama de dispositivos (de monitores de computador a telefones celulares)[1] [2]

Um website definido como responsivo[1] [3] adapta sua exibição para o ambiente de visualização usando grades proporcionais e fluídas[4] imagens flexíveis,[5] [6] [7] [8] e media queries CSS3 ,[2] [9] [10] uma extensão da regra @media.[11]

  • O conceito de grade fluída requer que as dimensões dos elementos sejam definidos por unidade relativas como percentagem, em vez de unidades absolutas como pixels ou pontos.[4]
  • Imagens flexíveis são as que também têm suas dimensões em unidades relativas, de modo a prevenir que escapem de dentro de seu elemento HTML.[5]
  • Media queries permitem que a página use diferentes regras de estilo CSS com base nas características do dispositivo onde o website está sendo exibido, sendo mais comum a largura de visualização do navegador web.

Conceitos relacionados[editar | editar código-fonte]

Site do Google News em diferentes tamanhos de telas
Site da WWF

Primeiro dispositivos móveis, JavaScript não-obstrutivo e melhoria progressiva[editar | editar código-fonte]

"Primeiro dispositivos móveis" e "JavaScript não-obstrutivo"/"melhoria progressiva" (estratégias para quando um novo design de site está sendo considerado) são conceitos que antecederam o design responsivo: os navegadores de celulares básicos não entendem consultas JavaScript ou media queries, então a prática recomendada é criar um site básico e então melhorá-lo para smartphones e PCs ao invés de tentar a "degradação graciosa" de se fazer website complexo, pesado, com muitas imagens funcionarem para os telefones móveis.[12] [13] [14] [15]

Melhoria progressiva com base em navegador, dispositivo ou deteção de recurso[editar | editar código-fonte]

Quando um web site deve oferecer suporte a dispositivos móveis básicos sem JavaScript, a detecção de "user agent" pelo navegador e a deteção de dispositivos móveis[13] [16] são dois modos de se deduzir se certos recursos HTML e CSS serão suportados (como base para melhoria progressiva) - no entanto, estes métodos não são totalmente confiáveis a menos que usados em conjunto com um banco de dados de capacidades de dispositivos

Para celulares e PCs mais capacitados, frameworks de JavaScript como Modernizr, jQuery e jQuery Mobile, podem testar o suporte aos recursos HTML/CSS (ou identificar o dispositivo ou user agent) diretamente pelo navegadores. Polyfills podem ser usados para adicionar suporte a recursos extras e suportar media queries (necessária para o design responsivo), e melhorar o suporte a oHTML5, no Internet Explorer. A deteção de recursos também não é totalmente confiável em navegadores mais antigos: alguns podem relatar que um recurso está disponível, quando está ausente ou tão mal implementada que é efetivamente não-funcional.[17] [18]

Desafios e outras abordagens[editar | editar código-fonte]

Luke Wroblewski resumiu alguns dos desafios do design responsivo e para mobile, e criou um catálogo de padrões de layout multi-dispositivo.[19] [20] [21] Ele sugere que em se comparando com a simples abordagem do design responsivo, a abordagem de experiência com o dispositivo ou RESS (responsive web design with server side components) podem proporcionar uma experiência de usuário melhor otimizada para dispositivos móveis.[22] [23] [24] A implementação server-side de CSS dinâmico em linguagens de folhas de estilo como Sass ou MML podem ser parte de tal abordagem, ao aceder a uma API no servidor para lidar com o dispositivo (normalmente aparelho móvel) em conjunto com um banco de dados de recursos do dispositivo, a fim de melhorar usabilidade.[25] O RESS é mais caro para o desenvolvimento do curso, exigindo mais do que a lógica de lado do cliente e por isso tende a ser reservada para organizações com orçamentos maiores.

Validação e teste[editar | editar código-fonte]

Existem hoje muitas maneiras de validar e testar designs responsivos,[26] variando de validadores site móvel, emuladores de móveis[27] a ferramentas para teste simultâneos como Adobe Edge Inspect.[28] Os navegadores Firefox e Chrome oferecem ferramentas de redimensionamento de área de visão sensíveis, assim como plugins.[29] [30]

História[editar | editar código-fonte]

Ethan Marcotte cunhou o termo "web design responsivo" (RWD), em um artigo da A List Apart.[1] Ele descreveu a teoria e a prática de web design responsivo em seu breve livro de 2011 intitulado Responsive Web Design. O design responsivo foi listado como número 2 np Top Web Design Trends de 2012 pela revista .net[31] depois da abordagem de Melhoria progressiva.

O site Mashable chamou o ano de 2013 Year of Responsive Web Design ("Ano do design responsivo").[32]

A revista Forbes fez uma reportagem Why You Need to Prioritize Responsive Design Right Now (Por que você precisa priorizar o design responsivo agora mesmo).[33]

Ver também[editar | editar código-fonte]

Referências

  1. a b c Marcotte, Ethan (May 25, 2010). Responsive web design. A List Apart.
  2. a b Gillenwater, Zoe Mickley (Dec. 15, 2010). Examples of flexible layouts with CSS3 media queries pp. 320.
  3. Pettit, Zoe Nick (Aug. 8, 2012). Beginner’s Guide to Responsive Web Design. TeamTreehouse.com blog. (em inglês)
  4. a b Marcotte, Ethan (March 3, 2009). Fluid Grids. A List Apart.
  5. a b Marcotte, Ethan (June 7, 2011). Fluid images. A List Apart. (em inglês)
  6. Adaptive Images. (em inglês)
  7. Hannemann, Anselm (Sept. 7, 2012). The road to responsive images. net Magazine. (em inglês)
  8. Jacobs, Denise (August 23, 2011). 21 top tools for responsive web design. .net Magazine. (em inglês)
  9. Gillenwater, Zoe Mickley (Oct. 21, 2011). Crafting quality media queries.
  10. Responsive design—harnessing the power of media queries. Google Webmaster Central (Apr. 30, 2012).
  11. W3C @media rule (em inglês)
  12. Wroblewski, Luke (November 3, 2009). Mobile First. (em inglês)
  13. a b Firtman, Maximiliano. Programming the Mobile Web. [S.l.: s.n.], July 30, 2010. 512 pp. ISBN 978-0-596-80778-8 (em inglês)
  14. Graceful degradation versus progressive enhancement (February 3, 2009). (em inglês)
  15. Designing with Progressive Enhancement. [S.l.: s.n.], March 1, 2010. 456 pp. ISBN 978-0-321-65888-3 (em inglês)
  16. Server-Side Device Detection: History, Benefits And How-To. Smashing magazine (September 24, 2012). (em inglês)
  17. BlackBerry Torch: The HTML5 Developer Scorecard | Blog. Sencha (2010-08-18). Página visitada em 2012-09-11.
  18. Motorola Xoom: The HTML5 Developer Scorecard | Blog. Sencha (2011-02-24). Página visitada em 2012-09-11. (em inglês)
  19. Wroblewski, Luke (May 17, 2011). Mobilism: jQuery Mobile.
  20. Wroblewski, Luke (February 6, 2012). Rolling Up Our Responsive Sleeves.
  21. Wroblewski, Luke (March 14, 2012). Multi-Device Layout Patterns.
  22. Wroblewski, Luke (February 29, 2012). Responsive Design ... or RESS.
  23. Wroblewski, Luke (September 12, 2011). RESS: Responsive Design + Server Side Components.
  24. Andersen, Anders (May 9, 2012). Getting Started with RESS.
  25. Responsive but not completely mobile optimised | Blog. Incentivated.
  26. Young, James (Aug. 13, 2012). Top responsive web design problems... testing. .net Magazine. (em inglês)
  27. Best mobile emulators and RWD testing tools. The Mobile Web Design Blog (Nov. 26, 2011). (em inglês)
  28. Rinaldi, Brian (September 26, 2012). Browser testing... with Adobe Edge Inspect. (em inglês)
  29. Responsive Design View in Firefox (em inglês)
  30. Viewport resizer (em inglês)
  31. 15 top web design and development trends for 2012. .net magazine (January 9, 2012). (em inglês)
  32. Cashmore, Pete (Dec 11, 2012). Why 2013 Is the Year of Responsive Web Design. (em inglês)
  33. Gunelius, Susan (Mar 26, 2013). Why You Need to Prioritize Responsive Design Right Now. (em inglês)