Por mais que falemos sobre Design Responsivo ou Mobile First, é preciso entender o que aconteceu até aqui e principalmente, essencialmente, o que impulsionou tamanha revolução para chegarmos à maneira como criamos sites nos dias atuais. Nossa história começa, como eu gosto de dizer, com um éramos felizes e não sabíamos. Tínhamos uma única resolução e apenas Desktops para nos preocuparmos na hora de criar um site. Dá para acreditar que um dia foi tão fácil assim? Não tínhamos padrões web, não tínhamos vídeos, não tínhamos marketing digital, absolutamente nada. Eram GIFs animados e HTML e qualquer coisa, repito, qualquer coisa online já estava de bom tamanho. A grande prova disso é que tínhamos sites feitos no Front-Page. Nunca ouviu falar dele? Criava algo mais ou menos assim:

Como todo início de descoberta, estávamos maravilhados com a grande rede e as exigências foram deixadas de lado. Pelo menos até termos a primeira revolução, que não foi nada pra falar a verdade, só pra um pequeno alarme =D. Me refiro ao fato dos monitores de 15 polegadas ganharem força no mercado e nós, web designers, nos perguntarmos: e agora? Crio um site para 640x480 ou para 800x600? Bem, naquela época não tínhamos CSS(3), HTML era bem limitado, jquery não existia, então ou uma ou outra. Na dúvida usamos por muito tempo a menor, pelo menos funcionaria bem na resolução superior. Começávamos a ter mais trabalho, mas ainda era relativamente fácil. Entretanto, nem tudo na vida são flores não é mesmo?

Em 2004 veio a primeira real revolução, a conhecida Web 2.0. Não entrarei em detalhes sobre esta revolução, até porque seria um e-book (ou livro) apenas sobre o assunto e não é nosso foco neste e-book. Porém, dentre as várias mudanças e inovações desta revolução, podemos destacar uma web colaborativa e participativa, onde os usuários ganharam voz e direitos. Paralelo a tudo isso, o que realmente nos interessa enquanto web designers é que surgiram muitos, mas muitos monitores diferentes. O que começava a ficar difícil virou problema. Monitores de 14, 15, 17, 19, 22, dentre tantas outras resoluções. E agora? Para qual resolução criaremos? Aqui era o berço do design responsivo.

O CSS como conhecemos hoje nasceu em 1994, mas apenas em 1998 tivemos o CSS em nível 2 e mais poder na diagramação do site. Apenas como um rápido comentário, até então usávamos o HTML tanto para criar (diagramar/estruturar) quanto para formatar (fontes, alinhamento, cores, etc). Aos sortudos que já começaram na era do CSS, um site com 50 páginas precisava ser alterado uma a uma caso o cliente quisesse apenas uma cor de fonte diferente. Juntamente com o CSS começamos a ter novos layouts. O primeiro, que sequer podemos chamar de layout diferente, foram os centralizados. Nada mais era do que o layout fixo só que centralizado. Inclusive esta prática prevalece até hoje. Centralizar os sites dava a ideia, acredite se quiser, de que fora planejado para todos os monitores. Podemos dizer que foi a primeira prática de design responsivo (que não era obviamente). Não importava a resolução que você estivesse acessando, o site seria sempre do mesmo tamanho (largura e altura). Mas, convenhamos que acessar um site feito para 800 por 600 em um monitor de 22 polegadas não é lá uma experiência tão rica assim para o usuário, concorda? A partir desta necessidade surgiram os layouts fluídos (ou líquidos). Esses layouts eram (e ainda são) proporcionais à tela acessada e se ajustava de modo mais dinâmico a resolução acessada. Em minha humilde opinião, este é um dos piores tipos de layout. Por que acho isso? Porque não há planejamento nem foco no usuário. É possível manter um site organizado em 100% em até duas ou três telas diferentes, mas em cinco

