Attention!

  • May 29
    • 05/29/2014 at 08:00 p.m.
    • (GMT-03:00) Sao Paulo
    • Duration forecast: 2h00
    • 2552 views

R$ 45.00
Description

O Resultado final das explicações você pode ver aqui:
http://tableless.github.io/workshop-responsive/

Esse é o repositório do projeto que vamos mexer. Se quiser, fique à vontade para baixá-lo:
https://github.com/tableless/workshop-responsive

--

Responsive Web Design é uma metodologia para produzir websites preparados para serem visualizados em diversos tamanhos de tela. Neste Microworkshop iremos aprender os principais fundamentos do Responsive Web Design, mostrando as principais dicas de CSS.

O que falamos nesse Micro Workshop:
- Grids fluídos
- Imagens (vídeos etc) fluídos
- Media Queries
- Fonts com REM

Neste pequeno Workshop vamos ver um pouco dos três, direto no código. Queremos mostrar como poucas propriedades podem fazer a diferença para seu site.

Anotações do Workshop


METATAG VIEWPORT:
  • 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

MEDIA QUERIES
  • 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

IMAGENS FLUIDAS
  • 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 FLEXIVEIS
  • 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.
FONTS em REM
  • 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.
Category Design
Organized by

Do you want to broadcast live?
Make your own webinars

Try it free for 10 days
Please wait