18/09/2014

5 coisas que um designer precisa saber sobre design responsivo

Design responsivo ecommerce

A cada dia que passa estamos mais conectados através dos mais diversos aparelhos. Isso significa que as páginas da internet, especialmente os e-commerces, precisam estar sempre aptos para acompanhar esse ritmo. É essencial que o que se pode abrir no computador também seja nítido e fácil no celular, tablet ou qualquer outro aparelho de acesso do usuário. Por isso, trouxemos essas cinco dicas baseadas em um site estrangeiro especializado em design responsivo.

O design responsivo é uma técnica de programação de HTML e CSS que faz com que a mesma página possa ser bem visualizada em qualquer browser que o usuário utilize, adaptando tamanho e visual para que faça sentido mesmo em outros aparelhos. Deste modo, uma página aberta no computador terá a mesma facilidade de visualização e navegação quando aberta em um aparelho celular, por exemplo. E o que é importante saber sobre essa técnica?

Design responsivo não é uma tendência

A evolução dos aparelhos eletrônicos é contínua e vem se aprimorando cada vez mais. Mesmo as navegações apenas em computadores já precisam ser adaptadas para os diversos tamanhos de tela que surgem a cada ano. Quando falamos de design responsivo, estamos facilitando o trabalho de webdesign, já que mesmo com todas essas inovações não é preciso criar várias versões dos mesmos sites para que estas possam se adaptar. Além disso, com o design responsivo as marcas tendem a manter a identidade visual nos mais diversos acessos do usuário, o que aumenta não só o conforto da navegação, mas a própria credibilidade da marca, que não causa desconfiança parecendo ser uma versão falsa ou diferente daquela vista no primeiro acesso.

Design responsivo não é design mobile

Sim, é extremamente importante que o trabalho de design funcione também em tablets e celulares, como já falamos acima. Mas o design responsivo não é SÓ sobre isso. É sobre adaptar a página a qualquer tipo de tamanho de tela, de qualquer variação de aparelho, mesmo se tratando de uma mesma tecnologia. Muitos profissionais esquecem que os próprios computadores, por exemplo, possuem enormes variedades de resolução, e mesmo sendo um ótimo ponto de partida começar pelo mobile, é primordial lembrar das máquinas que ainda provêm o maior número de acessos à internet.

Tudo é flexível!

Um dos pontos mais importantes para a criação de um design responsivo é lembrar que toda ideia pode ser moldada a qualquer momento. Algumas vezes, uma imagem muito bacana que o webdesigner adoraria adicionar na página acaba sumindo da criação para que a navegação em um dispositivo menor fique melhor, por exemplo. Além disso, as próprias escolhas precisam ser sobre elementos adaptáveis: fontes, fotos, grades, tudo deve ser flexível para que se encaixe em qualquer tamanho.

A fonte também é responsiva

O nome já diz: sua fonte precisa ser responsiva! Isso significa que uma fonte utilizada em um site para computador pode dar super certo e ficar ótima, mas quando passada para o celular, por exemplo, pode ficar espremida e terrível para leitura. Além disso, as larguras das linhas também podem influenciar bastante: para computadores, é considerada uma linha adequada de 50 a 75 caracteres, enquanto para mobile isso já cai de 35 a 50. É importante selecionar fontes baseadas nessa diretriz para que a leitura seja agradável.

É essencial também lembrar do espaçamento das linhas, que não é o mesmo para computadores, tablets e celulares, bem como a orientação da leitura. É mais comum que em celulares e tablets exista a leitura vertical, enquanto em computadores, o mais comum é lermos na horizontal. O webdesigner precisa considerar esses fatores e fazer o máximo de testes possíveis para garantir legibilidade em todas as formas de navegação.

A qualidade das imagens importa, e muito!

Da mesma maneira que as fontes precisam se adaptar aos diferentes tamanhos, o mesmo serve para imagens, significando, portanto, que suas resoluções precisam ser muito boas. A mesma foto que vai ser vista em tamanho pequeno na navegação por celular pode ser a foto de destaque do site visto pelo computador. É péssimo ter fotos que fiquem “pixelizadas” ou que demorem muito para carregar.

É importante também balancear a qualidade das imagens com o tempo que elas demorarão para carregar. Evite subir imagens no maior tamanho ou colocá-las em escala usando altura e largura no CSS. É melhor optar por cortá-las antes de carregá-las, bem como salvá-las no menor tamanho possível ainda dentro de uma boa qualidade.

Boas alternativas para design responsivo são limitar o número de imagens, limitar o número de imagens nos frameworks para mobile, usar múltiplas versões de tamanho e arquivos ou permitir que algumas imagens fiquem ocultas para dispositivos móveis. Essas opções podem fazer com que as criações se adequem a cada tipo de navegação.

E se você quiser fazer um e-commerce com design responsivo para seus clientes, que tal usar a plataforma da Nuvem Shop? Cadastre-se agora como parceiro, acesse nossa documentação especial e crie layouts personalizados para que seus clientes utilizem dentro da Nuvem.

Data da última atualização: 16/02/2018


O que você achou desse conteúdo?


Dannie Karam

Com mais de 10 anos de experiência em gerenciamento de projetos digitais, Danniela é comunicadora, escritora e líder do time de Branding da Nuvem Shop. Gosta de música, viagem, pessoas e culturas. E sempre fala demais, especialmente quando escreve de si em terceira pessoa.


    5-coisas-que-um-designer-precisa-saber-sobre-design-responsivo