Mobile First: Design Responsivo

Mobile First

Mobile First é o conceito de criar sites pensando primeiro no mobile.

Mobile First, porque devemos nos preocupar com isso?

Segundo o caderno Link do jornal o Estado de São Paulo, em 2016 os brasileiros já tinham adquirido 168 milhões de smartphones e as expectativas são de que até 2018 esse número seja de 236 milhões de aparelhos segundo a Fundação Getúlio Vargas, ou seja teremos mais smartphones do que habitantes no Brasil em breve.

Outra pesquisa feita pelo IBGE, mostra que o número de casas no Brasil com computadores caiu em 2016 a queda ocorreu devido ao uso de internet em outros aparelhos, em 2014 haviam 32,5 milhões de casas com computadores no país, em 2016 esse número caiu para 31,4 milhões, sendo que os domicílios com computadores ligados na internet são apenas 27,5 milhões.

Ou seja o número de smartphones é absurdamente maior do que o de computadores, e isso não é só no Brasil.

O mundo todo está se conectando muito mais com smartphones, então não existe nenhuma lógica em desenvolver o site pensando primeiro no desktop, como era na época dos monitores 800×600.

O Conceito mobile first foi desenvolvido por Luke Wroblewski que atualmente é diretor de produtos do Google e lançou os livros “Mobile first, web from design e Site seeing”.

Os dispositivos mobile hoje em dia nos dão uma gama maior de recursos como o acelerometro, GPS, multitouch, giroscópio e etc… então podemos brincar com eles na hora de desenvolver nosso site.

Adaptar um site que foi feito antes para o desktop é complicado porque não é simplesmente encaixar as informações e sim revisar todas elas se serão úteis para quem acessa o site de uma tela pequena e lembrando que a nossa internet móvel no Brasil não é grande coisa, então o site mobile não pode ser pesado, porque ficará lento e consumirá muitos dados móveis dos usuários.

mobile-first-mobile-friendly
Site do Google para teste do layout responsivo. https://search.google.com/search-console/mobile-friendly

Outra preocupação que temos que ter é que os sites não tenham excesso de informação, uma imagem que no desktop tem 1024 px de largura por exemplo, não pode simplesmente ser reduzida pro tamanho do mobile ela precisa ser redimensionada, alterada ou até mesmo excluída caso não tenha uma informação relevante.

mobile-first-f12

Usando o inspecionar elemento do google chrome, você consegue ver enquanto cria o seu site as versões responsivas em diversos tipos de aparelhos.

A maioria dos sites retira informações para sua versão mobile, para que ela seja mais rápida, porque, vamos analisar a seguinte situação:

Você já comprou o ingresso para um show, no site desktop tinham as músicas do set list, lista com os álbuns do artista, biografia e etc…, mas você já está a caminho do show e só quer confirmar que horas o artista principal sobe ao palco e aproveita o transito parado no semáforo para confirmar a informação, se o site tiver todas as informações escritas antes e o horário do show que é a informação mais importante por último também na versão mobile muito provavelmente a pessoa não achará a informação que procura, a experiência do usuário terá sido péssima concordam?

Portanto o ideal agora é criar o site já usando o conceito Mobile First no site, para que sua taxa de rejeição não seja alta, lembrando que usando ferramentas como o Bootstrap, wordpress e etc, você já desenvolve o layout e o código das diversas “versões” do site de uma vez, as vezes apenas se preocupando em criar algum CSS específico para algum tipo de resolução.

design-relax-foto

Escrito por: Rafael de Rezende Basso

Designer gráfico e web, atualmente trabalha em um e-commerce, formado pela Metodista em Mídias Digitais e pela Panamericana em Design gráfico, amante de uma boa cerveja com os amigos e SPFC de coração.

Portfólio: http://www.rrbdesign.com.br

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *