Baixe o app para aproveitar ainda mais
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">←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.
Compartilhar