Web design adaptativo

Da Wikipédia, a enciclopédia livre
Ir para a navegação Saltar para pesquisar
"M2 Mobile Web", o front-end da web móvel original do Twitter , serviu mais tarde como uma versão herdada de fallback para clientes sem suporte a JavaScript e/ou navegadores incompatíveis, como consoles de jogos com capacidade limitada de navegação na web. Foi encerrado em dezembro de 2020. [1]

Adaptive web design ( AWD ) promove a criação de várias versões de uma página da web para melhor se adequar ao dispositivo do usuário, em oposição a uma única página estática que carrega (e parece) igual em todos os dispositivos ou uma única página que reordena e redimensiona o conteúdo responsivamente com base no dispositivo/ tamanho da tela / navegador do usuário.

Isso geralmente descreve o uso de uma versão para celular e desktop de uma página (ou, na maioria dos casos, de todo o site ), sendo que qualquer uma delas é recuperada com base no agente do usuário definido na solicitação HTTP GET , conhecida como dinâmica servindo . O web design adaptativo foi uma das primeiras estratégias para otimizar um site para legibilidade em dispositivos móveis , a prática mais comum envolvia o uso de um site completamente separado para dispositivos móveis e computadores, com dispositivos móveis frequentemente redirecionados para a versão móvel do site veiculado em um subdomínio(geralmente o subdomínio de terceiro nível, indicado como "m" ; por exemplo, http:// m .website.com/; e/ou parâmetros de URL como os &app=m&persist_app=1usados ​​no YouTube). Hoje, o uso de dois sites estáticos separados para visualização em dispositivos móveis e desktop está sendo amplamente eliminado, com scripts do lado do servidor sendo utilizados para veicular páginas geradas dinamicamente ou para decidir dinamicamente qual versão de uma página estática veicular, embora o uso de sites independentes para mobile e desktop ainda podem ser observados com frequência. Embora muitos sites empreguem técnicas de design da Web responsivas ou adaptáveis, as duas não são mutuamente exclusivas e as práticas recomendadas para os mais universaisconteúdo projetado legível emprega uma combinação das duas técnicas para suportar um espectro completo de hardware e software . [2]

A existência de front-ends separados permite que os clientes que tenham problemas técnicos com um deles voltem para outro, com a chance de que o problema não ocorra.

Definição técnica [ editar ]

Web design adaptável é um processo de detecção do lado do servidor que escolhe um layout de design e tamanho para exibição. Todos os tipos de layouts de web design podem ser usados, incluindo layout responsivo (embora o web design responsivo geralmente permita todo o controle do Adaptive Web Design, sem a necessidade de editar várias páginas nas atualizações). O design adaptável servirá para diferentes versões do site (ou página) para diferentes dispositivos com base em tamanhos e resoluções de tela comuns. A única diferença é a maneira como o design é visto de um ponto de vista colateral ou de dispositivo, em vez da abordagem de design responsivo da Web (RWD) de tamanho único para o layout. [3] O termo foi cunhado pela primeira vez por Aaron Gustafson em seu livroWeb design adaptável: criando experiências ricas com aprimoramento progressivo em maio de 2011. [2]

Terminologia das técnicas [ editar ]

O design adaptável da web usa vários layouts de página para uma única página da web e, às vezes , aprimoramento progressivo (PE). O modelo adaptativo é um layout "separado para dispositivos móveis", em contraste com o JavaScript "primeiro para dispositivos móveis" e aprimoramento progressivo do design da Web responsivo. [3] "Mobile separado" é o mesmo conceito de "mobile first", exceto que o layout de design do AWD é ter um layout móvel de base separado versus o layout de design único do design responsivo da web.

Os navegadores de telefones celulares básicos não entendem JavaScript ou consultas de mídia , portanto, uma prática recomendada é criar um layout móvel básico e usar aprimoramento progressivo para telefones inteligentes, em vez de depender da degradação graciosa para fazer um site complexo e com muitas imagens funcionar. [4] [5]

Avanços da tecnologia levando à necessidade [ editar ]

O design adaptativo é uma abordagem ampla ao design da Web que se concentra na adequação a uma variedade de interfaces, em vez de se restringir ao formato destinado a uma tela de desktop. Isso é especialmente significativo em 2018, quando os volumes de pesquisa em smartphones ultrapassaram os volumes de pesquisa em desktops em 10 países, mesmo com as pesquisas em tablets contadas na categoria desktop. [6]Novas tecnologias surgiram, trazendo mudanças para a face do web design como um todo e dando nova vida ao design gráfico dinâmico da web. Observe que, embora as práticas dinâmicas da web existam há mais de duas décadas, o design dinâmico em referência ao layout gráfico, principalmente para visualização em dispositivos móveis, é um conceito muito mais recente. Também é importante, ao definir a diferença entre RWD ( responsivo web design ) e AWD (adaptativo web design), que novas tecnologias (como CSS3 Media Queries , AJAX, HTML5, integração JS quase universal , etc.) - nãoAWD, que normalmente é mais eficiente e eficaz que o AWD. O AWD existe apenas no novo design para complementar o RWD onde as tecnologias RWD não podem ser interpretadas adequadamente pelo navegador (no caso de navegadores de dispositivos móveis "não inteligentes" e smartphones desatualizados). Essas mudanças recentes (a transição do desktop para o celular) tornam o design móvel fluido um dos conceitos mais importantes no desenvolvimento gráfico da web e levaram a uma forte transição para o RWD e para longe do AWD.

História, adaptação e evolução [ editar ]

O design adaptativo da Web funciona para detectar o tamanho da tela durante a solicitação HTTP GET , antes de a página ser servida e carregar a página projetada apropriadamente específica para o agente do usuário . Com o layout padrão adaptável, "geralmente você criaria um site adaptável para seis larguras de tela comuns: 320, 480, 760, 960, 1200 e 1600". [7] [8] Essa não era apenas uma prática comum para otimização móvel, mas o período de transição entre monitores CRT de baixa resolução 4:3 e monitores LCD 16:9 de alta resolução . Foi necessário um web design adaptativo padrão para criar layouts fluidos para os vários monitores disponíveis. [7]

Nos primórdios dos smartphones, como os BlackBerrysde meados ao final da década de 2000, as dimensões da tela eram muito variadas e, além disso, os navegadores móveis nesses dispositivos não tinham a funcionalidade avançada e os plug-ins usados ​​para criar ambientes ricos em navegadores de desktop. Além disso, os dados eram uma mercadoria de alto preço e muito lento, por isso era necessário projetar páginas móveis especiais "despojadas", com menos imagens (ou de qualidade inferior) e quebra de texto nítida para facilitar a leitura, os anúncios precisavam ser dimensionados consideravelmente também. O HTML na época permitia apenas coordenadas fixas e sem dimensionamento (que é a razão pela qual os sites eram quase sempre vinculados ao canto superior esquerdo ou superior direito em certas regiões - o design da Web responsivo permitia centralização e coordenadas relativas, o que levou à mudança para páginas de conteúdo centralizadas). Então, para alcançar páginas que carregariam em dispositivos móveis, os desenvolvedores tiveram que projetar páginas completamente novas para visualização móvel, na maioria das vezes precisando começar do zero; uma vez que esses navegadores eram muitas vezes difíceis de navegar, também era necessário criar links grandes e facilmente visíveis.[3] A próxima grande mudança no design da web padrão adaptável veio nos anos mais recentes, particularmente com a ascensão do iPhone e dois anos depois a ampla disponibilidade 3G aumentando drasticamente as velocidades de conexão e a largura de banda disponível, um sistema dinâmico de dois designs tornou-se o mais utilizado, um layout móvel (geralmente com o prefixo de subdomínio "m" ) otimizado para iPhone e um layout de desktop. As versões móveis ainda eram geralmente "reduzidas" com imagens de qualidade inferior e, às vezes, conteúdo como vídeos removidos para diminuir o tempo de carregamento. Essa também foi a primeira vez que os desenvolvedores da Web tiveram que projetar com uma tela sensível ao toque em mente, usando links e botões clicáveis ​​maiores para facilitar o uso dos dedos como ponteiros. [3]À medida que o sistema operacional Android do Google ganhou popularidade e introduziu mais variação na participação de mercado de smartphones, juntamente com a ampla implementação da banda larga móvel ultrarrápida do 4G LTE , não era mais necessário rebaixar a qualidade da mídia móvel ou cortar o conteúdo para lidar com a lentidão. velocidades de conexão e, com tanta variação nos dispositivos, o paradigma de várias páginas do design dinâmico padrão da web perdeu amplamente o favor dos desenvolvedores. Enquanto alguns ainda usam o conceito para separar completamente o design de conteúdo de tela sensível ao toque do design de desktop, o design responsivo da web tem quase todas as ferramentas necessárias para realizar praticamente qualquer manipulação em resposta a uma grande variedade de fatores, permitindo que uma página sirva a todos os propósitos. Ao integrar commaterial design ou layout específico do dispositivo e esquemas de cores, alguns desenvolvedores acham mais simples criar três modelos de página (Android, iPhone/iOS, desktop) alterando os ícones e as cores entre cada um, enquanto usam consultas de mídia para determinar o layout. A prática resulta em design e código de página muito mais simples, mas a atualização requer a edição de todos os 3 modelos. Existem variações neste conceito que borram as linhas entre AWD e RWD, como as "visões" do Django . [3] [8] [9] [2]

Web design responsivo vs. web design adaptativo [ editar ]

Embora não haja um consenso sobre a nomenclatura, já que tanto o adaptável quanto o responsivo podem ser usados ​​para representar o mesmo comportamento, o que é comumente chamado de design responsivo usa menos layouts de página do que o design adaptativo padrão, normalmente (em quase todos os casos) apenas um. O design adaptável é considerado menos à prova de futuro e um modelo de design muito menos eficiente do que o design responsivo porque os tamanhos de tela de dispositivos comuns mudam constantemente e são altamente variáveis. Nos primórdios da adoção em massa de smartphones, o modelo simples de 2 sites funcionou bem (uma página widescreen rica em mídia para visualização em desktop; um tamanho menor (em termos de qualidade/tamanho do arquivo de ativos carregados - para economizar dados) página formatado para visualização em tela pequena, com menos confusão, fontes maiores e restrições de quebra de texto mais rígidas para visualização móvel). Adicionalmente, nos primeiros anos do boom dos smartphones, apenas alguns modelos representavam a maior parte da participação no mercado, então as páginas móveis foram projetadas para melhor visualização nesses dispositivos - ignorando as pequenas falhas quando as páginas eram carregadas em dispositivos menos populares . Com a ascensão doiPhone , muitos desenvolvedores começaram a adaptar seus sites móveis especificamente para o iPhone e telas sensíveis ao toque. O design responsivo é construído em uma grade fluida versus a grade fixa do design adaptável . [3] O modelo de design híbrido Adaptativo/Responsivo envolve várias páginas formatadas em layout de web design responsivo , quando o layout apropriado mais próximo é servido, então a página responde ao dispositivo do usuário. [7]

O layout adaptável padrão (várias páginas dependentes da tela) também pode usar o dimensionamento responsivo da janela de visualização da página em conjunto (como no design da web responsivo), mas as novas estratégias e tecnologia de design da web responsiva praticamente tornaram necessário criar páginas em várias telas separadas obsoleto, exceto quando o site deseja segmentar usuários de dispositivos móveis não inteligentes e smartphones obsoletos que não respondem a novos scripts de design responsivo. [7] Como dito anteriormente, coisas como o conceito de "views" do Django e alguns aspectos do AJAXborrar as linhas, pois servem versões diferentes de páginas, por vários motivos, mas alguns podem ser por fluidez em dispositivos diferentes, no entanto, as páginas são geradas dinamicamente, não estaticamente (embora se possa argumentar que as "views" são templates estáticos para serem cheio de conteúdo. No final, tudo depende do desenvolvedor como ele sente ser a maneira mais adequada de direcionar os dispositivos em que seu conteúdo será visualizado da maneira mais fluida, limpa e integrada. Certamente há mais do que uma maneira de tirar a pele do gato do desenvolvimento dinâmico da Web. [3] [8] [9] [2]

Veja também [ editar ]

Referências [ editar ]

  1. ^ "O desligamento do Twitter legado significa que você não pode mais tweetar do 3DS" . ScreenRant . 28-11-2020.
  2. ^ a b c d Gustafson, Aaron. Web design adaptável: criando experiências ricas com aprimoramento progressivo . Leitores fáceis, LLC; 1ª edição, 2011.
  3. ^ a b c d e f g "Compreendendo e comparando o design responsivo, adaptável e fluido | Soluções Web de ICO" . Soluções Web ICO . 16 de janeiro de 2014 . Recuperado em 17 de abril de 2017 .
  4. ^ "Degradação graciosa versus aprimoramento progressivo" . 3 de fevereiro de 2009. Arquivado a partir do original em 13/11/2014 . Recuperado em 21/12/2016 .
  5. ^ Parker, Todd; Wachs, Maggie Costello; Jehl, Scott (fevereiro de 2010). Projetando com aprimoramento progressivo . pág. 456. ISBN 978-0-321-65888-3. Recuperado em 1 de março de 2010 .
  6. ^ Sterling, Greg (5 de maio de 2015). "É oficial: o Google diz que mais pesquisas agora no celular do que no desktop" . SearchEngineLand . com . Recuperado em 27 de janeiro de 2017 .
  7. ^ a b c d Adiseshiah, Emily Grace (1 de março de 2016). "Escolhendo um web design: responsivo vs adaptável" .
  8. ^ a b c VenturePact, VenturePact. "Projetando para 10.000 telas 4 dicas de layout para web design responsivo" .
  9. ^ a b Firtman, Maximiliano (30 de julho de 2010). Programando a Web Móvel . pág.  512 . ISBN 978-0-596-80778-8.