Web Design Responsivo

DESENVOLVIMENTO DE CONTEÚDOS WEB PARA MOBILE

Agenda

•  Apresentação da disciplina •  Introdução ao ecossistema mobile •  Breve histórias das linguagens de marcação mobile •  HTML5 de Relance •  Breve revisão de CSS •  Estratégia de desenvolvimento de conteúdos mobile •  Viewport • Web Design Responsivo •  Layout Fluido • Mobile First

Quem sou eu

• Eduardo Mendes

• MSc em Engenharia de Teleinformática • DETI UFC

• edumendes@gmail.com

Disciplina

• Aulas teóricas e práticas • Sexta noite • Sábado manhã

• Projeto • Sábado a tarde

• Avaliação • Projeto + exercícios práticos

O Ecossistema Mobile

Mobile Web

• Qual a principal diferença?

A tela é menor!

Ecossistema mobile

•  Não é apenas uma questão de tamanho físico

•  Mobile é um cenário de uso que varia dependendo do aparelho

•  Usuários móveis geralmente são exatamente isso: móveis

•  O ambiente dos usuários pode ser imprevisível

•  O usuários móveis esperam sites otimizados, que se adaptem à sua localização e ao seu ambiente

Cenário de Uso

As características são importantes

Físicas

•  Teclado completo com teclas reais

•  Dispositivo de seleção super preciso

•  Tela larga, múltiplos monitores •  CPU/GPU poderosas •  Disco rígido de alta capacidade

•  Teclado limitado/virtual •  Dispositivo de seleção toque •  Tela pequena, que pode

rotacionar •  CPU/GPU menos capacitada •  Armazenamento menor

Experiência

•  Tipicamente utilizado de localidades previsíveis

•  Bom para navegação/pesquisa em aberto

•  Fácil de trocar entre várias tarefas

•  Usuário está focado e confortável

•  Tipicamente utilizado em ambientes imprevisíveis

•  Bom para consultas rápidas •  Destinado à tarefas

individuais discretas •  Usuário frequentemente

distraído ou ocupado

O Ambiente

Relógio embutido

Bússola

Geolocalização

Acelerômetro

Câmera

Termômetro

Messagens

Calendário

O que considerar ao “mobilizar” seu site? •  Quem está usando seu site?

•  O que seus usuários fazem quando chegam ao seu site?

•  De onde seu site está sendo acessado?

•  Quando seu site é acessado?

•  Porque os usuários estão indo ao seu site?

•  Como eles acessam o seu site?

Responder

• Pode ajudar você a otimizar o tempo que você gasta sabendo o que você tem que fazer para um site mobile

A Web é uma só

Projetar para uma web

• De forma geral: •  Todos os dispositivos devem ser capaz de acessar seu site

•  Não exclua usuários baseado no dispositivo ou navegador que ele usa

•  Separe conteúdo do comportamento e da apresentação •  Separe CSS e JS • Não adicione informações de comportamento e

apresentação junto com o código

Breve história das linguagens para mobile

Breve história das linguagens de marcação mobile

SGML

HTML

XML

HDML

cHTML

XHTML Basic

WML

XHTML

HTML5

XHTML-MP

1970s 1990s 2000s

Padronizada 2001 Atualizada em 2008

XHTML-MP e HTML5

•  Antes do aparecimento dos smartphones mais modernos, XHTML-MP era a linguagem de marcação mais comum para dispositivos móveis

•  XHTML-MP foi dividido em módulos •  Isso possibilitou um meio para evoluir de WML para

XHTML-MP •  Permite que os navegadores com menos recursos

realizem várias tarefas comuns no mundo web

•  Novos telefones e dipositivos são capazes de lidar com HTML5

HTML5 de relance

Tags semânticas

• <header> e <footer>

• Em comparação com a antiga tag <div> não há nenhuma diferença entre em termos de apresentação

• Mas no futuro os motores de pesquisa se bene!ciarão conseguindo diferenciar o que seja o conteúdo real de outros elementos

Tags semânticas

• <article> e <section>

• Artigos representam um bloco completo de conteúdo • Uma seção é um pedaço do todo

• Artigos (article) podem ser compostos de múliplas seções (section) • Seções podem ter vários artigos

Tags semânticas

• <figure> e <figcaption> • <!gure> é um conteiner para conteúdo (geralmente

imagens) e <!gcaption> fornece uma legenda para aquele conteúdo

• <nav> •  indica que um determinado conteúdo é a navegação

da página

<header>! <hgroup>! <h1>Título</h1>! <h2>Subtítulo</h2>! </hgroup>! </header>!! <nav>! <ul>! Navegação! </ul>! </nav>! <section>! <article>! <header>! <h1>Título</h1>! </header>! <section>! Conteúdo! </section>! </article> ! !

