VIacuteTOR TEIXEIRA | PRIMEIT SAPO UX Team

INTRODUCcedilAtildeO AO RESPONSIVE WEB DESIGN

vsdteixeira

vteixeiraprimeitpt

PrimeAcademy

Maio 2014

RESPONSIVE WEB DESIGN Ethan Marcote

MOBILE FIRST Luke Wroblewski

MOBILE UX - PRINCIacutePIOS BAacuteSICOS Viacutetor Teixeira - httppaeggslpt

3

2

BIBLIOGRAFIA

1

RESPONSIVE WEB DESIGN Ethan Marcote

MOBILE FIRST Luke Wroblewski

MOBILE UX - PRINCIacutePIOS BAacuteSICOS Viacutetor Teixeira - httppaeggslpt

3

2

BIBLIOGRAFIA

1

ALGUNS NUacuteMEROS

1900MUtilizadores globais de internet em

dispositivos moacuteveis em 2015

1700MUtilizadores globais de internet em

dispositivos fixos em 2015

$$$$$$$$$$$

Fonte httpwwwbusinessinsidercommobile-will-eclipse-desktop-by-2014-2012-6

Isto jaacute estaacute a acontecer Eacute necessaacuteria uma soluccedilatildeohellip

RESPONSIVE WEB DESIGN RWD

Adaptar o layout e interaccedilatildeo de um site a um variado

nuacutemero de resoluccedilotildees densidades de ecratilde e modos de

interaccedilatildeo

Natildeo satildeo apenas resoluccedilotildees diferentes satildeo tambeacutem

diferentes contextos e formas de interaccedilatildeo

ALICERCES DO RWD

Fluid Grids

CSS Media Queries

Imagens e Media flexiacuteveis

Mobile First ldquoPreocupaccedilatildeo com contextordquo

RWD

VANTAGENS

1 CONTEUacuteDO

1 COacuteDIGO

1 URL

O mesmo conteuacutedo onde quer que seja

visto

Uacutenica base de coacutedigo para manter

Acabam-se os m e os mobile

UMA FUNDACcedilAtildeO FLUIacuteDA

FLUID GRIDS

SCROLL FREE

amp

COMPOSICcedilAtildeO EM PX

590PX 590PX

1190PX

190PX 190PX 190PX 190PX 190PX 190PX

10PX

NAtildeO ESQUECER DA META

ltmeta name=ldquoviewportrdquo content=ldquowidth=device-width initial-scale=10rdquogt

A largura do nosso site fica optimizada para o dispositivo em que estaacute a ser visto

SERAacute QUE ESTAacute BEM ASSIM

gridhtml

httppau7qslpt

RESPONSIVE WEB DESIGN RWD

Adaptar o layout e interaccedilatildeo de um site a um variado

nuacutemero de resoluccedilotildees densidades de ecratilde e modos de

interaccedilatildeo

Natildeo satildeo apenas resoluccedilotildees diferentes satildeo tambeacutem

diferentes contextos e formas de interaccedilatildeo

ALICERCES DO RWD

Fluid Grids

CSS Media Queries

Imagens e Media flexiacuteveis

Mobile First ldquoPreocupaccedilatildeo com contextordquo

RWD

VANTAGENS

1 CONTEUacuteDO

1 COacuteDIGO

1 URL

O mesmo conteuacutedo onde quer que seja

visto

Uacutenica base de coacutedigo para manter

Acabam-se os m e os mobile

UMA FUNDACcedilAtildeO FLUIacuteDA

FLUID GRIDS

SCROLL FREE

amp

COMPOSICcedilAtildeO EM PX

590PX 590PX

1190PX

190PX 190PX 190PX 190PX 190PX 190PX

10PX

NAtildeO ESQUECER DA META

ltmeta name=ldquoviewportrdquo content=ldquowidth=device-width initial-scale=10rdquogt

A largura do nosso site fica optimizada para o dispositivo em que estaacute a ser visto

SERAacute QUE ESTAacute BEM ASSIM

gridhtml

httppau7qslpt

Natildeo satildeo apenas resoluccedilotildees diferentes satildeo tambeacutem

diferentes contextos e formas de interaccedilatildeo

ALICERCES DO RWD

Fluid Grids

CSS Media Queries

Imagens e Media flexiacuteveis

Mobile First ldquoPreocupaccedilatildeo com contextordquo

RWD

VANTAGENS

1 CONTEUacuteDO

1 COacuteDIGO

1 URL

O mesmo conteuacutedo onde quer que seja

visto

Uacutenica base de coacutedigo para manter

Acabam-se os m e os mobile

UMA FUNDACcedilAtildeO FLUIacuteDA

FLUID GRIDS

SCROLL FREE

amp

COMPOSICcedilAtildeO EM PX

590PX 590PX

1190PX

190PX 190PX 190PX 190PX 190PX 190PX

10PX

NAtildeO ESQUECER DA META

