Design para Dispositivos Móveis

Prévia do material em texto

Dispositivos Móveis: .............................................................................. 3 
Conceitos básicos de Design: ................................................................ 4 
Estratégia de desenvolvimento para dispositivo móvel. ...................... 6 
Padrões Web Design Responsive ........................................................ 13 
Mostly Fluid: ........................................................................................ 13 
Column Drop: ...................................................................................... 16 
Tiny Tweaks: ....................................................................................... 22 
Off Canvas: .......................................................................................... 24 
Projeto para telas pequenas ............................................................... 28 
BIBLIOGRAFIA .................................................................................... 30 
 
 
 
https://www.safaribooksonline.com/library/view/mobile-design-
and/9780596806231/httpatomoreillycomsourceoreillyimages317400.png 
Dispositivos Móveis: 
 
Podemos perceber facilmente que os dispositivos móveis mudaram a 
forma como interagimos com o mundo. Acessar informações de 
qualidade, em qualquer lugar e em qualquer horário imprimiram uma 
nova dinâmica em como nos informamos, comunicamos e administramos 
nossas vidas pessoais e profissionais. No link abaixo, exemplifica esta 
mudança: 
 
https://youtu.be/yz0b6oZFP-g 
 
 
É fato que o crescimento no uso dos dispositivos móveis é um fenômeno 
mundial. Como podemos observar na figura abaixo, mais pessoas 
acessam a Web através de um dispositivo móvel do que através de um 
computador, e a disparidade entre os dois números tendem a crescer 
ainda mais nos próximos anos. 
 
 
 
 
 
Não é muito diferente no Brasil. Aqui também os dispositivos móveis vêm 
consolidando sua importância no acesso à internet no país. Neste novo cenário, 
 
 
 
temos o acesso à internet pelo telefone celular. Este ultrapassou o acesso via 
computador. Segundo o IBGE, A proporção de domicílios que utilizavam a 
internet por celular saltou de 53,6% para 80,4% de 2013 para 2014. Para 
maiores detalhes, consulte o link: 
 
http://www.brasil.gov.br/infraestrutura/2016/04/pela-primeira-vez-
celulares-superaram-computadores-no-acesso-a-internet-no-pais. 
 
Conceitos básicos de Design: 
 
Esta nova geração de usuários de dispositivos móveis estão cada vez mais 
exigente. Estes valorizam seu tempo e suas escolhas, e por isso, esperam 
encontrar tudo que precisam de forma simples, rápida, em um ambiente bem 
apresentado, com uma experiência agradável. Em função desta nova realidade, 
conceitos como usabilidade, design, ergonomia, mobilidade são de fundamental 
importância para o aumento da satisfação do usuário. 
É muito comum ocorrer a confusão entre os conceitos de User Interface 
Design(UI) e User Experience (UX): 
 
 Interface Design(UI): 
o é o meio onde há a interação entre a pessoa e a máquina; 
o está relacionado a como será o layout do sistema. 
 User Experience (UX): 
o é o que a pessoa sente e interpreta ao usar uma interface, 
seja de site, um aplicativo, ou um sistema. 
o está relacionada a toda a parte de interação e comportamento 
do sistema 
 
A primeira impressão que temos, é que User Interface Design(UI) e User 
Experience (UX) são conceitos totalmente independentes, mas isto não é 
 
 
 
verdade. O gráfico demonstra que a UX abarca várias disciplinas. Observe a 
figura abaixo 
 
 
 
 
A UX trabalha com as emoções e experiências dos usuários, enquanto UI 
é responsável por fazer com que essas experiências aconteçam. 
 
No ano de 2012 a empresa Monetate disponibilizou um estudo 
comparando a taxa de conversão em função do tipo de dispositivo usado 
na tabela abaixo(Nielsen e Budiu, 2013, p xi): 
 
Dispositivo Taxa de 
conversão 
Desktop 3,5% 
Telefone 
Móvel 
1,4% 
Tablet 3,2% 
 
 
Observe que a taxa de conversão no Tablet se assemelhou bastante a taxa de 
conversão do Desktop e que destoou muito da taxa do Telefone, mesmo sendo 
também um dispositivo móvel. O grande diferencial entre os telefone e tablets 
http://www.kickerstudio.com/wp-
content/uploads/2013/03/ux.jpg 
 
 
 
está em sua usabilidade. É muito mais fácil navegar por sites em tablets do que 
telefones. É preciso uma nova estratégia para melhorar a experiência do 
usuário de dispositivos móveis. 
 
Estratégia de desenvolvimento para dispositivo móvel. 
 
A norma ISO 9241 define a usabilidade como sendo a “capacidade de um 
sistema interativo oferecer a um usuário, em um determinado contexto de 
operação, a realização de tarefas de maneira eficaz, eficiente e agradável”. 
 
Jakob Nielsen propõe a usabilidade como sendo um conjunto de propriedades 
de uma interface que reúne: 
 fácil aprendizado; 
 eficiência; 
 capacidade de memorização; 
 baixo índice de erros; 
 satisfação e prazer ao uso; 
 
É curioso que a usabilidade varie por categoria de dispositivo móvel, 
principalmente em função do tamanho da tela. Quanto maior a tela, melhor a 
experiência do usuário em acesso a sites. Podemos agrupar em três categorias 
distintas: 
 telefones celulares normais: 
o estes telefone possuem telas minúsculas. Sua usabilidade é 
extremamente limitada, permitindo apenas pequena 
interação com sites. É frequentemente chamado de 
telefone com recursos. 
 smartphones: 
