Web Design Responsivo

< Responsive />

Leonardo Victor – DR/AL

1

< responsive />Leonardo Victor – DR/AL

2

Quem Sou

Leonardo Victor – 17 anosEstudante 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ó;

@LeonardoVFFfb.com/leonardovffleonardovff@thecomputeiros.com

< responsive />Leonardo Victor – DR/AL

3

O que é?

< responsive />Leonardo Victor – DR/AL

4

Acessibilidade e Problemas

1. DETECTAR O DISPOSITIVO;2. NOVOS DISPOSITIVOS;

< responsive />Leonardo Victor – DR/AL

5

Introdução

Design Responsivo1. Planejamento2. Desenvolvimento

< 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.

< responsive />Leonardo Victor – DR/AL

7

Características

1. Visual;2. Navegação:

1. Mouse;2. Toque;3. Teclas de Atalhos;

3. Usabilidade;

< responsive />Leonardo Victor – DR/AL

8

Layout Fluido

< responsive />Leonardo Victor – DR/AL

9

Layout Responsivo

< responsive />Leonardo Victor – DR/AL

10

Exemplo

< responsive />Leonardo Victor – DR/AL

11

Desenvolvimento

1. ECONOMIA:1. Reaproveitamento;2. Tempo;

2. MEDIA QUERIES:1. Imagens;2. Tamanhos;

< responsive />Leonardo Victor – DR/AL

12

Media Queries e Design Responsivo

< responsive />Leonardo Victor – DR/AL

13

Resoluções Base

< Obrigado (; />Leonardo Victor – DR/AL

Início

14