ltmeta name=ldquoviewportrdquo content=ldquowidth=device-width initial-scale=10rdquogt

A largura do nosso site fica optimizada para o dispositivo em que estaacute a ser visto

SERAacute QUE ESTAacute BEM ASSIM

gridhtml

httppau7qslpt

ALICERCES DO RWD

Fluid Grids

CSS Media Queries

Imagens e Media flexiacuteveis

Mobile First ldquoPreocupaccedilatildeo com contextordquo

RWD

VANTAGENS

1 CONTEUacuteDO

1 COacuteDIGO

1 URL

O mesmo conteuacutedo onde quer que seja

visto

Uacutenica base de coacutedigo para manter

Acabam-se os m e os mobile

UMA FUNDACcedilAtildeO FLUIacuteDA

FLUID GRIDS

SCROLL FREE

amp

COMPOSICcedilAtildeO EM PX

590PX 590PX

1190PX

190PX 190PX 190PX 190PX 190PX 190PX

10PX

NAtildeO ESQUECER DA META

ltmeta name=ldquoviewportrdquo content=ldquowidth=device-width initial-scale=10rdquogt

A largura do nosso site fica optimizada para o dispositivo em que estaacute a ser visto

SERAacute QUE ESTAacute BEM ASSIM

gridhtml

httppau7qslpt

VANTAGENS

1 CONTEUacuteDO

1 COacuteDIGO

1 URL

O mesmo conteuacutedo onde quer que seja

visto

Uacutenica base de coacutedigo para manter

Acabam-se os m e os mobile

UMA FUNDACcedilAtildeO FLUIacuteDA

FLUID GRIDS

SCROLL FREE

amp

COMPOSICcedilAtildeO EM PX

590PX 590PX

1190PX

190PX 190PX 190PX 190PX 190PX 190PX

10PX

NAtildeO ESQUECER DA META

ltmeta name=ldquoviewportrdquo content=ldquowidth=device-width initial-scale=10rdquogt

A largura do nosso site fica optimizada para o dispositivo em que estaacute a ser visto

SERAacute QUE ESTAacute BEM ASSIM

gridhtml

httppau7qslpt

UMA FUNDACcedilAtildeO FLUIacuteDA

FLUID GRIDS

SCROLL FREE

amp

COMPOSICcedilAtildeO EM PX

590PX 590PX

1190PX

190PX 190PX 190PX 190PX 190PX 190PX

10PX

NAtildeO ESQUECER DA META

ltmeta name=ldquoviewportrdquo content=ldquowidth=device-width initial-scale=10rdquogt

A largura do nosso site fica optimizada para o dispositivo em que estaacute a ser visto

SERAacute QUE ESTAacute BEM ASSIM

gridhtml

httppau7qslpt

FLUID GRIDS

SCROLL FREE

amp

COMPOSICcedilAtildeO EM PX

590PX 590PX

1190PX

190PX 190PX 190PX 190PX 190PX 190PX

10PX

NAtildeO ESQUECER DA META

ltmeta name=ldquoviewportrdquo content=ldquowidth=device-width initial-scale=10rdquogt

A largura do nosso site fica optimizada para o dispositivo em que estaacute a ser visto

SERAacute QUE ESTAacute BEM ASSIM

gridhtml

httppau7qslpt

COMPOSICcedilAtildeO EM PX

590PX 590PX

1190PX

190PX 190PX 190PX 190PX 190PX 190PX

10PX

NAtildeO ESQUECER DA META

ltmeta name=ldquoviewportrdquo content=ldquowidth=device-width initial-scale=10rdquogt

A largura do nosso site fica optimizada para o dispositivo em que estaacute a ser visto

SERAacute QUE ESTAacute BEM ASSIM

gridhtml

httppau7qslpt

NAtildeO ESQUECER DA META

ltmeta name=ldquoviewportrdquo content=ldquowidth=device-width initial-scale=10rdquogt

A largura do nosso site fica optimizada para o dispositivo em que estaacute a ser visto

SERAacute QUE ESTAacute BEM ASSIM

gridhtml

httppau7qslpt

SERAacute QUE ESTAacute BEM ASSIM

gridhtml

httppau7qslpt

DE PX PARA

Para comeccedilar um pouco de matemaacuteticahellip

target context = result

COMPOSICcedilAtildeO EM

491666667 491666667

991666667

158333333

158333333

158333333

158333333

158333333

158333333

08333333

11901200

5901200

1901200

101200

Praacutetica

Quando estiverem mais agrave vontade podem parar de passar pixels para percentagens e comeccedilar a pensar nas relaccedilotildees baseadas nas proporccedilotildees entre elementos e seus contentores diretamente

DICAS

Natildeo arredondar valoreshellip 33+33+33 = 100

Escrever o racional em comentaacuterio ao lado da regra

hellip E AGORA

grid-fluidhtml

httppauj3slpt

COMPOSICcedilAtildeO EM

