Responsive Web Design

Talita Pagani MStech | @talitapagani

Quem sou

• Programadora / Tester na Mstech

• Bacharel em Ciência da Computação

– Pós-graduanda em Gerenciamento de Projetos

• Articulista no Tableless

• Palestrante em eventos de front-end e curadora do FrontInterior

Alinhando expectativas

O que é este minicurso

• Introdução ao conceito de Responsive Web Design (RWD) ou Design Responsivo

• Apresentações de exemplos e fundamentos básicos de RWD

• Bootstrap para quem deseja iniciar o desenvolvimento de sites responsivos

O que não é este minicurso

• Curso avançado de desenvolvimento web

• Curso de Mobile First (apesar de ser mencionado)

• Curso de HTML, CSS e padrões web

Conceito

Saindo da zona de conforto

Fonte: http://www.siliconbeachtraining.co.uk/blog/wp-content/uploads/2012/05/Responsive-Web-Design.jpg

Jeffrey Veen

“Dia-a-dia, cresce o número de dispositivos, plataformas e navegadores em que o seu site precisa funcionar. O Design Responsivo representa uma mudança fundamental na forma como iremos construir sites na próxima década.”

“O número total de pessoas acessando a web através de dispositivos móveis irá superar o acesso via desktop em 2015.”

International Data Corporation (IDC)

http://www.idc.com/getdoc.jsp?containerId=prUS23028711

Responsive Design é...

• Adaptação de páginas web para

– Diferentes resoluções

– Diferentes orientações de tela

– Distintas plataformas de interação

– Otimização de performance

Responsive Design não é...

• Adaptação de layout considerando apenas dispositivos diferentes

• Apenas layout fluído

• Layout adaptativo

• Miniaturização de um site

Estes sites possuem um layout responsivo...

Este não...

Muito menos este!

Veja você mesmo: http://www2.warnerbros.com/spacejam/movie/jam.htm

Quem “inventou” isso?

Fonte: http://www.alistapart.com/articles/responsive-web-design

Cenário atual

Fonte: http://www.artistechnewmedia.com/thenest/wp-content/uploads/2012/03/responsive-web-design.jpg

Fonte: http://bradfrostweb.com/blog/web/mobile-first-responsive-web-design/

Mobile no Brasil

2008: 794 usuários de telefonia móvel / 100 mil habitantes Fonte: IBGE

2011: 40 milhões de usuários de celular com acesso à internet

Fonte: G1

Conceitos de um layout responsivo

• Controle do viewport

• Grids adaptativas

• Imagens flexíveis

• CSS Media Queries

Viewport

Fonte: http://www.iconfinder.com/icondetails/81865/512/_icon

Viewport

• Aréa de visualização onde o site aparece

Largura de tela ≠ Resolução

• Customização do viewport: definir resolução inicial e evitar miniaturização

Páginas sem definição de viewport

Fonte: http://thecodinghumanist.com/blog/archives/2012/1/25/using-the-viewport-meta-tag-for-fun-and-profit http://www.html5today.it/tutorial/mobile-web-development-meta-tag-viewport-visualizzazione-ottimale

Metatag viewport

<name="viewport" content="">

• Parâmetros – width/height: valor ou device-[width/height]

<name="viewport" content=“width=device-width">

– initial-scale: 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, maximum-scale=1.5">

Páginas com definição de viewport

Fonte: http://thecodinghumanist.com/blog/archives/2012/1/25/using-the-viewport-meta-tag-for-fun-and-profit http://www.html5today.it/tutorial/mobile-web-development-meta-tag-viewport-visualizzazione-ottimale

Futura implementação para CSS3

@viewport {

width: 320px;

height: device-height;

zoom: 1;

max-zoom: 2;

min-zoom: 0.5;

}

Fonte Aa

Fontes

body {

font: normal 100% Cambria, Georgia, serif;

}

• Fonte padrão de 16px na maioria dos browsers

• Para os demais elementos, uso da medida relativa em – Tamanho desejado ÷ contexto = resultado

– Ex.: 24 ÷ 16 = 1.5

h1 {

font-size: 1.5em; /* 24px / 16px */

font-style: italic;

font-weight: normal;

}

Fontes

