Mobile First Design: por que é ótimo e por que é péssimo

Historicamente, a maioria dos web designers e seus clientes abordaram o lado da área de trabalho de qualquer projeto primeiro, deixando a parte móvel como uma meta secundária que é alcançada posteriormente. Mesmo com o surgimento do design responsivo, muitos de nós começam com o site "tamanho completo" e avançam.

Há uma tendência crescente no setor, porém, de virar esse fluxo de trabalho de cabeça para baixo e começar com considerações sobre dispositivos móveis e depois trabalhar com uma versão maior para desktop.

Por que você abordaria um projeto dessa maneira? Quais são alguns dos prós e contras dessa estratégia? Leia mais para descobrir!

Web design móvel não é um nicho

Se você ainda tem em mente que o desenvolvimento de aplicativos e web para dispositivos móveis é um setor de nicho, precisa mudar sua maneira de pensar. O celular não é uma tendência, nem é o futuro, é o presente. Não acredita em mim? Aqui estão algumas estatísticas malucas a serem consideradas no Mobithinking:

• Existem mais de 1, 2 bilhão de usuários de web móvel em todo o mundo
• Nos EUA, 25% dos usuários móveis da Web são apenas móveis (raramente usam um desktop para acessar a web)
• Aplicativos móveis foram baixados 10, 9 bilhões de vezes
• As vendas de dispositivos móveis estão aumentando em geral, com mais de 85% dos novos aparelhos capazes de acessar a Web móvel

Um dos fatos mais potentes aqui é o segundo item, que mostra que muitos usuários provavelmente apenas verão a versão móvel do seu site. Essa é uma revelação surpreendente, não é?

Mais do que nunca, a web é algo que carregamos em nossos bolsos, não algo que simplesmente fica perto de nossa mesa ou mesmo em nossas casas. Essa é uma tendência global que só continuará a ver crescimento nos próximos anos. Você está pronto para isso? O seu conjunto de habilidades profissionais inclui desenvolvimento web para todas as plataformas importantes ou apenas para a área de trabalho?

Por que o celular primeiro?

As probabilidades são de que nenhuma das pessoas que está lendo isso não aprendeu nada de novo até o momento. Os US $ 500 + telefones nos bolsos de todos que você conhece são todas as indicações de que você precisa que a Web quebrou em sua caixa em forma de computador.

No entanto, o fato de o acesso à Web móvel ser popular não faz quase nada para me convencer de que preciso seguir uma estratégia que coloque os dispositivos móveis em primeiro lugar. O outro lado de 25% dos usuários móveis sendo apenas móveis é que 75% deles não são! A área de trabalho ainda é um meio importante, para não ser esquecido ou empurrado para segundo plano ainda. Então, por que estamos pensando em seguir a primeira rota móvel?

Um dos principais catalisadores para o surgimento do mobile-first web design foi o anúncio de Eric Schmidt em 2010 de que o Google adotaria essa abordagem a partir de agora, chegando a dizer “Acho que agora é o projeto conjunto de todos nós fazemos do celular a resposta para praticamente tudo ”(fonte). Por que essa mudança drástica de abordagem?

Degradação graciosa vs. aprimoramento progressivo

Estas são algumas das principais palavras de efeito de alguns anos atrás que ainda podem dar uma grande noção da noção de web design para dispositivos móveis e por que esse é um conceito importante a ser considerado.

A degradação graciosa surgiu da necessidade de ter uma função de design no maior número possível de navegadores e plataformas. Designers e desenvolvedores queriam tirar proveito da nova tecnologia sem excluir usuários com configurações que não tinham suporte. A conclusão geral foi criar e servir a melhor experiência possível e, em seguida, contabilizar cada degradação possível e garantir que, apesar de quaisquer deficiências, o site permanecesse funcional.

Em termos de design para web móvel, isso significava que um site completo e padrão diminuiria gradualmente e removeria gradualmente o conteúdo e os recursos à medida que a janela de visualização se tornasse menor e o sistema mais simples (sem suporte a Flash etc.).

Fora dessa tendência, surgiu uma nova e poderosa idéia: aprimoramento progressivo. Nesta versão do conto, você dá o melhor de si na plataforma móvel, oferecendo aos usuários espaço mínimo na tela, poder de processamento e plugins de terceiros, uma experiência incrível que parece ótima e funciona perfeitamente. Conforme a necessidade, o site pode ser gradualmente "aprimorado" e até completamente repensado para plataformas maiores com menos restrições.

Por que o aprimoramento progressivo ganha

À primeira vista, essas duas metodologias parecem aproximadamente equivalentes. Quem se importa com o início do processo de design, desde que seja feito, certo?

A realidade da situação é um pouco mais complexa. Ao começar com a plataforma de desktop, você tende a aproveitar tudo o que a plataforma tem a oferecer. Você cria um produto incrível que aproveita muitas das melhores tecnologias, apenas para perceber que nenhuma delas se adapta bem aos dispositivos móveis. Isso pode levar a produtos móveis severamente diluídos que parecem mais uma reflexão tardia do que um produto acabado e polido. Isso acontece com todo projeto? Talvez não, mas a história é provavelmente muito mais comum do que você gostaria de acreditar.

Se examinarmos o fluxo de trabalho de aprimoramento progressivo, o resultado tende a ser uma história diferente. Aqui estamos começando com um projeto que é super enxuto e bastante impressionante. Você pegou toda essa energia inicial e a colocou na criação de um produto com boa aparência e funcionamento, apesar das muitas restrições que enfrentou.