491666667 491666667

991666667

158333333

158333333

158333333

158333333

158333333

158333333

08333333

11901200

5901200

1901200

101200

Praacutetica

Quando estiverem mais agrave vontade podem parar de passar pixels para percentagens e comeccedilar a pensar nas relaccedilotildees baseadas nas proporccedilotildees entre elementos e seus contentores diretamente

DICAS

Natildeo arredondar valoreshellip 33+33+33 = 100

Escrever o racional em comentaacuterio ao lado da regra

hellip E AGORA

grid-fluidhtml

httppauj3slpt

Praacutetica

Quando estiverem mais agrave vontade podem parar de passar pixels para percentagens e comeccedilar a pensar nas relaccedilotildees baseadas nas proporccedilotildees entre elementos e seus contentores diretamente

DICAS

Natildeo arredondar valoreshellip 33+33+33 = 100

Escrever o racional em comentaacuterio ao lado da regra

hellip E AGORA

grid-fluidhtml

httppauj3slpt

hellip E AGORA

grid-fluidhtml

httppauj3slpt

CONTEUacuteDO FLEXIacuteVEL

IMAGENS BEM COMPORTADAS

NAtildeO EXCEDE O SEU CONTENTOR

))

SERAacute QUE SE PORTAM BEM

imagehtml

httppauj7slpt

IMAGENS BEM COMPORTADAS

NAtildeO EXCEDE O SEU CONTENTOR

))

SERAacute QUE SE PORTAM BEM

imagehtml

httppauj7slpt

SERAacute QUE SE PORTAM BEM

imagehtml

httppauj7slpt

MAX-WIDTH 100

img embed object video

max-width100

AGORA DEVEM PORTAR-SE MELHOR

image-flexiblehtml

httppaujdslpt

AGORA DEVEM PORTAR-SE MELHOR

image-flexiblehtml

httppaujdslpt

IE STUFF

IE6 specific

img width100

CUIDADO

Devido agraves imagens serem as mesmas de desktop os sites tecircm o potencial de ficar pesados para ambiente mobile

ltpicturegt element srcset etc em desenvolvimentohellip mas ainda eacute cedo para usarhellip

JS to the rescue [For nowhellip] httpinksapoptui-elementsimagestargeting-multiple-devices httpsgithubcomscottjehlpicturefill

+

JS

CUIDADO

Devido agraves imagens serem as mesmas de desktop os sites tecircm o potencial de ficar pesados para ambiente mobile

ltpicturegt element srcset etc em desenvolvimentohellip mas ainda eacute cedo para usarhellip

JS to the rescue [For nowhellip] httpinksapoptui-elementsimagestargeting-multiple-devices httpsgithubcomscottjehlpicturefill

+

JS

MEDIA QUERIES

Identifica tipos de media e inspeciona as caracteriacutesticas

fiacutesicas dos dispositivos e browsers que apresentam o

conteuacutedo

TIPOS DE MEDIA

all

braille

embossed

handheld

print

projection

screenspeech

tty

tv

Mais informaccedilatildeo httpwwww3orgTRCSS21mediahtmlmedia-types

Identifica tipos de media e inspeciona as caracteriacutesticas

fiacutesicas dos dispositivos e browsers que apresentam o

conteuacutedo

TIPOS DE MEDIA

all

braille

embossed

handheld

print

projection

screenspeech

tty

tv

Mais informaccedilatildeo httpwwww3orgTRCSS21mediahtmlmedia-types

TIPOS DE MEDIA

all

braille

embossed

handheld

print

projection

screenspeech

tty

tv

Mais informaccedilatildeo httpwwww3orgTRCSS21mediahtmlmedia-types

FEATURES QUE PODEM SER TESTADAS

Mais informaccedilatildeo httpwwww3orgTRcss3-mediaqueriesmedia1

width min|max prefixes

height device-width device-height orientation portrait | landscape

aspect-ratio

device-aspect-ratio color color-index monochrome resolution

scan grid

ANATOMIA DE UMA MEDIA QUERY

media screen and (min-width1024px) body Your rules herehellip

hellipeacutes do tipo lsquoscreenrsquo hellipe tens pelo menos 1024px de largura

UMA QUESTAtildeO DE REGRAS

grid-responsivehtml

httppaujzslpt

UMA QUESTAtildeO DE REGRAS

grid-responsivehtml

httppaujzslpt

POSSIBILIDADE DE CHAINING

media screen and (min-width480px) and (orientation landscape) body Your rules herehellip

hellipeacutes do tipo lsquoscreenrsquo hellipe tens pelo menos 480px de largura

hellip e a orientaccedilatildeo do dispositivo eacute landscape

ESTADO DO SUPORTE

gtIE8 suportam media-queries

Para os outros JS again httpsgithubcomscottjehlRespond

ESTADO DO SUPORTE

gtIE8 suportam media-queries

Para os outros JS again httpsgithubcomscottjehlRespond

