redcake

Layout responsivo – Seu conteúdo ajustado em qualquer tela

Alguma vez você já observou que um site pode não funcionar corretamente quando você abre no celular? Parece que as coisas estão fora do lugar? E é isso mesmo, elas estão. Mas por que isso acontece? Quando um site está “desconfigurado” em um aparelho mobile quer dizer que o layout responsivo não foi realizado. Para poder entender é preciso que você, primeiro, entenda o conceito de layout.

O termo layout vem da língua inglesa [se lê “leiaute”] e significa plano, arranjo, esquema, design, projeto. Quando falamos em arte gráfica, o layout é um esboço ou rascunho que mostra como é a estrutura física de uma página de jornal, revista ou site [a exemplo de um blog]. Ele engloba elementos como: texto, gráficos, imagens, vídeos e a forma como eles se encontram e compõem um determinado espaço.

O layout gráfico pressupõe o trabalho de um designer gráfico, que precisa trabalhar no formato e números de página e suas margens, números de colunas de texto e outros aspectos relevantes. Depende da criatividade e conteúdo que irá apresentar. Por esse motivo é necessário que o cliente dê indicações precisas ao designer, dando possibilidades de se trabalhar um layout.

LAYOUT PARA SITES

Layout responsivo – Seu conteúdo ajustado em qualquer tela

Dessa maneira, o layout consiste em um rascunho, esboço, projeto, é um trabalho prévio que apresentará ao cliente uma ideia de como será a aparência final do site em questão. As formas de apresentação são as mais variadas, desde desenhos simples em uma folha de papel até as mais evoluídas e tecnológicas – geralmente quando o projeto já está em uma fase mais avançada.

O QUE É LAYOUT RESPONSIVO?

Layout responsivo – Seu conteúdo ajustado em qualquer tela

Um layout responsivo se trata de um site que teve seu código [html, php, java, css, python, por exemplo] alterado. Assim, suas páginas podem ser exibidas em qualquer formato de tela sem que aconteça aquela “desconfiguração”. Ou seja, o usuário [leitor, público] não terá qualquer prejuízo na leitura das informações. E poderá acessar o site a partir de um desktop, tablet, smartphone… com experiências muito semelhantes.

Apesar das informações primordiais, do próprio site, serem exibidas de maneira semelhante a exemplo de um desktop, ainda podem haver alterações. Como o caso de um banner disponível no desktop mas não no tablet, e assim por diante.

Em resumo, o que acontece é um ajuste das informações que estão disponíveis no site original, para que o usuário seja capaz de acessar através de outros dispositivos. Mas, ainda assim, tenha uma experiência satisfatória. O layout responsivo é possível ser realizado utilizando códigos de programação chamados de media queries entre outras técnicas.

COMO UM LAYOUT É TRANSFORMADO EM LAYOUT RESPONSIVO?

Vamos pensar em um mundo ideal? Pois bem, o trabalho mais completo de layout responsivo é feito da seguinte forma: o designer gráfico cria o modelo [onde cada botão, imagem, coluna, texto… irá ficar, além da criação da própria arte, relacionada à identidade visual da empresa]. A partir deste modelo para desktop outro dois serão construídos, um para o formato tablet e outro para smartphone.

Falando apenas na criação de um modelo layout: a partir da aprovação, por parte do cliente, é que ele ter sua “vida online” iniciada. O responsável por isso é o programador. Toda a arte feita pelo Web Designer será transformada em vários códigos [aqueles que falei lá em cima, como html, css e outros].

Para se criar o layout responsivo, incialmente você pode pensar que cada um dos formatos [desktop, tablet e smartphone] teriam de ser criados três códigos diferentes para se adaptarem. Porém. Se você não sabe o que é isso, bem, vou te explicar:

A principal definição de framework é a reusabilidade. Isso quer dizer, ela tem como principal objetivo resolver problemas recorrentes com uma abordagem genérica. Assim o desenvolvedor pode focar na resolução dos problemas em si, ao invés de ficar reescrevendo todo o software. Os frameworks auxiliam o rápido e seguro desenvolvimento de aplicações.

Um exemplo de framework que é muito usado aqui na RedCake, é o Bootstrap.

De maneira simples e resumida, quando o desenvolvedor vai criar o site ou loja virtual [através dos códigos] ele importa o framework para dentro do código no qual será escrito o layout. Assim, será mais fácil programar a parte responsiva. Porque já estará inserido dentro do resultado final.

O QUE É LAYOUT MOBILE?