o suas telas têm tamanho médio e teclado A-Z completo. Sua 
usabilidade é bem maior com relação aos telefones com 
 
 
 
recursos, mas ainda limitada. Como exemplo podemos citar 
modelos de BlackBerry. 
 telefones com telas completa: 
o embora ainda ofereça a usabilidade bem superior dentre 
todos os tipos de telefone, ainda assim está aquém do 
ideal. Como exemplo desta categoria temos o iPhone, 
Android e Windows Phone. 
 
Um estudo realizado entre 2009 e 2012(Nielsen e Budiu, 2013, p15), 
comparava as taxas de sucesso em tarefas para diferentes tipos de telefone. 
Veja a tabela abaixo: 
 
Telefone 
Taxa de 
sucesso 
Telefones com 
recursos 
44% 
Smartphones 55% 
Telefones de 
toque 
74% 
 
Uma alternativa é desenvolver projetos diferentes para cada tipo de dispositivo 
móvel, visando mitigar a diferença entre os que possuem tela pequena e 
grande. Porém a realidade nos mostra que a única opção existente, na maioria 
dos casos, é um único site móvel único que é suplementar ao site principal. 
Jakob e sua equipe conduziram em 2009 que comparava a taxa de sucesso do 
uso de sites específicos para dispositivos móveis e site completos, ou seja, igual 
ao visto nos desktop(Nielsen e Budiu, 2013, p18). Veja resultado abaixo: 
 
 
Site móvel Site completo 
64% 53% 
 
 
 
 
Fonte: https://www.safaribooksonline.com/library/view/mobile-
usability/9780133122152/graphics/02fig06a.jpg 
Podemos concluir que quando o site é otimizado para dispositivo móvel, maior 
é a taxa de sucesso. 
As principais diretrizes para sites otimizados são: 
 criar o site separado para dispositivo móvel; 
 app pode ser melhor 
 certificar-se de que os usuário móveis vejam o site móvel ao invés 
do completo; 
 Oferecer link claro do seu site completo para site móvel; 
 Oferecer link claro do seu site móvel para site completo; 
 
Exemplos: 
 
 Site completo (www.nationalgeographic.com) 
 
 
 
 
 Site móvel (m.nationalgeographic.com) 
 
 
 
 
Fonte: https://www.safaribooksonline.com/library/view/mobile-usability/9780133122152/graphics/02fig06b.jpg 
Fonte: https://www.safaribooksonline.com/library/view/mobile-
usability/9780133122152/graphics/02fig06c.jpg 
 
 
 
 Site otimizado para dispositivo móvel 
 
 
 
 
 
Desenvolver sites otimizados para dispositivo móvel não é uma tarefa tão trivial 
assim, onde buscamos: 
 Eliminar opções, visando eliminar funcionalidade que não 
sejam fundamentais para o caso do uso em dispositivo móvel. 
 Eliminar conteúdo, visando reduzir a quantidade de palavras e 
transferir informações secundárias para páginas secundárias. 
 Ampliar os elementos da interface, visando acomodar o 
problema do “dedo gordo”. 
 
 
 
 
Existem muitas diferenças entre desktop e dispositivo móvel, para este tipo de 
desenvolvimento. Entre eles, podemos destacar: 
 Conteúdo diferente, com texto mais curto e mais simples. 
 Outros formatos de conteúdo também devem ser projetados para 
mídia; 
 Arquitetura da informação(AI) precisa ser diferente. Deve 
transferir conteúdo secundário para páginas secundárias; 
 Devido as diferenças entre dedos e mouse, as técnicas de 
interação devem ser diferentes; 
 
A tabela abaixo demonstra algumas destas diferenças entre o uso de dedo e 
mouse: 
 Mouse Dedos 
Precisão Alta Baixa 
Número de pontos 
específicos 
1 
Normalmente 1; 2 a 
3 com multitoques 
Números de controles 
3 sendo botões esquerdo, 
direito e barra de rolagem 
1 
Tempo de 
deslocamento? 
Sim Não 
Estados do sinal 
Flutuação, mouse para 
baixo, mouse para cima. 
Dedo para baixo, 
dedo para cima. 
Movimento acelerados Sim Não 
Adequado para uso com 
monitores grandes de 
desktop(30 polegadas 
ou mais) 
Sim, devido à aceleração 
Não, devido à fadiga 
do braço. 
Ponteiro/cursor visível Sim Não 
Obscurece a visão da 
tela 
Não, possibilitando assim 
feedback visual contínuo 
Sim 
Adequado para Não Sim; nada extra 
 
 
 
https://digital.premierit.com/images/ATCM-Responsive-Design 
dispositivo móvel para carregar 
Engajamento direto com 
a tela e “divertido”de 
usar 
Sim Não 
Suporte a acessibilidade Sim Não 
Fácil de aprender Razoavelmente fácil 
Virtualmente sem 
tempo de 
aprendizado 
 
 
Outra alternativa ao desenvolvimento web para dispositivos móveis é o 
conceito de Design responsivo. Neste os componentes visualizados se adaptam 
automaticamente à largura da tela do dispositivo, conforme exibido abaixo: 
 
 
Neste tipo de projeto, é criado um único site que será visualizado em vários 
dispositivos diferentes, baixando o custo de manutenção. Nas imagens abaixo, 
podemos perceber facilmente o conceito de Design Responsive: 
 Desktop: 
 
 
 