ou seis telas começa a transparecer que não foi algo planejado, criando espaços em branco inexplicáveis ao usuário final. O conceito de smartphone é bem mais antigo do que imaginamos, muitos acreditam que eles, os smartphones, surgiram por volta de 2004 a 2005, mas na verdade são bem mais antigos. Basicamente, no início, smartphone era um celular com poderes (recursos) computacionais, nada perto do que temos hoje. Eles realmente ganharam força em 2007 com o lançamento do primeiro iphone e nos anos seguintes com os smartphones mais acessíveis com o sistema Android do Google. Pouco tempo depois, ainda passando por uma revolução de smartphones, em 2010 a Apple lança o primeiro ipad e nos anos seguintes temos uma infinidade de tablets no mercado. Apesar de estarmos falando de revoluções tecnológicas, elas impactaram de maneira ímpar em nossa profissão. O que antes era apenas uma resolução (saudades =/) passa para a seguinte realidade: INFORMAÇÕES ATÉ JULHO DE 2014

Número de celulares no Brasil 272 milhões (sendo 47 milhões de smartphones apenas em 2014) Número de tablets no Brasil Mais de 20 milhões Tamanhos de telas diferentes (Tablets) 11 em portrait (ou 22 no total) Tamanhos de telas diferentes 20 aproximadamente (ou 40 no total) (Smartphones) Tamanhos de telas diferentes (Monitores) 11 (ou mais) Tamanhos de telas diferentes (TVs) 15 aproximadamente Se não estou errando nas contas, saímos de dois tamanhos diferentes de tela para mais de 80 tamanhos. E é claro que estou incluindo as TVs, afinal tanto podemos usá-las com o computador quanto as SmartTVs que acessam Internet independente de computadores, além claro de qualquer TV com um PlayStation ou XBOX. Para nossa imensa alegria, há certos padrões em todos esses tamanhos e não precisamos criar sites para mais do que 6 ou 8 tamanhos, que chamamos de breakpoints em design responsivo. Tivemos avanços significativos como CSS3, HTML5, jquery, Frameworks como Bootstrap, padrões como Grid System 960, mas é preciso admitir que

ficou muito mais difícil e até chegarmos ao design responsivo ou mobile first, surgiu o que chamamos de design adaptivo, que falarei sobre ele a seguir. A melhor maneira de explicar o design adaptivo é com a frase: Espreme, aperta e empurra. Talvez a imagem abaixo ilustre este conceito. O design adaptivo é a pior coisa que um web designer pode fazer. Muitos profissionais fazem uso desta prática achando ou pensando ser design responsivo. Inclusive você verá mais adiante que esta prática impulsionou o mobile first. Tal prática consiste basicamente em espremer todo o conteúdo da versão desktop e fazer caber em uma versão mobile. Em outras palavras, é apenas uma adaptação que cria a pior experiência possível para usuários mobile. Fazer um conteúdo caber em uma versão menor não é criar um site responsivo, ainda que visualmente possa parecer. É fundamental entender este conceito, uma vez que muitos confundem o próprio conceito de design responsivo com design adaptivo.

O foco do primeiro (adaptivo) é fazer com que um conteúdo de uma versão desktop (ou versão maior) caiba forçadamente em uma versão mobile, sem o mínimo de planejamento ou uso dos padrões corretos e adequados, afinal exatamente o mesmo conteúdo será carregado na versão mobile, porém apenas aparentemente menor. Perceba que este conceito despreza completamente o usuário, não possui planejamento, não se preocupa com a experiência do mesmo, mas sim apenas em espremer, apertar e empurrar para que um conteúdo que foi planejado para uma versão desktop caiba em uma versão mobile. Teoricamente o termo Design Responsivo foi usado pela primeira vez em 2011, mas como vimos nas explicações anteriores a busca pela perfeição, tanto em design quanto em UX (User Experience), já era almejada há um bom tempo. Nosso primeiro passo é entender o que não é design responsivo. Considerando o que já vimos até aqui, não é tão difícil entender. Layouts Fixos naturalmente não são responsivos. Este é, sem dúvida, o mais fácil de entender. Layouts Fluídos (ou líquidos) também não são responsivos, uma vez que apenas se expandem às resoluções maiores. Já o Design Adaptivo curiosamente é responsivo,