GOING RESPONSIVE

Estejam atentos ao contexto de uso do vosso site

O tipo de site dita [em grande medida] a forma como vai ser

usado

Avaliem os objetivos dos vossos utilizadores

Os objetivos em mobile podem ser diferentes dos de Desktop

RWD soacute se prova uacutetil se resolver melhor o problema

Caso contraacuterio devemos adotar a estrateacutegia mais adequada

RESPONSIVE WORKFLOW

Definir um scope para os nossos esforccedilos identificando as resoluccedilotildees mais usadas pelo

nosso puacuteblico

IDENTIFICAR BREAKPOINTS

Definir Breakpoints naturais Device Agnostic Desenhar primeiro o protoacutetipo mobile Esticar ateacute ficar mal Voltar atraacutes um pouco Breakpoint

Olhar para os devices existentes e usar como base para os nossos testes ex 320 480 600 768 1024 1200 [Layout fluiacutedo continua a garantir que dificilmente teremos algo partido noutras resoluccedilotildees]

amp

E se fossemos mais aacutegeis

DESIGN ITERATIVO

Photoshop until perfect 1 mockup por cada view mobile tablet wide etc ~= 4 por ecratilde Enviar e esperar feedback Alterar tudo o que for necessaacuterio Enviar e esperar feedbackhellip [Review eacute tipicamente baseado apenas no aspeto] Uma perspetiva mais aacutegil Fazer um mockupsketch geneacuterico Discutir com a equipa como deve responder a diferentes dispositivos e browsers mobile nojs no-mediaqueries etc Corrigir apenas o que eacute criacutetico nos mockups e rever novamente [Decisotildees para exceccedilotildees antes de ser demasiado tarde]

Photoshop apenas para Design Direction

-

hellip E COLABORATIVO

Fazer protoacutetipos responsive o mais cedo possiacutevel [Se for necessaacuterio em colaboraccedilatildeo com os developers]

Mais informaccedilatildeo httpwwwslidesharenetstephenhaymobilism2012 httpviljamiscomblog2012responsive-workflow

O browser eacute o nosso canvas e natildeo eacute estaacutetico

Review em reuniotildees interativas com hands-on [Levar sempre um conjunto de duacutevidas para validar com restantes]01

Estejam atentos ao contexto de uso do vosso site

O tipo de site dita [em grande medida] a forma como vai ser

usado

Avaliem os objetivos dos vossos utilizadores

Os objetivos em mobile podem ser diferentes dos de Desktop

RWD soacute se prova uacutetil se resolver melhor o problema

Caso contraacuterio devemos adotar a estrateacutegia mais adequada

RESPONSIVE WORKFLOW

Definir um scope para os nossos esforccedilos identificando as resoluccedilotildees mais usadas pelo

nosso puacuteblico

IDENTIFICAR BREAKPOINTS

Definir Breakpoints naturais Device Agnostic Desenhar primeiro o protoacutetipo mobile Esticar ateacute ficar mal Voltar atraacutes um pouco Breakpoint

Olhar para os devices existentes e usar como base para os nossos testes ex 320 480 600 768 1024 1200 [Layout fluiacutedo continua a garantir que dificilmente teremos algo partido noutras resoluccedilotildees]

amp

E se fossemos mais aacutegeis

DESIGN ITERATIVO

Photoshop until perfect 1 mockup por cada view mobile tablet wide etc ~= 4 por ecratilde Enviar e esperar feedback Alterar tudo o que for necessaacuterio Enviar e esperar feedbackhellip [Review eacute tipicamente baseado apenas no aspeto] Uma perspetiva mais aacutegil Fazer um mockupsketch geneacuterico Discutir com a equipa como deve responder a diferentes dispositivos e browsers mobile nojs no-mediaqueries etc Corrigir apenas o que eacute criacutetico nos mockups e rever novamente [Decisotildees para exceccedilotildees antes de ser demasiado tarde]

Photoshop apenas para Design Direction

-

hellip E COLABORATIVO

Fazer protoacutetipos responsive o mais cedo possiacutevel [Se for necessaacuterio em colaboraccedilatildeo com os developers]

Mais informaccedilatildeo httpwwwslidesharenetstephenhaymobilism2012 httpviljamiscomblog2012responsive-workflow

O browser eacute o nosso canvas e natildeo eacute estaacutetico

Review em reuniotildees interativas com hands-on [Levar sempre um conjunto de duacutevidas para validar com restantes]01

Avaliem os objetivos dos vossos utilizadores

Os objetivos em mobile podem ser diferentes dos de Desktop

RWD soacute se prova uacutetil se resolver melhor o problema

Caso contraacuterio devemos adotar a estrateacutegia mais adequada

RESPONSIVE WORKFLOW

Definir um scope para os nossos esforccedilos identificando as resoluccedilotildees mais usadas pelo

nosso puacuteblico

