Se você estuda e se atualiza constantemente sobre web design responsivo, já deve conhecer o termo Device-Agnostic. “Device-Agnostic”, no contexto do desenvolvimento web, é referente a desenvolver sites que funcionem em quaisquer dispositivos, independentemente de suas limitações (temporárias ou permanentes). Já pensou no termo “web design responsivo independente de dispositivo“?
Ao desenvolver com web design responsivo, não é incomum lidar com a técnica se baseando em breakpoints responsivos de conteúdo ao invés de com dispositivos particulares, mas há mais sobre dispositivos do que o tamanho de suas telas. Uma abordagem agnóstica de dispositivos (Device-Agnostic) também leva em conta as infinitas combinações de resoluções de tela, o método de input, capacidade do browser e e velocidade de conexão.
Com esta vasta gama de possibilidades/variações, a coisa sensata a se fazer é começar a partir das condições mais adversas (ou as coisas mais difíceis para entregar) e desenvolver a partir daí. Como os carros projetados para funcionarem em calor extremo ou em estradas geladas, os sites devem ser desenvolvidos para enfrentar a realidade da variabilidade inerente à web.
Para começar, leve em consideração estes pontos:
- Navegadores hostis
- Telas pequenas
- Velocidades de conexão lentas
- Inputs via touch
Navegadores hostis
Tentar desenvolver sites para que tenham a mesma aparência em todos os navegadores pode ser caro e irreal — alguns diriam irracional. Pessoas usam navegadores desatualizados e alguns preferem aqueles que poupam dados/dinheiro à perfeição visual (por exemplo, proxy browsers como o Opera Mini). Embora seja possível considerar determinados navegadores comos hostis em relação à design e tecnologias da web atual, é preciso reconhecer que esses tipos de navegadores são, muitas vezes, uma escolha deliberada das pessoas. De muitas maneiras, essa “hostilidade” se estende dos navegadores à web, em si — como pessoas viajando de trem com a bateria do smartphone em 2% recebendo timeout de JavaScript fazendo coreografias braçais para tentar achar um lugar com mais sinal entre um túnel e outro.
É a natureza da web, como um continuum, suportar e capacitar seu uso em um constante estado de fluidez. Aceitar esta variabilidade significa que desenvolvedores web devemos priorizar a entrega de conteúdo para todos os navegadores — geralmente via HTML e CSS através da abordagem mobile first — e, a partir daí, realizar aprimoramentos progressivos (progressive enhancement).
Telas pequenas
Com as vendas de smartphones e tablets superando as de desktop — veja estas e outras estatísticas sobre o mundo mobile no livro “Web Design Responsivo: Páginas adaptáveis para todos os dispositivos” –, telas pequenas devem ser consideradas desde o início do processo de desenvolvimento, especialmente a partir de uma perspectiva de estratégia de conteúdo.
As pessoas querem experiências consistentes, recursos e conteúdo entre (ou através de) dispositivos. Ninguém gosta de ter que revisitar um site em desktop para ver o conteúdo completo, terminar o check-out ou para redefinir uma senha. Karen McGrane escreve para o A List Apart:
É sua missão oferecer o conteúdo em qualquer plataforma e em qualquer formato que o seu público seja capaz de acessar. As pessoas que acessam seus sites começam a decidir como, quando e onde querem ler seu conteúdo. É o seu desafio e sua responsabilidade proporcionar uma boa experiência para eles.
Experiências inconsistentes normalmente se manifestam em versões móveis incompletas de websites. Sites planejados e projetados para uma “quantidade de espaço desktop” quase inevitavelmente levam ao doloroso processo de fazer hacks de conteúdo para telas menores. Se uma parte do conteúdo não se encaixa em uma experiência móvel, o que o qualifica para o desktop? Uma abordagem mobile-first para a estratégia de conteúdo serve como uma base sólida para a paridade de conteúdo, o que, por sua vez, deixa as pessoas mais felizes.
Velocidades de conexão lentas
Páginas lentas perdem visitantes. Desenvolver numa conexão de 30-100mbps de velocidade pode distorcer a percepção de como a maioria das pessoas acessam a web. Considere uma das Leis da Simplicidade de John Maeda:
Ninguém gosta de sofrer a frustração da espera. Então, todos nós tentamos encontrar maneiras de vencer o relógio tentando encontrar a opção mais rápida ou qualquer outro meio para reduzir essa nossa frustração. Quando qualquer interação com os produtos ou prestadores de serviços acontece rapidamente, atribuímos essa eficiência à simplicidade percebida de experiência.
Desde 2010, a página web média quase dobrou de tamanho. A percepção de Paul Irish sobre os padrões e expectativas para um desempenho aceitável se tornaram muito negligentes. Toda decisão de conteúdo e design afeta o desempenho e velocidade. É interessante como Tim Kadlec vê isso:
Para qualquer coisa que será adicionada a uma página, você precisa ser capaz de responder à pergunta “Qual valor isso proporciona?” e, por sua vez, ser capaz de determinar se as vantagens compensam a dor.
Por “dor” provavelmente ele está se referindo à citada frustração da espera. Todos podemos fazer melhor. Começar a pensar (e a testar) em velocidades de conexão inferiores é uma boa maneira de começar, cuidadosamente considerando se cada aprimoramento compensa seu peso.
Inputs via touch
É preciso adotar uma abordagem “fat finger first” (“dedo gordo primeiro”) para web design. Links “cutucáveis” (tappable) muitas vezes ocupam mais espaço do que os clicáveis. Uma interface de toque pode impactar profundamente o projeto de um site (especialmente quando hovers são usados para interações importantes), então é mais fácil trabalhar com affordances para dedos gordos inicialmente ao invés de deixar para depois, especialmente quando a detecção de toque é quase impossível.
Considerações finais sobre device-agnostic
Desenvolvedores web que seguem a filosofia device-agnostic devem considerar cada um destes 4 pontos. Web design responsivo pode ser um plus no projeto de um site, mas chega em seu melhor estado quando é construído sobre a filosofia device-agnostic. “Mas qual é a diferença?”, você pode perguntar. Não surpreendentemente, Ethan Marcotte escreve:
Web design responsivo não é sobre “projetar para mobile”. Mas também não é sobre “projetar para desktop”. Ao invés disso, é sobre a adoção de uma abordagem mais flexível, device-agnostic, de se projetar para a web.
Um site responsivo pode ter grid flexível, imagens fluidas e media queries, mas se ele também auto carrega vídeos pesados que excedem planos de dados ou pede aos visitantes para girarem suas telas em 90 ° para a “experiência de imersão total”, certamente não pode ser considerado device-agnostic. Infelizmente muitos sites, responsivos ou não, são desenvolvidos apenas com cenários ideais e um pequeno conjunto de dispositivos em mente.
Como desenvolvedores web, é nosso papel considerar (e planejar) um máximo alcance e acesso, mesmo quando os resultados finais podem parecer assombrosos ou menos envolventes.Tuitar isso
Tuitar isso
Como desenvolvedores web, é nosso papel considerar (e planejar) um máximo alcance e acesso, mesmo quando os resultados finais podem parecer assombrosos ou menos envolventes. Antigamente, você poderia pensar em web design responsivo independente de dispositivo como algo que simplesmente poderia fazer sua vida de desenvolvedor web mais fácil; agora, com mais de 2,4 bilhões de pessoas no mundo online, considere isso como algo que pode ajudar a tornar a vida de todos melhor — inclusive a sua própria.