<article>! <header>! <h1>Título</h1>! </header>! <section>! Conteúdo! </section>! </article>! </section>!! <aside>! Principais links! </aside>!! <figure>! <img src="..."/>! <figcaption>Cartao 1.1</figcaption>! </figure>!! <footer>! Copyright ©! <time datetime="2013-08-01">!

! !2013</time>.! </footer>!

<input>

• O elemento <input> agora tem uma série de novos valores para o atributo type, que permite que os navegadores façam coisas bacanas, dependendo do seu valor.

•  color • date • datetime • datetime-local •  email • month

•  number •  range •  search •  tel •  time •  url

Breve revisão CSS

CSS

• O HTML cuida e dá semântica ao conteúdo

• O CSS é uma linguagem de estilo utilizada para de!nir a apresentação de documentos

• Ao invés de colocar a formatação dentro da página, cria-se uma página que contém todos os estilos (regras CSS)

Seletores CSS

• Seletores agrupam as regras CSS aplicadas a um ou mais elementos em um página

body{ background-color: #d2b48c; margin-left: 20%; margin-right:20%; border: 1px dotted gray; padding: 10px 10px 10px 10px; font-family: sans-serif; }

Todo elemento vem dentro de uma caixa

Vários tipos de caixas e bordas

Elementos aninhados herdam as regras CSS

Um gráfico para o aninhamento

html

head body

title p

q

Os elementos aninhados

html

body

p p h1 h2 p

img a em a

Elementos aninhados

body { font-family:sans-serif; } h1, h2 { color: gray; } h1 { border-bottom: 1px solid black; } p { color: maroon; } em { font-family: serif; }

Os elementos aninhados

html

body

p p h1 h2 p

img a em a

Classe css

<h2>Chá Verde Gelado</h2>

<p class="verde">

<img src="../imagens/green.jpg">

Mistura de vitaminas e sais minerais, este drink

combina benefícios do chá verde com a camomila.

</p>

p.verde { color: green; }

Podemos fazer mais

blockquote.verde, p.verde { color: green; }

<blockquote class=“verde”>

.verde { color: green; }

O atributo id

• Similar a classe • Um atributo chamado “id” • Deve possuir um nome único • Só um elemento na página deve possuir aquele id

especí!co <p id=“mensagem”> Página desenvolvida em HTML </p>

Como usar?

p.especial { color: red; } .especial { color:red; }

Seleciona apenas as tags <p> que tenham

a classe “especial”

Seleciona todos os elementos que tenham a classe “especial”

Como usar?

#mensagem{ color: red; } p#mensagem{ color:red; }

Seleciona qualquer elemento que possua o id “mensagem”

Seleciona apenas o elemento <p> que tenha o id “mensagem”

Padding em uma linha

padding-top: 0px; padding-right: 20px; padding-bottom: 30px; padding-left: 10px

padding: 0px 20px 30px 10px;

Margem em uma linha

margin-top: 0px; margin-right: 20px; margin-bottom: 30px; margin-left: 10px

margin: 0px 20px 30px 10px;

1 valor para todos os paddings

padding-top: 20px; padding-right: 20px; padding-bottom: 20px; padding-left: 20px

padding: 20px;

Margem horizontal e vertical

margin-top: 0px; margin-right: 20px; margin-bottom: 0px; margin-left: 20px

margin: 0px 20px;

Borda em uma linha

border-width: thin; border-style: solid; border-color: #007e7e; border: thin solid #007e7e;

Fundo em uma linha

background-color: white; background-image: url(images/cocktail.gif); background-repeat: repeat-x; background: white url(images/cocktail.gif) repeat-x;

Blocos, inline e o display

• Elementos de bloco • Separam o conteúdo

• Elementos inline

h2

p

blockquote

p q

A regra display

• A regra display pode alterar um elemento de bloco para um elemento inline

• Muito utilizado para trabalhar com menus

Valores para display

!li {!

!display: inline;!}!!li {!

!display: block;!}!!li {!

!display: none;!}!!

O float

• Faz com que um elemento "utue na página, caso haja espaço

• Utilizado para da forma ao layout

• O elemento pode "utuar a direita ou a esquerda

Layout com float

float: left; width: 240px;

float: right; width: 240px;

margin: 10px 260px 0px 250px;

Estratégias de desenvolvimento de conteúdo mobile

Estratégias

Não fazer nada

O conteúdo para Desktop existente é o mesmo que é enviado para os dispositivos móveis sem nenhuma mudança ou otimização de layout

Multi dispositivo

O mesmo conteúdo é enviado para desktop e mobile, mas estilos e scripts apropriados para o tamanho físico de destino

Versão mobile específica

Dispositivos móveis e desktop recebem versões diferentes apropriadas ao seu tamanho específico

Não fazer nada

• Conteúdo próprio para Desktop é enviado para o dispositivo móvel de forma inalterada

Não fazer nada

•  Menos trabalho para desenvolver

•  Não há necessidade de manter cópias separadas de conteúdos ou estilos

•  Não otimiza a experiência do usuário

•  Conteúdos largos e complexos que podem empobrecer a performance

Vantagens Desvantagens

OK: Páginas leves que possuem conteúdo flexível e fluente, páginas que são organizadas de forma mais vertical

RUIM: Páginas com layouts complexos, que possuem itens de conteúdo grandes (imagens) ou que utilizam plugins como flash

Conteúdo adaptado

• Mesma página é enviada para os dispositivos desktop e mobile • Entretanto, CSS e outros conteúdos podem se

adaptar ao tamanho físico do dispositivo

desktop.css

mobile.css

Conteúdo adaptado

•  Usar o mesmo conteúdo reduz o trabalho de desenvolvimento

•  Boa experiência para tamanhos físicos múltiplos

•  Pode ser difícil converter o conteúdo para este modelo, dependendo da complexidade da página

•  Uso inapropriado de estilos pode fazer esta estratégia falhar

Vantagens Desvantagens

OK: Páginas com semântica bem definida por HTML e utiliza CSS e JS para definir aparência e comportamento

RUIM: Páginas complexas com animações, vídeos e grandes imagens incorporadas, cujo a diferença para mobile seria muito grande

Versão Mobile Específica

• Versão de conteúdo especí!ca para mobile é enviada para os dispositivos móveis • Envolve algum redirecionamento do lado do

servidor

Conteúdo específico

•  Cada tamanho físico tem uma experiência melhor

•  Versões podem ser desenvolvidas de maneira independente

•  Aumenta o trabalho de desenvolvimento

•  A veri!cação do tipo de dispositivo no servidor pode falhar

Vantagens Desvantagens

OK: Páginas complexas e que possuem uma grande diferença de um tamanho físico para o outro; sites que possuem independência de desenvolvimento das versões

RUIM: Páginas simples que podem ter seu conteúdo adaptado facilmente

Web Design Responsivo

Fonte: http://www.instantshift.com/2012/09/06/why-do-you-need-responsive-web-design-infographic/

Ethan Marcotte

Problemas

Um site precisa funcionar em um número de aparelhos, plataforma e navegadores que cresce a cada dia

Web Design Responsivo

• Origem: A List Apart, Ethan Marcotte, 2010

Ao invés de adptar designs desconectados para cada um do número cada vez maior de dispositivos web, podemos

tratá-los como faces da mesma experiência.

Nós podemos projetar para uma experiência ideal de visualização, e embutir tecnologias padronizadas nos

nossos designs não somente para torná-los mais !exíveis, mas mais adaptados para a mídia que os renderiza.

Web Design Responsivo

• Conjunto de abordagens para adaptar o conteúdo à plataforma utilizada pelo usuário

• Páginas se adaptam a todo tipo de dispositivo • Como fazer: design "exível e adaptável • navegador • dispositivo • contexto do usuário

Web Design Responsivo

• Conjunto de abordagens para adaptar o conteúdo à plataforma utilizada pelo usuário

• resoluções diferentes • orientações de tela diferentes • plataformas de interação diversas • otimização de performance

Desafios

•  Diferentes navegadores estão disponíveis •  Chrome, Opera, Safari

•  Capacidade para tecnologias de cada navegador varia muito •  Muitos dos antigos navegadores não suportam um JS ou CSS

corretamente

•  Dispositivos móveis são menores e mais lentos •  Redes móveis podem ter limites de acesso e transferência •  Complicações para conteúdos ricos

•  Interfaces móveis obrigam-nos a repensar nossos websites •  Se ele consegue renderizar uma versão desktop, não quer dizer que

seja a melhor opção

Não responsivo

http://interim.it/

http://www.bostonglobe.com/

Web Desing Responsivo

As  mesmas  páginas    para  todos  os  disposi0vos  

Mas será possível ter somente um conjunto de páginas para todas as mídias?

Web Design Responsivo

• Priorização do Conteúdo • Projetar para o conteúdo que realmente importa • Não apenas um design menor • Completa reestruturação de conteúdo • Conteúdo útil e com foco

Web Design Responsivo

Web Design

Responsivo

Grid Layout Fluido

CSS Media Queries

Imagens e mídias

flexíveis

Controle do

Viewport

Design Responsivo

•  Um conjunto de regras CSS diferente são aplicadas a partir da avaliação de certas características do navegador em uso

Media queries

•  Utilização de medidas proporcionais (%, em) invés tamanhos absolutos (px) para os elementos do layout

Grid Layout Fluido

•  Através de CSS fazer com que imagens mídias se adaptem para caber no layout de acordo com as restrições de tamanho

Imagens e recursos flexíveis

Viewport e Zoom

Viewport

• Um pixel no mundo Desktop • Em um tela de computador normalmente 1px é 1px

• Uma imagem com largura de 200px irá ocupar 200px da tela física do monitor

• Se o tamanho for de!nido em % • o valor será calculado proporcional ao tamanho da janela

do navegador

Viewport

• Os navegadores mobile tentam exibir páginas web feitas para desktop • Ajuste automático do zoom

Viewport

• Viewport é o espaço disponível no navegador para uma página ser renderizada

• tamanho da janela do navegador, menos: • barra de ferramentas • barra de rolagem • navegação

<meta name="viewport" content="">

Viewport

•  <meta name="viewport" content=""> •  Principais parâmetros para content •  width/height: valor ou device-[width|height] •  name=“viewport” content=“width=device-width”

•  initial-scale: de!ne o zoom inicial, 0 a 10 •  name=“viewport” content=“width=device-width, initial-scale=1”

•  user-scalable: yes | no •  name=“viewport” content=“width=device-width, initial-scale=1, user-

scalable=no”

•  minimum-scale, maximum-scale: 0.25 a 10 •  name=“viewport” content=“width=device-width, initial-scale=1, user-

scalable=no, maximum-scale=1.5”

Viewport e CSS

@viewport { width: 320px; height: device-height; zoom: 1; max-zoom: 2; min-zoom: 0.5;

}

Zoom e o Pixel

• O zoom é uma funcionalidade presente em navegadores modernos

• Consideres • uma imagem de 150px em uma página • aplica-se zoom de 200% • a imagem passa a ocupar 300px na tela

Zoom e o Pixel

• O Zoom altera a visualização, mas não modi!ca o código

• a imagem continua a ser descrita com 150px

• 150 CSS pixels + 200% zoom -> 300 pixels físicos

Viewport e o Zoom

• O viewport • diminui quando se aumenta o zoom • aumenta quando se diminui o zoom

• O viewport é medido em CSS pixels

Exemplos

•  Imagem de 320x356px, iPhone, viewport padrão

http://developer.apple.com/library/ios/#documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html

Exemplos

• Viewport com a mesma largura da imagem

<meta name="viewport” content="width=320,initial-scale=1">

http://developer.apple.com/library/ios/#documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html

Aumentando o zoom

http://developer.apple.com/library/ios/#documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html

Diminuindo o zoom

http://developer.apple.com/library/ios/#documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html

Configuração ideal

• A con!guração ideal é aquela que considera a largura do próprio dispositivo como seu viewport

• Os dispositivos móveis têm larguras diversas de telas

<meta name="viewport” content="width=device-width">

Configuração ideal

• O zoom também não deve estar alterado <meta name="viewport” content="width=device-width,initial-scale=1">

Viewport

Sempre habilite o zoom

Media queries

CSS Media Types

• Permitem que se apliquem regras especí!cas à mídia que o renderiza

Media Type Description all Used for all media type devices aural Used for speech and sound synthesizers braille Used for braille tactile feedback devices embossed Used for paged braille printers handheld Used for small or handheld devices print Used for printers projection

Used for projected presentations, like slides screen Used for computer screens tty

Used for media using a fixed-pitch character grid, like teletypes and terminals

tv Used for television-type devices

Exemplos em uma página HTML

!!<link rel="stylesheet” ! href="estilos.css” media="screen"> !!<link rel="stylesheet” ! href="impressao.css” media="print">

Exemplos em um arquivo CSS

!@media screen { ! /* Regras CSS para monitores */ } !!!@media print { ! /* Regras CSS para impressao */ } !

CSS Media queries

• Fornecem um modo de aplicar folhas de estilos seletivamente baseado em algumas características da mídia onde o conteúdo será renderizado

• Tamanho da janela, tamanho da tela, resolução, etc

CSS Media queries

•  Uma media querie consiste em um tipo de mídia e zero ou mais expressões que veri!cam as condições particulares de recursos de mídia •  height •  width •  orientation •  device-width •  device-height

•  as medidas podem ser testadas px, cm, in, ems •  aceitam pre!xos min- max-

•  Media queries -> design condicional

CSS Media Queries

CSS Media Queries: exemplos

<link rel="stylesheet" href="estilos.css” ! media="screen and (color)"> !!@media screen and (min-width: 481px){ } !

@media screen, print and (max-width: 480px){ } !

@media all and (orientation:landscape) { } !

@media screen and (monochrome) { } !

@media screen and (color) { } !

http://www.fa7.edu.br/webmobile/mq_inicial.zip

Exemplo

Exemplo Media Querie

Exemplo de Media Querie

Exemplo de Media Querie

Operadores em Media Queries

•  Conjunção (and) @media (max-width: 600px) and (orientation: portrait) { } •  Disjunção (,) @media (min-width: 300px), (min-height: 300px) { } •  Negação (not) @media not print and (max-width: 600px) and(orientation: portrait) { }

Breakpoints

Breakpoints

• Apesar de existirem vários parâmetros para media queries, apenas alguns são usados de fato

• a grande maioria dos sites não requer todos os parâmetros

• maior parte: altura e largura do dispositivo

• em que momento escrever regras para uma resolução diferente?

Breakpoints

• Ponto em que o layout “quebra” • Delimitador das regras CSS para atenderem novas

especi!cações

• Aquele tamanho em que novos ajustes precisam ser realizados no layout para que ocorra a melhor experiência possível do layout

Abordagens sobre breakpoints

•  No início dos estudos do Web Design Responsivo • breakpoints de acordo com a resolução de dispositivos

especí!cos

•  Para smartphones @media only screen and (min-device-width : 320px) and (max-device-width : 480px)

•  Para desktops @media only screen and (min-width : 1224px)

320 and Up

@media print { } @media only screen and (min-width: 480px) { ... } @media only screen and (min-width: 600px) { ... } @media only screen and (min-width: 768px) { ... } @media only screen and (min-width: 992px) { ... } @media only screen and (min-width: 1382px) { ... }

Less Framework

/* Tablet Layout */ @media only screen and (min-width: 768px) and (max-width: 991px) { ... } /* Mobile Layout */ @media only screen and (max-width: 767px) { ... } /* Layout largo de mobile */ @media only screen and (min-width: 480px) and (max-width: 767px) { ... } /* Retina display */ @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) { ... }