https://www.safaribooksonline.com/library/view/mobile-
usability/9780133122152/graphics/02fig10b.jpg 
https://www.safaribooksonline.com/library/view/mobile-
usability/9780133122152/graphics/02fig10c.jpg 
 
 
 Smartphone: 
 
 
 
 
 
 
 
 
 
Existem três técnicas primárias para construir um desenhando 
responsivamente: 
 
 Grid flexível: 
o Usar proporções relativas em Cascading Style Sheets (CSS) 
em vez de tamanhos absolutos para elementos de layout. 
Em Web Design Responsive(WDR) devemos usar 
porcentagens em vez de pixels como unidades para 
colunas e outros elementos de layout. 
 Imagens e Mídias flexíveis: 
o Garantir que nossas dimensões de imagens e mídia caibam 
dentro das limitações de tamanho de nosso dispositivos, 
usando alguns recursos do CSS. Podemos entender que as 
https://www.safaribooksonline.com/library/view/mobile-
usability/9780133122152/graphics/02fig10a.jpg 
 
 
 
http://static.lukew.com/md-
patterns1.png 
imagens e mídias flexíveis mantêm dentro dos limites de 
seus elementos similares, dimensionando 
proporcionalmente com o resto do layout. 
 Media Queries: 
o Avaliar certos aspectos do ambiente do navegador atual 
para determinar qual CSS aplicar. Podemos aplicar 
diferentes regras CSS baseadas em aspectos como largura 
da janela do navegador, proporção e orientação. 
 
Padrões Web Design Responsive 
 
Padrões Web Design Responsive estão evoluindo rapidamente. Existe uma série 
de padrões estabelecidos que funcionam bem entre os dispositivos móveis e 
desktop. Entre eles, podemos destacar: 
 mostly fluid 
 column drop 
 layout shifter 
 tiny tweaks 
 off canvas. 
 
 
Mostly Fluid: 
Este modelo de layout é bastante popular. Basicamente sua estrutura mantém-
se para diferentes resoluções, mudando drasticamente em telas com tamanho 
muito reduzido. Este padrão empilha o conteúdo em colunas verticais, introduz 
margens maiores em telas maiores e, para telas menores, as colunas são 
redistribuídas conforme demonstrado na tela abaixo: 
 
 
 
 
Exemplo de código: 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
Exemplos de sites: 
 Five Simple Steps: http://mediaqueri.es/fss/ 
 
HTML: 
 
<div id="pattern" class="pattern"> 
 <div class="c"> 
 <div class="main"> 
 <h2>Main Content (1st in source order)</h2> 
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent dictum odio eget mauris vestibulum feugiat. Praesent 
ante sapien, 
 luctus pulvinar ultricies quis, aliquet in mi. Nulla facilisi. Donec malesuada fringilla iaculis. Praesent nec quam sit 
amet orci 
 volutpat volutpat in eget eros. Duis pellentesque bibendum erat. Integer pretium nunc vel augue rutrum eget feugiat mi 
molestie. Cras 
 venenatis, turpis et rhoncus scelerisque, mi augue suscipit urna, quis sagittis tortor nisl ut purus. Aliquam at enim 
est. Donec sit 
 amet suscipit quam. Aliquam sit amet commodo eros.</p> 
 <p>Proin quis dui eros. Morbi fringilla, ligula vitae interdum volutpat, est eros ultricies sem, vitae pellentesque lacus 
lorem vitae 
 risus. In odio eros, placerat in fermentum sit amet, commodo eget magna. In suscipit velit pharetra neque consequat 
commodo congue 
 risus eleifend. Aliquam tellus ligula, dapibus sed rutrum at, gravida vitae urna. Praesent volutpat molestie eleifend. 
Vestibulum 
 ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec nulla urna, hendrerit in egestas ut, 
ullamcorper 
 quis lectus. Phasellus faucibus metus ac nisl volutpat a lobortis lorem molestie. Ut bibendum vulputate tortor, a 
faucibus enim 
 tempus ut. Fusce consectetur, ligula quis feugiat luctus, sapien tortor hendrerit enim, et tincidunt sapien augue in 
nibh. Curabitur 
 ligula odio, ullamcorper ac fermentum eu, luctus vel mauris. Donec vehicula egestas urna, et hendrerit augue ultricies 
ac. Morbi urna 
 elit, dignissim in sagittis congue, pretium eu eros. Sed blandit varius risus, pellentesque consequat lectus cursus in. 
Aenean 
 pellentesque nibh ut odio euismod in sollicitudin neque laoreet.</p> 
 </div> 
 <div class="c2"> 
 <h3>Column (2nd in source order)</h3> 
 <p>Sed sit amet molestie diam. Etiam adipiscing dictum eros, vitae feugiat augue convallis sit amet. Nunc quis massa non 
dolor dictum 
 condimentum.</p> 
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque turpis diam, tincidunt nec convallis vitae, dapibus 
vitae enim. Nam 
 bibendum nisl in risus imperdiet vestibulum.</p> 
 <p>Sed sit amet molestie diam. Etiam adipiscing dictumeros, vitae feugiat augue convallis sit amet. Nunc quis massa non 
dolor dictum 
 condimentum.</p> 
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque turpis diam, tincidunt nec convallis vitae, dapibus 
vitae enim. Nam 
 bibendum nisl in risus imperdiet vestibulum.</p> 
 </div> 
 <div class="c3"> 
 <h3>Column (3nd in source order)</h3> 
 <p>Sed sit amet molestie diam. Etiam adipiscing dictum eros, vitae feugiat augue convallis sit amet. Nunc quis massa non 
