O vídeo do Workshop Online do Tableless pode ser visto aqui.
#Anotações do treinamento:
- Resolução é diferente de tamanho de tela.
- Um iphone, com tela pequena, tem uma resolução bem grande.
- Você não trabalha com resoluções, você trabalha com tamanhos de tela.
- A Metatag Viewport, faz a resolução ficar do mesmo tamanho que a tela do aparelho. Ou quase isso.
- Essa é a metatag padrão que uso nos meus projetos. [code] [/code]
Ref: Manipulando a Metatag Viewport
- Antes existiam as Media Types. As media types serviam para formatar a informação para outros tipos de media.
- Uma media muito usada é a print, que formata o layout para quando o site for impresso.
- O problema é que as media types não trabalham para vários tipos de dispositivos. O valor SCREEN é muito genérico.
- Daí surgiram as media queries. As media queries formatam o layout para vários tipos de tamanho de tela, densidade de pixels, orientação e etc.
- Em projetos Mobile First, você coloca a versão desktop dentro da media querei e a versão mobile fora dessa media querie.
Ref: Introdução sobre Media Queries
- Não perca a cabeça com as imagens. Isto é, não fique louco tentando servir várias imagens para vários tipos de dispositivos.
- Não há solução decente hoje. Usar scripts ou plugins que façam um trabalho obscuro por trás é ruim.
- A tag picture é uma solução importante, mas ainda falta suporte e não pode ser usada.
- Em um site responsivo as imagens precisa ser flexíveis. O truque simples é: img { max-width: 100%; }
- Grids são facilitadores. Eles te ajudam a prever o comportamento do layout.
- Os grids podem ser totalmente flexíveis ou fluídos. Mostrar exemplo de grid fluído e fixo
- Você pode usar frameworks para ajudar. Eu sugiro o grid do Bootstrap e em segundo lugar o Foundation.
- Quando diminuimos a tela, precisamos diminuir as fonts. Usar fonts com tamanho relativo é prático.
- Use REM hoje em dia. Se tiver que dar suporte para o IE 8, use EM.
- A diferença de REM e EM é que o REM pega como referência o tamanho de font do root, nesse caso o HTML.
- A conta para fazer a conversão de PX para REM/EM é simples: valor da font em pixels, dividido por 16 = valor em REM.
- No HTML, recomenda-se usar 100% como font-size. Logo, no mobile você consegue diminuir para 90% 85% de maneira com que as fonts diminuam ou aumentem proporcionalmente.