Mais importante, você já passou pelo problema de reduzir o conteúdo para seus elementos mais vitais. Agora, quando é hora de trazer esse design para a área de trabalho, em vez de enfrentar a decisão do que cortar e como diluir seu produto, você decide como torná-lo ainda mais robusto!

Conteúdo da Web: melhor servido seletivamente

O argumento acima chega a você de um ponto de vista puramente filosófico, com a conclusão final de que o resultado tende a ser melhor se for adotada uma abordagem móvel. Se você quer uma discussão com uma substância um pouco mais observável por trás, não procure mais do que como você exibe seu conteúdo.

Se adotarmos o ponto de vista da degradação, todo o conteúdo (texto, imagens, vídeo, áudio, etc.) é veiculado ao mesmo tempo no que se supõe ser a maior plataforma. A partir daqui, são contabilizadas as versões para dispositivos móveis que simplesmente ignoram ou removem grande parte desse conteúdo da página. O problema, porém, é que ele já estava carregado, se a plataforma fornecida precisava ou não. Nós nos encontramos fornecendo mais conteúdo do que o necessário na plataforma geralmente associada às velocidades de download mais lentas. Viu algo de errado nisso?

Com um primeiro ponto de vista móvel, começamos carregando o essencial absoluto nas plataformas menores. Isso leva a uma experiência mais rápida que evita atrasos desnecessários. Os recursos adicionais são carregados estritamente conforme necessário para plataformas que possam lidar bem com eles.

E o design responsivo?

Como isso tudo se encaixa no design responsivo, a outra tendência que está dominando a web? A boa notícia é que essas duas estratégias não são competitivas. Você poderia dizer que eles foram feitos um para o outro.

O design responsivo é construído em torno do conceito de consultas de mídia direcionadas a dispositivos específicos e tamanhos de viewport. Com isso em mente, você pode codificar seu CSS inicial, dada uma perspectiva móvel e, em seguida, usar consultas de mídia para fornecer seletivamente estilos adicionais à medida que o tamanho da janela de visualização aumenta.

Provavelmente, isso é o oposto do método que você normalmente usa no design responsivo: comece grande e depois reduza. Considerando os argumentos acima, porém, há muita lógica por trás da estruturação das consultas de mídia, de pequenas a grandes.

A grande desvantagem gorda

Viva o web design para dispositivos móveis. É a melhor coisa para entrar na web desde The Oatmeal. Então, por que não estou animado com isso? Por que, embora eu goste de design responsivo, muitas vezes evitei totalmente o tópico de web design para dispositivos móveis?

Imediatamente me deparei com uma tela menor, menos recursos e muito mais dores de cabeça.

A resposta aqui é simples: não é divertida nem fácil. Claro que o design responsivo é complicado, mas me permite flexionar meus músculos de layout e alavancar muitas funcionalidades internas do navegador para realizar alguns feitos legais. O design responsivo torna minha caixa de brinquedos maior, não menor.

No entanto, com o design para dispositivos móveis, sou atingido na cabeça com restrições no primeiro passo. Isso não é divertido! Imediatamente me deparei com uma tela menor, menos recursos e muito mais dores de cabeça. Além disso, não é apenas o território confortável. Passei a maior parte da minha carreira de web design no espaço da área de trabalho, construindo experiências com o passar do mouse e cliques, não com as pontas dos dedos. Eu já fiz bastante trabalho móvel, mas não chamaria isso de meu ponto forte.

Mais importante, de uma perspectiva estrita do design, acho muito difícil mergulhar em um design se estou começando com o mobile e trabalhando no meu caminho. Mencionei isso em um artigo recente a muitos "huzzahs" nos comentários e até ouvi os principais profissionais do setor cantarem uma música semelhante.

Subindo para o desafio

Vamos olhar um segundo para meus argumentos a favor e contra uma abordagem de design para dispositivos móveis. Na categoria "para", temos argumentos diretos e lógicos difíceis de subestimar. Na categoria "contra", tenho muitas reclamações e hesitações pessoais. De que lado você acha que vence esta batalha?

Eu tenho que desistir de um pouco de conforto em nome de ser um designer melhor.

Talvez você tenha alguns argumentos melhores contra o primeiro celular do que eu, mas se eu olhar para isso de um ponto de vista objetivo, é evidente que a abordagem do primeiro celular é o candidato mais forte.

Isso significa que provavelmente preciso me superar e enfrentar o desafio de iniciar projetos com um ponto de vista móvel. Se não me sinto confortável em projetar para dispositivos móveis, bom, isso significa que tenho espaço para crescer e técnicas para aprender.

Por fim, se minhas razões para adotar uma abordagem de mobilidade primeiro são centradas no usuário e minhas razões contra ela são pessoais, tenho que desistir de um pouco de conforto em nome de ser um designer melhor.

O que está prendendo você?

Agora você sabe tudo sobre o quão bom é o design da Web para dispositivos móveis primeiro para seus usuários. Você sabe que grandes empresas como o Google estão adotando essa abordagem e pode ver os benefícios de um primeiro fluxo de trabalho para celular. Então, o que está te segurando?

Você compartilha minha perspectiva de que o mobile-first é uma estratégia difícil de implementar e concorda que você só precisa dar o salto? Ou há algo mais substancial impedindo você?