dolor dictum 
 condimentum.</p> 
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque turpis diam, tincidunt nec convallis vitae, dapibus 
vitae enim. Nam 
 bibendum nisl in risus imperdiet vestibulum.</p> 
 <p>Sed sit amet molestie diam. Etiam adipiscing dictum eros, vitae feugiat augue convallis sit amet. Nunc quis massa non 
dolor dictum 
 condimentum.</p> 
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque turpis diam, tincidunt nec convallis vitae, dapibus 
vitae enim. Nam 
 bibendum nisl in risus imperdiet vestibulum.</p> 
 </div> 
 </div> 
</div> 
<div class="container"> 
 <section class="pattern-description"> 
 <h1>Mostly Fluid</h1> 
 <p>From Luke Wroblewski's <a href="http://www.lukew.com/ff/entry.asp?1514">Multi-Device Layout Patterns</a>:</p> 
 <blockquote> 
 <p>The most popular pattern was perhaps surprisingly simple: a multi-column layout that introduces larger margins on big screens, relies on 
 fluid grids and images to scale from large screens down to small screen sizes, and stacks columns vertically in its narrowest 
 incarnations.</p> 
 <p>I dubbed this pattern "mostly fluid" because the core structure of the layout really doesn't change until the smallest screen width. 
 Instead, the design mostly relies on fluid grids to adapt to a variety of screen sizes.</p> 
 </blockquote> 
 
 </section> 
 <footer role="contentinfo"> 
 <div> 
 <nav id="menu"> 
 <a href="http://bradfrost.github.com/this-is-responsive/patterns.html">&larr;More Responsive Patterns</a> 
 </nav> 
 </div> 
 </footer> 
</div> 
 
CSS: 
 
.c > div { 
 padding: 1em; 
} 
 
.main { 
 background-color: #8e352e; 
} 
 
.c2 { 
 background-color: #c84c44; 
} 
 
.c3{ 
 background-color: #a53d36; 
} 
 
@media screen and (min-width: 31.42em) { 
 .c2, .c3 { 
 float: left; 
 width: 50%; 
 } 
} 
 
 
 
 
 
 
 Princess Elisabeth Antarctica: http://mediaqueri.es/pea/ 
 
 
 
 Trent Walton: http://mediaqueri.es/tre/ 
 
 
 
 Sifter: http://mediaqueri.es/sif/ 
 
 
 
 
 ChoiceResponse: http://mediaqueri.es/cho/ 
 
 
 Pact Coffee: https://www.pactcoffee.com/ 
 
 
 
 
 
 
 
 
 
 
 
 Vans: http://www.vans.com/ 
 
 
 
 
 
 
 
 Skinny Ties: http://skinnyties.com/ 
 
 
 
 
 
 Bootstrap: http://getbootstrap.com/2.3.2/ 
 
 
 
 
 
 
 
Column Drop: 
É um outro padrão popular da web design responsive e muito usado para sites 
em três colunas. A medida que a tela diminui, as colunas são realocadas, uma 
embaixo da outra, fechando com um único layout de coluna. 
 
 
 
http://static.lukew.com/md-
patterns2.png 
 
 
Exemplo de código: 
 
 
 
HTML: 
<div id="pattern" class="pattern"> 
 <div class="c"> 
 <div class="main"> 
 <h2>Main Content (1st in source order)</h2> 
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent dictum odio eget mauris vestibulum feugiat. Praesent 
ante sapien, 
 luctus pulvinar ultricies quis, aliquet in mi. Nulla facilisi. Donec malesuada fringilla iaculis. Praesent nec quam sit 
amet orci 
 volutpat volutpat in eget eros. Duis pellentesque bibendum erat. Integer pretium nunc vel augue rutrum eget feugiat mi 
molestie. Cras 
 venenatis, turpis et rhoncus scelerisque, mi augue suscipit urna, quis sagittis tortor nisl ut purus. Aliquam at enim 
est. Donec sit 
 amet suscipit quam. Aliquam sit amet commodo eros.</p> 
 <p>Proin quis dui eros. Morbi fringilla, ligula vitae interdum volutpat, est eros ultricies sem, vitae pellentesque lacus 
lorem vitae 
 risus. In odio eros, placerat in fermentum sit amet, commodo eget magna. In suscipit velit pharetra neque consequat 
commodo congue 
 risus eleifend. Aliquam tellus ligula, dapibus sed rutrum at, gravida vitae urna. Praesent volutpat molestie eleifend. 
Vestibulum 
 ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec nulla urna, hendrerit in egestas ut, 
ullamcorper 
 quis lectus. Phasellus faucibus metus ac nisl volutpat a lobortis lorem molestie. Ut bibendum vulputate tortor, a 
faucibus enim 
 tempus ut. Fusce consectetur, ligula quis feugiat luctus, sapien tortor hendrerit enim, et tincidunt sapien augue in 
nibh. Curabitur 
 ligula odio, ullamcorper ac fermentum eu, luctus vel mauris. Donec vehicula egestas urna, et hendrerit augue ultricies 
ac. Morbi urna 
 elit, dignissim in sagittis congue, pretium eu eros. Sed blandit varius risus, pellentesque consequat lectus cursus in. 
Aenean 
 pellentesque nibh ut odio euismod in sollicitudin neque laoreet.</p> 
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent dictum odio eget mauris vestibulum feugiat. Praesent 
ante sapien, 
 luctus pulvinar ultricies quis, aliquet in mi. Nulla facilisi. Donec malesuada fringilla iaculis. Praesent nec quam sit 