IDENTIFICAR BREAKPOINTS

Definir Breakpoints naturais Device Agnostic Desenhar primeiro o protoacutetipo mobile Esticar ateacute ficar mal Voltar atraacutes um pouco Breakpoint

Olhar para os devices existentes e usar como base para os nossos testes ex 320 480 600 768 1024 1200 [Layout fluiacutedo continua a garantir que dificilmente teremos algo partido noutras resoluccedilotildees]

amp

E se fossemos mais aacutegeis

DESIGN ITERATIVO

Photoshop until perfect 1 mockup por cada view mobile tablet wide etc ~= 4 por ecratilde Enviar e esperar feedback Alterar tudo o que for necessaacuterio Enviar e esperar feedbackhellip [Review eacute tipicamente baseado apenas no aspeto] Uma perspetiva mais aacutegil Fazer um mockupsketch geneacuterico Discutir com a equipa como deve responder a diferentes dispositivos e browsers mobile nojs no-mediaqueries etc Corrigir apenas o que eacute criacutetico nos mockups e rever novamente [Decisotildees para exceccedilotildees antes de ser demasiado tarde]

Photoshop apenas para Design Direction

-

hellip E COLABORATIVO

Fazer protoacutetipos responsive o mais cedo possiacutevel [Se for necessaacuterio em colaboraccedilatildeo com os developers]

Mais informaccedilatildeo httpwwwslidesharenetstephenhaymobilism2012 httpviljamiscomblog2012responsive-workflow

O browser eacute o nosso canvas e natildeo eacute estaacutetico

Review em reuniotildees interativas com hands-on [Levar sempre um conjunto de duacutevidas para validar com restantes]01

RWD soacute se prova uacutetil se resolver melhor o problema

Caso contraacuterio devemos adotar a estrateacutegia mais adequada

RESPONSIVE WORKFLOW

Definir um scope para os nossos esforccedilos identificando as resoluccedilotildees mais usadas pelo

nosso puacuteblico

IDENTIFICAR BREAKPOINTS

Definir Breakpoints naturais Device Agnostic Desenhar primeiro o protoacutetipo mobile Esticar ateacute ficar mal Voltar atraacutes um pouco Breakpoint

Olhar para os devices existentes e usar como base para os nossos testes ex 320 480 600 768 1024 1200 [Layout fluiacutedo continua a garantir que dificilmente teremos algo partido noutras resoluccedilotildees]

amp

E se fossemos mais aacutegeis

DESIGN ITERATIVO

Photoshop until perfect 1 mockup por cada view mobile tablet wide etc ~= 4 por ecratilde Enviar e esperar feedback Alterar tudo o que for necessaacuterio Enviar e esperar feedbackhellip [Review eacute tipicamente baseado apenas no aspeto] Uma perspetiva mais aacutegil Fazer um mockupsketch geneacuterico Discutir com a equipa como deve responder a diferentes dispositivos e browsers mobile nojs no-mediaqueries etc Corrigir apenas o que eacute criacutetico nos mockups e rever novamente [Decisotildees para exceccedilotildees antes de ser demasiado tarde]

Photoshop apenas para Design Direction

-

hellip E COLABORATIVO

Fazer protoacutetipos responsive o mais cedo possiacutevel [Se for necessaacuterio em colaboraccedilatildeo com os developers]

Mais informaccedilatildeo httpwwwslidesharenetstephenhaymobilism2012 httpviljamiscomblog2012responsive-workflow

O browser eacute o nosso canvas e natildeo eacute estaacutetico

Review em reuniotildees interativas com hands-on [Levar sempre um conjunto de duacutevidas para validar com restantes]01

RESPONSIVE WORKFLOW

Definir um scope para os nossos esforccedilos identificando as resoluccedilotildees mais usadas pelo

nosso puacuteblico

IDENTIFICAR BREAKPOINTS

Definir Breakpoints naturais Device Agnostic Desenhar primeiro o protoacutetipo mobile Esticar ateacute ficar mal Voltar atraacutes um pouco Breakpoint

Olhar para os devices existentes e usar como base para os nossos testes ex 320 480 600 768 1024 1200 [Layout fluiacutedo continua a garantir que dificilmente teremos algo partido noutras resoluccedilotildees]

amp

E se fossemos mais aacutegeis

DESIGN ITERATIVO

Photoshop until perfect 1 mockup por cada view mobile tablet wide etc ~= 4 por ecratilde Enviar e esperar feedback Alterar tudo o que for necessaacuterio Enviar e esperar feedbackhellip [Review eacute tipicamente baseado apenas no aspeto] Uma perspetiva mais aacutegil Fazer um mockupsketch geneacuterico Discutir com a equipa como deve responder a diferentes dispositivos e browsers mobile nojs no-mediaqueries etc Corrigir apenas o que eacute criacutetico nos mockups e rever novamente [Decisotildees para exceccedilotildees antes de ser demasiado tarde]