Layout responsivo – Seu conteúdo ajustado em qualquer tela

Um site mobile friendly é aquele que foi planejado especialmente para o mobile, ou seja, smartphones. Isso quer dizer que não são adaptados a partir do site desktop. Mas sim, foram criados pensados na experiência do usuário por dispositivos móveis.

O mobile friendly é desenvolvido desde o começo, utilizando um novo código de programação, adotando estruturas da informação, imagem, call to action e outros elementos próprios para a usabilidade mobile. É aqui onde entra a história e “serventia” do framework.

Já deu pra sacar que se trata de um modelo de layout responsivo, né? No caso de não utilização do framework, o layout mobile é alocado em um subdomínio. Isso quer dizer que quando um usuário acessar o site por um dispositivo móvel, ele apresentará a url como esse exemplo: m.redcake.com.br ou www.mobile.redcake.com.br. Como aqui na RedCake o nosso website foi programado com a utilização de framework, tanto na utilização em desktop quanto em dispositivos mobile, a url será a mesma: www.redcake.com.br.

O QUE É LAYOUT FLUÍDO?

Layout responsivo – Seu conteúdo ajustado em qualquer tela

Diferentemente do layout responsivo – que responde –, o layout fluído acompanha o tamanho da tela, aumentando e diminuindo. Não troca sua estrutura e não é muito pensado para usabilidade. Imagine acessar um site em uma tela de 50 polegadas e em uma tela de celular de 6 polegadas.

Dá para entender que vai ficar bem complicado navegar pelo site. Isso para não dizer que vai ser horrível. Quando um site em layout fluido vai ser construído não se pensa muito em pixels, mas em porcentagem. Assim o elemento se estica de acordo com a tela.

A imagem acima mostra um layout construído em porcentagem. Caso o usuário tenha uma tela muito grande o texto vai ficar em praticamente uma linha só. E quando a tela for muito pequena, o texto vai ficar espremido.

Layout Fluído Híbrido

Layout responsivo – Seu conteúdo ajustado em qualquer tela

O layout fluido híbrido segue o mesmo padrão do fluido. Sua limitação está na largura. Que, nesse caso, é utilizado o “max-width” e “min-width”. Dessa forma é possível ter maior controle do layout. Observe o exemplo acima, com “max-width” de 960 pixels e “min-width” de 600 pixels.

LAYOUT RESPONSIVO versus LAYOUT MOBILE

Layout responsivo – Seu conteúdo ajustado em qualquer tela

Agora que você já está mais por dentro dos conceitos de layout responsivo, mobile, fluído e afins, qual acredita que são as vantagens do layout responsivo em relação ao mobile?

Começando pelo layout responsivo, sua primeira vantagem está em ser uma adaptação do site, exigindo menor investimento por parte da empresa. É ideal para pequenos e médios e-commerce, por exemplo, que possuem apenas algumas dezenas de páginas.

Além disso já atende as determinações do Google para ranqueamento. Então não é penalizado por não oferecer suporte aos usuários que usam os dispositivos móveis. A parte negativa do layout responsivo é a usabilidade um pouco inferior nos dispositivos móveis, quando comparada com o layout mobile friendly.

Enquanto o layout mobile tem seu principal benefício em proporcionar uma ótima experiência de navegação ao usuário. As informações exibidas e estrutura escolhida são limitadas, por isso facilitam a usabilidade, incluindo navegação dinâmica e prática. A velocidade de carregamento das páginas também é mais rápida.

Pelo lado negativo, o layout mobile precisa de maior investimento financeiro, quando comparado ao layout responsivo. É uma opção indicada para e-commerce, já que exige navegação rápida, dinâmica e com foco na experiência do consumidor para ser capaz de fechar vendas pelo dispositivo móvel e gerar resultados. Essa opção, geralmente, é escolhida por médios e grandes lojistas.

Então, agora que você já entende um pouco mais sobre como funciona um layout responsivo e o porquê escolhe-lo como sua preferência, que tal dar uma repaginada no seu site? O ideal para esses casos é contratar uma empresa especializada, como a gente! E se a sua empresa ainda não possui site, tem problema não, a gente cria! A equipe RedCake está aqui prontíssima para te ajudar e tirar todas as suas dúvidas.

E se você curtiu nossa matéria sobre como montar uma loja virtual, provavelmente, também irá gostar dos outros assuntos que exploramos aqui no blog. Então, se liga nas outras novidades que tem por aí.







Cases

A melhor forma de conhecer a qualidade dos nossos serviços é através daqueles com quem trabalhamos.