mas apenas em tecnologia, não em experiência de usuário. Discutiremos o que realmente é ser responsivo a seguir e voltaremos em seguida à esta discussão. A primeira coisa que peço é que preste atenção de forma ímpar a este conceito, uma vez que em vários momentos ele se parece com Layouts Adaptivos e mais ainda com Mobile First. Um site pode ser definido como responsivo quando sua exibição não apenas se adapta ao dispositivo acessado, mas o faz de forma planejada para oferecer uma experiência rica e memorável ao usuário, principalmente sem a necessidade de zooms para leitura de textos e visualização de imagens. Cada vez em que um usuário acessa um site a partir do seu celular e precisa usar constantemente o zoom para conseguir ao menos ler, certamente este site está mais para adaptivo que responsivo. Calma aí Adriano que agora complicou. Se o design adaptivo cria versões específicas para os demais dispositivos (leia também resoluções) e o design responsivo também o faz, qual a diferença entre eles? Rsrs, não falei que era parecido? Vamos sair do mundo de TI e pegarmos (ou tentarmos) um exemplo do cotidiano. Você mora em um apartamento de 4 quartos e todos têm seus móveis, além dos demais móveis que temos em um apartamento. De repente você decide mudar-se para um apartamento de 2 quartos. O que teremos nesta mudança? Bem, ela pode ser responsiva ou adaptiva, veja: Mudança adaptiva: como eu falei a melhor frase para definir o design adaptivo é: Espreme, aperta e empurra. É meio que lógico que um apartamento de 2 quartos jamais receberá todos os móveis de um apartamento de 4 quartos. Esqueça as exceções de tamanhos atípicos, sabemos que a grande maioria não suportaria por pura falta de espaço. Mas, ao fazer caber (espremer) tantos móveis em um lugar menor ou bem menor, seria exatamente o design adaptivo, ou mudança adaptiva. Mudança responsiva: aqui, ao contrário do adaptivo, há planejamento e preocupação com o usuário. Nesta situação o pensamento ideal seria: bem, não cabem

tantos móveis, então terei que me desfazer de alguns para fique agradável. Talvez tenha, inclusive, que comprar alguns para que o ambiente fique mais planejado. Conseguiu entender? O design responsivo proporciona uma experiência muito, mas muito mais rica exatamente por este planejamento, por esta preocupação. Um ponto em comum nos designs adaptivos e responsivos é a utilização de regras conhecidas como media queries, um verdadeiro presente que chegou junto com o CSS3. Apesar de usarem a mesma tecnologia, há algumas práticas no design responsivo que são um verdadeiro tiro no pé e podem ser a explicação para o fracasso de um projeto mobile. A primeira e mais utilizada é usar display:none no que não queremos que apareça no site. Na verdade usando-se desta forma, apenas não mostraremos a informação, mas ela será igualmente carregada quando o usuário acessar. E o pior, sem que ele saiba. Ora Adriano, mas a ideia não era exatamente essa, não mostrar determinada parte? De certa forma sim, mas qual o planejamento existente se apenas ocultarmos? Lembre-se que nem todos utilizam Wi-fi para acessar Internet em seus smartphones, o que se conclui que muitos usarão internet 3G (ou inferior). Partindo desta ideia, sabemos que quanto mais leve o site mais rápido será carregado para o usuário, e definitivamente ocultar não é uma boa prática. A segunda e tão utilizada quanto é fazer uso das mesmas imagens. Mais uma vez você vai falar: Ora Adriano, mas por que usaria outras imagens? Entenda, não me refiro a usar imagens diferentes no sentido visual ou contextual, mas sim em termos de resolução e tamanho (bytes). A grande maioria utiliza exatamente a mesma versão desktop alterando apenas a largura (width) e altura (height), o que nem todos sabem é que exatamente a mesma imagem será carregada, inclusive em quantidade de bytes ou kilobytes. Planejamento? ZERO. Experiência de usuário? ZERO. Gosto de ressaltar este ponto, pois a meu ver é mais sério que vários outros. Quando falamos de Internet mobile precisamos levar em conta alguns fatores, são eles:

alguns acessam via wifi, outros pagam um valor fixo, mas há quem pague por tráfego. Usar imagens de alta resolução significa que muito mais informações serão carregadas, o que pode impactar na conta do usuário no final do mês. Existe uma ferramenta chamada pingdom que gosto bastante. Com ela podemos ver o peso (tamanho/bytes) de um site. Seu uso é super simples, é só digitar o site e clicar em Test Now como mostra a imagem abaixo: Vejamos um teste com a versão desktop do portal globo.com Façamos o mesmo teste com a versão mobile (m.globo.com):