Photoshop apenas para Design Direction

-

hellip E COLABORATIVO

Fazer protoacutetipos responsive o mais cedo possiacutevel [Se for necessaacuterio em colaboraccedilatildeo com os developers]

Mais informaccedilatildeo httpwwwslidesharenetstephenhaymobilism2012 httpviljamiscomblog2012responsive-workflow

O browser eacute o nosso canvas e natildeo eacute estaacutetico

Review em reuniotildees interativas com hands-on [Levar sempre um conjunto de duacutevidas para validar com restantes]01

Definir um scope para os nossos esforccedilos identificando as resoluccedilotildees mais usadas pelo

nosso puacuteblico

IDENTIFICAR BREAKPOINTS

Definir Breakpoints naturais Device Agnostic Desenhar primeiro o protoacutetipo mobile Esticar ateacute ficar mal Voltar atraacutes um pouco Breakpoint

Olhar para os devices existentes e usar como base para os nossos testes ex 320 480 600 768 1024 1200 [Layout fluiacutedo continua a garantir que dificilmente teremos algo partido noutras resoluccedilotildees]

amp

E se fossemos mais aacutegeis

DESIGN ITERATIVO

Photoshop until perfect 1 mockup por cada view mobile tablet wide etc ~= 4 por ecratilde Enviar e esperar feedback Alterar tudo o que for necessaacuterio Enviar e esperar feedbackhellip [Review eacute tipicamente baseado apenas no aspeto] Uma perspetiva mais aacutegil Fazer um mockupsketch geneacuterico Discutir com a equipa como deve responder a diferentes dispositivos e browsers mobile nojs no-mediaqueries etc Corrigir apenas o que eacute criacutetico nos mockups e rever novamente [Decisotildees para exceccedilotildees antes de ser demasiado tarde]

Photoshop apenas para Design Direction

-

hellip E COLABORATIVO

Fazer protoacutetipos responsive o mais cedo possiacutevel [Se for necessaacuterio em colaboraccedilatildeo com os developers]

Mais informaccedilatildeo httpwwwslidesharenetstephenhaymobilism2012 httpviljamiscomblog2012responsive-workflow

O browser eacute o nosso canvas e natildeo eacute estaacutetico

Review em reuniotildees interativas com hands-on [Levar sempre um conjunto de duacutevidas para validar com restantes]01

IDENTIFICAR BREAKPOINTS

Definir Breakpoints naturais Device Agnostic Desenhar primeiro o protoacutetipo mobile Esticar ateacute ficar mal Voltar atraacutes um pouco Breakpoint

Olhar para os devices existentes e usar como base para os nossos testes ex 320 480 600 768 1024 1200 [Layout fluiacutedo continua a garantir que dificilmente teremos algo partido noutras resoluccedilotildees]

amp

E se fossemos mais aacutegeis

DESIGN ITERATIVO

Photoshop until perfect 1 mockup por cada view mobile tablet wide etc ~= 4 por ecratilde Enviar e esperar feedback Alterar tudo o que for necessaacuterio Enviar e esperar feedbackhellip [Review eacute tipicamente baseado apenas no aspeto] Uma perspetiva mais aacutegil Fazer um mockupsketch geneacuterico Discutir com a equipa como deve responder a diferentes dispositivos e browsers mobile nojs no-mediaqueries etc Corrigir apenas o que eacute criacutetico nos mockups e rever novamente [Decisotildees para exceccedilotildees antes de ser demasiado tarde]

Photoshop apenas para Design Direction

-

hellip E COLABORATIVO

Fazer protoacutetipos responsive o mais cedo possiacutevel [Se for necessaacuterio em colaboraccedilatildeo com os developers]

Mais informaccedilatildeo httpwwwslidesharenetstephenhaymobilism2012 httpviljamiscomblog2012responsive-workflow

O browser eacute o nosso canvas e natildeo eacute estaacutetico

Review em reuniotildees interativas com hands-on [Levar sempre um conjunto de duacutevidas para validar com restantes]01

E se fossemos mais aacutegeis

DESIGN ITERATIVO

Photoshop until perfect 1 mockup por cada view mobile tablet wide etc ~= 4 por ecratilde Enviar e esperar feedback Alterar tudo o que for necessaacuterio Enviar e esperar feedbackhellip [Review eacute tipicamente baseado apenas no aspeto] Uma perspetiva mais aacutegil Fazer um mockupsketch geneacuterico Discutir com a equipa como deve responder a diferentes dispositivos e browsers mobile nojs no-mediaqueries etc Corrigir apenas o que eacute criacutetico nos mockups e rever novamente [Decisotildees para exceccedilotildees antes de ser demasiado tarde]

Photoshop apenas para Design Direction

-

hellip E COLABORATIVO

Fazer protoacutetipos responsive o mais cedo possiacutevel [Se for necessaacuterio em colaboraccedilatildeo com os developers]

