responsive web design - introdução

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

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

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

CONTEUacuteDO FLEXIacuteVEL

IMAGENS BEM COMPORTADAS

NAtildeO EXCEDE O SEU CONTENTOR

))

SERAacute QUE SE PORTAM BEM

imagehtml

httppauj7slpt

MAX-WIDTH 100

img embed object video

max-width100

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

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

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

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

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

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

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

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

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

⋆

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

Ler

Experimentar

Perguntar

Partilhar

See you soon

VIacuteTOR TEIXEIRA

https7lo634scldpt

vteixeiraprimeitpt

vsdteixeira

4

httpswwwlinkedincominvsdteixeira9

slidesharecomvsdteixeira