amet orci 
 volutpat volutpat in eget eros. Duis pellentesque bibendum erat. Integer pretium nunc vel augue rutrum eget feugiat mi 
molestie. Cras 
 venenatis, turpis et rhoncus scelerisque, mi augue suscipit urna, quis sagittis tortor nisl ut purus. Aliquam at enim 
est. Donec sit 
 amet suscipit quam. Aliquam sit amet commodo eros.</p> 
 <p>Proin quis dui eros. Morbi fringilla, ligula vitae interdum volutpat, est eros ultricies sem, vitae pellentesque lacus 
lorem vitae 
 risus. In odio eros, placerat in fermentum sit amet, commodo eget magna. In suscipit velit pharetra neque consequat 
commodo congue 
 risus eleifend. Aliquam tellus ligula, dapibus sed rutrum at, gravida vitae urna. Praesent volutpat molestie eleifend. 
Vestibulum 
 ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec nulla urna, hendrerit in egestas ut, 
ullamcorper 
 quis lectus. Phasellus faucibus metus ac nisl volutpat a lobortis lorem molestie. Ut bibendum vulputate tortor, a 
faucibus enim 
 tempus ut. Fusce consectetur, ligula quis feugiat luctus, sapien tortor hendrerit enim, et tincidunt sapien augue in 
nibh. Curabitur 
 ligula odio, ullamcorper ac fermentum eu, luctus vel mauris. Donec vehicula egestas urna, et hendrerit augue ultricies 
ac. Morbi urna 
 elit, dignissim in sagittis congue, pretium eu eros. Sed blandit varius risus, pellentesque consequat lectus cursus in. 
Aenean 
 pellentesque nibh ut odio euismod in sollicitudin neque laoreet.</p> 
 </div> 
 <div class="sb"> 
 <h3>Column (2nd in source order)</h3> 
 <p>Sed sit amet molestie diam. Etiam adipiscing dictum eros, vitae feugiat augue convallis sit amet. Nunc quis massa non 
dolor dictum 
 condimentum.</p> 
 <p>Lorem ipsumdolor sit amet, consectetur adipiscing elit. Quisque turpis diam, tincidunt nec convallis vitae, dapibus 
vitae enim. Nam 
 bibendum nisl in risus imperdiet vestibulum.</p> 
 <p>Sed sit amet molestie diam. Etiam adipiscing dictum eros, vitae feugiat augue convallis sit amet. Nunc quis massa non 
dolor dictum 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
Exemplos de Sites: 
 Modernizr: http://mediaqueri.es/mod/ 
 
 
 Owltastic: http://mediaqueri.es/owl/ 
 
 
 
 Wee Nudge: http://mediaqueri.es/wee/ 
 
 
CSS: 
 
.c { 
 padding: 1em; 
} 
.main { 
 background-color: #8e352e; 
} 
.sb { 
 background-color: #c84c44; 
} 
.sb-2 { 
 background-color: #a53d36; 
} 
@media screen and (min-width: 42em) { 
 .main { 
 width: 75%; 
 float: left; 
 padding: 0 1em 0 0; 
 } 
 .sb { 
 float: left; 
 width: 25%; 
 } 
 .sb-2 { 
 clear: both; 
 } 
} 
@media screen and (min-width: 62em) { 
 .main { 
 width: 50%; 
 margin-left: 25%; 
 padding: 0 1em; 
 } 
 .sb { 
 margin-left: -75%; 
 } 
 .sb-2 { 
 float: right; 
 width: 25%; 
 clear: none; 
 } 
} 
 
 
 
 
 Festival de Saintes: http://mediaqueri.es/fds/ 
 
 
 Ash Personal Training: http://mediaqueri.es/ash/ 
 
 
 UC San Diego: http://ucsd.edu/explore/about/index.html 
 
 
 
 
 
 
 
 DC Internships: http://www.dcinternships.org/ 
 
 
 
 
 
 
 Drexel University: 
http://www.drexel.edu/academics/undergrad/ 
 
 
 
 CSS Tricks: https://css-tricks.com/ 
 
 
 
 
http://static.lukew.com/md-
patterns3.png 
Layout Shifter: 
Talvez seja o padrão Web Design Responsive mais complexo de se 
implementar. Neste tipo implementa-se layouts diferentes para tamanhos de 
telas diferentes, garantido o máximo de aproveitamento da tela do dispositivo. 
Embora exija um pouco mais de esforço do que os padrões Mostly Fluid e 
Column Drop, é implementado na maioria dos sites responsavelmente 
projetados. 
 
 
Exemplo de código: 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
HTML: 
 
<div id="pattern" class="pattern"> 
 <div class="c"> 
 <div class="c1"> 
 <h2>Column (1st in source order)</h2> 
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent dictum odio eget mauris vestibulum feugiat. Praesent ante sapien, luctus 
pulvinar ultricies quis, 
 aliquet in mi. Nulla facilisi. Donec malesuada fringilla iaculis. Praesent nec quam sit amet orci volutpat volutpat in eget eros. Duis pellentesque 
bibendum erat. Integer 
 pretium nunc vel augue rutrum eget feugiat mi molestie. Cras venenatis, turpis et rhoncus scelerisque, mi augue suscipit urna, quis sagittis 
tortor nisl ut purus. Aliquam 
 at enim est. Donec sit amet suscipit quam. Aliquam sit amet commodo eros.</p> 
 </div> 
 <div class="c2"> 
 <h3>Column (2nd in source order)</h3> 
 <p>Sed sit amet molestie diam. Etiam adipiscing dictum eros, vitae feugiat augue convallis sit amet. Nunc quis massa non dolor dictum 
