Web Design Responsivo: Páginas adaptáveis para todos os dispositivos

151 Pages·2015·10.92 MB·Portuguese

by  Tárcio Zemel

© 2012,CasadoCódigo
TodososdireitosreservadoseprotegidospelaLeinº9.610,de10/02/1998.
Nenhumapartedestelivropoderáserreproduzida,nemtransmitida,semauto-
rizaçãopréviaporescritodaeditora,sejamquaisforemosmeios: fotográficos,
eletrônicos,mecânicos,gravaçãoouquaisqueroutros.
CasadoCódigo
Livrosparaoprogramador
RuaVergueiro,3185-8ºandar
04101-300–VilaMariana–SãoPaulo–SP–Brasil

CasadoCódigo
Prefácio
Aerapós-PCdacomputaçãopessoalchegoucomtudo. Nostabletsesmartphones,
aWeb,finalmente,temachancedesetornarverdadeiramenteubíquaeonipresente.
Ainda estamos no começo dessa nova fase da tecnologia, mas o futuro é inegavel-
mentedaWebmóveledosmaisdiversosaparelhosdenavegação.
Essanovaperspectivatrazdesafiosimportantes.Atéontem,Websignificavaum
navegadorinstaladonumDesktopcontroladopormouseetecladonumateladeta-
manho confortável. Nossos sites foram construídos pensando nesse cenário. Mas,
agora,temostelaspequenas,touchscreen,redesmóveisemuitasoutrasdiferenças.
PrecisamosdeumanovaWeb. UmaWebquesuporteessaexplosãodedispositivos
e,maisainda,estejapreparadaparaofuturodedispositivosqueaindanemconse-
guimosantever.
OWebDesignResponsivoéachaveparaessanovaWeb. Épensarempáginas
que se adaptem a todo tipo de dispositivo e contexto de uso. É sair das limitações
de um browser Desktop e seu tamanho previsível, e pensar em páginas com flexi-
bilidadequesuportemtodotamanhodetela,qualquertipoderesolução,interfaces
comtouchoumouse.PensarresponsivamenteérepensaraWebparaofuturo.
EestelivroéaferramentaquevocêprecisapraentenderosdesafiosdoWebDe-
signResponsivo.OTárciomostraospilaresdeumainterfaceresponsiva,exploraos
aspectos técnicos do HTML e CSS, e mostra ideias para uma interface móvel usá-
vel. ÉumlivroquerecomendoparatododesenvolvedorWebquequeiraparticipar
ativamentedanovaWeb.Esperoquevocêaproveitealeituracomoeuaproveitei.
SérgioLopes-@sergio_caelum
InstrutoredesenvolvedornaCaelum
i

CasadoCódigo Sumário
Sumário
1 Introdução 1
1.1 Estatísticasdomundomobile . . . . . . . . . . . . . . . . . . . . . . . 10
1.2 Umaquestãodeconceito . . . . . . . . . . . . . . . . . . . . . . . . . . 13
1.3 MasmeusitejáestábomparaAndroideiPhone! . . . . . . . . . . . . 14
1.4 Paraqueméestelivro? . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
1.5 Paraaproveitarmelhorestelivro. . . . . . . . . . . . . . . . . . . . . . 15
2 Princípiosdeumwebdesignresponsivo 17
2.1 Comosurgiuowebdesignresponsivo . . . . . . . . . . . . . . . . . . 17
2.2 Atrincatecnológicadowebdesignresponsivo . . . . . . . . . . . . . 18
2.3 Resoluçõesdetela . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19
3 layoutfluído 23
3.1 TiposdemedidaemCSS . . . . . . . . . . . . . . . . . . . . . . . . . . 24
3.2 Afórmulamágicadowebdesignresponsivo. . . . . . . . . . . . . . . 26
3.3 Exemplodeumlayoutfixo . . . . . . . . . . . . . . . . . . . . . . . . . 27
3.4 Metatagviewport . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37
3.5 Convertendoumlayoutfixoemlayoutfluído . . . . . . . . . . . . . . 45
4 Imagenserecursosflexíveis 55
4.1 CSSparaimagensflexíveis . . . . . . . . . . . . . . . . . . . . . . . . . 55
4.2 CSSparaoutrosrecursosflexíveis . . . . . . . . . . . . . . . . . . . . . 59
4.3 Oproblemadeimagensemlayoutsfluídos . . . . . . . . . . . . . . . . 66
4.4 Técnicasparaimagensflexíveisemwebdesignsresponsivos . . . . . 67
4.5 Imagensemaltaresolução . . . . . . . . . . . . . . . . . . . . . . . . . 72
4.6 Tiposdeimagemparaweb . . . . . . . . . . . . . . . . . . . . . . . . . 73
iii
Sumário CasadoCódigo
5 MediaQueries 81
5.1 Primeiro,osMediaTypes . . . . . . . . . . . . . . . . . . . . . . . . . . 81
5.2 MediaQueries . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 85
5.3 ParâmetrosparatrabalharcomMediaQueries . . . . . . . . . . . . . 85
5.4 OperadoresLógicos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 93
5.5 Váquebrandoseudesignembreakpointsbempensados . . . . . . . . 94
5.6 Gerenciamentodeerros. . . . . . . . . . . . . . . . . . . . . . . . . . . 98
5.7 UsoconscientedeMediaQueries . . . . . . . . . . . . . . . . . . . . . 100
5.8 MediaQueriesnaprática . . . . . . . . . . . . . . . . . . . . . . . . . . 106
6 TópicosdeWebMobile 111
6.1 OqueéMobileFirst? . . . . . . . . . . . . . . . . . . . . . . . . . . . . 112
6.2 PorqueMobileFirst? . . . . . . . . . . . . . . . . . . . . . . . . . . . . 112
6.3 NotasgeraissobreMobileFirst . . . . . . . . . . . . . . . . . . . . . . 113
6.4 Comoaspessoasusamdispositivosmóveis? . . . . . . . . . . . . . . . 115
6.5 Oconteúdoéorei . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 119
6.6 Padrõesdenavegaçãomobile . . . . . . . . . . . . . . . . . . . . . . . 120
6.7 10princípiosdedesignparainterfacesmobile . . . . . . . . . . . . . . 127
7 Continuandoseusestudos 133
7.1 Artigos/Tutoriais . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 133
7.2 Bookmarklets. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 135
7.3 Esboçoeplanejamento . . . . . . . . . . . . . . . . . . . . . . . . . . . 135
7.4 Ferramentas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 136
7.5 Inspiração . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 137
7.6 JavaScriptpuro . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 137
7.7 PluginsjQuery . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 138
7.8 Testesderesponsividade . . . . . . . . . . . . . . . . . . . . . . . . . . 140
7.9 TemplateseFrameworks . . . . . . . . . . . . . . . . . . . . . . . . . . 141
7.10 Palavrasfinais . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 142
Bibliografia 142
iv
Capítulo1
Introdução
É possível desenvolver uma só apresentação para um site, um só web design. Mais
além: queessedesignsejabemapresentadoemquaisquerdispositivose,conforme
setenhaplanejado, queseadapteaosdiferentesmeiosemqueestesiteéacessado.
Sim,épossível,masnãoéoquevemosporaí.
ReparenositedaCNN,em2012,emumbrowser:
CasadoCódigo
Eagoraomesmosite,quandovistoemumdispositivoquenãoumcomputador:
2