Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Design Responsivo: Uma abordagem abrangente
Search
Plataformatec
July 20, 2012
Design
2
210
Design Responsivo: Uma abordagem abrangente
Workshop realizado no Ndesign.
Plataformatec
July 20, 2012
Tweet
Share
More Decks by Plataformatec
See All by Plataformatec
O case da Plataformatec com o Elixir - Como uma empresa brasileira criou uma linguagem que é usada no mundo inteiro @ Elixir Brasil 2019
plataformatec
5
990
O case da Plataformatec com o Elixir - Como uma empresa brasileira criou uma linguagem que é usada no mundo inteiro @ QCon SP 2018
plataformatec
1
230
Elixir @ iMasters Intercon 2016
plataformatec
1
260
GenStage and Flow by @josevalim at ElixirConf
plataformatec
17
2.7k
Elixir: Programação Funcional e Pragmática @ 2º Tech Day Curitiba
plataformatec
2
290
Elixir: Programação Funcional e Pragmática @ Encontro Locaweb 2016
plataformatec
4
280
What's ahead for Elixir: v1.2 and GenRouter
plataformatec
15
2k
Arquiteturas Comuns de Apps Rails @ RubyConf BR 2015
plataformatec
6
370
Pirâmide de testes, escrevendo testes com qualidade @ RubyConf 2015
plataformatec
10
2.3k
Other Decks in Design
See All in Design
HCDフォーラム2024 「HCDとHAI ~人間とAIが共存する世界の実現~」
kamechi7222222
0
310
Findy - デザイナー向け会社紹介 / Hiring Findy's Designers
findyinc
6
70k
Personal Story Sequence - Vendetta(WIP)
elrns88
0
420
ZKK_001.pdf
nicholaspegu
0
1.5k
Building foundations 堅牢なデザイントークンの設計
hilokifigma
0
400
横断組織デザイナーの働き方
mixi_design
PRO
0
350
Les petites aventures de CSS, saison 2025
goetter
3
4k
The Golden Whitney
ohtristanart
PRO
0
130
12年続くB2DサービスとUXデザイン / UX Design keeps B2D service alive over 12 years
tnj
0
290
1年目のクリエイターがつくりあげた!採用冊子CANVAS制作の裏側 / creator-canvas
cyberagentdevelopers
PRO
1
540
もうひとつのアーキテクチャ #kichijojipm
kondoyuko
0
190
Figma Code Connect を使ってエンジニアの新しい体験をデリバリする
junkifurukawa
0
670
Featured
See All Featured
A Tale of Four Properties
chriscoyier
158
23k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Music & Morning Musume
bryan
46
6.4k
How to Ace a Technical Interview
jacobian
276
23k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
7.1k
GitHub's CSS Performance
jonrohan
1030
460k
Building Applications with DynamoDB
mza
93
6.2k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
27
1.6k
Building Flexible Design Systems
yeseniaperezcruz
328
38k
Java REST API Framework Comparison - PWX 2021
mraible
29
8.4k
How STYLIGHT went responsive
nonsquared
99
5.4k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.2k
Transcript
DESIGN RESPONSIVO Uma abordagem abrangente N jeitos BH 2012
None
BRUNA KOCHI @brutiko brutiko@gmail.com
ROGER ROSSI @_utgardloki roger.c.rossi@gmail.com
A OFICINA HISTÓRICO PRODUÇÃO BOAS PRÁTICAS
1990 Criado para distribuição e colaboração de informação Tim-Berners-Lee lança
o protocolo http (Hypertext Transfer Protocol) HISTÓRICO DO DESIGN NA WEB
HISTÓRICO DO DESIGN NA WEB
None
None
Designers começaram a trazer toda a experiência p/ web Necessidade
de diferenciar a web HISTÓRICO DO DESIGN NA WEB *
HISTÓRICO DO DESIGN NA WEB tipografia | diagramação | contraste
| posicionamento
HISTÓRICO DO DESIGN NA WEB tipografia | diagramação | contraste
| posicionamento
HISTÓRICO DO DESIGN NA WEB Passaram a aplicar o mesmo
estilo na Web
HISTÓRICO DO DESIGN NA WEB Layout em tabelas
1998 Layouts de forma semântica, uso de tabelas apenas para
dados tabulares Movimento Tableless Html propósito original HISTÓRICO DO DESIGN NA WEB
HISTÓRICO DO DESIGN NA WEB Css Zen Garden
None
None
None
None
WEB 1.0 quase não existia a interação com o usuário
Conteúdo de leitura HISTÓRICO DO DESIGN NA WEB
TECNOLOGIA poucos dispositivos acesso limitado à internet HISTÓRICO DO DESIGN
NA WEB internet discada
Primeiros computadores pessoais | 80s
PC
PC Monitor LCD |
MicroTac Motorola | 1996
Nokia 9000 | 1996
Smartphones | 2012
Tablets | 2012
imac | 2012
Novo ipad | 2012
Resoluções 1024x768px
Resoluções 1024x768px Smartphone Tablet Netbook Desktop 320px 768px 1024px 1600px
ACESSOS Uso 24 horas Todo mundo conectado HISTÓRICO DO DESIGN
NA WEB Acessibilidade
None
None
None
None
WEB 2.0 Uma nova forma de uso, o usuário agora
é participativo Web como plataforma HISTÓRICO DO DESIGN NA WEB Pensar num layout dinâmico
None
None
DESIGN RESPONSIVO Exibir todo conteúdo em diferentes dispositivos, adequado e
acessível
DESIGN RESPONSIVO
None
None
None
RESPONSIVO flexível media queries boas práticas DESIGN
None
None
GOLDEN RULE TARGET ÷ CONTEXTO = DIMENSÃO
ESTRUTURA target ÷ contexto = dimensão Trocar as larguras fixas
por porcentagem 1000px = 100% 600px ÷ 1000 = 60% 340px ÷ 1000 = 34%
600px 340px 1000px
TIPOGRAFIA target ÷ contexto = dimensão target tamanho da fonte
que vc quer redefinir (em px) contexto tamanho da fonte base, que veio do body (16 px no caso) dimensão resultado em
22px / 24px 18px / 20px 14px / 20px
Tipografia - medidas base body { background: #fafafc; font-family: Georgia,
'Palatino', serif; font-size: 16px; height: 100%; line-height: 18px; }
body { background: #fafafc; font-family: Georgia, 'Palatino', serif; font-size: 100%;
height: 100%; line-height: 1.5em; } /* font-size: 16px; Trocar para porcentagem */ /* 100% equivale a 16px na maioria dos browsers */ Tipografia - medidas base
#content article p { font-size: 14px; line-height: 20px; } #content
article p { font-size: 0.875em; /* 14px ÷ 16px = 0.875em */ line-height: 1.25em; /* 20px ÷ 14px = 1.42857em */ } Tipografia - redefinindo medidas
MEDIA QUERIES all, braille, embossed, handheld, print, projection, screen, speech,
tty, tv TIPOS
MEDIA QUERIES @media screen and (max-width: 1200px) { /* insert
styles here */ } <link rel=”stylesheet” href=”wide.css” media=”screen and (min-width: 1200px)”/> ou USO
BOAS PRÁTICAS Para conseguir funcionar html5 e css3 no IE
ie7-js, ie8-js do google modernizer.js HTML5 e CSS3
BOAS PRÁTICAS Plugin de auxílio de grid 960.js GRID
BOAS PRÁTICAS Sempre vai baixar o tamanho menor de imagem,
verifica sem tem e permite uma resolução maior e carrega a maior. O ruim é ter 2 requests. https://github.com/teleject/hisrc Hisrc
BOAS PRÁTICAS Funciona como a tag video <picture alt="description"> <source
src="small.jpg"> <source src="medium.jpg"> <source src="large.jpg"> Define um source p/ cada tamanho de imagem. Tag picture
BOAS PRÁTICAS Melhora contínua IE FIREFOX CHROME ... Progressive Enhancement
BOAS PRÁTICAS Sempre melhor adicionar do que subtrair Esboce seu
layout para as versões Mobile First
REFERÊNCIAS http://mediaqueri.es/ http://www.evolutionoftheweb.com/ http://dabblet.com/ http://css-tricks.com/which-responsive-images-solution-should-you-use/
RESPONSIVO adaptável flexível otimizado DESIGN