Por: Brad Frost

Tradução: Janaína Narciso

Introdução

Nós vamos aprender como criar uma experiência web adaptativa que é projetado mobile-first. Este artigo e demonstração vão passar por:

• Por que precisamos criar mobile-first, responsivos  e com experiências de adaptação

• Como estruturar HTML para um site de adaptação, a fim de aperfeiçoar o desempenho e priorizar a flexibilidade.

• Como escrever CSS que define estilos compartilhados em primeiro lugar, estilos para telas maiores com consultas de mídia usando unidades relativas.

• Como escrever Javascript para carregar condicionalmente em fragmentos de conteúdo, tirando proveito de eventos de toque e geolocalização.

• O que podemos fazer para melhorar ainda mais a nossa experiência adaptativa.

A Necessidade de Adaptatividade

Como a paisagem web torna-se cada vez mais complexa, está se tornando extremamente importante oferecer experiências web sólida para um crescente número de contextos.  Felizmente, web design responsivo dá à criadores web, algumas ferramentas para fazer layouts que respondem a qualquer tamanho de tela. Vamos usar grades fluídas, imagens flexíveis e consultas de mídia para obter o layout de grande procura, independentemente do tamanho de dimensões da tela do dispositivo.

No entanto, o contexto móvel (mobile) é muito mais do que apenas o tamanho da tela. Os nossos dispositivos móveis estão conosco onde quer que vamos, desbloqueando novos casos de uso. Já que temos constantemente nossos dispositivos móveis com a gente, a conectividade pode ser todo o tabuleiro, variando de sinais wi-fi fortes em casa, para 3G ou EDGE quando fora dela. Além disso, telas de toque (touchscreens) abrem novas oportunidades de interagir diretamente com o conteúdo e a ergonomia móvel leva a diferentes considerações ao projetar layout e funcionalidade.

A fim de criar um site que é realmente concebido para o contexto móvel e não apenas para pequenas telas, queremos garantir que vamos enfrentar os muitos desafios da upfront do desenvolvimento móvel. As restrições do contexto móvel nos forçam focar no que o conteúdo é essencial e como apresentar esse conteúdo o mais rápido possível. A construção de carregamento rápido, as primeiras experiências aprimoradas móveis tem um trickle down (ou até, dependendo de como você olha para ele) para efeito tablet, desktop e outros contextos emergentes.

O que nós estamos fazendo: O detalhe Humble Produto PageView a demo

A demonstração que estamos fazendo é uma página de detalhes do produto simples e-commerce para uma empresa t-shirt (camiseta) fictícia. Por que escolher este? Sites de comércio eletrônico podem ter muitos casos de uso através de contextos. Por exemplo, 70% dos proprietários de smartphones usam seus celulares para influenciar as compras na loja. Então, enquanto nós vamos ter certeza de que a compra do produto é tão fácil quanto possível, nós também vamos tentar fazer com que os produtos avaliados acessíveis e utilizar a localização do usuário para melhorar a experiência móvel.

Estrutura

Criação de marcação semântica HTML5 mantém experiência adaptativa gerenciável e acessível, e também oferece oportunidades para experiências aprimoradas (exemplo rápido: usando os tipos de entrada HTML5 adequada traz o teclado virtual adequada em muitos dispositivos de toque). Marcação semântica é extremamente portátil e podem ser acessados por muitos dispositivos móveis, tablets, navegadores de desktop e dispositivos habilitados para a web futuros, independentemente do conjunto de recursos ou capacidade.

Definir a janela de exibição

A fim de acomodar para sites não aprimorados para telas de celulares, muitos navegadores modernos móveis, definem uma janela do navegador maior, o que permite uma melhor visualização de sites que não são para celulares. Os usuários podem então pinch-to-zoom (usar dois dedos para aumentar a visualização da tela em zoom) sobre o conteúdo que eles querem. Isso é bom para experiências não-móveis, mas porque estamos otimizando nossa experiência para navegadores móveis, vamos usar a tag meta janela de exibição para definir a largura da tela para a largura do dispositivo:

É importante notar que não estamos desativando a capacidade do usuário para aumentar a página (o que você poderia fazer adicionando user-escalable = no para o atributo de conteúdo), embora nós estejamos otimizando o conteúdo para telas pequenas. É recomendado para manter o utilizador. A ampliação permitiu manter as coisas as mais acessíveis possíveis. No entanto, existem casos de uso para desativar user-zoom, como se você está incluindo elementos posicionados fixos.

Fragmentos de conteúdo