condimentum.</p> 
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque turpis diam, tincidunt nec convallis vitae, dapibus vitae enim. Nam bibendum 
nisl in risus imperdiet 
 vestibulum.</p> 
 <p>Sed sit amet molestie diam. Etiam adipiscing dictum eros, vitae feugiat augue convallis sit amet. Nunc quis massa non dolor dictum 
condimentum.</p> 
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque turpis diam, tincidunt nec convallis vitae, dapibus vitae enim. Nam bibendum 
nisl in risus imperdiet 
 vestibulum.</p> 
 </div> 
 <div class="c3"> 
 <h3>Column (3nd in source order)</h3> 
 <p>Sed sit amet molestie diam. Etiam adipiscing dictum eros, vitae feugiat augue convallis sit amet. Nunc quis massa non dolor dictum 
condimentum.</p> 
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque turpis diam, tincidunt nec convallis vitae, dapibus vitae enim. Nam bibendum 
nisl in risus imperdiet 
 vestibulum.</p> 
 <p>Sed sit amet molestie diam. Etiam adipiscing dictum eros, vitae feugiat augue convallis sit amet. Nunc quis massa non dolor dictum 
condimentum.</p> 
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque turpis diam, tincidunt nec convallis vitae, dapibus vitae enim. Nam bibendum 
nisl in risus imperdiet 
 vestibulum.</p> 
 </div> 
 </div> 
</div> 
<div class="container"> 
 <section class="pattern-description"> 
 <h1>Layout Shifter </h1> 
 <p>From Luke Wroblewski's <a href="http://www.lukew.com/ff/entry.asp?1514">Multi-Device Layout Patterns</a>:</p> 
 <blockquote> 
 <p>This pattern does the most to adapt across different screen sizes. That is, different layouts are used on large, medium, and small screens. 
Because this inherently 
 requires more work, it seems to be less popular than the previous two patterns I outlined.</p> 
 <p>Though I've tried to generalize this pattern into a simple illustration (above) based on the most common implementations I saw, the truth is 
this is where a lot of 
 innovative design is happening. As a result, there's not one formula that encompasses everything that falls under this pattern.</p> 
 </blockquote> 
HTML: 
CSS : 
 
.c > div { 
 padding: 1em; 
 } 
 
.c1 { 
 background-color: #8e352e; 
} 
 
.c2 { 
 background-color: #c84c44; 
} 
 
