Contente
- Imagens responsivas
- Desempenho
- Carregamento condicional e lento
- Tipografia responsiva
- Consultas de mídia em JavaScript
- Aprimoramento progressivo
- Layout
- Layout de grade CSS
- Finalmente
Web design responsivo parece incrivelmente simples. Opte por grades flexíveis para o layout, use mídia flexível (imagens, vídeo, iframes) e aplique consultas de mídia para atualizar essas medidas e organizar melhor o conteúdo em qualquer janela de visualização. Na prática, aprendemos que não é tão fácil. Pequenos problemas que surgem durante cada projeto nos mantêm coçando nossas cabeças e, ocasionalmente, até mesmo cavando trincheiras de unhas em nossas mesas.
Desde que comecei a curar o boletim informativo Semanal de Design Responsivo, tive a sorte de falar com muitos membros da comunidade da web e ouvir suas experiências. Eu queria descobrir exatamente o que a comunidade realmente queria aprender, então distribuí uma pesquisa aos leitores. Aqui estão os principais resultados:
- Imagens responsivas
- Melhorando a performance
- Tipografia responsiva
- Consultas de mídia em JavaScript
- Aprimoramento Progressivo
- Layout
Com esses tópicos em mente, executei uma série de podcasts pedindo a opinião de alguns de nossos líderes do setor. Em suas respostas, um ponto foi unânime: concentre-se em acertar o básico antes de começar a se preocupar com técnicas empolgantes e avançadas. Ao levar as coisas de volta ao básico, somos capazes de construir uma interface robusta para todos, sobrepondo recursos quando o dispositivo ou o contexto do usuário permitir.
'Então ... e quanto a essas técnicas avançadas?' Eu ouço você perguntar. Acho que Stephen Hay resumiu melhor quando disse: 'A técnica definitiva de RWD é começar sem usar nenhuma técnica avançada de RWD. Comece com conteúdo estruturado e vá crescendo. Apenas adicione um ponto de interrupção quando o design quebrar e o conteúdo ditar e ... é isso.
Neste artigo, começarei com o básico e adicionarei camadas de complexidade conforme a situação permitir, para desenvolver essas técnicas avançadas. Vamos começar.
Imagens responsivas
A mídia fluida foi uma parte fundamental do RWD quando foi definida pela primeira vez por Ethan Marcotte. largura: 100%; , largura máxima: 100%; ainda funciona hoje, mas a paisagem de imagem responsiva se tornou muito mais complicada. Com o aumento do número de tamanhos de tela, densidade de pixels e dispositivos de suporte, ansiamos por maior controle.
As três principais preocupações foram definidas pelo Responsive Images Community Group (RICG):
- O tamanho em kilobytes da imagem que estamos enviando pela rede
- O tamanho físico da imagem que estamos enviando para dispositivos de alto DPI
- O recorte da imagem na forma de direção de arte para o tamanho específico da janela de visualização
Yoav Weiss, com a ajuda do Indiegogo, fez a maior parte do trabalho na implementação do Blink - o fork do WebKit do Google, e quando você estiver lendo isso, ele será lançado no Chrome e Firefox. O Safari 8 enviará o srcset, no entanto, o atributo de tamanhos está disponível apenas em compilações noturnas e a imagem> ainda não foi implementada.
Com a chegada de algo novo em nosso processo de desenvolvimento web, pode ser difícil começar. Vamos examinar um exemplo passo a passo.
img! - Declara a imagem reserva para todos os navegadores sem suporte de imagem -> src = "horse-350.webp"! - Declara todos os tamanhos de imagem em srcset. Inclua a largura da imagem usando o descritor w para informar ao navegador a largura de cada imagem .--> srcset = "horse-350.webp 350w, horse-500.webp 500w, horse-1024.webp 1024w, horse.webp 2000w "! - Os tamanhos informam ao navegador o layout do nosso site. Aqui, estamos dizendo para qualquer janela de visualização de 64ems ou maior, use uma imagem que ocupará 70% da janela de visualização -> tamanhos = "(largura mínima: 64em) 70vw,! - Se a janela de visualização não for essa grande, então para qualquer janela de visualização com 37,5ens e maior, use uma imagem que ocupe 95% da janela de visualização -> (largura mínima: 37,5em) 95vw,! - e se a janela de visualização for menor do que isso, use uma imagem que ocupa 100% da janela de visualização -> 100vw "! - sempre tem o texto alternativo .--> alt =" Um cavalo "/>
Do ponto de vista do desempenho, não importa se você usa largura mínima ou largura máxima no atributo de tamanhos - mas a ordem da fonte importa. O navegador sempre usará o primeiro tamanho correspondente.
Além disso, lembre-se de que estamos codificando o atributo de tamanhos para ser diretamente definido em relação ao nosso design. Isso pode causar problemas ao avançar. Por exemplo, se você reformular seu site, precisará revisitar todas as imagens ou imagens e redefinir os tamanhos. Se você estiver usando um CMS, isso pode ser superado como parte de seu processo de construção.
O WordPress já tem um plugin para ajudar. Ele define o srcset nas variedades de imagem padrão WP e permite que você declare os tamanhos em um local central. Quando a página é gerada a partir do banco de dados, ele troca todas as menções em img> e as substitui pela marcação da imagem.
Básico
- Pense se você realmente precisa incluir uma imagem. O conteúdo central da imagem ou é decorativo? Uma imagem a menos significa um tempo de carregamento mais rápido
- Otimize as imagens que você precisa incluir usando ImageOptim
- Defina cabeçalhos de expiração para suas imagens em seu servidor ou arquivo .htaccess (veja detalhes em ‘Desempenho’)
- PictureFill fornece suporte polyfill para imagens
Avançado
- Lazy load suas imagens usando o plugin Lazy Load da jQuery
- Use HTMLImageElement.Sizes e HTMLPictureElement para detecção de recurso.
- O plugin PictureFill WP avançado, encontrado no Github, permitirá que você defina os valores de larguras e tamanhos de imagem personalizados
Desempenho
Para obter o desempenho percebido mais rápido em nossas páginas, precisamos de todo o HTML e CSS necessários para processar a parte superior de nossa página na primeira resposta do servidor. Esse número mágico é 14kb e é baseado no tamanho máximo da janela de congestionamento no primeiro tempo de ida e volta (RTT).
Patrick Hamann, líder técnico de front-end do Guardian, e sua equipe conseguiram quebrar a barreira dos 1000ms usando uma mistura de técnicas de front-end e back-end. A abordagem do Guardian é garantir que o conteúdo necessário - o artigo - seja entregue ao usuário o mais rápido possível e dentro do número mágico de 14kb.
Vejamos o processo:
- O usuário clica em um link do Google para uma notícia
- Uma única solicitação de bloqueio é enviada ao banco de dados do artigo. Nenhuma história ou comentário relacionado é solicitado
- O HTML é carregado contendo CSS Crítico
- na cabeça>
- Um processo de ‘cortar a mostarda’ é realizado e quaisquer elementos condicionais baseados nos recursos do dispositivo do usuário são carregados
- Qualquer conteúdo relacionado ou de suporte ao próprio artigo (imagens de artigos relacionados, comentários de artigos e assim por diante) são carregados lentamente no lugar
Otimizar o caminho de renderização crítico como este significa que o cabeçote tem 222 linhas de comprimento. No entanto, o conteúdo crítico que o usuário viu ainda está dentro da carga útil inicial de 14 kb quando compactado com gzip. É esse processo que ajuda a quebrar a barreira de renderização de 1000 ms.
Carregamento condicional e lento
O carregamento condicional melhora a experiência do usuário com base no recurso do dispositivo. Ferramentas como o Modernizr permitem que você teste esses recursos, mas esteja ciente de que só porque um navegador diz que oferece suporte, isso nem sempre significa suporte total.
Uma técnica é segurar o carregamento de algo até que o usuário mostre a intenção de usar esse recurso. Isso seria considerado condicional. Você pode adiar o carregamento nos ícones sociais até que o usuário passe o mouse sobre ou toque nos ícones, ou pode evitar o carregamento de um iframe do Google Map em janelas de visualização menores, onde o usuário provavelmente prefere vincular a um aplicativo de mapeamento dedicado. Outra abordagem é ‘cortar a mostarda’ - veja a caixa acima para obter detalhes sobre isso.
O carregamento lento é definido como algo que você sempre pretende carregar na página - imagens que fazem parte do artigo, comentários ou outros artigos relacionados - mas que não precisam estar lá para que o usuário comece a consumir o conteúdo.
Básico
- Habilite gzipping para arquivos e defina cabeçalhos de expiração para todo o conteúdo estático (netm.ag/expire-260)
- Use o plugin Lazy Load jQuery. Isso carrega imagens ao se aproximar da janela de visualização, ou após um certo período de tempo
Avançado
- Configure Fastly ou CloudFlare. As redes de entrega de conteúdo (CDNs) entregam seu conteúdo estático aos usuários mais rápido do que seu próprio servidor e têm alguns níveis gratuitos
- Habilite o SPDY para navegadores habilitados para http2 para aproveitar as vantagens dos recursos http2, como solicitações http paralelas
- Social Count permite o carregamento condicional de seus ícones sociais
- Usar a API do Google Static Maps permitirá que você troque os mapas interativos do Google por imagens. Dê uma olhada no exemplo de Brad Frost em netm.ag/static-260
- O Padrão de Inclusão Ajax carregará snippets de conteúdo de um atributo data-before, data-after ou data-replace
Tipografia responsiva
Tipografia é tornar seu conteúdo fácil de digerir. A tipografia responsiva estende isso para garantir a legibilidade em uma ampla variedade de dispositivos e janelas de exibição. Jordan Moore admite que esse tipo é algo que ele não está disposto a ceder. Solte uma ou duas imagens se precisar, mas certifique-se de ter um ótimo tipo.
Stephen Hay sugere definir o tamanho da fonte HTML para 100 por cento (leia: deixe como está) porque cada navegador ou fabricante de dispositivo torna um padrão razoavelmente legível para uma resolução ou dispositivo específico. Para a maioria dos navegadores de desktop, é 16px.
Por outro lado, Moore usa a unidade REM e o tamanho da fonte HTML para definir um tamanho mínimo de fonte para certos elementos de conteúdo. Por exemplo, se você deseja que a assinatura de um artigo seja sempre 14px, defina-o como o tamanho da fonte base no elemento HTML e defina .byline {font-size: 1rem;}. Conforme você dimensiona o corpo: font-size: para se adequar à janela de visualização, você não afetará o estilo .by-line.
Um bom comprimento de linha de leitura também é importante - mire em 45 a 65 caracteres. Há um bookmarklet que você pode usar para verificar seu conteúdo. Se você oferece suporte a vários idiomas com seu design, o comprimento da linha também pode variar. Moore sugere o uso de: lang (de) article {max-width: 30em} para cobrir qualquer problema.
Para manter o ritmo vertical, defina a margem inferior contra os blocos de conteúdo, ul>, ol>, blockquote>, table>, blockquote> e assim por diante, com a mesma altura de sua linha. Se o ritmo for interrompido com a introdução de imagens, você pode corrigi-lo adicionando Baseline.js ou BaselineAlign.js.
Básico
- Baseie sua fonte em um corpo 100 por cento
- Trabalhe em unidades relativas em
- Defina suas margens para a altura da linha para manter o ritmo vertical em seu design
Avançado
- Melhore o desempenho de carregamento de fontes com Enhance.js ou carregamento de fonte adiado
- Use Sass @includes para cabeçalhos semânticos.
- Freqüentemente, precisamos usar o estilo h5 em um widget da barra lateral que requer marcação h2. Use os Mixins Tipográficos de Bearded para controlar o tamanho e permanecer semântico com o código abaixo:
.sidebar h2 {@include header-5}
Consultas de mídia em JavaScript
Desde que fomos capazes de controlar o layout em uma variedade de janelas de visualização por meio de consultas de mídia, temos procurado uma maneira de vincular isso à execução de nosso JavaScript também. Existem algumas maneiras de disparar JavaScript em certas larguras, alturas e orientações de viewport, e algumas pessoas inteligentes escreveram alguns plug-ins JS nativos fáceis de usar, como Enquire.js e Simple State Manager. Você pode até mesmo construir isso usando matchMedia. No entanto, você tem o problema de duplicar suas consultas de mídia em seu CSS e JavaScript.
Aaron Gustafson tem um truque bacana que significa que você não precisa gerenciar e combinar suas consultas de mídia em seu CSS e seu JS. A ideia veio originalmente de Jeremy Keith e, neste exemplo, Gustafson a levou a uma implementação completa.
Usando getActiveMQ (netm.ag/media-260), injete div # getActiveMQ-watcher no final do elemento body e oculte-o. Então, dentro do CSS, defina # getActiveMQ-watcher {font-family: break-0;} para a primeira consulta de mídia, font-family: break-1; para o segundo, font-family: break-2; para o terceiro e assim por diante.
O script usa watchResize () (netm.ag/resize-260) para verificar se o tamanho da janela de visualização mudou e, em seguida, lê de volta a família de fontes ativa. Agora você pode usar isso para conectar aprimoramentos de JS, como adicionar uma interface com guias a um dl> quando a janela de visualização permitir, alterar o comportamento de um lightbox ou atualizar o layout de uma tabela de dados. Verifique o getActiveMQ Codepen em netm.ag/active-260.
Básico
- Esqueça o JavaScript para diferentes janelas de exibição. Fornece conteúdo e funções de site aos usuários de forma que eles possam acessá-los em todas as janelas de exibição. Nunca devemos precisar de JavaScript
Avançado
- Estenda o método de Gustafson usando Breakup como uma lista predefinida de consultas de mídia e automatizando a criação da lista de famílias de fontes para getActiveMQ-watcher
Aprimoramento progressivo
Um equívoco comum sobre o aprimoramento progressivo é que as pessoas pensam: 'Bem, não posso usar esse novo recurso', mas, na verdade, é o oposto. O aprimoramento progressivo significa que você pode fornecer um recurso se ele for compatível apenas com um ou nenhum navegador, e com o tempo as pessoas terão uma experiência melhor conforme novas versões chegarem.
Se você observar a função central de qualquer site da Web, poderá entregá-la como HTML e fazer com que o lado do servidor faça todo o processamento. Pagamentos, formulários, curtidas, compartilhamento, e-mails, painéis - tudo pode ser feito. Uma vez que a tarefa básica é construída, podemos então colocar em camadas as tecnologias incríveis em cima disso, porque temos uma rede de segurança para pegar aqueles que falham. A maioria das abordagens avançadas sobre as quais falamos aqui é baseada no aprimoramento progressivo.
Layout
O layout flexível é simples de dizer, mas tem muitas abordagens diferentes. Crie layouts de grade simples com menos marcação usando: seletor nth-child ().
/ * declara a primeira largura móvel para a grade * / .grid-1-4 {float: left; largura: 100%; } / * Quando a janela de visualização é de pelo menos 37,5em, defina a grade para 50% por elemento * / @media (min-width: 37,5em) {.grid-1-4 {width: 50%; } / * Limpa o float a cada segundo elemento APÓS o primeiro. Isso visa o 3º, 5º, 7º, 9º ... na grade. * / .Grid-1-4: enésimo do tipo (2n + 1) {clear: left; }} @media (largura mínima: 64em) {.grid-1-4 {largura: 25%; } / * Remova o clear * / .grid-1-4: enésimo-do-tipo anterior (2n + 1) {clear: none; } / * Limpe o float a cada 4º elemento APÓS o primeiro. Isso visa o 5º, 9º ... na grade. * / .Grid-1-4: enésimo do tipo (4n + 1) {clear: left; }}
Diga adeus ao uso de posição e flutuação para seus layouts. Embora eles tenham nos servido bem até o momento, seu uso para layout foi um hack necessário. Agora temos duas novas crianças no bloco que ajudarão a corrigir todos os nossos problemas de layout - Flexbox e Grids.
O Flexbox é ótimo para módulos individuais, controlando o layout das partes do conteúdo dentro de cada um dos módulos. Existem layouts que tentamos oferecer que podem ser alcançados mais facilmente usando o Flexbox, e isso é ainda mais verdadeiro com sites responsivos. Para saber mais sobre isso, consulte o guia de truques de CSS para Flexbox ou Flexbox Polyfill.
Layout de grade CSS
A grade é mais para o layout de nível macro. O módulo de layout de grade oferece uma ótima maneira de descrever seu layout em seu CSS. Embora ainda esteja em fase de rascunho no momento, recomendo este artigo sobre o layout CSS Grid de Rachel Andrew.
Finalmente
Estas são apenas algumas dicas para estender sua prática responsiva. Ao abordar qualquer novo trabalho responsivo, dê um passo para trás e certifique-se de que você entendeu o básico corretamente. Comece com seu conteúdo, HTML e camadas de experiências aprimoradas sobre eles e não haverá nenhum limite para onde você pode levar seus projetos.
Este artigo apareceu originalmente na edição 260 de revista net.
