Mobile First: desenvolvimento web em ordem crescente

Essencial em projetos web, o Mobile First revolucionou o design, o desenvolvimento e a experiência do usuário para sempre. Descubra este conceito!

Um dos maiores desafios do desenvolvedor front-end é oferecer uma experiência completa para todos os seus usuários, independente do tamanho e da resolução da tela do seus dispositivos.

Uma página, portal ou software web com a capacidade de adaptar sua interface ao dispositivo do usuário é chamado de responsivo.

A responsividade é um tema bem extenso e complexo, e faz parte de um tópico ainda mais abrangente, que compõe a principal “filosofia” do desenvolvedor front-end: a experiência do usuário, ou simplesmente UX.

Neste artigo, publicado na Revista TecnoUpdate #11, apresentamos um dos conceitos mais revolucionários de UX dos últimos tempos: o mobile first. Primeiro, vamos entender como e por que ele surgiu.

Quando tudo isso aqui era Desktop

No começo da disseminação popular da internet, o acesso a ela era feito, em sua maioria, através de computadores com monitores de tubo de imagem, grossos e com aspecto semelhante à TVs. Esses monitores tinham a resolução de 800×600 pixels e era praticamente universal.

Com a evolução tecnológica, começaram a ser comercializados monitores com outras resoluções, por exemplo, com 1600×900 pixels e, o mais importante, eram retangulares.

Este foi o primeiro desafio de responsividade, bem antes deste termo ser cunhado. Para resolver, o desenvolvedor basicamente centralizava o site, que era quadrado.

No monitor quadrado mais antigo, ele ficava do mesmo jeito. No monitor retangular, era praticamente igual, exceto por margens laterais margens vazias e o site no meio. Fácil… por enquanto.

A ascensão mobile

Com o advento dos smartphones, qualquer pessoa poderia ter acesso aos sites que estavam online. Estes sites, no entanto, haviam sido criados para aparecer em computadores, com telas bem maiores.

Você provavelmente se lembra desta época: navegar em um site pelo celular consistia em dar “zoom” no trecho do site que você queria para ler ou observar. Acertar um link com o dedo era um desafio e tanto. Quando você mudava de página dentro do mesmo site, o “zoom” se perdia, e você se perdia junto.

Diante desta terrível experiência para os usuários de um mercado crescente, os desenvolvedores front-end, na época chamados de webmasters ou webdesigners, começaram a discutir formas de melhorar a experiência do usuário mobile.

Design responsivo: novos dispositivos, novas experiências

Assim, por volta de 2009, surgiu o conceito de Design Responsivo, um paradigma de desenvolvimento de portais, páginas e softwares web que fornecem uma experiência de uso otimizada para qualquer tela ou dispositivo, causando a sensação de que aquele conteúdo foi feito exatamente para rodar naquela tela.

Bem, desde o surgimento do design responsivo, a experiência do usuário mobile na internet melhorou bastante, mas ele ainda era considerado secundário em relação aos usuários de computadores desktop.

No entanto, o número de proprietários de dispositivos mobile cresceu (e cresce até hoje) exponencialmente, superando o número de usuários desktop.

De acordo com a pesquisa TIC Domicílios, do CETIC, 49% dos usuários acessam a internet apenas pelo mobile, 47% utilizam tanto desktop quanto mobile, e apenas 4% afirmam utilizar apenas computadores.

Compreendendo a ascensão de um novo público principal, os desenvolvedores front-end adotaram o paradigma do mobile first, literalmente, “móvel primeiro”.

O que é Mobile First

O Mobile First (em tradução livre, “móvel primeiro”) é um conceito de desenvolvimento web que consiste em iniciar a implementação pensando primeiro na experiência dos usuários de dispositivos móveis, e ir incrementando os recursos e adaptando o design ao passo que se aumenta o tamanho e alteram as características da tela.

Luke Wroblewski, diretor de produto da Google, foi o responsável pela proposta inicial e pelo nome deste paradigma. Publicado em 2011, seu livro Mobile First explica por que priorizar o mobile ao criar uma aplicação web, e como realizar esta transição de mentalidade em equipes de design e desenvolvimento front-end.

Mas como é feito esse processo de implementação e adaptação dos elementos para as diferentes telas?

Media queries

Para compreender a aplicação de design responsivo, é preciso primeiro entender quais são as características de tela a serem levadas em conta. São elas:

Tipo: tela, impressão, leitor.
Resolução: altura x largura, em pixels, da tela.
Densidade: resolução real dividida pela resolução virtual, medida em DPI.
Orientação: retrato ou paisagem.

Para resolver esse problema, o CSS 3 disponibiliza a especificação media queries que consiste de um media type e pelo menos uma expressão que limita o escopo das folhas de estilo usando media features, tal como largura, altura e cor.

De acordo com o Mozilla Developer Network, “os media queries, adicionadas no CSS3, deixam a apresentação do conteúdo adaptado a uma gama específica de dispositivos, não precisando mudar o conteúdo em si.”

Para habilitar essa tecnologia no seu código, devemos informar ao navegador que ele deve considerar a resolução virtual da tela, ao invés do tamanho real.

Para isso, adicionamos esta tag <meta> no <head> do seu código:

<meta
    name="viewport"
    content="width=device=width"
>

Dentro da técnica Mobile-First, costuma-se utilizar as seguintes variações de resoluções:

0 ~ 575px (sem media querie)
576 ~ 767px (sm) [@media (max-width: 768px)]
768 ~ 991px (md) [@media (max-width: 992px)]
992 ~ 1199px (lg) [@media (max-width: 1200px)]
≥1200px (xl) [@media (min-width: 1201px)]

Assim, por exemplo, podemos alterar a propriedade background-color da classe exemplo de acordo com cada media querie.

/* 0 ~ 575px */
.classe {
    background-color: red;
}
/* 576 ~ 767px (sm, small) */
@media (max-width: 768px) {
    .classe {background-color: blue;
    }
}
/* 768 ~ 991px (md, medium) */
@media (max-width: 992px) {
    .classe {background-color: green;
    }
}
/* 992 ~ 1199px (lg, large) */
@media (max-width: 1200px) {
    .classe {background-color: yellow;
    }
}
/* >=1200px (xl, extra-large) */
@media (min-width: 1201px) {
    .classe {background-color: pink;
    }
}

Vantagens do Mobile First

As aplicações criadas com mobile first tem recebido cada vez mais vantagens em relação às que priorizam a experiência desktop. Atualmente, pode-se considerá-la fundamental para obter resultados satisfatórios de acessos e interações dos usuários.

Entre as vantagens deste paradigma, podemos destacar:

Prioridade de rankeamento nos resultados do Google;
Usuário mais propenso a interagir e navegar dentro do seu site;
Páginas carregam mais rápido, reduzindo a taxa de rejeição dos usuários impacientes;
Dá um aspecto de modernidade para a sua marca;
Até a versão desktop do seu site ficará naturalmente mais limpa e bonita.

Vai desenvolver um novo projeto web e quer maximizar seus resultados? Não se esqueça: mobile primeiro, desktop depois.

Quer saber mais?

Leia outros conteúdos criados especialmente para software houses na Revista TecnoUpdate! Conhecimento em gestão, desenvolvimento de software, tributação, negócios e soluções tecnológicas, tudo gratuito para a sua empresa!