.c3 { 
 background-color: #a53d36; 
} 
@media screen and (min-width: 56em) { 
 
 
 
Exemplos de Sites: 
 Food Sense: http://mediaqueri.es/fse/ 
 
 
 
 
 
 Performance Marketing Awards: http://mediaqueri.es/pma/ 
 
 
 
 
 Forefathers Group: http://mediaqueri.es/ffg/ 
 
 
 
 
 
 The Boston Globe: http://mediaqueri.es/bg/ 
 
 
 
 
 
 Andersson-Wise Architects: http://mediaqueri.es/awa/ 
 
 
 The Next Web: http://thenextweb.com/ 
 
 
 
 
 
 
 
http://static.lukew.com/md-
patterns4.png 
 The Boston Globe: http://www.bostonglobe.com/ 
 
 
 
 
 
 
 Mashable: http://mashable.com/ 
 
 
 
 
 
 
Tiny Tweaks: 
Esse padrão é o mais simples de se implementar e mais 
utilizado em páginas simples de uma única coluna e poucos 
elementos dentro, como texto e artigos pesados. Ele mantém 
sempre a mesma estrutura básica do conteúdo, alterando 
somente tamanhos de fontes, imagens e outros componentes. 
 
 
 
 
 
 
 
 
 
 
 
HTML: 
 
<div id="pattern" class="pattern"> 
 <div class="c"> 
 <h2>Page Title</h2> 
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent dictum odio eget mauris vestibulum feugiat. Praesent ante sapien, luctus pulvinar ultricies quis, 
aliquet in mi. Nulla facilisi. 
 Donec malesuada fringilla iaculis. Praesent nec quam sit amet orci volutpat volutpat in eget eros. Duis pellentesque bibendum erat. Integer pretium nunc vel augue 
rutrum eget feugiat mi 
 molestie. Cras venenatis, turpis et rhoncus scelerisque, mi augue suscipit urna, quis sagittis tortor nisl ut purus. Aliquam at enim est. Donec sit amet suscipit quam. 
Aliquam sit amet 
 commodoeros.</p> 
 <p>Proin quis dui eros. Morbi fringilla, ligula vitae interdum volutpat, est eros ultricies sem, vitae pellentesque lacus lorem vitae risus. In odio eros, placerat in 
fermentum sit amet, commodo 
 eget magna. In suscipit velit pharetra neque consequat commodo congue risus eleifend. Aliquam tellus ligula, dapibus sed rutrum at, gravida vitae urna. Praesent 
volutpat molestie eleifend. 
 Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec nulla urna, hendrerit in egestas ut, ullamcorper quis lectus. Phasellus 
faucibus metus ac nisl 
 volutpat a lobortis lorem molestie. Ut bibendum vulputate tortor, a faucibus enim tempus ut. Fusce consectetur, ligula quis feugiat luctus, sapien tortor hendrerit 
enim, et tincidunt sapien 
 augue in nibh. Curabitur ligula odio, ullamcorper ac fermentum eu, luctus vel mauris. Donec vehicula egestas urna, et hendrerit augue ultricies ac. Morbi urna elit, 
dignissim in sagittis 
 congue, pretium eu eros. Sed blandit varius risus, pellentesque consequat lectus cursus in. Aenean pellentesque nibh ut odio euismod in sollicitudin neque 
laoreet.</p> 
 <h3>Third-Level Heading</h3> 
 <p>Sed sit amet molestie diam. Etiam adipiscing dictum eros, vitae feugiat augue convallis sit amet. Nunc quis massa non dolor dictum condimentum.</p> 
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque turpis diam, tincidunt nec convallis vitae, dapibus vitae enim. Nam bibendum nisl in risus imperdiet 
vestibulum.</p> 
 <p>Sed sit amet molestie diam. Etiam adipiscing dictum eros, vitae feugiat augue convallis sit amet. Nunc quis massa non dolor dictum condimentum.</p> 
CSS: 
 
.c { 
 background-color: #8e352e; 
} 
 
.c { 
 padding: 1em; 
 max-width: 60em; 
 margin: 0 auto; 
} 
 
h2 { 
 font-size: 2em; 
} 
 
@media all and (min-width: 40em) { 
 .c { 
 font-size: 120%; 
 line-height: 1.5; 
 } 
 
 h2 { 
 font-size: 3em; 
 
 
 
 
 
Exemplos de Sites: 
 Future Friendly: http://mediaqueri.es/ff/ 
 
 
 
 
 
 
 Path: http://mediaqueri.es/pa/ 
 
 
 
 
 
 
 Neovada: http://mediaqueri.es/neo/ 
 
 
 
 
 
 Lycos: http://mediaqueri.es/lyc/ 
 
 
 
 
 
 
 Design made in Germany: http://mediaqueri.es/dgf/ 
 
 
 
 
 
 
 
 
 Sang Han: http://www.sanghan.co/ 
 
 
 
 
 
 Trent Walton: http://trentwalton.com/ 
 
 
 
 
 
 
 
 
 Deren Kesin: http://www.deren.me/ 
 
 
 
 
 
 
 
 
Off Canvas: 
A maioria dos padrões empilham verticalmente o conteúdo 
quando visualizados em telas pequenas. O padrão Off Canvas 
aproveita o espaço fora da tela para manter a navegação ou parte 
 
 
 
http://static.lukew.com/md-
patterns7.png 
de um conteúdo escondido, até que um tamanho maior da tela 
permita que ele seja visível ou o usuário o acione para mostrá-lo 
como, por exemplo, um botão, gesto ou até mesmo um link. 
 
 
 
Exemplo de código: 
Link: https://googlesamples.github.io/web-
fundamentals/samples/fundamentals/design-and-ui/responsive/patterns/off-
canvas.html 
 
 
 
 
HTML: 
<!DOCTYPE html> 
<html lang="en"> 
 <head> 
 <link rel="stylesheet" href="layouts-common.css"> 
 <style> 
 
body { overflow-x: hidden; } 
 
 .container { display: block; } 
 
 .c1, .c3 { 
 position: absolute; 
 width: 250px; 
 height: 100%; 
 -webkit-backface-visibility: hidden; 
 backface-visibility: hidden; 
 -webkit-transition: -webkit-transform 0.4s ease-out; 
 transition: transform 0.4s ease-out; 
 z-index: 1;} 
 .c1 { 
 -webkit-transform: translate(-250px,0); 
 transform: translate(-250px,0);} 
 .c2 { 
 width: 100%; 
 position: absolute;} 
 .c3 { left: 100%; } 
 .c1.open { 
 -webkit-transform: translate(0,0); 
 transform: translate(0,0);} 
 .c3.open { 
 -webkit-transform: translate(-250px,0); 
 transform: translate(-250px,0);} 
 @media (min-width: 500px) { 
 .container { 
 display: -webkit-flex; 
 display: flex; 
 -webkit-flex-flow: row nowrap; 
 flex-flow: row nowrap; } 
 .c1 { 
 position: relative; 
 -webkit-transition: none 0s ease-out; 
 transition: none 0s ease-out; 
 -webkit-transform: translate(0,0); 
 transform: translate(0,0);} 
 .c2 { position: static; } 
 } 
 @media (min-width: 800px) { 
 body { overflow-x: auto; } 
 .c3 { 
 position: relative; 
 left: auto; 
 -webkit-transition: none 0s ease-out; 
 transition: none 0s ease-out; 
 -webkit-transform: translate(0,0); 
 transform: translate(0,0);} 
 } 
</style> 
 <title>Responsive Web Design Pattern: Off Canvas</title> 
 </head> 
 <body> 
 <div class="container" role="main"> 
 <div class="c1" id="leftDrawer"> 
 </div> 
 <div class="c2" id="mainPanel"> 
 Click the <code>div</code>'s to change views 
 </div> 
 <div class="c3" id="rightDrawer"> 
 </div> 
 </div> 
 
 <script type="text/javascript"> 
 var position = 0; 
 var mainPanel = document.getElementById("mainPanel"); 
 var leftDrawer = document.getElementById("leftDrawer"); 
 var rightDrawer = document.getElementById("rightDrawer"); 
 
 function toggle(evt) { 
 position++; 
 if (position % 3 == 0) { 
 leftDrawer.classList.remove("open"); 
 rightDrawer.classList.remove("open"); 
 } else if (position % 3 == 1) { 
 leftDrawer.classList.add("open"); 
 rightDrawer.classList.remove("open"); 
 } else { 
 leftDrawer.classList.remove("open"); 
 
 
 
 
Exemplos de Sites: 
 Kaemingk Christmas 2012: 
http://www.kaemingk.com/en/our-showroom/christmas/ 
 
 
 
 
 
 
 
 Time Magazine: http://time.com/ 
 
 
 
 
 
 
 
 
CSS: 
 
.container 
{ 
 
margin: 0; 
 
padding: 
0; 
 
width: 
100%; 
 
} 
 
.container 
div { 
 
box-
sizing: border-box; 
 
min-
height: 150px; 
 
min-
width: 150px; 
 
} 
 
.c1 { 
 
color: 
#ddd; 
 
backgroun
d-color: #003476; 
 
} 
 
.c2 { 
 
color: 
#ddd; 
 
backgroun
d-color: #0062d2; 
 
} 
 
.c3 { 
 
color: 
#333; 
 
backgroun
d-color: #b4d2f7; 
 
} 
 
.c4 { 
 
color: 
#333; 
 
backgroun
d-color: #d5dfef; 
 
} 
 
.c5 { 
 
color: 
#333; 
 
backgroun
d-color: #dfe1e5; 
 
} 
 
 
 
 
 The Onion: http://www.theonion.com/ 
 
 
 
 
 
 
 
 Disney: http://disney.com/ 
 
 
 
 
 
 
 
Projeto para telas pequenas 
 
 Projetar para dispositivos móveis, não e uma tarefa tão trivial. As 
principais dificuldades que os seus usuários enfrentam são: 
 Telas pequenas: 
o O simples fato de possuir tela pequena, obrigado a 
restringir o número de informações a serem exibidas 
de uma só vez, em função do tempo de carga. Isto 
dificulta muito a navegação. 
 Entrada desajeitada: 
o Devido o tamanho do teclado,físico ou virtual, ser 
pequeno, a entrada de dados é muito lenta e sujeita 
a muitos erros. 
 Downloads lentos: 
 
 
 
o As conexões são mais lentas, mesmo em serviços 3G 
e 4G. Isto dificulta muitas vezes até mesmo acessar 
uma próxima tela. 
 Sites mal projetados: 
o Normalmente os sites são projetados para desktop, 
comprementendo muito a navegabilidade em 
dispositivos móveis. 
 
O sucesso de um site ou app móvel está relacionado a como projetamos para 
telas pequenas. O conceito de Mobile First reforça esta realidade. Conforme 
discutimos no início de nossa apostila, o uso de dispositivos móveis tem 
crescido vertiginosamente. Em um primeiro instante trabalhávamos com o 
conceito de Design adaptativo, onde tínhamos um conjunto de códigos para 
cada tipo de dispositivo que acessava o site. Como o próprio nome diz, 
adaptativo, o foco do projeto estava em um design para desktop que seria 
adaptado para mobile. Normalmente é desenvolvida uma versão alternativa do 
site principal para dispositivos móveis. 
 
Já no Design responsivo, todo o conteúdo é flexível, se reposicionando 
conforme o dispositivo do usuário, como tamanho da tela, orientação 
(horizontal ou vertical) e plataforma. Neste design, o foco está na tecnologia, 
visando proporcionar uma maior User Experience(UX). 
 
Podemos considerar o Mobile First como uma evolução do Design Responsivo, 
sendo que, de forma muito mais inteligente. Este conceito foi criado por Luke 
Wroblewski. Sua diferença não está nas tecnologias usadas, como por exemplo 
CSS3(media queries), HTML5, Javascript ou até mesmo frameworks, como 
Bootstrap, mas sim em seu foco que está no usuário. Neste tipo de design 
projetamos primeiramente a versão mobile e depois a versão desktop. Existem 
três motivos para investir em Mobile First: 
 
 Crescimento Mobile: 
 
 
 
o O crescimento do uso de dispositivos móveis, constitui-se uma 
grande oportunidade de se chegar ao consumidor através destes 
dispositivos. 
 Necessidade de Foco: 
o o resultado final deve ser uma experiência focada nas tarefas 
principais que os usuários querem realizar. Para tanto, é 
necessário identificar os seus principais objetivos/funções, visando 
gerar uma experiência rápida e intuitiva. 
 Mais recursos: 
o Mobile possui uma série de recursos que Web não possui, como 
por exemplo acelerômetro e GPS. Por isto, pensar primeiro em 
mobile facilita a integração destes recursos aumentando a User 
Experience de nosso usuário. 
 
Consulte o blog do Luke Wroblewski para maiores informações: 
http://www.lukew.com/ff/entry.asp?933 
 
BIBLIOGRAFIA 
 
1. HECKE, William Van. Learning iOS Design. Addison-Wesley, 2013. 
2. NUDELMAN, Greg. Android Design Patterns: Interaction Design Solutions 
for Developers.Indianapolis. John Wiley & Sons, inc., 2013. 
3. COLBORNE, Giles. Simple and Usable Web, Mobile and Interaction. New 
Riders, 2013. Ebook. 
4. FLING, Brian. Mobile Design and Development. OREILLY & ASSOC, 2009. 
5. BANGA, Cameron; WEINHOLD, Josh. Essential Mobile Interaction Design: 
Perfecting Interface Design in Mobile Apps. Addison Wesley Professional, 
2014. 
6. MAGAZINE, Smashing. Mobile Design Patterns. Smashing Media, 2012. 
Ebook. 
7. NIELSEN, Jakob; BUDIU, Raluca. Usabilidade Móvel. Campus, 2014. 
 
 
 
8. NIELSEN, Jakob; LORANGER, Hoa. Usabilidade na Web – Projetando 
Websites com qualidade. Campus, 2007.