web design responsivo
TRANSCRIPT
Web Design Responsivo
Tiago B. dos Santos | Senac Penha
Quem sou eu
Nome e idade:
Tiago Bezerra dos Santos
Formação: Tecnólogo em Processamento de Dados
Atuação: Docente de Internet e Consultor GD2 Senac
www.ecosdaweb.com tiago.bsantos
RESPONSIVO?
Definições
Somos todos responsivos!
Arquitetura Responsiva
Nicholas Negroponte
Arquitetura Responsiva
• Combinação de espaços físicos,
experimentos arquitetônicos, materiais,
sistemas de automação e robótica
Arquitetura Responsiva
• Sensores que ajustam a temperatura do
ambiente
• Sensores de iluminação
• Óculos que se ajustam às condições de
iluminação
• Tecnologia "Smart Glass"
Web Design Responsivo
Ethan Marcotte
Responsive Web Design (RWD)
“Projetar para o fluxo e o refluxo das coisas”
Ethan Marcotte
UM POUCO DE HISTÓRIA
Layout Fixo (anos 1990-2000)
Portal Terra (18/10/00)
Layout Líquido (anos 2000)
Portal Terra (31/12/05)
Layout Adaptativo (anos 2000)
Portal Terra (30/12/10)
Layout Responsivo (anos 2010)
Portal Terra (09/04/15)
Princípios do RWD
• Design capaz de responder às
características do dispositivo
• Movimentar, expandir e contrair
• Adaptar ao contexto onde é renderizado
Pilares
Por que HTML5?
Porque HTML5
• Semântico
• Novos elementos e atributos
• Bem estruturado
• Acessível e bom para SEO
• Não precisa de plugins para mídia
• Metatag viewport
Por que CSS3?
Porque CSS3
• Novos seletores, propriedades e valores
• Box Sizing
• Media Queries
• Módulos Flexbox e Grid Layout
Por que JavaScript?
Porque JavaScript
• Scripts para navegadores antigos
• Polyfills
COMO "FAZER" WEB DESIGN
RESPONSIVO?
Ingredientes
• Grid fluido
• Imagens e mídias flexíveis
• Media Queries
Grid Fluido
• Módulos Flexbox e Grid Layout
• Medidas relativas, como % e EM
• Base de qualquer framework
Imagens e Mídias Flexíveis
• Capazes de contrair e expandir suas
dimensões
• Art Direction
• Elemento <picture> e atributo srcset
Media Queries
• Consulta ao tipo de mídia
• Folhas de estilos de acordo com
características dos dispositivos
WORKFLOW
Mobile First vs Desktop First
Por que Mobile First?
• Explosão da tecnologia mobile
• Layout para mobile implica em otimização
• Dispositivos com cada vez mais
funcionalidades nativas
• Progressive Enhancement
Por que Desktop First?
• Converter projeto já existente
• Reaproveitar código legado
• Graceful Degradation
EXEMPLOS
Mitos do RWD• Usuários utilizam dispositivos móveis
apenas na rua e a conexão é sempre
lenta
• Usuários de dispositivos móveis não
precisam do conteúdo total
• Usuários de dispositivos móveis preferem
uma experiência mais simples
• Existe uma "internet móvel"
• Breakpoints pré-definidos
Para refletir
“Design Responsivo deve priorizar
interfaces leves e flexíveis, sem detalhes e
efeitos desnecessários, focando em
usuários que você ainda não conhece ou
que ainda vão surgir.”
Bernard de Luna
Referências• Exemplos usados na palestra: http://goo.gl/fu6Rvv
• Como começar um RWD: http://www.designculture.com.br/10-dicas-de-como-
comecar-um-design-responsivo/
• Converter PX para EM: http://pxtoem.com/
• Interface com tipos de layouts: http://www.liquidapsive.com/
• Guia sobre Flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
• Guia sobre Grid Layout: https://css-tricks.com/snippets/css/complete-guide-grid/
• Compatibilidade & Funcionalidades: http://caniuse.com/ e http://html5please.com/
• Diversos Polyfills: https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-
Browser-Polyfills
• Responsive Images: http://responsiveimages.org/ e
http://alistapart.com/article/responsive-images-in-practice
