DESIGN RESPONSIVO TÉCNICAS E PROCESSOS DE PRODUÇÃO. Profº Ritielle Souza

Transcrição

1 DESIGN RESPONSIVO TÉCNICAS E PROCESSOS DE PRODUÇÃO Profº Ritielle Souza

2 Web design responsivo Mas, o que é Web Design Responsivo? O Wiki diz o seguinte (tradução livre): Web Design Responsivo (RWD), essencialmente indica que um site é feito para usar Cascading Style Sheets (CSS) 3 Media Queries, ou seja, uma extensão da com grids proporcionalmente fluídas, para adaptar o layout ao ambiente de visualização, usando também, imagens flexíveis. Como resultado, os usuários, através de uma ampla gama de dispositivos e navegadores, terão acesso a uma única fonte de conteúdo Fonte:

3 Exemplos responsivos É uma técnica que permite ao layout responder a diferentes ambientes de visualização. Exemplos:

4

5 Padrão responsivo Desde o aparecimento dos smartphones, estamos experimentando um boom em Design Mobile, e como acontece com o desenvolvimento de novos aparelhos e tecnologias, algumas tendências e padrões já estão sendo estabelecidos. O que permite trabalhar com estas adaptações são as media queries.

6 Mas o que são Media Queries? A CSS2 nos permite criar estilos específicos para alguns tipos de mídia, tais como: screen (tela) e print (impressão). Agora com a CSS3, as possibilidades foram ainda mais ampliadas, com a introdução das Media Queries. Traduzindo, Media Queries são Consultas de Mídia, ou seja, a CSS é capaz de consultar o navegador e verificar em que tipo de mídia ou dispositivo o usuário está usando para acessar um site, permitindo assim, que especifiquemos estilos diferentes para cada tipo de mídia.

7 Criando o layout responsivo A meta tag viewport O viewport é a área onde o seu website aparece. A meta tag viewport pode ser usada para controlar como o conteúdo HTML irá aparecer nos dispositivos móveis e também serve para controlar o zoom.

8 Meta tag viewport A meta tag viewport, abaixo diz ao navegador para usar como largura do layout, a largura do viewport, desativando a escala inicial. Vamos incluir este código dentro da tag <header> do nosso site. <meta name="viewport" content="width=device-width, initial-scale=1.0">

9 Media queries aplicadas O conjunto de regras abaixo, irão funcionar quando a largura do viewport for 980px ou inferior. Basicamente vamos passar a largura da <div> content de pixels para porcentagem, transformando a largura do elemento em screen and (max-width: 980px) { #pagewrap { #content { #sidebar { width: 94%; width: 65%; width: 30%;

10 Media querie aplicada Agora, se o viewport for 700px ou inferior, nós vamos especificar um tamanho automático para as <div>s content e sidebar e remover os floats. Assim os elementos vão ocupar 100% da screen and (max-width: 700px) { #content { width: auto; float: none; #sidebar { width: auto; float: none;

11 Media querie aplicada Por fim, se o viewport for 480px ou inferior (tela de celular), vamos redefinir a altura da <div> header deixando-a automática, mudar o tamanho da tag <h1> para 24px e esconder a <div> screen and (max-width: 480px) { #header { height: auto; h1 { font-size: 24px; #sidebar { display: none;

12 Media queries aplicada Você pode escrever quantas media queries quiser. Aqui criamos códigos para apenas 3 principais tamanhos: desktops, tablets e celulares.

13 Error IE O Internet Explorer 8 e anteriores não suportam media queries.

14 UNIDADE ABSOLUTA pt - point :1/72 in; mm - milímetro :1/10 cm; cm - centímetro :1/100 m; in - polegada :2,54 cm;

15 UNIDADE RELATIVA em ex px - pixel % - porcentagem Unidade relativa- é aquela tomada em relação a uma outra medida. Folhas de Estilo em Cascata que usam unidades de comprimento relativas são mais apropriadas para ajustes de uso em diferentes tipos de mídia. (p. ex., de uma tela de monitor para uma impressora laser).

16 UNIDADE RELATIVA O valor é tomado em relação: em:...ao tamanho da fonte ('font-size') herdada; px:...ao dispositivo (MÍDIA) de exibição; %:... a uma medida previamente definida.

17 UNIDADE RELATIVA A unidade de medida - em A unidade de medida de comprimento em referencia-se ao tamanho da fonte (letra) do seletor onde for declarada. Quando em for declarada para a propriedade fontsize referencia-se ao tamanho da fonte (letra) do elemento pai. Quando em for declarada para o elemento raiz do documento (p. ex: <html> em documentos html) referencia-se ao valor inicial (default) do tamanho de fonte (letra).

18 em Os exemplos abaixo esclarecem as definições: h1 { line-height: 1.2em line-height de <h1> será 20% maior do que o tamanho das letras de <h1> h1 { font-size: 1.2em font-size de <h1> será 20% maior do que o tamanho das letras herdado por <h1> p.ex.: se h1 estiver contido numa div com font-size=10px então font-size de h1 = 12px

19 VAMOS AO ARQUIVO EDITANDO O ARQUIVO DE MÍDIA RESPONSIVA. Pegar o HTML já pronto na rede.