REM e EM

• REM vem de “Root ephemeral” que em uma tradução técnica fica “variável à raiz”, ou seja, é variável em relação à propriedade font-size da tag raiz (HTML).
• EM vem de “ephemeral” que significa “variável”, e ela é variável à propriedade font-size da tag mãe.

TIPOS DE IMAGENS

• O PNG é um formato de imagem pouco compacto, então ele consegue manter bastante da qualidade da imagem. Em compensação, como ele é um formato menos compacto o seu tamanho é bem elevado .
• JPGS são bem mais compactos que os PNGs, por conta disso a qualidade de imagem não é tão boa quanto a de um PNG. Não consegue utilizar certos efeitos como por exemplo: transparência, na imagem JPG o fundo está branco e na PNG o fundo está transparente.
• O tamanho de um GIF pode variar bastante dependendo do comprimento da animação e também da resolução do GIF, só que GIFs possuem uma qualidade de imagem extremamente baixa, então o seu uso costuma ser bem limitado.
• Os SVGs são imagens criadas através de instruções de computador, então o computador recebe uma instrução e monta o desenho na tela. É formado por cálculos, então independente do tamanho da imagem ou independente do tamanho da tela, o computador sempre faz essa mesma conta para poder gerar a imagem. Uma das principais vantagens é que costuma ser muito mais leve do que um PNG, porque o SVG só precisa guardar instrução de como montar a imagem. Ao contrário do PNG, que tem que guardar as informações de posição dos pixels. Mas SVG não é uma imagem perfeita, também tem suas desvantagens. O PNG guarda muito mais informação: a textura, a diferença de cor e a suavidade de transição de cores, do que o SVG.

Mobile e Desktop

Na hora de desenvolver é importante analisar todos os pontos que vão influenciar no projeto. Clientes, features, custo e linguagem visual, são alguns dos pontos que vão favorecer uma abordagem sobre a outra. Cada um deles tem suas vantagens e desvantagens, e elas devem ser avaliadas de acordo com as necessidades do projeto.

• Algumas motivações para usar mobile-first:
  • Grande parte dos acessos e vendas vem de dispositivos mobile
  • O design é minimalista e simplificado
  • Foco em conteúdo
• Algumas motivações para usar desktop-first:
  • A interface pode ter diversas features mais ricas
  • Maior capacidade de banda e processamento
  • O produto é otimizado para desktop (ex: Google Docs)

Meta viewport

O meta “viewport” é o que habilita o navegador a visualizar a página como se fosse um dispositivo móvel.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Variáveis CSS

As variáveis CSS ajudam muito na manutenção do código e também facilitam o uso de propriedades de estilização.

Declaramos dentro de algum seletor (que costuma ser o :root {}) escrevendo --nome-da-variavel: valor, e chamamos as variáveis seguindo uma sintaxe, usamos uma função var e passando o nome da variável dentro dessa função.

Imagem: conteúdo e estrutura ou estilização

Se uma imagem não tem importância de conteúdo, essa imagem pode ser removida completamente do HTML, só que vem a pergunta: “ela vai para onde?” Se alguma coisa não é conteúdo e estrutura, ela é estilização. Então essa imagem, esse ícone aqui, ele vai para o CSS.

Se temos ícones que são links para as mídias sociais, tem que fazer aquela pergunta: “dá para entender o conteúdo desta página sem esses ícones?” Definitivamente não! Porque esses ícones não são complementos de nada, e sim do seu próprio conteúdo. Só que esses ícones são nossa página nos resultados de motores de busca (ex: Google, Bing, Yahoo).

Media Queries

Permitem que criemos páginas com estilizações diferentes no mesmo arquivo CSS por várias condições diferentes como, por exemplo, largura da tela de um dispositivo. Para colocar toda a estilização, sem mudar a versão( mobile, tablet, desktop), precisamos usar uma media query para fazer um breakpoint. A sintaxe correta da media query é @media (min-width: VALORpx) { “estilização aqui” }

Ao utilizar o bootstrap, temos como breakpoints:

// X-Small devices (portrait phones, less than 576px)
// No media query for `xs` since this is the default in Bootstrap

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

// X-Large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

// XX-Large devices (larger desktops, 1400px and up)
@media (min-width: 1400px) { ... }