Logo Design Responsivo

Design Responsivo

SVG, Icon Fonts, Efeitos CSS3 e imagens otimizadas

SVG, Icon Fonts, Efeitos CSS3 e imagens otimizadas

Para contribuir com um menor tempo de carregamento do site trabalhe, se possível, com gráficos vetoriais em vez de imagens. Dentre ótimos recursos para trabalhar não só quando se pensa em dispositivos móveis mas também de desktop são:

  • SVG;
  • Icon Fonts;
  • Efeitos CSS3.

SVG – É a abreviatura de Scalable Vector Graphics. Se trata de uma linguagem XML para construção de gráficos vetoriais escaláveis. Com ele possível descrever vetorialmente desenhos e gráficos bidimensionais estáticos ou animados.

A grande vantagem de utilizar gráficos SVG é que além de serem responsivos, eles tem boa compatibilidade entre os principais navegadores, são estilizáveis via CSS, e o mais incrível, é que pode ser dimensionado para qualquer tamanho sem perder qualidade.

Icon Fonts – São fontes que invés de conter letras ou números, contém símbolos ou glifos. Na verdade essas fontes são gráficos vetoriais que podem ser escalados sem perder a qualidade. Você também pode estilizá-las via CSS.

Segue uma lista com Icon Fonts gratuitas:

Você precisará utilizar a regra @font-face do CSS que permite usar fontes externas nos sites informando ao navegador o lugar onde o arquivo se encontra. As documentações encontradas no site da Icon Fonts instruem sobre como proceder.

Efeitos CSS3 – Existem muitos efeitos obtidos através de propriedades CSS3 que podem substituir o que se projeta em editores de imagem como Photoshop. Com isso em vez de se usar imagens você pode, com poucas linhas de códigos, obter gradientes, bordas arredondadas, sombras, entre outros efeitos.

Otimização de imagens

E quando for trabalhar com imagens otimize-as para que percam peso sem perder a qualidade e carreguem mais rápido nos dispositivos móveis. Existem diversos serviços online que fazem esta tarefa, entre eles:

Anterior

14 / 14