Mais informaccedilatildeo httpwwwslidesharenetstephenhaymobilism2012 httpviljamiscomblog2012responsive-workflow

O browser eacute o nosso canvas e natildeo eacute estaacutetico

Review em reuniotildees interativas com hands-on [Levar sempre um conjunto de duacutevidas para validar com restantes]01

DESIGN ITERATIVO

Photoshop until perfect 1 mockup por cada view mobile tablet wide etc ~= 4 por ecratilde Enviar e esperar feedback Alterar tudo o que for necessaacuterio Enviar e esperar feedbackhellip [Review eacute tipicamente baseado apenas no aspeto] Uma perspetiva mais aacutegil Fazer um mockupsketch geneacuterico Discutir com a equipa como deve responder a diferentes dispositivos e browsers mobile nojs no-mediaqueries etc Corrigir apenas o que eacute criacutetico nos mockups e rever novamente [Decisotildees para exceccedilotildees antes de ser demasiado tarde]

Photoshop apenas para Design Direction

-

hellip E COLABORATIVO

Fazer protoacutetipos responsive o mais cedo possiacutevel [Se for necessaacuterio em colaboraccedilatildeo com os developers]

Mais informaccedilatildeo httpwwwslidesharenetstephenhaymobilism2012 httpviljamiscomblog2012responsive-workflow

O browser eacute o nosso canvas e natildeo eacute estaacutetico

Review em reuniotildees interativas com hands-on [Levar sempre um conjunto de duacutevidas para validar com restantes]01

hellip E COLABORATIVO

Fazer protoacutetipos responsive o mais cedo possiacutevel [Se for necessaacuterio em colaboraccedilatildeo com os developers]

Mais informaccedilatildeo httpwwwslidesharenetstephenhaymobilism2012 httpviljamiscomblog2012responsive-workflow

O browser eacute o nosso canvas e natildeo eacute estaacutetico

Review em reuniotildees interativas com hands-on [Levar sempre um conjunto de duacutevidas para validar com restantes]01

RESPONSAVELMENTE RESPONSIVE