• Para este código h1 span { } • Onde desejamos ter uma fonte de 11px, iremos

dividir a fonte desejada pelo novo contexto, 24px – 11 ÷ 24 = 0.458333333333333 – Contexto = tamanho da fonte do elemento

ancestral

h1 span {

font: bold 0.458333333333333em Calibri, Optima, Arial, sans-serif; /* 11px / 24px */

color: #747474;

letter-spacing: 0.15em;

}

Grids

Fonte: http://www.agencyofrecord.com/library/resources338/images/articles/responsive_web_design_grids.jpg

Grid

Grid

Grid 940px

460px 460px

40px

20px

Grids Flexíveis

• Transforme as larguras fixas em larguras variáveis

– Mesma fórmula: Tamanho desejado ÷ contexto = resultado

– Unidade diferente: %

<div> width: 960px

<header>

width: 940px; margin-left: 10px; margin-right: 10px

<article>

width: 570px; margin-left: 10px; margin-right: 10px; padding-right: 10px;

<aside>

width: 315px; margin-left: 10px; margin-right: 10px; padding-left:

25px;

<section> width: 160px

<section> width: 160px

<section> width: 160px

<div> max-width: 960px

<header>

width: 940 / 960; margin-left: 10px; margin-right: 10px

<article>

width: 570 / 960; margin-left: 10px; margin-right: 10px; padding-right: 10px;

<aside>

width: 315 / 960; margin-left: 10px; margin-right: 10px;

padding-left: 25px;

<section> width: 160

/ 570

<section> width: 160

/ 570

<section> width: 160

/ 570

<div> max-width: 960px

<header>

width: 97.91666666666667%; margin-left: 10px; margin-right: 10px

<article>

width: 59.375%; margin-left: 10px; margin-right: 10px; padding-right: 10px;

<aside>

width: 32.8125%; margin-left: 10px; margin-right: 10px;

padding-left: 25px;

<section> width:

28.07017543859649%

<section> width:

28.07017543859649%

<section> width:

28.07017543859649%

Margin e padding relativos

• Margin

– Considera a largura do elemento-pai

• Padding

– Considera a largura do próprio elemento

<div> max-width: 960px

<header>

width: 97.91666666666667%; margin-left: 10 / 940; margin-right: 10 / 940

<article>

width: 59.375%; margin-left: 10 / 940; margin-right: 10 / 940; padding-right: 10 / 570;

<aside>

width: 32.8125%; margin-left: 10 / 940; margin-right: 10 / 940;

padding-left: 25 / 315;

<section> width:

28.07017543859649%

<section> width:

28.07017543859649%

<section> width:

28.07017543859649%

<div> max-width: 960px

<header>

width: 97.91666666666667%; margin-left: 1.04166666666667%; margin-right: 1.04166666666667%

<article>

width: 59.375%; margin-left: 1.04166666666667%; margin-right:

1.04166666666667%; padding-right: 1.75438596491228%;

<aside>

width: 32.8125%; margin-left: 1.04166666666667%; margin-

right: 1.04166666666667%; padding-left:

7.93650793650794%; <section>

width: 28.07017543859649%

<section> width:

28.07017543859649%

<section> width:

28.07017543859649%

Considerando a largura do container também de forma relativa, dado o contexto de 1280px para a página

<div> width: 960 / 1280

<header>

width: 97.91666666666667%; margin-left: 1.04166666666667%; margin-right: 1.04166666666667%

<article>

width: 59.375%; margin-left: 1.04166666666667%; margin-right:

1.04166666666667%; padding-right: 1.75438596491228%;

<aside>

width: 32.8125%; margin-left: 1.04166666666667%; margin-

right: 1.04166666666667%; padding-left:

7.93650793650794%; <section>

width: 28.07017543859649%

<section> width:

28.07017543859649%

<section> width:

28.07017543859649%

<div> width: 75%

<header>

width: 97.91666666666667%; margin-left: 1.04166666666667%; margin-right: 1.04166666666667%

<article>

width: 59.375%; margin-left: 1.04166666666667%; margin-right:

1.04166666666667%; padding-right: 1.75438596491228%;

<aside>

width: 32.8125%; margin-left: 1.04166666666667%; margin-

