Como o design responsivo pode ajudar seu site ser mobile-friendly?
Em termos gerais, criar uma página de vendas com design responsivo significa adequar seu site aos diversos tipos de dispositivos que alguém possa usar para acessar a internet e abrir essa página. Ou seja, o design responsivo é aquele que se adapta a qualquer tela que você usar para acessar um conteúdo, independentemente do tamanho dessa tela. Mas antes mesmo de tentar entender como criar uma página de vendas pensando em acesso mobile, você precisa saber por que isso é interessante para a sua estratégia.
1. O padrão de consumo de internet no Brasil
No final dos anos 1980, por razões educacionais, a internet começou a ser utilizada no Brasil. Porém, seu acesso era restrito apenas à comunidade acadêmica, mais especificamente aos professores e funcionários de instituições de pesquisa e algumas universidades. A comercialização da internet no país só começou em 1994, e seu acesso era por meio de linhas discadas. Além disso, as redes só estavam presente em alguns estados, o que dificultava a utilização de diversas pessoas do Brasil. E a velocidade das linhas discadas também não era boa, assim como o valor pago para utilizá-las era alto. Mas a partir dos anos 2000, depois de um período de melhorias e desenvolvimentos feitos pelo governo, foi implantada uma nova internet brasileira mais acessível e disponível para vários estados. Apesar disso, ainda era necessário ter computadores para acessar a rede, o que continuava restringindo o uso da internet.
Com o tempo, novas melhorias foram feitas. O valor comercial dos computadores tornou-se mais acessível à população, e isso facilitou o acesso à internet. Além disso, a disponibilidade do uso da rede em outros dispositivos, principalmente os celulares, colaborou muito com o aumento de pessoas conectadas depois da propagação desses aparelhos no Brasil. Em uma pesquisa recente feita pelo governo (TIC Domicílios 2015), foi constatado que os hábitos dos brasileiros em relação à tecnologia mudou e, hoje, cerca de 58% da população tem acesso e usa a internet. E uma curiosidade sobre os internautas brasileiros é que, de acordo com essa pesquisa, 89% deles acessam a rede via telefone celular. A pesquisa também mostrou outros dispositivos utilizados para acessar a internet, como videogames, tablets e televisores. Por causa dessas mudanças no padrão de consumo de internet no Brasil e o acesso a diferentes dispositivos para utilizar a rede, foi necessário criar páginas que possam ser visualizadas em qualquer tela. E é nesse novo contexto que entra o design responsivo!
2. Os layouts mais usados
Como você percebeu, antes, as páginas da internet eram acessadas através de computadores. Por isso, não era necessário ter grandes mudanças no design. Afinal, o tamanho das telas era o mesmo, então, a maneira como todas as pessoas viam as páginas também era igual. Por esse motivo, era muito comum usar dois tipos de layout: o fixo e o fluido.
Layout fixo: Esse tipo de layout possui tamanhos fixos já definidos em pixels, ou seja, ele é adaptado a apenas um determinado tamanho de tela. É por isso que não é possível ter a mesma experiência em um página com layout fixo no computador e no aparelho celular. Inclusive, é provável que você não consiga visualizar toda a página se mudar o tamanho da tela. No período em que a maioria das pessoas utilizavam apenas computadores para navegarem na internet, o layout fixo era muito interessante. Afinal, você precisaria configurar os formatos da sua página apenas uma vez e replicá-los sempre que fizesse uma página nova. Porém, foi necessário mudar esse cenário para que diferentes pessoas usando qualquer tipo de dispositivo com acesso à internet conseguissem ter as experiências iguais em uma mesma página.
Layout fluido: Da necessidade de adaptações dos elementos que compõem uma página para acesso em diversos dispositivos, criou-se o layout fluido. Nele, utiliza-se unidades relativas para definir as configurações de tamanhos e formatos em cada página. Isso significa que os pixels não são usados e foram substituídos pelas porcentagens, que possibilitam a adaptação em diferentes tamanhos de tela. Por exemplo: se você definir uma largura de página de 70%, independentemente da largura da tela em que a página for aberta, ela sempre ocupa 70% do espaço. Mas apesar do layout fluido ser bem mais flexível do que o fixo, era necessário melhorar ainda mais a experiência do usuário com as páginas. Então, a melhor opção para atender a todos os tipos de dispositivos que acessam a internet é o design responsivo.
3. O significado de design responsivo
O design responsivo consegue ser ainda melhor do que o layout fluido. Com ele é possível modificar não só o tamanho da sua página, mas também o formato e a dimensão. Assim, quando uma pessoa acessa a sua página, ela consegue ter uma ótima experiência de navegação, já que não terá nenhuma alteração de conteúdo. Ter um design responsivo significa preocupar-se com as diferentes maneiras que as pessoas utilizam para visualizar a sua página de vendas. E mesmo que haja alguma modificação para que todo o material carregado apareça com clareza para todos os usuários, as mudanças serão apenas na forma como tudo está disposto no navegador utilizado.
Isso quer dizer que uma página com design responsivo é aquela em que os textos, as imagens e tudo o que é disponibilizado para consulta online pode aumentar, diminuir ou mudar de posição proporcionalmente, além de se ajustar conforme o tamanho da tela. Ou seja, o layout responsivo é aquele que se organiza da melhor maneira possível de acordo com o dispositivo utilizado pelo usuário.
E como isso é possível?
O design responsivo é baseado nos media queries. São eles que definem a maneira como cada página deve se comportar em cada dispositivo usado para abrir um website. Basicamente, quando você usa media queries na sua página, você consegue definir estilos personalizados e diferentes para cada navegador da internet. Ou seja, você não precisará fazer layouts diferentes para cada dispositivo. A página será sempre a mesma, com todo o conteúdo igual, porém, ela se adequará de acordo com cada mídia que for utilizada para carregar o seu site.
4. O motivo para criar uma página com design responsivo
Como você já percebeu, o maior acesso à internet permitiu que pessoas diversas tivessem um contato mais fácil com a rede. E por serem diferentes, os usuários também utilizam diversos tipos de dispositivos para navegar na web. Esses aparelhos vão desde telas muito pequenas, por exemplo os smartphones, até telas muito grandes de televisores. Então, se você quer que todas as pessoas tenham acesso ao seu conteúdo, você precisa pensar em design responsivo. Mas além desse motivo, há também uma outra razão para pensar nesse tipo de layout. Você sabe que o marketing de conteúdo é fundamental para fazer seu negócio ser reconhecido na rede. E sabe também que quanto melhor ranqueado nas buscas do Google, mais visibilidade sua marca terá. Então, é muito importante estar na primeira página dos buscadores de resultados online e entre os 5 primeiros lugares.
Pensando nisso, o Google tem utilizado várias características para classificar as páginas como as melhores soluções para determinados problemas. E algo que ajuda a ranquear melhor a sua página é quando esta é mobile-friendly. Ter uma página que é adaptável a dispositivos móveis ajuda a posicionar melhor a sua marca nos resultados de pesquisa. Isso significa que ter um design responsivo é ótimo para uma estratégia de SEO (otimização para buscadores). Além disso, ser mobile-friendly também pode influenciar no momento em que um usuário decide ou não clicar na sua página. Afinal, se ele estiver com um dispositivo móvel, a preferência será por sites que carregam rapidamente em telefones celulares. No que diz respeito à economia de tempo e até mesmo dinheiro, o design responsivo também é uma ótima opção. Principalmente se você pensar que precisaria fazer várias páginas diferentes de acordo com cada tela utilizada pelos usuários. Mas com a escolha de um layout responsivo, você terá que criar apenas uma página.
5. Bônus: os 3 componentes principais do design responsivo
Agora que você já entendeu a importância de criar uma página de vendas pensando em acesso mobile, está na hora de começar a colocar a mão na massa e fazer um design responsivo. Para te ajudar, trouxemos algumas dicas de como você pode começar a pensar nesse tipo de layout. Pode ser que, dependendo do nível do seu conhecimento a respeito de programação, você precise de alguém que entenda mais sobre isso para ter uma página 100% mobile-friendly. Mas temos 3 sugestões que já são um ótimo começo e que você pode usar agora mesmo!
Imagens flexíveis: O primeiro item no qual você precisa pensar são as imagens da sua página. Use imagens leves, ou seja, que possam ser carregadas em qualquer dispositivo. E lembre-se também de nunca definir altura e largura fixas dessas imagens. Assim, elas poderão ajustar-se melhor de acordo com a grelha que você utilizar.
Grelhas fluidas: Na construção do seu layout, lembre-se de usar grelhas fluidas. São nelas que estarão todos os elementos do seu site. Então, se elas forem fluidas e, principalmente, dimensionadas em porcentagens, o conteúdo do seu site será ajustado de acordo com o tamanho da tela em que ele for carregado.
Media queries: Como mostramos anteriormente, media queries são essenciais para o design responsivo. São eles que irão adequar a sua página de vendas de acordo com o tamanho, a resolução e até mesmo a orientação do dispositivo utilizado pelo usuário.
Conclusão
Se o seu objetivo é fazer com que todas as pessoas tenham uma experiência completa em sua página de vendas, você precisa começar a usar o design responsivo. Você já percebeu que não existe mais apenas um tipo de tela para acessar o seu conteúdo. Viu também que há diversas opções de navegadores para a internet. Então, é ideal ter um layout que consiga se adaptar a diversas situações. Por isso, defina o perfil dos seus usuários e tente identificar os principais dispositivos que eles usam para acessar o seu conteúdo. E depois de ter isso em mente, entre em contato com a Wsite e aplique o design responsivo em sua página de vendas.