Tivemos quase a metade de requisições HTTP e praticamente a metade do tamanho da versão desktop. O terceiro ponto é utilizar efeitos inexistentes, como o hover por exemplo. É preciso lembrar que várias peculiaridades são exclusivas do mundo desktop, e devem ser descartadas no mundo mobile. Existem vários outros, porém é preciso ficar atento para não confundir os mundos quando estiver criando sites responsivos. Agora que já falamos sobre como não fazer design responsivo, vamos analisar não somente as vantagens em utilizá-lo, mas também as oportunidades de negócio que se abrem a este mercado. O simples fato, repito FATO, do número de usuários mobile atualmente já é, por si, o maior e melhor argumento de todos para se pensar em design responsivo. Uma pesquisa revelou que os usuários se sentem desrespeitados quando acessam um site que não foi preparado para o dispositivo ao qual está acessando, ou seja, quando um site não é responsivo. A grande maioria não apenas sai do site e busca outra opção, como não retorna ao mesmo. Outra informação que prova o que estamos falando, é que sites que possuem versões responsivas têm uma taxa maior de conversão frente aos que mantém o mesmo site para todos os dispositivos. Além do fato mais conhecido atualmente entre os profissionais web, quanto mais tempo um site demora pra carregar, menor é a paciência

dos usuários. Inclusive, segundo pesquisas, os usuários não costumam esperar mais que cinco segundos. Em alguns momentos gosto de começar por fatos, pois como sempre digo: não existem argumentos contra fatos! Então vamos a eles. Atualmente existe mais de um milhão de aplicativos somente na App Store (para ios), ultrapassando a incrível marca de 50 milhões de downloads. No Google Play, loja de aplicativos para Android, o número de aplicativos já ultrapassa a incrível marca de um milhão de apps também. Isso sem falar nas diversas outras lojas de apps que temos e que estão sempre surgindo. Para começarmos a entender o Mobile First precisamos entender esta revolução que resolvi separar pontualmente para facilitar. Primeiro ponto: analise sua relação com o seu computador (seja desktop ou notebook) e compare com a sua relação com o smartphone. O segundo é muito mais forte correto? Muito mais pessoal? Você viaja sem um notebook, mas não viaja sem o smartphone. É ele que lhe acorda informando que o dia começou, que faz um alerta sobre

sua próxima reunião, que faz as filas de banco parecerem mais rápidas com seus jogos superinteressantes, que aproxima você do seu amor, da sua família, dos seus amigos...consegue enxergar como temos uma ligação tão ímpar com nossos smartphones? Isto revela o ponto principal, crucial do mobile first: não estamos mais falando de tecnologias ou dispositivos, mas sim de pessoas e de uma ligação muito forte. Os smartphones são, literalmente, extensões nossas e esta relação só se fortalece cada vez mais. Segundo ponto: se a nossa relação com eles (os smartphones) é tão intensa assim, nossa experiência mobile/responsiva precisa ser tão rica quanto ou será frustrante ao ponto de esquecermos (o site, a empresa, e outros mais). Terceiro ponto: nós amamos aplicativos. E esse amor só aumenta a cada dia que passa. Além disso, passamos cada vez mais tempo em aplicativos do que em softwares tradicionais desktop. Nada mais comum e perfeitamente compreensível do que preferirmos o design mobile que o tradicional. Agora, definitivamente, você está pronto para entender o que é mobile first.