right: 1.04166666666667%; padding-left:

7.93650793650794%; <section>

width: 28.07017543859649%

<section> width:

28.07017543859649%

<section> width:

28.07017543859649%

Imagens

Imagens dimensionáveis

• Utilize também medidas relativas

• Inserir a imagem em um container com dimensões relativas

<figure>

<img src="robot.jpg"

alt="" />

<figcaption>Lo, the robot

walks</figcaption>

</ figure>

figure {

width: 48.7341772%;

}

figure img {

max-width: 100%;

}

figure {

width: 48.7341772%;

}

img,

embed,

object,

video {

max-width: 100%;

}

Ou... (ainda não implementado na especificação)

<picture>

<source media=“(orientation:

landscape)” srcset=“long1.jpg 1x,

long2.jpg 2x” />

<source media=“(orientation:

portrait)” srcset=“tall1.jpg 1x,

tall2.jpg 2x” />

<img src=“fallback.jpg” />

</picture>

Mas já é válido para vídeos

<video>

<source type=“video/webm”

src=“small.webm” media=“all and(max-

width: 480px)”/>

<source type=“video/webm”

src=“large.webm” media=“all and(min-

width: 481px)”/>

</video>

Background também pode ser responsivo

• Propriedade background-size do CSS3

– background-size: <largura> <altura>;

http://www.w3schools.com/css3/tryit.asp?filename=trycss3_background-size

Media Queries

Fonte: http://dribbble.s3.amazonaws.com/users/4465/screenshots/494207/responsive_design.png

Media Queries

• Expressões condicionais para aplicar diferentes regras CSS dependendo da largura do viewport, orientação da tela e/ou aspect ratio.

Sintaxe básica

@media <mediatype> <operador> <característica>

• Mediatype: all, screen, print, braille, print, handheld, etc...

• Operadores lógicos: and / or

• Característica: width, height, device-width, device-height, orientation, aspect-radio, etc...

Exemplos

• screen and (max-width:480px) – Resolução máxima no viewport de 480px

• @media all and (orientation:landscape)

– Orientação “paisagem”

• @media screen and (device-aspect-ratio: 16/9)

– Monitores 16:9 (ex.: resolução de 1280 x 720px)

• @media screen and (min-width: 400px) and (max-width: 700px) – Tela com resolução mínima de 400px e máxima de 700px

Formas de aplicar

• Propriedade “media” da tag <link> – <link rel="stylesheet" media="screen and (max-width: 600px)" href="small.css" />

• Direto no CSS