A fim de manter a experiência tão leve quanto possível, e melhorar o tempo de carregamento percebido, estamos criando dois documentos HTML adicionais para auxiliar o nosso conteúdo, reviews.html andrelated.html. Porque este conteúdo não é necessário para o caso de uso principal (a compra do produto) e inclui uma série de imagens, que não irá carregá-lo por padrão para manter o tamanho da página inicial para baixo. Por padrão, o conteúdo é acessível através de links na página, mas se certo nível de suporte javascript está presente, nós vamos condicionalmente carregar o conteúdo quando o usuário solicita-lo ou quando a resolução atinge um determinado ponto de interrupção.

HTML caracteres especiais

Uma técnica simples para reduzir a necessidade de imagens de fundo (economizando solicitações HTTP) é a utilização de caracteres especiais de HTML para formas simples. No caso das nossas estrelas de avaliação, estamos usando & # 9733; para criar uma estrela sólido (★) e & # 9734; para criar estrelas vazios (☆) para os nossos ratings. E porque é HTML e não uma imagem, ela fica nítido mesmo em telas de alta resolução.

O telefone: Esquema URI

Outra técnica simples, mas eficaz estamos incluindo em nosso rodapé é um link clicável para o número de atendimento ao cliente. Isto é realizado usando o esquema URI tel, que se parece com isso:

 <a href="tel:+18005550199">1-800-555-0199</a>

Às vezes esquecemos que os dispositivos móveis podem fazer chamadas telefônicas, e também que algumas configurações de desktop pode lançar aplicações de VoIP para iniciar uma chamada telefônica. Estamos incluindo uma maneira fácil para os usuários a fim de facilitar um telefonema, que em alguns casos pode fazer sentido (ou seja, um usuário móvel que pode preferir terminar a transação por telefone contra passando por um fluxo de checkout em seu dispositivo móvel).

Agora que temos uma base forte, semântica no lugar, vamos passar para a adição de melhorias de estilo.

Estilo

Ao elaborar o nosso CSS, vamos fazer tudo ao nosso alcance para manter as coisas mais leve e fluida possível. Entendemos que todos esses dispositivos têm muitos tamanhos de tela diferentes e dispositivos que amanhã não terá as mesmas resoluções como a de hoje. Porque o tamanho da tela é uma incógnita, vamos usar o conteúdo em si para determinar como o layout deve adaptar-se a seu recipiente.

Folha de estilo separada para telas maiores

Estamos criando dois arquivos CSS separados, style.css e enhanced.css a fim de entregar estilos básicos para telas de menos de 40.5em e usando consultas de mídia para servir estilos aprimorados para telas maiores do que 40.5em.

 /*Large screen styles first - Avoid*/ .product-img { width: 50%; float: left; } @media screen and (max-width: 40.5em) { .product-img { width: auto; float: none; } } 

Estamos usando o código condicional , A fim de servir -se enhanced.css a versões não móveis do IE menos do que a versão 9 , o que , infelizmente, não irá fazer consultas de mídia de apoio. Embora este método de fato adiciona uma solicitação HTTP para o mix, ele nos dá uma maior flexibilidade sobre nossos estilos . Por outro lado, poderíamos usar respond.js para entregar estilos aprimorados para o IE .

Estamos usando a unidade em vez de px para manter a coerência com o resto de nossas unidades relativas e representam as configurações do usuário, como o nível de zoom . Além disso, o conteúdo deve determinar o ponto de interrupção (estamos usando 40.5em como um breakpoint) porque as dimensões do aparelho variam-se muito e estão sempre mudando, assim são, portanto, não confiáveis.

Estilos Mobile-first

Começando com estilos de linha de base comum e da introdução de regras de layout mais avançados quando licenças de tamanho de tela mantém código mais simples, menor e mais sustentável. Aqui é apenas um exemplo rápido para demonstrar este ponto:

 /*Large screen styles first - Avoid*/ .product-img { width: 50%; float: left; } @media screen and (max-width: 40.5em) { .product-img { width: auto; float: none; } } 

Queremos evitar a complexidade, tanto quanto pudermos, então aqui está o que um mobile-first parece:

 /*Large screen styles first - Avoid*/ .product-img { width: 50%; float: left; } @media screen and (max-width: 40.5em) { .product-img { width: auto; float: none; } }