Embora eu já tenha detalhado ao extremo toda a base necessária para entender o mobile first, vou separar em dois pontos para que fique ainda mais fácil. Afinal este é um guia definitivo não é mesmo? Primeiro vamos falar do ponto tecnológico: neste primeiro não existe diferença, ou seja, usamos os mesmos softwares, CSS3 (media query), HTML5, JavaScript ou até mesmo um framework como Bootstrap que utilizamos em design responsivo. Da parte conceitual: eis aqui a grande diferença. No curso de Princípios do Web Design eu ensino muito sobre design focado em conversão, e quando falamos em design focado em conversão estamos falando de pessoas e de suas necessidades. Embora a explicação conceitual seja simples, os efeitos colaterais são bem mais complexos. A grande diferença entre design responsivo e mobile first é que quando estamos falando de pessoas, na verdade estamos falando de necessidades (de pessoas) e não apenas de tecnologia. O Design Responsivo tem um foco em tecnologia e no planejamento apropriado para cada versão. Enquanto o mobile first tem um foco total nas necessidades das pessoas, afinal não basta ser responsivo, precisa ser para seres humanos. Ficou um pouco confuso? Então vamos lá. Pensemos em um site de uma empresa X. Esta empresa decide criar um site para desktop apenas. Depois de um tempo a empresa decide criar a versão mobile (responsiva). O web designer planeja muito bem, destacando as informações principais na versão mobile, focando no essencial do site, e finalmente entrega a versão mobile ao cliente. Eis aqui o problema, quem disse que os usuários mobile possuem as mesmas necessidades de um usuário desktop? Quando falei que estamos falando de pessoas e suas necessidades, é exatamente neste ponto que tudo se diferencia. Eu poderia, inclusive, ousar afirmar que o mobile first é o novo design responsivo. Perceba que não basta apenas planejar e definir quais informações são mais relevantes na versão mobile, é bem mais que isso. Vamos analisar um segundo exemplo. Imagine um site de uma pizzaria e que possua o serviço de reservas online (um site sem esse recurso já teria um foco bem diferente na versão mobile). Imagine agora que você é um turista em Maceió e está acessando o site a partir do seu notebook enquanto ainda

está no hotel. Certamente você tem tempo de olhar o site, conhecer a casa, fazer seu cadastro, fazer sua reserva e depois terminar de se arrumar. No meio do caminho, rumo à pizzaria, você percebe que não vai dar tempo de chegar na hora marcada e precisa alterar sua reserva ou esqueceu o caminho. Bem, é simples. Basta acessar o site e ohh wait! O site tem tudo à vista menos um acesso rápido à área de reservas ou ao endereço. É bem aqui, exatamente neste ponto que encontramos a essência do mobile first. As necessidades são diferentes quando acessamos a partir de um smartphone. É claro, haverá raras exceções, mas serão cada vez mais raras. Agora você pode pensar: mas por que não começar pelo desktop e depois criar a versão mobile com este foco? Bem, há algumas teorias para isso. Primeiro que começar pelo mobile (como o conceito diz: mobile first) força o web designer a focar no essencial, no primordial e principalmente na necessidade do usuário mobile. Segundo que o design mobile vem se tornando padrão para o desktop, ou seja, não tem prevalecido o design tradicional sobre o mobile, mas sim o inverso. E não sei sua opinião, mas o design mobile está bem mais bonito ultimamente.

Tenho duas opiniões em relação ao futuro do design responsivo e do mobile first. O primeiro é que estes dois conceitos se unirão, se fundirão, formando um só conceito. Naturalmente o mobile first prevalecerá, já que é o design responsivo melhorado. Se teremos um novo nome ou se um deles prevalecerá sinceramente não sei, mas o foco nas pessoas e em suas necessidades certamente, indiscutivelmente, prevalecerá. Minha segunda opinião é que este conceito ainda avançará e muito. Por mais que a gente tente criar uma versão mobile ou mesmo desktop focada nas necessidades das pessoas, esbarraremos sempre na pluralidade humana e suas necessidades. Em minha humilde opinião, teremos avanços inimagináveis e sites se adaptando muito facilmente a cada usuário e suas respectivas necessidades. Mas você pode falar: ora Adriano, isso já existe! Sim, é verdade, mas há duas considerações a fazer. A primeira é que ainda é muito amarrado e previsível. A segunda é que não é nada simples e/ou barato de se fazer, o que faz muitos projetos deixar isto de lado. Imagino em um futuro não tão distante, que isto será tão simples quanto criar um design responsivo nos dias de hoje. Muito, mas muito obrigado por ter lido este e-book. Assim como você também sou um eterno aprendiz e nada melhor do que compartilhar o pouco que sei com quem também quer aprender. Recomendo outro e-book que escrevi, chamado POR QUE SITES NÃO VENDEM MAIS? Onde fiz uma reflexão por que o web designer sente tanta dificuldade em vender sites hoje em dia. Desejo honestamente que este e-book tenha mudado sua forma de enxergar design responsivo/mobile first e que seus próximos projetos sejam melhores e seus clientes mais satisfeitos. Ficarei feliz e muito honrado em receber seu feedback, é ele que me manterá ainda mais focado em produzir conteúdo rico em detalhes para quem realmente precisa. Um grande abraço!