Twitter Bootstrap

/* Telefones em landscape e abaixo */ @media (max-width: 480px) { ... } /* Telefone em landscape a tablet em portrait */ @media (max-width: 767px) { ... } /* tablet em portrait a landscape e desktop */ @media (min-width: 768px) and (max-width: 979px) { ... } /* Desktop grande */ @media (min-width: 1200px) { ... }

Breakpoints

.coluna { "oat: left; width: 25%; }

@media (max-width: 600px) { .coluna { width: 50%; } } @media (max-width: 400px) { .coluna { "oat: none; width: 100%; } }

Breakpoints

• Como encontrar os breakpoints?

• Mais importante do que veri!car todo tamanho de tela de dispositivo é veri!car em que tamanho o layout realmente precisa ser ajustado

Breakpoints

•  Abra sua página original no navegador

•  Redimensione a janela devagar até o design parecer ruim •  se mobile-"rst •  abra pequeno e vá aumentando a janela

•  senão •  abra grande e vá diminuindo a janela

•  Quando achar um ponto em que o design quebra, copie o tamanho da janela •  crie uma media query com esse valor

•  Recarregue a página, veja se as mudanças melhoraram o design, e continue redimensionando pra achar o próximo breakpoint

Responsive Design View Mozilla

Evite device breakpoints

@media only screen and (min-width: 480px) { ... } @media only screen and (min-width: 600px) { ... } @media only screen and (min-width: 768px) { ... } @media only screen and (min-width: 992px) { ... } @media only screen and (min-width: 1382px) { ... }

Utilize content breakpoints

@media (min-width: 592px) { ... } @media (min-width: 656px) { ... } @media (min-width: 752px) { ... } @media (min-width: 1088px) { ... } @media (min-width: 1312px) { ... }

Media queries: Arquivos separados ou tudo junto?

•  É possível criar media queries nas chamadas de folha de estilo

<link rel="stylesheet" type="text/css" media="screen and (min-width:480px)” href="480.css"> <link rel="stylesheet" type="text/css” media="screen and (min-width:768px)” href="768.css"> @media only screen and (min-width: 480px) { ... } @media only screen and (min-width: 768px) { ... }

1 arquivo

• Somente 1 requisição HTTP

• Mais difícil de esquecer de atualizar

• Arquivo !ca muito grande

• Manutenção !ca mais difícil

Vantagens Desvantagens

Vários arquivos

• O arquivo padrão é menor

• Organização melhorada

• Várias requisições HTTP

• Possibilidade de esquecer de atualizar algo

Vantagens Desvantagens

Media queries sobrepostas ou empilhadas

• Sobrepor ou empilhar?

• Não são termos técnicos para o Design Responsivo

• Regras podem ser agrupadas por media queries de forma exclusiva (empilhadas) ou sobreposta (sobrecarregada)

Media queries sobrepostas

@media all and (min-width:500px) { body { background: blue; font-family: serif; } } @media all and (min-width:700px) { body { background: red; color: #FFF; } }

Media queries sobrepostas

@media all and (min-width:700px) { body { background: red; color: white; } } @media all and (min-width:500px) { body { background: blue; font-family: serif; } }

Media queries empilhadas

@media all and (min-width:500px) and (max-width:699px) { body { background: blue; font-family: serif; } } @media all and (min-width:700px) { body { background: red; color: white; font-family: serif; } }

Media types, media queries, navegadores e dispositivos

• Os media types já estão presentes desde CSS2

•  Todos os navegadores modernos suportam os tipos screen e print

•  Smartphones •  celulares antigos aceitavam o tipo handheld, mas

smartphones modernos ignoram • Utilização de media queries para escrever regras

especí!cas • @media screen and (max-width: 480px) { } • muitos navegadores antigos não entendem as medias queries

Media types, media queries, navedarodes e dispositivos

• Operador only • @media only screen and (max-width: 480px) { }

•  igual à querie anterior

• Arranjo técnico para que navegadores antigos reconheçam a media querie como falsa e daí não seja avaliada

Dica

• Utilize apenas o tamanho

@media (min-width: 320px) { } • simples •  fácil • executa em navegadores antigos

http://www.fa7.edu.br/webmobile/cerva.zip

Exemplo

Cervejaria

Cervejaria

1 coluna 3 colunas

Estrutura

• HTML

Princípio de Design

• “Identi!que os aspectos de seu aplicativo que variam e separe-os do que permanece igual” • Pegue o que variar e “encapsule” para que isso não

afete o restante do código • Menos consequências indesejadas • Mais "exibilidade

Alteração

•  Identi!car o que precisa ser alterado

Organizando o CSS

•  Regras de estrutura comuns às versões Desktop e Mobile •  Regras de estrutura especí!cas para Mobile utilizando

media queries

@media screen and (max-width:480px) {

} •  Regras de estrutura especí!cas para Desktop utilizando

media queries

@media screen and (min-width:481px) {

}

Estrutura Comum

Desktop e Mobile

http://www.fa7.edu.br/webmobile/ex_layout.zip

Exercício

Adaptar este conteúdo para uma coluna

Layout Fluido

Layout Fluido

• É a grande estrela hoje do Web Design Responsivo

• Com a quantidade de dispositivos que renderizam página web hoje, não é possível simplesmente copiar medidas diretas do layout

• O Layout Fluido utiliza medidas "exíveis

Layout Fixo

• O layout !xo é aquele que utiliza pixels para determinar as larguras dos elementos do design

• Não se adapta às alterações do campo de visão do dispositivo que o renderiza

Layout fixo

Layout fixo

Layout Fluido

•  Layouts "uidos utilizam unidades "exíveis (% , em) para larguras ao invés de pixels

•  Permite que haja !delidade do design inicial da página

•  Layout se adapta de acordo com o campo de visão

• Desa!o •  Se desapegar das medidas do projeto inicial

Medidas flexíveis

• As mais utilizadas

• %

• em

Medidas Flexíveis

•  % • Utilizado para determinar as larguras dos elementos

• A porcentagem é em relação ao tamanho do elemento pai

• Pode ser utilizado para fontes • Tamanho relativo ao tamanho da fonte do elemento pai

%

body { /* largura total da tela */ width: 100%;

} section {

/* 1/3 da página */ width: 33.33333%;

/* padding de 10% do pai */ padding: 10%;

}

Medidas Flexíveis

•  em • Normalmente utilizado para fontes

• Medida sempre está relacionado à fonte base • Um font-size implícito equivale a 16px na maioria dos

navegadores

•  1em = 100%

•  2em = 200%

em

html { /* font-size base implícito equivalente a 16px */ } p{ /* 16px * 1.125 = 18px */ font-size: 1.125em; } h1 { /*dobro da fonte base */ font-size: 2em; } h2 { /* 50% maior do que o valor base */ font-size: 150%; /* 1.5em */ }

em

• Pode ser usado em qualquer propriedade mas sempre signi!car uma relação com o tamanho da fonte • Útil quando a medida de algum elemento tem

relação com texto, uma medida tipográ!ca • Ex: Espaçamento entre parágrafos

p { margin: 0 1em; }

p { margin: 0 5%; }

Flexibilidade nos elementos filhos

• Vantagem • As medidas "exíveis afetam os elementos !lhos

(aninhados)

• Cenário: • Quando o usuário aumenta a fonte no navegador pra

ler melhor •  todo o layout baseado em em é afetado

Os filhos herdam o tamanho base

<html>

<body>

<article>

<h1>Desenvolvimento Mobile</h1>

<p>Ipsum lorum, ipsum lorum, ipsum lorum.</p>

</article>

</body>

</html>

article {

font-size: 1.25em;

}

h1 {

font-size: 2em;

}

p {

font-size: 0.9em;

}

Quais os valores reais

article { font-size: 1.25em; } h1 { font-size: 2em; } p { font-size: 0.9em; }

rem

•  Nova medida

•  Como o em é relativo ao elemento pai, o gerenciamento do tamanho das fontes pode !car complexo caso existam muitos niveis.

• O rem sempre é relativo ao tamanho base do elemento root, o <html>

•  Para alterar tudo, altere o tamanho do font-size do elemento html

Quais os valores reais

article { font-size: 1.25rem; } h1 { font-size: 2rem; } p { font-size: 0.9rem; }

No caso anterior

• html e o body vão ter os 16 px base

• O article terá 16px * 1.25 = 20px

• O h1 tem 16px * 2 = 32px

• O p vai ter 16px * 0.9 = 14px

viewport-units: vw e vh

• Flexibiliza o tamanho de forma proporcional ao tamanho do navegador • 1vh -> 1% da largura da janela do navegador

• h2 { font-size: 2vw; }

• Pouco suporte dos navegadores

Utilizando o layout fluido

Utilizando o layout fluido

• Mudança de paradigma

• Pode ser uma tarefa árdua quando já se está acostumado a medidas !xas

• O segredo é se concentrar nas proporções dos elementos do layout • Enxergar os as relações entre os elementos do layout

ao invés de seus tamanhos !xos

Layout

.olhar {! width: 25%;! float: left;!}!

Sobre boxes css

• Suponha que existam 2 sections de!nidas pelas regras abaixo, eu teria um linha com 2 colunas?

section {!

!float: left;!!padding: 5%; !!width: 50%; !

} !

Sobre boxes css

• Cada section vai ter 60% da largura da página

• Ficará uma embaixo da outra

• Causa: o padding não é considerado no width

•  Isso é um efeito do box model

Box model

• Não é o width que determina a largura !nal • O tamanho !nal de cada elemento é

section {!!float: left;!!padding: 5%; !!width: 40%; !

} !

Alterando o box-sizing

• Fazer com o width já inclua os valores do padding e do border-width

section {!!!!float: left;!!padding: 5%;!!width: 50%;!

} !

box-sizing: border-box;!!!

Alteração do box-sizing

• Cenário: O width do elemento está de!nido em relação ao elemento pai, mas você gostaria que o padding fosse uma relação com o font-size do elemento

Alteração do box-sizing

section {! box-sizing: border-box;! float: left;! padding: 1em;! width: 50%;!}!

Alterando todo

*{! -webkit-box-sizing: border-box;! -moz-box-sizing: border-box;! box-sizing: border-box;!}!

Utilizando layout fluido

Utilizando layout fluido

• Para converter um layout baseado em pixels para um baseado em proporções:

Novos valores

•  960/960 = 1 (100%) •  240/960 = 0,25 (25%) •  250/960 = 26,041667% •  260/960 = 27,083333%

#principal { ! margin: 10px 260px 0px 250px; !} !!#principal { ! margin: 10px 27.083333% 0px 26.041667%; !} !!

Para tudo funcionar como você espera <meta name="viewport” content="width=device-width, initial-scale=1" />

Evite: <meta name="viewport” content="width=device-width, user-scalable=no" /> <meta name="viewport” content="width=device-width, minimum-scale=1, maximum-scale=1" />

Restrição ao layout fluido

Restrição ao layout fluido

• O layout "uido é a maneira de endereçar uma página aos vários dispositivos de tamanhos diferentes do dia de hoje

• Mas, em certas situações, pode não ser a melhor opção deixar o layout "uir 100% sobre uma tela

Restrição ao Layout Fluido

•  Imagine este design em uma tela muito grande

Restrição ao layout fluido

• Em telas muito grandes, alguns layouts "uidos podem !car muito “esticados” • espaçamentos entre elementos muito grandes

• É interessante pensar em um limite mínimo e máximo de tela em px • max-width • min-width

Restrição ao Layout Fluido

body {! max-width: 2000px;! margin-left: auto;! margin-right: auto;! width: 100%;!}!

Imagens flexíveis

Imagens flexíveis

•  As imagens também precisam se adequar ao espaços de acordo com a resolução do aparelho

•  Regra CSS img {

max-width: 100%; } limita a largura das imagens à largura do elemento que as contém

Recursos flexíveis

•  É possível aplicar a mesma ideia para outros recursos

img, iframe, object, embed, video { height: auto; max-width: 100%; }

Mobile First

Qual será a melhor estratégia?

Mobile

• Maior diferença • Espaço dísponível para o conteúdo • Existe o Scroll

• Mais "exível • rua, praia, carro, casa, cama, sofá • Touch-screen • Limitações • Tela menor, rede lenta, hardware mais lento, toque

menos preciso que o mouse

Abordagens ágeis

Kent Beck

TDD

Baby Steps

Mobile First

Versão mais limitada •  Conteúdo priorizado

Versão menos limitada

Progressive Enhancement

Layout mais simples Imagens menores CSS e JS

Mais possibilidade de conteúdo Layout com colunas ? Imagens maiores

Layout widescreen Imagens maiores

Melhoria Progressiva

• O projeto web através de uma série de camadas

Conteúdo (HTML)

•  Somado à marcação básica para criar um documento que possa ser renderizados por vários navegadores

Apresentação (CSS)

•  Definição de cores, tipografia e organização do conteúdo

Comportamento (JS)

•  Camada que dá certo dinamismo ao conteúdo apresentado

Versão Mobile Específica

User-Agent

• Cabeçalho enviado através de requisição HTTP

• Cada navegador envia um valor único através do USER-AGENT

• É a informação mais con!ável que o servidor tem sobre qual é o navegador

http://detectmobilebrowsers.com/

O script

<?php

$useragent=$_SERVER['HTTP_USER_AGENT'];

if(preg_match('/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i',$useragent)||preg_match('/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|"y(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i',substr($useragent,0,4))) header('Location: http://detectmobilebrowser.com/mobile'); ?>

XHTML-MP

• É um subconjunto do HTML projetado para funcionar adequadamente em navegadores mobile diferentes. •  Ideal para navegadores de capacidade mediana

Projetando formulários

Projetando formulário

• Costuma-se dizer que dispositivos móveis são muito mais utilizados para consumos de informação

Projetando formulários

•  Formulários em dispositivos móveis são limitados por diversos fatores •  largura •  capacidade de entrada de dados

•  Checklist básico •  Minimize o número de telas pelas quais o usuário tem que

navegar •  Quando possível, procure usar controles de formulários nativos

da web ao invés dos customizados •  Utilize labels na parte superior ao invés de à esquerda/direita •  Permita ao usuário a opção de exibir os caracteres da senha •  Utilize os novos inputs do HTML5

Labels superiores

Labels superiores

• Não há necessidade de CSS complicados ou tabelas para montar o formulário • Os labels permanecem visíveis no momento do

zoom do formulário •  Internacionalização facilitada: a tradução de

labels não altera o "uxo das informações

Campo Senha

• Permita ao usuário a opção de exibir os caracteres quando ele estiver digitando senhas

Inputs HTML5

•  HTML5 possui mais de 12 novos tipos de input

•  Não há problema para navegadores antigos porque são renderizados como inputs do tipo text

•  2 melhorias • Os novos tipos de input permitem que os navegadores

renderizem UI mais complexas para certos tipos de campos • Os novos atributos permitem uma interação melhorada

ou outras funcionalidades para o campo do formulário

Inputs HTML5

Tipo do Input Descrição

email! Indica que o campo é um endereço de email

url! Indica que o campo é uma URL

number! Indica que o campo deve ser uma entrada númerica

range! Indica que o campo tem um valor mínimo e máximo

color! Indica que o campo tem um valor para cor

date! Indica que o campo contém uma data ou horário

search! Indica que o campo é usado para realizar funcionalidades de pesquisa

Padrões de Navegação Mobile

Top nav

• Uma das soluções mais fáceis de implementar é manter a navegação no topo

Top nav

• Fácil de implementar

• Sem necessidade de JS

• Sem !rulas CSS

• Pode ocasionar problemas de altura

• Pode ocasionar problemas com links muito próximos

Vantagens

Âncora no rodapé

• Mantém a lista de navegação no rodapé do site e um link no cabeçalho direcionando para esta navegação

Âncora no rodapé

•  Fácil de implementar

•  Sem necessidade de JS

•  Sem !rulas CSS

•  Botão único no cabeçalho

• Pode desorientar algumas pessoas

• Alguns podem achar a solução deselegante

Vantagens

Menu de Seleção

• É possível transformar um menu em uma lista de links em um menu de seleção

Menu de Seleção

•  Não ocupa espaço na tela

• Mantém toda a interação no cabeçalho

•  Facilmente identi!cável

• Di!culdade para estilizar select

• Quando há submenus

• Necessita de JS

Vantagens Desvantagens

Alternância

• Semelhante a “Âncora no rodapé”, mas apresenta o menu próximo. Boa aparência e fácil de implementar.

Alternância

• Mantém a interação em um só local

• Elegante

• Facilmente escalável

• Performance

• Precisa de JS

Vantagens Desvantagens

Slide à esquerda

• O menu de navegação é acessado através de um ícone que move o conteúdo para a direita, exibindo os links

Slide à esquerda

• Não ocupa espaço na tela

• Mantém a interação próxima

• Boa aparência

• Técnica avançada

• Não escala bem

• Potencialment confuso

Vantagens Desvantagens

Somente no rodapé

• Semelhante a Top Nav, mas sem âncora no cabeçalho

Somente no rodapé

• Não ocupa espaço no cabeçalho

• O conteúdo principal !ca destacado

• Difícil de encontrar e acessar o menu

• É preciso percorrer todo o conteúdo

Vantagens Desvantagens

Pull Down

• Revela o menu através de movimento de slide

Pull Down

• Convenção para smartphones

• Técnica avançada

• Precisa de uma instrução de uso

Vantagens

XHTML-MP

• Links • Não suporta o atributo target • Dá suporte ao atributo accesskey • 0 a 9

• Não suporta iframes • Pre!ra lista ordenadas • <ul> <ol>

Referências

• https://developer.mozilla.org/docs/CSS/Media_queries • http://www.w3.org/TR/css3-mediaqueries/