Em vez de declarar regras de tela grande primeiro só para substituí-las para telas menores, vamos simplesmente definir regras como mais estado se torna disponível. A web, por padrão, é uma coisa fluida, então vamos fazer o nosso melhor para trabalhar com ela em vez de contra ela. É importante notar que alguns navegadores (browsers móveis Symbian, Blackberry

Aplicando consultas de mídia

Estamos continuando nosso estilo mobile-first  quando aplicamos nossas consultas de mídia. Nossa lista de produtos relacionados começa duas para uma linha, mas aumenta a terceira em uma fileira quando o tamanho da tela é, pelo menos, 28.75em de largura ( aproximadamente o tamanho de telefones celulares no modo paisagem ) e, em seguida, a 6 para a linha quando o tamanho da tela é, pelo menos, 40.5em ( cerca de tablets no modo retrato ou pequenas telas de desktop ) .

 /*estilos padrão mostra 2 por linha*/ .related-products li { float: left; width: 50%; } /*mostra 3 por linha para telas médias (like mobile phones in landscape or smaller tablets)*/ @media screen and (min-width: 28.75em) { .related-products li { width: 33.3333333%; } } /*mostra 6 por linha em telas grandes (like medium tablets and up) */ @media screen and min-width: 40.5em) { .related-products li { width: 16.6666667%; } } 

Assumindo pequeno ecrã por padrão nos permite suportar mais plataformas e também torna mais fácil adicionar mais pontos de interrupção sem ter que modificar estilos existentes. Definindo estilos, como eles são necessários, também mantém o tamanho do arquivo para baixo, reduz a complexidade e mantém um código mais sustentável.

Usando unidades relativas

Estamos usando percentagens e unidades em nosso projeto, a fim de manter as coisas o mais flexível possível. Unidades relativas são muito mais compatíveis com a enorme variação provocada por tamanho de tela, densidade de pixels e nível de zoom.

Enquanto consultas de mídia são segredos web chave do projeto ágil, queremos grades fluídas para fazer a maior parte do trabalho. A manutenção de uma enorme quantidade de estilos width - definidos através de consultas de muitos meios de comunicação pode se tornar inviável, por isso vamos ter certeza da criação da folha de estilo totalmente flexível. Ethan Marcotte fornece uma fórmula para converter dimensões e tamanhos de fonte de pixel- base de unidades relativas:

target ÷ context = result (alvo / contexto = resultado)

Usando CSS para reduzir Requests, muitas solicitações HTTP pode ser um grande matador para o desempenho, especialmente no celular. Estamos incorporando algumas técnicas CSS para salvar as solicitações HTTP que irá melhorar o desempenho do site. Usando gradientes CSS em vez de imagens de fundo reduz a quantidade de solicitações de imagem e nos dá mais controle sobre o design.

