Leonardo Victor é um estudante de 17 anos do terceiro ano do ensino médio e desenvolvedor web, que participou da Olimpíada do Conhecimento em 2014. O documento aborda o design responsivo, destacando a importância do planejamento e desenvolvimento para uma experiência de visualização otimizada em diferentes dispositivos. São discutidos aspectos como layout fluido, navegação e o uso de media queries para economizar tempo e recursos no desenvolvimento web.

1. < Responsive />
Leonardo Victor – DR/AL
1

2. < responsive />
Leonardo Victor – DR/AL
2
Quem Sou
Leonardo Victor – 17 anos
Estudante do terceiro ano do ensino médio;
Membro da delegação Alagoana da Olimpíada do
Conhecimento 2014, na área de Web Design;
Desenvolvedor Web no estúdio Toró;
@LeonardoVFF
fb.com/leonardovff
leonardovff@thecomputeiros.com

3. < responsive />
Leonardo Victor – DR/AL
3
O que é?

4. < responsive />
Leonardo Victor – DR/AL
4
Acessibilidade e Problemas
1. DETECTAR O DISPOSITIVO;
2. NOVOS DISPOSITIVOS;

5. < responsive />
Leonardo Victor – DR/AL
5
Introdução
Design Responsivo
1. Planejamento
2. Desenvolvimento

6. < responsive />
Leonardo Victor – DR/AL
6
Planejamento
LAYOUT RESPONSIVO (Tamanho da tela):
1. Ótima experiência de visualização;
2. Fácil leitura e navegação;
3. Mínimo de alteração.

7. < responsive />
Leonardo Victor – DR/AL
7
Características
1. Visual;
2. Navegação:
1. Mouse;
2. Toque;
3. Teclas de Atalhos;
3. Usabilidade;

8. < responsive />
Leonardo Victor – DR/AL
8
Layout Fluido

9. < responsive />
Leonardo Victor – DR/AL
9
Layout Responsivo

10. < responsive />
Leonardo Victor – DR/AL
10
Exemplo

11. < responsive />
Leonardo Victor – DR/AL
11
Desenvolvimento
1. ECONOMIA:
1. Reaproveitamento;
2. Tempo;
2. MEDIA QUERIES:
1. Imagens;
2. Tamanhos;

12. < responsive />
Leonardo Victor – DR/AL
12
Media Queries e Design
Responsivo

13. < responsive />
Leonardo Victor – DR/AL
13
Resoluções Base

14. < Obrigado (; />
Leonardo Victor – DR/AL
Início
14