Media Queries Javascript (

BASIC LIFE SUPPORT

Comeccedilar sempre com os estilos adequados a mobile e experiecircncias mais simples Content First [Fazer media-queries com min-width ascendente (Progressive Enhancement)]

Assim mesmo sem suporte para media-queries todos os browsers vatildeo poder ver esta versatildeo simples e natildeo carregar por defeito a versatildeo com mais detalhes do desktop

2

PREVENIR EM VEZ DE REMEDIAR

Natildeo depender de media-queries para degradar a experiecircncia mas sim para melhorar se houver suporte Exemplo ethanmarcottecom

Default linear layout page margin 0 auto max-width 700px width 93 Small screen media screen and (min-width 600px) hellip Desktop media screen and (min-width 860px) hellip ITS OVER 9000 media screen and (min-width 1200px) hellip

3

BASIC LIFE SUPPORT

Comeccedilar sempre com os estilos adequados a mobile e experiecircncias mais simples Content First [Fazer media-queries com min-width ascendente (Progressive Enhancement)]

Assim mesmo sem suporte para media-queries todos os browsers vatildeo poder ver esta versatildeo simples e natildeo carregar por defeito a versatildeo com mais detalhes do desktop

2

PREVENIR EM VEZ DE REMEDIAR

Natildeo depender de media-queries para degradar a experiecircncia mas sim para melhorar se houver suporte Exemplo ethanmarcottecom

Default linear layout page margin 0 auto max-width 700px width 93 Small screen media screen and (min-width 600px) hellip Desktop media screen and (min-width 860px) hellip ITS OVER 9000 media screen and (min-width 1200px) hellip

3

PREVENIR EM VEZ DE REMEDIAR

Natildeo depender de media-queries para degradar a experiecircncia mas sim para melhorar se houver suporte Exemplo ethanmarcottecom

Default linear layout page margin 0 auto max-width 700px width 93 Small screen media screen and (min-width 600px) hellip Desktop media screen and (min-width 860px) hellip ITS OVER 9000 media screen and (min-width 1200px) hellip

3

JAVASCRIPT RESPONSAacuteVEL

Load recursos dependentes de javascript apenas com javascript Markup stubs HTML Injection via Javascript Se JS natildeo estiver disponiacutevel utilizador natildeo vai ter o Markup desnecessaacuterio Se for algo que natildeo queremos apenas em determinadas resoluccedilotildees temos

HEADJS httpheadjscom Permite carregar o restante Javascript apenas quando noacutes quisermos [Tambeacutem faz feature detection]

4

JS

if(screenwidthgt480)hellip

FRAMEWORKS amp UTILITAacuteRIOS

What are Frameworks 22 Best Responsive CSS Frameworks for Web Design httpawwwardscomwhat-are-frameworks-22-best-responsive-css-frameworks-for-web-designhtml

FRAMEWORKS

INK SAPO httpinksapopt Bootstrap httpgetbootstrapcom Zurb Foundation httpfoundationzurbcom Pure httppurecssio Susy httpsusyoddbirdnet HTML5 Boilerplate httphtml5boilerplatecom HTML Kickstart httpwww99limecomelements (hellip)

+

5

What are Frameworks 22 Best Responsive CSS Frameworks for Web Design httpawwwardscomwhat-are-frameworks-22-best-responsive-css-frameworks-for-web-designhtml

FRAMEWORKS

INK SAPO httpinksapopt Bootstrap httpgetbootstrapcom Zurb Foundation httpfoundationzurbcom Pure httppurecssio Susy httpsusyoddbirdnet HTML5 Boilerplate httphtml5boilerplatecom HTML Kickstart httpwww99limecomelements (hellip)

+

5

UTILITAacuteRIOS

Normalize CSS httpnecolasgithubionormalizecss Font Awesome httpfortawesomegithubioFont-Awesome Modernizr httpmodernizrcom Respond JS httpsgithubcomscottjehlRespond HEADJS httpheadjscom

6

FERRAMENTAS DE TESTEViewport Resizer httplabmaltewassermanncomviewport-resizer Media Query Bookmarklet httpseesparkboxcomfoundrymedia_query_bookmarklet iOS Simulator (incluiacutedo no Xcode) httppahoqslpt Google PageSpeed Insights httpdevelopersgooglecomspeedpagespeedinsights IEs httpmodernieen-usvirtualization-toolsdownloads (hellip)

Dispositivos

7

FERRAMENTAS DE TESTEViewport Resizer httplabmaltewassermanncomviewport-resizer Media Query Bookmarklet httpseesparkboxcomfoundrymedia_query_bookmarklet iOS Simulator (incluiacutedo no Xcode) httppahoqslpt Google PageSpeed Insights httpdevelopersgooglecomspeedpagespeedinsights IEs httpmodernieen-usvirtualization-toolsdownloads (hellip)

Dispositivos

7

LEARN MORE

ARTIGOS E RECURSOS

httpalistapartcomarticleresponsive-web-design httpwwwsmashingmagazinecom20110112guidelines-for-responsive-web-design httpalistapartcomarticleresponsive-images-how-they-almost-worked-and-what-we-need httpalistapartcomblogpostbringing-responsive-images-to-browsers httpwww1stwebdesignercomdesignresponsive-design-overview httpwebdesigntutspluscomarticlesa-simple-responsive-mobile-first-navigation--webdesign-6074 Agregador de recursos padrotildees e notiacutecias httpbradfrostgithubiothis-is-responsive

⋆

ARTIGOS E RECURSOS

httpalistapartcomarticleresponsive-web-design httpwwwsmashingmagazinecom20110112guidelines-for-responsive-web-design httpalistapartcomarticleresponsive-images-how-they-almost-worked-and-what-we-need httpalistapartcomblogpostbringing-responsive-images-to-browsers httpwww1stwebdesignercomdesignresponsive-design-overview httpwebdesigntutspluscomarticlesa-simple-responsive-mobile-first-navigation--webdesign-6074 Agregador de recursos padrotildees e notiacutecias httpbradfrostgithubiothis-is-responsive

⋆

LETrsquoS CODE

ESTRUTURA

ltdiv id=wrappergt ltheadergt ltnavgt ltulgt ltligtlta href= title=HomegtHomeltagtltligt ltligtlta href= title=AboutgtAboutltagtltligt ltligtlta href= title=WorkgtWorkltagtltligt ltligtlta href= title=ContactgtContactltagtltligt ltulgt ltnavgt ltdiv id=bannergt ltimg src=imagesimgjpg alt=alt gt ltdivgt ltheadergt

ltmaingt lth1gt ltpgt ltmaingt ltasidegt lth1gt ltpgt ltasidegt ltdivgt

SOLUCcedilAtildeO

https3bas13scldpt

ESTRUTURA

ltdiv id=wrappergt ltheadergt ltnavgt ltulgt ltligtlta href= title=HomegtHomeltagtltligt ltligtlta href= title=AboutgtAboutltagtltligt ltligtlta href= title=WorkgtWorkltagtltligt ltligtlta href= title=ContactgtContactltagtltligt ltulgt ltnavgt ltdiv id=bannergt ltimg src=imagesimgjpg alt=alt gt ltdivgt ltheadergt

ltmaingt lth1gt ltpgt ltmaingt ltasidegt lth1gt ltpgt ltasidegt ltdivgt

SOLUCcedilAtildeO

https3bas13scldpt

SOLUCcedilAtildeO

https3bas13scldpt

Ler

Experimentar

Perguntar

Partilhar

See you soon

VIacuteTOR TEIXEIRA

https7lo634scldpt

vteixeiraprimeitpt

vsdteixeira

4

httpswwwlinkedincominvsdteixeira9

slidesharecomvsdteixeira