Estamos incluindo os prefixos de fornecedores adequados para assegurar o máximo de compatibilidade (existem ferramentas para isto) e esperando que um dia em que estas regras serão padronizados para nos salvar algum tempo.

 /*Using CSS gradients instead of background images*/ header[role="banner"] { position: relative; background: #111; background: +linear-gradient (top, #111 0%, #222 100%); } 

Também estamos usando URIs dados em vez de imagens de fundo para alguns dos ícones mais pequenos (para ícones como a pesquisa, as características sociais e localização). Enquanto URIs de dados pode parecer um pouco feia e pode aumentar o tamanho do arquivo de estilo, a redução de pedidos de resultados em um tempo de download percebida mais rapidamente.

 /*Using a Data URI for Background Image*/ .find-nearby { background: url(data:image/png;base64,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) no-repeat 100% 43%; } 

Comportamento

Agora que temos a nossa estrutura e estilo no lugar, vamos adicionar melhorias JavaScript para adicionar funcionalidade para a navegação, galeria de imagens e conteúdo auxiliar.

Navegação

A navegação pode ser especialmente complicada para as experiências de adaptação. Menu de navegação é comum para os sites de desktop, mas ele pode sobrecarregar a tela e empurrar para baixo o conteúdo primário em telas pequenas. Queremos destacar o produto e não a navegação no site, por isso vamos fazer o nosso melhor para obter a navegação fora do caminho. Na nossa marcação, criamos uma lista chamada #nav-anchors, que será usado para alternar a visibilidade da navegação e bar para as pequenas telas de pesquisa:

 <ul id="nav-anchors" class="nav-anchors"> <li><a href="#nav" id="menu-anchor">Menu</a></li> <li><a href="#search" id="search-anchor">Search</a></li> </ul> <form id="search" action="#" method="post" class="search reveal"> <fieldset> <legend>Search the Site</legend> <input type="search" placeholder="Search Store" /> <input type="submit" value="Search" /> </fieldset> </form> <nav id="nav" class="nav reveal"> <ul role="navigation"> <li><a href="#">T-shirts</a></li> <li><a href="#">Hoodies</a></li> <li><a href="#">Pants</a></li> </ul> </nav> 

Vamos adicionar um ouvinte de redimensionamento que irá determinar se há espaço suficiente para mostrar a barra de navegação e pesquisa.

 $(w).resize(function(){ //Update dimensions on resize sw = document.documentElement.clientWidth; sh = document.documentElement.clientHeight; checkMobile(); }); //Check if Mobile function checkMobile() { mobile = (sw > breakpoint) ? false : true; if (!mobile) { //If Not Mobile $('[role="tabpanel"],#nav,#search').show(); //Show full navigation and search } else { //Hide if(!$('#nav-anchors a').hasClass('active')) { $('#nav,#search').hide(); //Hide full navigation and search } } } 

Galeria de Imagens

Por padrão, a galeria de imagem é simplesmente uma grande imagem com imagens em miniatura que clicar para os seus maiores homólogos. Isso significa que eles são acessíveis aos navegadores e dispositivos com suporte a JavaScript pobre ou não.

 <div id="product-img" class="product-img"> <figure class="img-container" id="img-container"> <img src="images/product_img_1.jpg" alt="Super Ffly T-shirt" /> </figure> <nav> <ul> <li><a href="images/product_img_1.jpg"><img src="images/product_img_1_thumb.jpg" alt="Super Ffly Men's Shirt" /></a></li> <li><a href="images/product_img_2.jpg"><img src="images/product_img_2_thumb.jpg" alt="Super Ffly Women's Shirt" /></a></li> <li><a href="images/product_img_3.png"><img src="images/product_img_3_thumb.jpg" alt="Ffly Logo" /></a></li> </ul> </nav> </div> 

Nós vamos construir um carrossel de imagem a partir de imagens em miniatura disponíveis:

 function buildGallery() { container.html('<div id="img-list"><ul /></div>'); imgList = $('#img-list'); nav.find('a:first').addClass('active'); //For Each Navigation Link nav.find('a').each(function() { var $this = $(this); var href = $this.attr('href'); //Prepare list item with image source in data attribute arr += '<li data-imgsrc="'+href+'"></li>'; }); //Append to #img-list imgList.find('ul').append(arr); //Nav Thumbnail Click nav.on('click', 'a', function(e) { var pos = $(this).parent().index(); e.preventDefault(); loadImg(pos); if(swipeEnabled) { mySwipe.slide(index, 300); } updateNav(pos); }); } 

Para melhorar a experiência ainda mais, estamos usando Modernizr para detectar a presença de eventos de toque e transições CSS, e se eles são compatíveis, vamos carregar em uma biblioteca chamada SwipeJS para fazer uma imagem carrossel touch-friendly.

Modernizr.load({   test: Modernizr.touch && Modernizr.csstransitions,   yep: 'js/swipe.js',   complete: function() {     if (Modernizr.touch && Modernizr.csstransitions) {       swipeEnabled = true;       buildSwipe();     }   } }); //Build Swipe Carousel function buildSwipe() {   //Initialize Swipe.js   w.mySwipe = new Swipe(document.getElementById('img-list'),     callback: function(event, index, elem) {       updateNav(index)       loadImg(index + 1);     }   }); }

Temos agora uma galeria de imagens acessível com melhorias adicionais para dispositivos ativados pelo toque.

Conteúdo relacionado

A fim de manter o tamanho da página inicial para baixo, não estamos carregando conteúdo auxiliar, ou seja, as camisetas relacionadas e análises de produtos, por padrão. Em vez disso, eles existem como as suas próprias páginas HTML, que são acessados por links como um comportamento padrão.

<section class="aux related-products" id="related-products">   <header id="tab-related">     <a href="related.html">       <h2>Similar T-shirts</h2>     </a>   </header> </section> <section class="aux reviews" id="reviews">   <header id="tab-reviews">     <a href="reviews.html">       <h2>8 Reviews</h2>       <ol class="star">         <li class="on">&#9733;</li>         <li class="on">&#9733;</li>         <li class="on">&#9733;</li>         <li class="on">&#9733;</li>         <li>&#9734;</li>       </ol>     </a>   </header> </section>

Vamos puxar o conteúdo relacionado, se forem satisfeitas uma de duas condições: Quando um usuário de tela pequena clica nas camisas relacionadas ou quando a tela tem espaço suficiente para carregar no conteúdo auxiliar produtos avaliados.

 //Check if Mobile function checkMobile() { if(sw > breakpoint) { mobile = false; //Not Mobile } else { mobile = true; //Mobile } if (!mobile) { //If Not Mobile loadAux(); //Load auxiliary content } } //Set up Auxiliary content function loadAux() { var $aux = $('.aux'); $aux.each(function(index) { var $this = $(this); var auxLink = $this.find('a'); var auxFragment = auxLink.attr('href'); var auxContent = $this.find('[role=tabpanel]'); if (auxContent.size()===0 && $this.hasClass('loaded')===false) { loadContent(auxFragment,$this); } }); } function loadContent(src,container) { // Load Tab Content container.addClass('loaded'); $('

Geolocation (localização)

Aproveitando a localização do usuário para oferecer experiências aprimoradas é um aspecto importante do desenvolvimento móvel. Felizmente geolocalização é uma das características mais suportadas em navegadores móveis (assim como a maioria dos navegadores de desktop). A funcionalidade fallback poderia ser uma forma simples, onde o usuário simplesmente insere o seu CEP para encontrar loja perto deles.

Próximos Passos

Imagens Adaptivas 

Nossa demonstração não está incorporando muitas imagens grandes, mas é a melhor prática para carregar em imagens otimizadas móveis por padrão, em seguida, condicionalmente carregar em imagens maiores, e sim, apenas quando necessário. Há muitas técnicas diferentes para imagens responsivas, do lado do cliente e do lado servidor também. Nós trabalhamos muito para estar atento a desempenho, e otimização de imagens é uma maneira fácil para otimizar o desempenho ainda mais.

Menos páginas JS

Manter pagina tão leves quanto possível é importante para o desempenho, por isso, devemos olhar para aperfeiçoar os scripts. Estamos usando a biblioteca jQuery para a nossa demo, mas nós definitivamente não estamos usando tudo isso. Poderíamos olhar para usar Closure Compiler para retirar bits não utilizados da biblioteca para manter as coisas o mais simples possível, enquanto ainda aproveitando o jQuery oferece.

Como alternativa, pode-se olhar para as micro-estruturas como Zepto.js e outros, mas eles normalmente não necessariamente oferecem o melhor suporte cross-browser. Escrevendo vanilla Javascript podia evitar peso adicional, mas pode ser mais difícil de criar e mais difícil de manter. Em última análise, cada abordagem tem seus prós e contras, só não se esqueça de considerar as vantagens e desvantagens quando tomar estas decisões.

Acesso Offline

É cada vez mais importante certificar-se de experiências web estão acessíveis off-line, especialmente quando se considera os usuários móveis com a conectividade variável. Felizmente, AppCache e outras técnicas off-line nos dá uma maneira de manter os nossos recursos acessíveis mesmo quando o usuário estiver offline.

Embrulho UpWe've criou uma experiência que está atento ao contexto do usuário e se adapta tanto layout e funcionalidade com base no navegador e características do dispositivo. Nós também criamos uma fundação que pode adaptar-se a dispositivos e navegadores futuros. Eis alguns tópicos principais:

• Autor semântica HTML5 marcação como uma base para experiências de adaptação.

• Criar CSS móvel primeiro para manter as coisas leves, simples e de fácil manutenção.

• Use unidades relativas, como (em) e percentagens para manter estilos tão fluido e flexível possível.

• Deixe o conteúdo determinar os limites de faturamento para consultas de mídia.

• Explorar oportunidades de redução de solicitações HTTP por conteúdo condicionalmente-loading e utilizando caracteres HTML, CSS, gradientes de Dados URIs e muito mais.

• Autor javascript discreto e uso de ferramentas como Modernizr para detectar características.

• Tire partido das funcionalidades mobile-centric, como eventos de toque, ligações telefônicas e de geolocalização para oferecer experiências avançadas para usuários móveis.

Criando experiências de adaptação permite que o seu conteúdo ir mais longe, o que significa mais oportunidades para chegar a potenciais clientes onde quer que estejam. Ao aderir aos princípios de melhoria progressiva e resolver as restrições em primeiro lugar, nós estamos colocando uma fundação amigável para o futuro que dá o nosso site uma melhor chance de trabalhar em browsers e ambientes futuros. 

Que este artigo sirva de base para estudos e testes como serviu para mim. Por esse motivo foi traduzido, ficando no meu repositório, servindo de ponto de partida para meus projetos... até a próxima. =)