– @media screen and (min-width: 600px) and (max-width: 900px) { .class { background: #333; } }

Definindo ranges

• Preciso criar folhas de estilo para todas as resoluções possíveis e imagináveis?

– NÃO!

– Defina ranges (faixas de valores)

• 320px (iPhone retrato)

• 480px (iPhone paisagem)

• 768px (iPad retrato)

• 1024px (iPad paisagem)

Fonte: http://www.metaltoad.com/blog/simple-device-diagram-responsive-design-planning

/* WIDE DESKTOP LAYOUT

----------------------------------------------- */

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

/* TABLET LAYOUT

----------------------------------------------- */

@media screen and (min-width: 768px) and (max-width: 991px) { }

/* MOBILE LAYOUT (PORTRAIT/320PX)

----------------------------------------------- */

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

/* WIDE MOBILE LAYOUT (LANDSCAPE/480PX)

----------------------------------------------- */

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

Experiência do Usuário

Diferentes dispositivos, diferentes interações

• Botões

• Campos de formulários

• Áreas de clique

Fonte: http://mobile.smashingmagazine.com/2012/06/28/responsive-menus-enhancing-navigation-on-mobile-websites/

Faça wireframes e protótipos

Fonte: http://dolody.com/#!/masterpiece/responsive-design-streamlining-your-process.html

Mobile First

• Projete e otimize primeiro para telas menores

• Progressive Enhancement

– Assegure as funcionalidades básicas a qualquer dispositivo

– Versões mais avançadas podem ser visualizadas em browsers e dispositivos melhores

Progressive Enhancement X

Graceful Degradation

Usabilidade

• Foco em tarefas primárias • Eleve o conteúdo com o qual as pessoas

se importam – Liste as funcionalidades que os usuários

possam gostar – Determine a audiência

• Dê ao usuário um caminho lógico a seguir

• Utilização simples e óbvia • Terminologia “centrada no usuário”

Usabilidade

• Qual a necessidade de seus usuários ao acessar o seu site através de um dispositivos móvel?

• Que recursos ele utilizam?

• Quais recursos são cruciais para eles quando estão acessando via mobile?

• Quais as frustrações?

• Quais dispositivos são utilizados para este acesso?

Ferramentas

• Golden Grid System – http://goldengridsystem.com/

• The 1140 CSS Grid – http://cssgrid.net/

• Fluid Grids – http://csswizardry.com/fluid-grids/

• The Responsive Calculator – http://rwdcalc.com/

• FitText – http://fittextjs.com/

• Respond.js

– https://github.com/scottjehl/Respond

• Fluid Grids – http://csswizardry.com/fluid-grids/

• The Responsive Calculator – http://rwdcalc.com/

• Responsive Grid System – http://www.responsivegridsystem.com/

• CSS3-mediaqueries-js – http://code.google.com/p/css3-mediaqueries-

js/

• Bootstrap – http://twitter.github.com/bootstrap/

• Responsive Plugin – http://www.responsiveplugin.com/

• Gridpak – http://gridpak.com/

Exemplos

http://www.themaninblue.com/experiment/ResolutionLayout/

http://www.alistapart.com/d/responsive-web-design/ex/ex-site-larger.html

http://wet-boew.github.com/wet-boew/index-eng.html

http://www.anderssonwise.com/

http://foodsense.is/

http://forefathersgroup.com/

http://2012.newadventuresconf.com/

Muitos outros exemplos aqui:

http://mediaqueri.es/

Conclusões

Vantagens do Design Responsivo

• Um único código

• Uma única URL

• Economia de tempo e dinheiro

• Melhoria para SEO

• Melhor desempenho

• Amplo suporte

Design Responsivo ou versão mobile?

Design Responsivo

• Reduzir algumas informações

• Rearranjo de layout para beneficiar diferentes resoluções de tela

• Utilizar os padrões de interface de mobile

Versão mobile

• Subconjunto de funcionalidades da aplicação desktop

• Tarefas mais focadas

• Corte de alguns caminhos de interação

Design Responsivo ou versão mobile?

Design Responsivo

Sites de conteúdo

Versão mobile

Aplicações

Referências

Ethan, M. “Responsive Web Design”, 2010. Disponível em: <http://www.alistapart.com/articles/responsive-web-design/>.

Dagobert. “Introduction au Responsive Web Design”, 2012. Disponível em: <http://www.slideshare.net/agencedagobert/le-responsive-design-par-dagobert>.

Pagani, T. “Usabilidade em Dispositivos Móveis”, 2012. Disponível em: <http://talitapagani.github.com/FrontInCuritiba-2012/>.

Byttebier, T. “Responsive Web Design”, 2011. Disponível em: < http://www.slideshare.net/bytte/responsive-web-design-10389263>.

Referências

W3C. “Media Queries”, 2012. Disponível em: <http://www.w3.org/TR/css3-mediaqueries/>.

Web Designer Wall. “CSS3 Media Queries”. 2010. Disponível em: <http://webdesignerwall.com/tutorials/css3-media-queries>.

Eis, D. “Introdução sobre Media Queries”, 2009. Disponível em: <http://tableless.com.br/introducao-sobre-media-queries/>.

Bovens, A. “Responsive design: techniques and tricks to prepare your website for the multi-screen future”, 2012. Disponível em: < http://www.slideshare.net/andreasbovens/responsive-design-techniques-and-tricks-to-prepare-your-websites-for-the-multiscreen-future>.

Referências

Bovens, A. “An introduction to meta viewport and @viewport”, 2011. Disponível em: < http://dev.opera.com/articles/view/an-introduction-to-meta-viewport-and-viewport/>.

Marcotte, E. “Responsive Web Design”. New York: A Book Apart, 2011.

Obrigada.

Responsive Web Design

Talita Pagani MStech | @talitapagani | talita.cpb@gmail.com

Perguntas?