Preload

A importância do design responsivo para um site

Você conhece essa tendência que é mais do que importante para a presença digital das empresas?

11/03/2015 as 10:12:10

O que raios é design responsivo?

Este tipo de design tem como foco possibilitar que o website de uma empresa possa ser acessado tanto de um PC comum quanto de dispositivos móveis como smartphones e tablets que possuem tamanhos de tela diferentes do tamanho tradicional de um computador e por isso precisam de configurações responsivas por parte dos desenvolvedores do site. No texto do Paulo Gomes, desenvolvedor sênior da Ideatore, ele conta como surgiu a necessidade do design responsivo.

Mas será que você consegue diferenciar um site responsivo de um que não possua esse tipo de design?

Pra acabar com as dúvidas (inclusive as minhas) sobre o assunto, encontrei um artigo que explica as razões do design responsivo ser tão importante para um website.

Confira:

1- O design responsivo se expande de forma fluida, enquanto projetos de adaptativos ficam presos à medida que você expande um navegador ou janela.

2- Posicionar os elementos de design do website usando pixels em coordenadas X e Y pode trazer problemas para o funcionamento dele em telas diferentes. O aconselhável nessa situação é utilizar unidades relativas como a porcentagem da tela que é usada, ao invés de unidades estáticas como pixels.

3- À medida que o tamanho da tela se torna menor, o conteúdo do website vai tomando mais espaço vertical e qualquer coisa abaixo dele vai sendo empurrada. Isso é chamado de “fluxo.”

4- "Breakpoints” (pontos de quebra em inglês) permitem que o layout mude em pontos pré-determinados. Por exemplo: no desktop o website possui 3 colunas, mas no dispositivo móvel apenas 1.

5- O design responsivo utiliza elementos em espaços pré-definidos. Com esses elementos, é possível fazer com que os elementos na tela se adaptem à uma tela que estiver encolhendo ou expandindo de maneira uniforme.

6- Às vezes é ótimo que o conteúdo ocupe toda a largura da tela, como em um dispositivo móvel. No entanto, faz menos sentido que o mesmo conteúdo se estenda por toda a largura da tela da TV, por exemplo.

7- Tecnicamente não há muita diferença se um projeto começa em uma tela pequena e vai para uma tela grande (mobile primeiro) ou vice versa (desktop primeiro). No entanto, se você começar primeiro pelo smartphone, o projeto adiciona limitações extras e ajuda a tomar determinadas decisões.

8- O ícone do website possui muitos detalhes e alguns efeitos extravagantes aplicados? Se sim, use um bitmap. Se não, considere usar uma imagem vetorizada. Isso porque a imagem vetorizada pode mais adequadamente se adaptar a diferentes resoluções.

9- Quer fazer com que o website tenha um visual futurista bem legal? Use webfonts. Elas vão ficar deslumbrantes, mas lembre-se que cada fonte dessas será carregada e quanto mais fontes o website tiver, mais tempo levará para a página carregar por completo. Fontes de sistema, por outro lado, são mais rápidas na hora de carregar os dados do site, a não ser quando o usuário não possui alguma delas no dispositivo (desktop, smartphone ou tablet).

*Créditos para Sandijs Ruluks, co-fundador da Froont, uma empresa norte-americana especializada na criação de ferramentas para webdesigners criarem websites responsivos.

Tags

design responsivo
website responsivo
website design
tendências web
website mobile
website celular


Gustavo

Gustavo [Redator]

gustavo@ideatore.com.br

Formado em letras pela UNESP Araraquara, atua como redator, produtor de conteúdo e gerencia as mídias sociais de alguns dos clientes da agência. É fascinado por marketing digital e acredita que o conteúdo é o que transforma e move o mundo.

POSTS RELACIONADOS

Mais posts do nosso blog



VEJA TODOS OS POSTS DO BLOG

CONTATO

Vamos planejar juntos?








+55 16 3877.6480

Rua Marcos Markarian 1025 conjunto 705 - 706
Jardim Nova Aliança 14026-583
Ribeirão Preto São Paulo Brasil

VEJA COMO CHEGAR

Agência de Propaganda, Comunicação, Marketing Digital, Branding e Website em Ribeirão Preto

Rua Marcos Markarian 1025
conjunto 705 - 706

SERVIÇOS

COMUNICAÇÃO

Somando conhecimentos, podemos juntos estabelecer o diálogo ideal com cada um dos seus públicos e mostrar o real o valor da sua empresa.

PUBLICIDADE
CORPORATIVA
ENDOMARKETING
FORÇA DE VENDAS
EVENTOS

PORTFOLIO

Comstor | Sistema Online | Sistema integrado com ERP do cliente, para rastrear histórico de pedidos, desde a emissão de faturamento até localização dos produtos.
Comstor
[Sistema Online]

Sistema integrado com ERP do cliente, para rastrear histórico de pedidos, desde a emissão de faturamento até localização dos produtos.








Agência Certificada CENP HubSpot Platinum Agência Associada Sinapro