Transcrições
1. Introdução: Uma das melhores e uma das piores coisas sobre a Web é a frequência com que ela muda. Para mim, pelo menos isso é incrivelmente excitante porque eu posso
re-investigar diferentes técnicas para projetar para a Web moderna. Oi. Sou Ethan Marcotte. Sou um Web designer independente, autor e palestrante, e a aula de hoje é sobre Web design responsivo. Design responsivo significa que podemos criar uma experiência Web que é servida até todos os dispositivos e navegadores e que irá remodelar-se de
forma inteligente dependendo do tamanho da tela. Então, nesta classe vamos estar olhando para um design que foi criado para uma revista fictícia e, em seguida, traduzi-lo em um design completamente responsivo usando os três ingredientes que cada layout responsivo tem: grades fluidas, imagens flexíveis e consultas de mídia. Ao olharmos para cada um desses ingredientes individualmente, vamos colocá-los juntos para criar um design completamente agnóstico, completamente responsivo
e, no final da aula, vamos analisar algumas estratégias que você usar para remodelar seu processo de design para ajudá-lo a se tornar desenvolvedor de front-end
mais responsivo para as telas que
conhecemos hoje, bem como para as que ainda não foram inventadas. Eu acho que a flexibilidade no coração do design responsivo é muito importante e sempre foi importante porque nunca fomos projetando para uma tela de tamanho único. Quero dizer, há navegadores embutidos nos painéis de carros agora e esta não é a Web que eu me inscrevi, mas agora nós temos a capacidade de realmente projetar uma experiência que pode remodelar-se de forma flexível, independentemente de onde acontece para ser. Então, essa classe eu acho que é realmente para designers front-end e desenvolvedores front-end. Vamos olhar para um pouco de CSS, mas você não precisa ser um especialista em CSS. Estaremos trabalhando em alguns dos fundamentos de como você pode realmente traduzir seus designs em um layout responsivo. Para mim, eu realmente espero que você se afaste desta aula com uma real apreciação do que significa ser um designer móvel e como isso
mudará a maneira como você pensa em projetar para a Web moderna. Estou tão feliz que você decidiu se juntar a essa aula. Vamos indo.
2. O que é design responsivo?: Então vamos começar a aula respondendo à pergunta, o que é design responsivo? Porque quando trabalho com uma nova equipe ou um novo cliente, essa é uma das primeiras perguntas que recebo. Porque todo mundo está incrivelmente animado com essa frase, web design responsivo. Mas todos tendem a ter uma idéia ligeiramente diferente sobre o que isso significa para eles e para sua empresa. Então, eu gostaria de começar hoje dizendo a vocês um pouco do que isso significa para mim como designer. Para fazer isso, gostaria de contar uma história sobre uma árvore. Mas esta é uma árvore bastante especial, e está localizada no coração da Floresta Pando, que fica em Utah. Agora Pando é uma floresta bastante especial. Tem uns 100 acres de tamanho. Então, digamos que você e eu estamos viajando lado a lado através desta floresta, e enquanto fazemos isso, estamos cercados por uma natureza incrível, belos troncos de árvores brancas atirando para fora
do chão ao nosso redor até onde os olhos podem ver. Depois de algum tempo viajando por esta floresta, me viro para você e digo que menti para você, mas só um pouquinho. Porque você vê, Pando não é realmente uma floresta, Pando é apenas uma árvore. Sabe, Pando é na verdade o termo latino para “Eu espalhei”. Pando não era o que é conhecido como uma colônia clonal, é uma única árvore de álamo tremedor gigante. Então cada árvore que você e eu podemos ver com nossos olhos é na verdade apenas um caule e cada um deles disparando para fora
deste enorme sistema de raízes subterrâneas que todos compartilham. Estima-se que existam cerca de 40.000 hastes em Pando hoje. Agora, Pando é na verdade uma árvore bem velha. Tem cerca de 80 mil anos de idade, o
que faz de Pando um
dos maiores e mais antigos organismos conhecidos do planeta hoje. Eu acho que esta é uma história realmente maravilhosa para começar. Porque eu acho que como designers ou talvez como seres humanos, nós tendemos a olhar para as coisas que parecem visualmente complexas, e é nosso instinto vê-los como mais distintos e mais separados do que eles realmente são por padrão. Tenho pensado muito nisso na minha própria prática de design. Normalmente, quando estou olhando para uma floresta completamente diferente. Que todos os diferentes dispositivos e navegadores que estou sendo solicitado para oferecer uma experiência bonita e atraente para. Essa é uma floresta mais complexa com a qual eu já tive que lidar ao projetar para a web. Mas a coisa é que, quando estamos projetando para a web moderna, isso é apenas estacas de mesa. A web está em qualquer lugar e em qualquer lugar que nossos usuários acontecem a estar com qualquer tela acontecer para ser mais próxima à mão. Então, pelo menos para mim, é fundamental
entender a web como um meio de design completamente flexível. Em outras palavras, quando estamos projetando para a web, estamos projetando para uma tela infinita completa. É uma tela completamente flexível, e nossos designs precisam ser tão flexíveis e
acessíveis quanto os dispositivos que nossos usuários estão segurando em suas mãos. O que é emocionante para mim como designer responsivo é que há muito trabalho de design responsivo excelente lá fora na web hoje que eu posso me inspirar. Tenho certeza que você encontrou tantos sites responsivos maravilhosos lá fora, mas deixe-me mostrar-lhe alguns exemplos que eu realmente gosto hoje. A coisa emocionante que eu penso sobre o design responsivo como ele está acontecendo hoje é que há realmente um grande trabalho responsivo sendo feito em diferentes indústrias. Aqui está Amherst College, que é realmente um ótimo exemplo de um site Higher Ed responsivo, e é bonito, e é impactante em praticamente qualquer tamanho de tela. Você percebe que, à medida que estou redimensionando a janela
do navegador, o design responsivo está mudando sua forma para
torná-lo acessível a telas pequenas e grandes. Os editores também têm usado design
responsivo de forma eficaz nos últimos anos. Aqui está o Financial Times, que tem um layout responsivo muito imponente e muito bonito, usando grades flexíveis, imagens flexíveis e consultas de mídia, para criar uma experiência responsiva realmente bonita. Mas não se trata apenas de editores ou sites da Higher Ed. Há uma série de aplicações web lá fora que têm vindo usar design responsivo de forma muito eficaz também. Aqui está o Adobe Type Kit, e eles têm uma interface muito complexa que você pode usar na tela pequena e grande para não apenas navegar fontes, mas também filtrá-las ao longo de uma série de eixos realmente complexos. A razão por que muitas
dessas organizações e empresas foram responsivas é porque eles reconhecem o fato de que ser agnóstico de
dispositivo é apenas estacas de mesa para projetar para a web moderna. Estamos projetando para muito mais do que apenas dispositivos desktop. A computação móvel explodiu nos últimos anos. Há cerca de oito bilhões de dispositivos móveis estimados em uso em todo o mundo, e esse número não parece estar caindo tão cedo. Computação tablet não é necessariamente o garoto mais novo no bloco, mas ainda está me piso que em 2011 sozinho, cerca de 80 novos tablets entraram no mercado em um período de 12 meses. Isso parece selvagem para mim. Então, com toda a rotatividade que estamos vendo na computação móvel e tablet, há uma quantidade compreensível de investimento e experimentação na tentativa de
entender qual será o próximo contexto de desktop post. Então, há uma quantidade considerável de investimento acontecendo em TVs inteligentes e relógios inteligentes e tantos novos contextos de tela diferentes que realmente têm navegadores realmente poderosos neles também. quantos deles vamos projetar no futuro. Agora, quando estamos olhando para um mercado complexo como este, é muito tentador dizer que devemos estar projetando experiências específicas para dispositivos móveis, experiências
específicas para tablets ou experiências específicas para desktop. Mas, na verdade, é muito mais poderoso e muito mais libertador se pararmos projetar para dispositivos individuais e, em vez disso, pensar um pouco mais flexível. Pense em oferecer uma experiência que pode ser visualizada em tela de qualquer tamanho. Porque, em última análise, não estamos apenas projetando para dispositivos, estamos projetando para as pessoas dos outros lados dessas telas. Pense em um leitor do seu site que pode estar voltando a esse site em vários pontos do dia com qualquer dispositivo ou dispositivos que estejam mais próximos. Isso é algo que muitos editores e organizações realmente perceberam. Que, sendo um pouco mais flexível e não tentando controlar as experiências muito em diferentes dispositivos, eles podem realmente impulsionar e melhorar o engajamento em todos esses dispositivos sendo um pouco mais agnóstico em como eles projetam para a Web. Em última análise, o design responsivo significa que você está projetando uma experiência flexível, que é entregue a todos os dispositivos que podem visitar esse site. Agora, essa experiência pode mudar em seu layout ou sua apresentação dependendo do tamanho da tela, mas tudo bem. Porque, em última análise, é um site que você está entregando a todos os seus usuários. Ao fazer isso, isso ajudará você a alcançar mais dispositivos e mais pessoas do que nunca. Então, estas são apenas algumas das coisas que estavam andando pela minha cabeça quando escrevi pela primeira vez aquele artigo chamado Responsive Web Design. Este é um artigo que foi publicado em 2010, que está basicamente dizendo que a flexibilidade inerente à web é algo que precisamos ver como uma força, em vez de algo que precisamos tentar controlar ou limite. Agora, no artigo, apresentei esta receita de alto nível para o que faz um design responsivo. Especificamente, cada design responsivo começa com um layout baseado em grade fluido ou flexível. Um layout criado com porcentagens e proporções em vez de pixels inflexíveis. Em seguida, há imagens e mídias que são
flexíveis que funcionam dentro desses layouts flexíveis. Finalmente, temos consultas de mídia, que são um pouco de pó de duende da especificação CSS. Eles nos permitem controlar a flexibilidade de maneiras que são úteis para nós. Podemos mudar e adaptar esses layouts de fluidos em diferentes pontos de interrupção. Em outras palavras, criar layouts que podem alterar sua forma e representar informações. Em outras palavras, eles podem responder à mudança
de forma de uma janela do navegador ou à exibição do dispositivo. Então, tudo isso soa muito técnico. Mas, em última análise, é importante reconhecer que um layout responsivo no final do dia é apenas flexível na natureza, mas então ele muda e se adapta a certos pontos de interrupção para torná-lo acessível a telas estreitas e amplas. Neste curso, vamos estar olhando para o design de amostra para revista fictícia, uma que foi criada por, para, e sobre dinossauros. Agora, os arquivos de exemplo para esse design estarão acessíveis na seção de recursos deste curso. Se você quiser acompanhar, por favor, faça. Mas esse design é o que vamos usar para realmente mostrar como esses três ingredientes de um design responsivo se encaixam. Então, usaremos grades fluidas, imagens flexíveis e consultas de mídia para traduzir esse design em um design completamente flexível e totalmente responsivo. Também analisaremos algumas estratégias para mudar nosso processo de design, que você possa ser um designer ou desenvolvedor mais flexível. Com isso, vamos começar.
3. Passo um: grades fluidas: Então, vamos começar com a base de um design responsivo que é realmente um layout flexível ou baseado em grade fluido que vai potencializar toda a sua experiência. Porque realmente todo design responsivo começa com uma base flexível. Então, vamos dar uma olhada em como podemos traduzir uma marcação para um design e transformá-la em um layout totalmente flexível baseado em grade. Então, esta é a marcação que criei e desenhei para a nossa revista fictícia chamada Rawr, que é por, para e sobre dinossauros. Agora, se você já projetou uma página da Web no Photoshop ou no Illustrator, provavelmente estará familiarizado com o funcionamento de um layout como esse. Agora, isso é apenas uma foto de um site e de cima para baixo temos coisas como artigos recentes, uma história de capa, uma carta de editores para a revista e, finalmente, um rodapé até o fundo. Nada realmente super extravagante, mas este é realmente muito bom caso de uso para nós para mostrar como você pode traduzir um design de largura fixa em algo que é muito mais flexível. Agora, na seção de recursos para a classe, você vai encontrar um link para alguns arquivos de amostra que eu
criei e eu vou estar usando estes hoje para basicamente trabalhar através dos três ingredientes para design responsivo e mostrar você como eles podem realmente ser aplicados ao nosso layout de amostra. Então, eu vou começar com a primeira seção sobre a criação de redes de fluidos. Então, neste arquivo HTML, eu criei basicamente um design de
estilo levemente simples para a seção de artigo recente em nosso layout de amostra. Agora, você vai notar que não há muito na forma de design, há apenas um tamanho de fonte simples e estilos simples e não há imagens. Eu realmente só quero me concentrar no conteúdo e no layout para esta primeira seção. Então, se eu vou traduzir isso em uma grade completamente flexível, eu preciso voltar e olhar para o meu design. Agora, nesta maquete, vou focar apenas nos artigos recentes. Eu tenho uma grade de cinco colunas muito direta para este layout de tela larga. Agora, se eu quiser traduzir isso em HTML e CSS, eu basicamente posso usar algo chamado CSS Grid para construir esse layout rapidamente. Vamos dar uma olhada rápida no HTML para este módulo. Então, dentro deste artigo div recente, eu tenho quatro elementos. Eu tenho o cabeçalho que contém o título para esta seção bem
como um link para ler mais artigos e, em seguida, abaixo desse cabeçalho, eu tenho dois artigos que são basicamente teasers para o conteúdo que eu quero que o usuário leia ou clique em. Então, finalmente, tem um elemento de lado que contém uma lista de links adicionais, basicamente para histórias secundárias. Se voltarmos ao layout, você pode basicamente ver que isso é mais ou menos o que criamos. Então, na minha simulação, vou me concentrar apenas nesta seção de artigo recente. O que eu vou fazer é, eu vou fazer um inventário rápido
dos diferentes tipos de conteúdo que eu tenho dentro deste módulo. Bem, logo no topo, eu tenho um cabeçalho que anuncia o título para esta seção de artigo recente, bem como um link mais para o lado que me permite criar um link para mais artigos. Então, por baixo desse cabeçalho, eu tenho duas histórias proeminentes que são basicamente apenas teasers de conteúdo para atrair o leitor a tocar ou clicar nesses artigos. Então, eu tenho uma lista de artigos relacionados desviados para a direita em uma barra lateral. Agora, eu não vou me concentrar no layout, eu só quero me concentrar nesses diferentes tipos de conteúdo porque o que eu fiz foi, eu traduzi esses em uma marcação bastante simples. Eu tenho um contêiner para esse módulo de artigos recentes e, em seguida, dentro disso, eu tenho um cabeçalho com minha manchete, daí o nome. Então, eu tenho dois elementos de artigo que contêm um pouco de informação teaser para esses dois pedaços de conteúdo. Então, neste bloco de lado, eu tenho uma lista ordenada que contém novamente, uma lista de links para histórias secundárias. Se voltarmos e olharmos para o nosso protótipo, esse é mais ou menos o nosso ponto de partida, não
temos um layout, mas temos alguns estilos de fonte de luz aplicados a essa marcação muito direta. Agora, se eu quiser traduzir esse layout em HTML e CSS, vou voltar à minha grade e dar uma olhada nas colunas com as quais estou trabalhando. Agora, especificamente, cada uma dessas colunas tem 180 pixels largura e eu tenho cinco delas e a calha entre cada uma dessas áreas tem 25 pixels de largura. Agora, isso está apenas na minha marcação e eu estou lidando com pixels inflexíveis fixos. Agora, se eu quisesse construir esse layout rapidamente no meu CSS, eu poderia fazer isso com algo chamado grade CSS. Agora, o layout de grade CSS é uma maneira relativamente nova de criar layouts para a web moderna. Se você já fez alguma coisa com flutuadores ou posicionamento absoluto, CSS grid realmente combina os melhores elementos de ambos e nos
permite criar layouts muito mais rapidamente, é incrivelmente poderoso. Então, por exemplo, no meu bloco artigos-recente, eu poderia escrever um pouco CSS que basicamente diz, dentro de artigos-recente, eu quero definir isso para exibir grade e, em seguida, eu vou
fazer colunas de modelo de grade e então eu sou vai fazer 180 pixels e eu vou escrever isso cinco vezes. Então, eu vou escrever grade-coluna-gap 25 pixels. Agora, estas são todas as medidas de pixel que eu tirei diretamente da minha marcação. Quando eu salvar isso e eu recarrego minha janela do navegador. Então, no Firefox há um utilitário muito útil que eu posso usar para inspecionar rapidamente meus layouts baseados em grade. Então, eu abri o inspetor do meu navegador e se eu selecionar este bloco de artigos recentes no qual acabei de criar um layout de grade,
no painel direito há uma opção para alternar o realçador de grade CSS. Então, se eu clicar nesse pequeno símbolo, isso vai me mostrar o esqueleto para o layout que eu acabei de criar com essas três linhas de CSS. Eu basicamente criei um estágio que é um layout de grade e
definindo colunas de modelo de grade para 180 pixels cinco vezes, eu criei cinco 180 pixels de largura colunas e
espaço de coluna de grade 25 pixels basicamente criou uma calha de 25 pixels entre cada uma dessas áreas. Agora, cada coluna é criada configurando algumas linhas de grade, uma à esquerda e outra à direita. Agora, cada um deles é na verdade numerado e podemos usar esses números para definir as diferentes partes de nossa grade ao longo dessas linhas de grade, em outras palavras, para completar nosso layout. Então, por exemplo, nosso elemento de cabeçalho está atualmente restrito a esta primeira coluna, o que queremos que ele faça é estender a largura total
dessas cinco colunas em todas as seis linhas de grade. Para fazer isso, eu posso apenas abordá-lo no meu cabeçalho CSS articles-recent e eu posso basicamente dizer, grid-column-start: one e, em seguida, eu também posso dizer, grid-column-end: six. Então, eu vou recarregar meu navegador e agora nós
temos um cabeçalho que abrange toda a largura do nosso layout de grade, da primeira linha de grade na extrema esquerda para a sexta linha de grade na extrema direita. Então, vamos ver se podemos realmente melhorar a largura de nossas histórias também. Então, agora, ambas as nossas histórias estão basicamente abrangendo
apenas uma coluna tal como o nosso cabeçalho era antes. Então, vamos ser um pouco mais explícitos. Então, para a primeira história que é classe para liderar história,
eu gostaria de ver grade-column-start um,
mas eu queria que ele abrangesse eu gostaria de ver grade-column-start um, duas colunas. Então, o que eu vou fazer é eu vou dizer, grid-coluna-end três. Então, que ele basicamente vai para a linha de grade que está no final da segunda coluna. Eu vou salvar meu CSS, voltar para o meu navegador e perceber e agora essa história está abrangendo duas colunas em vez de ser esmagada em uma. Vamos fazer a mesma coisa com a nossa história final que é classificada como história-alt. Agora este vai começar na terceira coluna basicamente no final logo após a primeira história, e então também eu queria estender duas colunas. Então, eu vou fazer a coluna de grade e cinco. Agora, se eu salvar meu trabalho e recarregar o navegador, agora temos algo que realmente parece um pouco mais próximo do design que colocamos em nossa marcação. Nós estendemos duas colunas em vez de sermos esmagados em uma. Agora este é um layout básico e nós podemos realmente melhorar isso apenas um pouco mais. Grade-column-start e grade-column-end podem realmente ser expressos um pouco mais concisamente porque podemos usar esse tipo de notação de barra em uma propriedade de coluna de grade para dizer que queremos que este elemento comece nesta linha de grade e terminam neste momento usando essa notação de barra. Então, para o elemento de lead de história, por exemplo, poderíamos basicamente dizer grade-coluna uma barra três em vez de colunas de grade começar um e coluna de grade final três. Para story-alt, em vez de grade-column-start três e grade-column-end cinco, podemos fazer grade-coluna-três barra cinco, apenas uma maneira ligeiramente diferente de fazer o mesmo layout com um pouco mais de eficiência. Agora aqui está a coisa sobre esta camada que acabamos de criar. Usamos pixels para traduzir perfeitamente o layout de nossa marcação em código, mas a coisa sobre pixels é que eles realmente não mudam sua forma. Então, se eu redimensionar minha janela do navegador para simular como isso pode parecer em uma tela menor, as coisas ficarão um pouco estranhas. Então, eu vou tornar a janela do meu navegador um pouco mais estreita e como eu faço isso você
vai ver que o layout não muda sua forma. Na verdade, eu tenho esta barra de rolagem horizontal muito legal para significar que eu tenho mais layout que está atirando para fora do lado direito da tela. Então, é aqui que precisamos pegar aquele layout fixo e flexível que
projetamos no esboço e traduzi-lo em algo mais proporcional. Há uma fórmula muito direta que você precisa usar para fazer isso. Vamos falar um pouco de matemática aqui e peço desculpas por isso porque eu também tenho medo de números. Mas se você estiver traduzindo qualquer layout de largura fixa em algo mais proporcional, use esta fórmula. Destino dividido por contexto é igual a resultado. Deixe-me mostrar-lhe como isso funciona. Digamos que você tem uma parte do seu design que pode ser uma coluna em sua grade, pode
ser um módulo em particular. Bem, as chances são boas se você usou um programa como Sketch ou Photoshop para projetar seu layout que tem um valor de pixel alvo nesse layout. Agora, em vez de pegar esse valor de pixel e colocá-lo em nosso CSS como eu acabei de fazer, o que queremos fazer é pegar esse valor de pixel alvo e traduzi-lo em algo mais proporcional. Para fazer isso, dividimos em relação ao contexto em que se encontra. Mais especificamente, dividimos contra a largura do seu elemento contendo e o design. Uma vez que
dividimos esses dois números juntos, ficamos com o resultado baseado em porcentagem que
podemos traduzir em nossa grade flexível. Deixe-me mostrar-lhe como isso funciona. Agora eu estou de volta na minha maquete e eu
vou olhar para as características do layout que eu
projetei e tentar entender as relações entre diferentes larguras em meu layout. Agora, como vimos antes, a largura de cada coluna individual tem 180 pixels de largura. Essa é a largura do pixel alvo. O que eu quero fazer é entender realmente
a relação desse valor em relação a toda a largura
do experimento que tem 1.000 pixels de largura da borda esquerda da grade para a borda direita. Então, realmente em vez de dizer 180 pixels, eu quero 180 pixels divididos por 1.000 pixels, valor de pixel
alvo de 180 pixels dividido pelo contexto em que ele se encontra, que é 1.000 pixels. Então, se eu dividir esses dois números um contra o outro, eu vou conseguir 18%. Então, se eu substituir o resto dessas referências de 180 pixels por 18%, agora
eu tenho o início de uma grade flexível. Agora, à medida que
redimensiono a janela do meu navegador, os valores de pixel dessas colunas mudarão ao longo do tempo, mas as proporções que
criei na minha marcação permanecerão intactas e esse é o componente-chave de uma grade flexível. As relações entre larguras em vez das próprias larguras. Agora, há um pequeno trabalho de detalhe que é esta lacuna de coluna de 25 pixels que temos aqui também. Mas podemos traduzir isso em algo mais baseado em porcentagens também. Agora, os 25 pixels é o que projetamos em nossa maquete, mas também podemos usar esse alvo dividido por contexto é igual a fórmula de resultado aqui também. Estamos dividindo esses 25 pixels contra o mesmo contexto de antes, 1.000 pixels a largura total de nosso layout baseado em grade. Então, 25 pixels divididos por 1.000 pixels é igual a 2,5 por cento. Então, agora, quando eu salvo meu trabalho, ambas as colunas e as calhas são completamente flexíveis com visão de pixel
mais estreita e agora eu tenho uma grade completamente flexível. Agora, um pequeno pouco de finesse trabalho que podemos fazer com este layout. Eu escrevi 18 por cento cinco vezes, mas há realmente uma pequena ferramenta realmente grande dentro da grade
CSS que nos permite ser um pouco mais conciso. Especificamente, há essa função chamada repetição, que me permite basicamente dizer em vez de escrever 18 por cento cinco vezes, eu posso basicamente dizer que eu tenho cinco colunas que são 18% largura e que basicamente vai ser exatamente o mesmo resultado que é um pouco mais conciso. Mesmo layout exato, apenas uma maneira ligeiramente diferente de expressá-lo. A última coisa a ter em mente e então eu vou deixar a matemática para trás por um pouco, é que há também esta unidade muito legal dentro da grade CSS chamada unidade fracionada que basicamente significa que podemos representam perfeitamente o espaço restante. Em vez de escrever 18 por cento, podemos apenas dizer um f r que basicamente diz que para qualquer espaço que sobrou depois que alocamos nossas lacunas de coluna, eu quero que você divida perfeitamente esse espaço cinco vezes em nossos cinco separados colunas. Então, ao invés de fazer matemática super complexa para cada parte do seu projeto às vezes que uma unidade f r será tudo que você precisa e, em seguida, temos nossa grade completamente flexível.
4. Passo dois: imagens flexíveis: Então, na última lição, criamos algumas grades flexíveis usando essa nova tecnologia chamada layout CSS Grid. Mas em nossas grades, nós realmente não incluímos muitas imagens. Então, vamos consertar isso. O que eu fiz foi na segunda seção de arquivos de exemplo que você vai encontrar nos recursos, eu voltei para as grades flexíveis, e eu adicionei algumas imagens, uma parte chave do design. No módulo de artigos recentes, incluí algumas fotos no topo dos próprios artigos em destaque. Na carta dos editores, incluí uma pequena foto de que uma empresa é a sublinha na coluna da esquerda. Eu também fui em frente e criei um layout completo em uma grade flexível para este módulo realmente splashy olhando chamado, nossa história de capa, e vou mostrar algumas estratégias para gerenciar imagens aqui também. Mas vamos começar no topo do design, em primeiro lugar. Agora, assim como antes, nossas imagens são descartadas no html e as grades são completamente flexíveis. Então, vamos ver o que acontece quando realmente
redimensionamos as grades agora que incluímos imagens. Vou tornar a janela do meu navegador um pouco mais estreita para simular o que acontece em telas menores. Assim como antes, nossas colunas serão completamente flexíveis. Mas, oh meu Deus, as coisas estão quebradas agora que incluímos imagens. Aqui está a coisa com as imagens, é que quando elas são exibidas para o usuário final, as imagens realmente têm dimensões nativas, elas têm uma largura e uma altura. Como nós os colocamos em nossos designs sem fazer nada com eles em CSS, eles estão apenas renderizando em suas dimensões nativas e estão quebrando nosso layout. Eles estão escapando das colunas
em que se sentam e quebrando a experiência para o usuário final. Mas, assim como qualquer outro aspecto de nossos projetos, podemos realmente controlar a apresentação dessas imagens com nosso CSS. Agora, se você quiser ter imagens flexíveis aparecendo dentro de seus designs responsivos, há uma peça muito simples de CSS que você deve saber para fazê-las funcionar dentro de suas grades flexíveis. Isto é, imagem, largura máxima 100 por cento. Isso não parece muito, mas um pedaço de código basicamente diz que uma imagem pode renderizar em qualquer tamanho que quiser, desde que nunca seja maior do que o elemento que se encontra. Em outras palavras, isso significa que a imagem pode ser renderizada em qualquer tamanho que desejar, mas se essa coluna for menor
que a imagem, essa imagem será redimensionada proporcionalmente e diminuirá para caber dentro dessa coluna. Deixe-me mostrar-lhe como é dentro do nosso projeto de amostra. Então, se adicionou a largura máxima da imagem 100 por cento, e agora como eu redimensionar a janela do meu navegador, você notará que as imagens estão sendo redimensionadas proporcionalmente também. Eles são completamente flexíveis e são redimensionados de forma tão flexível quanto as nossas redes. Agora, você pode notar que, em resoluções de tela mais amplas, algumas dessas imagens não estão necessariamente ajustando a largura total da coluna, e talvez isso seja bom para certas partes do seu design. Mas pelo menos para este, eu gostaria de garantir que essas classes particulares de imagens sempre serão de largura total. Para fazer isso, eu tinha um pedaço ligeiramente diferente de CSS, só para essas imagens. Então, como você deve se lembrar, dentro do trabalho recente deste artigo, temos dois elementos de artigo que contêm essas histórias teaser que são destacadas dentro desse módulo. Agora, as imagens em si que eu classifiquei com um pouco de html, eu dei-lhes um nome de arte. Então, basicamente eu posso dizer que dentro desses elementos da história, eu quero que essas imagens de arte sempre tenham uma largura de 100%. Isso é um pouco diferente de 100 por cento de largura máxima, que basicamente diz que a imagem nunca deve exceder a largura de seu contêiner. Largura 100 por cento diz que eu sempre quero que a imagem corresponda à largura de seus elementos que contêm. Então, agora, se eu voltar, você vai notar que essas imagens estão perfeitamente niveladas contra a largura que eles estão contendo coluna. Eles ainda são completamente flexíveis, mas agora, independentemente da largura da coluna, haverá sempre uma hemorragia completa. Agora, vamos descer um pouco mais. Agora, novamente, temos esta imagem inserida que acompanha a sublinha nas letras do editor. Assim como antes, se eu redimensionar minha grade para torná-la muito menor, largura máxima da imagem 100 por cento está fazendo belo trabalho garantindo que essa imagem seja redimensionada proporcionalmente. Agora, como veremos em uma lição posterior, há muito trabalho de ajuste e acabamento que pode ser usado para controlar quais imagens você envia para seus usuários, mas essa regra de largura máxima de 100 por cento da imagem é realmente o primeiro passo em nossa jornada. É uma das ferramentas mais críticas no kit de ferramentas do designer responsivo. Então, conseguimos restringir algumas das imagens que incluímos em nosso html de maneiras que não quebram as grades flexíveis que criamos para nosso layout responsivo. Mas e se estivermos lidando com imagens de fundo? Isso é algo que surge muito frequentemente no meu trabalho e tenho certeza que o mesmo é verdade para você também. Agora, eu vou voltar para o design que eu
criei no esboço para este layout em particular. Há um elemento em particular que eu vou focar agora, que é esta imagem de fundo de uma pegada fóssil que eu gostaria de ter incluído no meu projeto. Então, para fazer isso no meu CSS, eu vou apenas incluir esse arquivo SVG. Então, no elemento principal, eu vou definir uma imagem de fundo que aponta para o caminho do meu arquivo footprint.SVG, e agora eu vou usar a propriedade background-repeat para dizer que eu só quero uma versão da imagem, Eu não quero um azulejo inteiro no fundo, e eu vou configurá-lo para nenhuma repetição. Agora, uma vez que eu fiz isso, eu tenho uma imagem enorme como o fundo para o meu design. Agora, isso não é o que eu disse no esboço, idealmente o que eu gostaria de ver acontecer é que eu gostaria de ancorar isso no canto superior direito e eu gostaria de torná-lo um pouco menor. Para controlar o tamanho das imagens de fundo, assim como fazemos com imagens embutidas, podemos usar a propriedade tamanho de fundo. Agora, o tamanho do fundo é uma propriedade muito poderosa e pode ser muito útil em circunstâncias diferentes. Por exemplo, eu poderia configurá-lo para 200 pixels, auto. Agora, o que isso significa é que a imagem será redimensionada para uma largura de 200 pixels, e então eu defini sua altura para redimensionar para automático, que basicamente garante que ela será redimensionada proporcionalmente para caber dentro dessa largura de 200 pixels. Vamos ver como isso se parece. Então, agora temos uma pequena pegada no canto superior esquerdo do nosso design. Agora, eu posso tornar isso um pouco mais proeminente, eu poderia definir essa posição de fundo para 95 por cento e zero, que basicamente se moverá em 95 por cento do caminho através do eixo horizontal, movendo-o para a coluna direita, e, em seguida, tê-lo ancorado no canto superior direito usando uma posição de fundo zero. Então, agora nós o temos ancorado no canto superior direito. Agora, tudo bem, mas assim como com nossas imagens antes, a largura dessa pegada não está mudando. Também podemos usar valores proporcionais para nossos tamanhos de fundo. Então, o que eu vou fazer é definir esse tamanho de fundo para 30 por cento, que basicamente irá configurá-lo para 30 por cento de seu elemento contendo, em outras palavras, neste caso, a janela completa do navegador. Então eu vou trazer sua posição de fundo para baixo apenas um pouco fora do topo, ele se sente um pouco perto da borda da janela do navegador. Então, agora que eu defini o tamanho do plano de fundo para 30%, a imagem é muito mais proeminente, e também, ela vai redimensionar proporcionalmente. Então, em telas menores, essa imagem vai ser muito menor do que seria em outras mais amplas. Agora, como eu disse antes, o tamanho do fundo é incrivelmente poderoso. Na verdade, existem algumas outras propriedades que podem ser úteis para você em outras partes do seu design. Há um em particular chamado “capa”. Pode ser realmente útil. Um site responsivo que eu acho que usa isso de forma muito eficaz está em virb.com. Então, esta imagem que você vê
na área de banner superior direita em sua página inicial é na verdade uma imagem de fundo. À medida que redimensiono a janela do navegador, você notará que essa imagem sempre mantém seu tamanho para corresponder à largura do contêiner. Assim, como esse contêiner fica mais estreito ou fica mais curto, ele é definido para a cobertura de tamanho de fundo que basicamente garante que a imagem
sempre cobrirá perfeitamente o espaço disponível na frente
dele, é uma propriedade realmente poderosa e pode ser muito útil para nós também. Mas estas são apenas algumas das diferentes estratégias que podemos usar para gerenciar imagens de
fundo de forma mais flexível em nossos projetos. Usando o tamanho de fundo e a posição de fundo, podemos realmente realmente controlar com precisão não apenas o posicionamento, mas também o dimensionamento proporcional de nossas imagens de fundo também. Agora, o tamanho do fundo é realmente ótimo, e na verdade há uma maneira de fazer algo muito parecido com imagens embutidas também, e para dar um exemplo disso,
vou mostrar a vocês nossa história de capa. Dentro do nosso módulo de capa, há uma imagem proeminente muito grande incluída dentro desta área de conteúdo. Agora, ele é configurado em um layout baseado em grade, assim como fizemos com nossas outras grades flexíveis, e se eu mostrar as linhas de grade para essa imagem em particular,
essa imagem de arte de introdução,
a foto embutida é basicamente definida para abranger cinco colunas. Mas ele não atende às cinco colunas completas, e também está deixando um pouco de uma lacuna na parte inferior da imagem. Idealmente, o que eu gostaria de ver acontecer é que eu gostaria de ter essa imagem em altura total, então ela cobre perfeitamente o espaço vertical dentro deste módulo. Bem, eu posso fazer isso definindo 100% de altura nessa imagem. Então, ao definir a altura 100 por cento nesta imagem, nós realmente esticamos esta imagem um pouco no eixo vertical. Idealmente, o que gostaríamos de ver acontecer é que queremos garantir que essas proporções permaneçam intactas. Agora, a maneira que podemos fazer isso, porque esta é uma imagem embutida, é com algo chamado ajuste de objeto, que é uma propriedade um pouco mais recente em CSS. Então, o que eu vou fazer é, eu vou definir o ajuste do objeto para cobrir, e você vai notar agora que a imagem mantém suas proporções originais. É basicamente um pouco como a capa de tamanho de fundo, mas para imagens em linha. Nós esticamos essa imagem em um determinado espaço, mas nós basicamente dissemos que a imagem que aparece dentro
desse espaço deve ser redimensionada proporcionalmente dentro dessa tela, e esta é outra propriedade realmente valiosa que pode ser útil para você em determinadas circunstâncias. Então, nesta lição, analisamos algumas estratégias diferentes para gerenciar imagens
inline que aparecem em nosso html e também para imagens de fundo. Usando algumas dessas técnicas em conjunto entre si, podemos ter imagens tão flexíveis quanto nossas redes flexíveis de fluidos.
5. Passo três: perguntas de mídia: Então, em nossas duas últimas lições, analisamos as maneiras em que podemos usar grades flexíveis e imagens flexíveis juntos. Mas a coisa sobre layouts flexíveis, é que eles nem sempre são a melhor experiência. Então, por exemplo, em nosso módulo de artigos recentes, uma vez que eu trazer a janela do navegador em cerca de, digamos 50 por cento, nós já podemos dizer que esta não é a melhor experiência para o usuário. Alguns dos comprimentos da linha, começam a se sentir um pouco apertados. Começam a embrulhar dramaticamente. Este layout não é realmente um prazer de ler mais. Não se sente tão confortável como em uma tela mais larga. O mesmo é verdade, se avançarmos um pouco mais para a carta dos nossos editores. Novamente, o layout parece bom. Está redimensionando proporcionalmente, mas a experiência de leitura não é necessariamente ideal. Essa manchete de cima parece muito pesada e proeminente. Na verdade, se trouxermos nossa janela do navegador ainda um pouco mais, ela começa a ocupar consideravelmente mais imóveis do que realmente precisa. Novamente, nossa grade está redimensionando de forma flexível, mas chega a um certo ponto o design, onde ele começa a se separar. Portanto, não é a melhor experiência que podemos começar a servir aos nossos usuários finais. Então, talvez, precisamos olhar para uma maneira em que podemos pegar essa base flexível e remodelá-la um pouco. Para talvez mudar a forma como as informações são apresentadas, em determinadas larguras de tela ou viewport, a fim de servir algo que não se encaixa apenas, mas também se sente em casa em tela de qualquer tamanho. É aqui que as consultas de mídia entram. Este é um pouco de CSS que vamos aplicar à nossa base flexível para melhorar a experiência, que ela
fique bonita em telas pequenas e largas. Então, eu vou escrever um pouco de CSS simples, que mostra como uma consulta de mídia pode funcionar. Porque realmente media query é como uma pergunta, estamos fazendo um navegador. Estamos perguntando ao navegador se ele atende a certas características ou condições. Se ele passar no teste, e dizer,
sim, eu atender todas essas condições que você definiu em sua consulta de mídia, então podemos aplicar condicionalmente algumas regras de estilo extra apenas para essas circunstâncias específicas. Eu vou começar com algo muito simples que é dizer que no elemento corpo, eu quero que a cor do texto seja preto. Mas quando tenho uma largura de tela com pelo menos 500 pixels de largura, quero que a cor seja vermelha e quero que o texto seja negrito. Deixe-me mostrar-lhe como isso se parece na prática. Então, aqui está como a tela se parece em um dispositivo menor. Estou usando o modo de design responsivo do Firefox, para simular esse efeito de tela estreita. Mas à medida que eu faço a viewport um pouco mais ampla, o texto vai redimensionar proporcionalmente. Mas uma vez que eu atingi uma largura de tela de cerca de 500 pixels, o design muda muito dramaticamente, porque essas condições de consultas de mídia foram atendidas. Em nossa consulta de mídia, dissemos que você só deve aplicar a cor vermelha, você só deve aplicar o negrito, se tivermos pelo menos uma largura mínima de 500 pixels. Se for esse o caso, então vamos fazer as coisas parecerem bem, francamente feias. Esta não é a consulta de mídia mais útil, mas no seu núcleo, esta é a flexibilidade que podemos aplicar aos nossos designs responsivos. Podemos mudar o layout e mudar a tipografia e mudar outros aspectos do nosso design, maneiras que são um pouco mais úteis para nós do que o texto vermelho. Então, vamos dar uma olhada mais de perto na sintaxe para consultas de mídia. Agora, nós dissemos antes que esta é uma pequena pergunta que estamos fazendo ao navegador e cada media query basicamente se divide em dois componentes específicos. Toda consulta de mídia começa com um tipo de mídia, que descreve a classe de dispositivo ou mais especificamente a mídia que estamos tentando estilizar. Agora, na especificação CSS, existem quatro tipos de mídia aceitáveis que são descritos. Tela, como dispositivos móveis e tablets e navegadores de desktop. Há também o tipo de mídia de fala, para navegadores orais que podem estar lendo conteúdo permitido ao usuário. Há também o tipo de mídia impressa, para estilos específicos de impressão e, finalmente, há o tipo de mídia todo, que basicamente diz que essa consulta de mídia deve se aplicar a todas as mídias. Agora, o tipo de mídia é completamente opcional. Se você deixar de fora, você está efetivamente dizendo que isso se aplica a todos os meios de comunicação. padrão é que todo o tipo de mídia. A segunda parte da consulta de mídia é, a chave real para desbloquear o poder por trás de uma consulta de mídia. Esse é o recurso da mídia. Esta é realmente a pergunta que estamos fazendo ao navegador. Como já dissemos antes, esse recurso de mídia em particular está dizendo, é sua janela de visualização, sua janela do navegador tem pelo menos 500 pixels de largura? caso afirmativo, ele aplica os estilos dentro da consulta de mídia. Agora, há uma série de diferentes recursos de mídia que você pode realmente consultar. Nós não vamos necessariamente cobrir todos eles nesta classe em particular. Se você estiver interessado em aprender mais, haverá um link nos recursos para uma lista completa de todas as diferentes opções disponíveis para você. É justo dizer que a maior parte do que fazemos em um design responsivo é, aplicando consultas de largura mínima para camadas de estilos
mais complexos em nossos designs à medida que as telas se tornam mais amplas ao longo do tempo. Então, vamos dar uma olhada em nosso layout de exemplo e observar algumas maneiras pelas quais podemos usar consultas de mídia de largura mínima,
para colocar em quarentena alguns desses estilos widescreen em telas bem mais amplas. Então, quando estou começando a aplicar consultas de mídia a um layout flexível, acho que é realmente útil olhar para as áreas em que meu design está começando a quebrar e onde ele está começando a quebrar à medida que a tela fica mais estreita. Então, como dissemos antes, ainda
estamos lidando com um layout flexível baseado em grade, que tem cinco colunas de largura, que realmente é ideal para dispositivos de tela larga e navegadores. Então, abaixo desse ponto widescreen, queremos aplicar um layout diferente. Nós só queremos aplicar esse layout de cinco colunas, quando as telas estão pelo menos acima de uma certa largura. Então, eu vou começar, pegando algumas das regras de layout de grade widescreen que escrevemos para o módulo de artigos recentes e rodeando-os com uma consulta de mídia. Então, eu vou escrever mídia, min-width, 60em. Então eu vou pegar todas
essas regras de grade que escrevemos para o módulo de artigos recentes, e aplicá-las dentro dessa consulta de mídia. Agora, 60em, é basicamente equivalente a escrever 960 pixels. Gosto de usar consultas de mídia baseadas em m porque elas são um pouco mais acessíveis. Se alguém alterar o tamanho do texto em seu navegador
, as consultas de mídia irão mais ou menos seguir essa preferência para o usuário final. Se você estiver mais confortável escrevendo consultas de mídia baseadas em pixels, tudo bem. Esta é uma preferência estilística e uma que eu acho que é um pouco mais acessível, mas independentemente de como você escreve. Agora, que temos uma consulta de mídia que diz, acima desta largura de tela larga, acima de uma largura de 60em, aplicar este layout de grade. Se eu salvar minhas alterações e voltar para o navegador
e atualizar meu trabalho, e atualizar meu trabalho, quando eu cair abaixo do limite do 60em, perco meu layout baseado em grade e as coisas se linearizam para um único design de coluna. Agora, neste momento, isso não é muito atraente. Mas eu acho que você pode ver como em uma tela menor, isso realmente funciona incrivelmente bem. Começamos com um layout de tela pequena
e, em seguida, quando chegarmos a uma certa largura, podemos tornar o design tão complexo quanto precisa ser. Podemos aproveitar melhor o espaço disponível para nós. Isso não muda o fato que ainda temos esse período de transição embaraçoso. Então, o que eu vou fazer é, eu vou aplicar uma media query de 35em. Então, eu escrevi na mídia, largura mínima,
35 EMS, que deve ter como alvo esse layout de faixa média muito bem. Agora, dentro desta área, eu vou mirar meus artigos bloco recente. Vou declarar um layout baseado em grade. Mas em vez de fazer um layout de cinco colunas, eu vou fazer um layout de quatro colunas. Então eu vou trazer a lacuna da coluna para dois por cento. Agora, antes de continuar, eu só quero notar que estamos sobrepondo a complexidade à medida que a primavera se torna cada vez mais ampla. Todas as regras da consulta de mídia anterior, aplicaremos as seguintes. Então, isso é como um efeito de camadas que estamos fazendo em nosso design à medida que as coisas ficam mais complexas. Eu mencionei isso porque nós declaramos exibição, grade neste ponto no CSS, o que significa que quando atingimos nosso layout widescreen, podemos realmente remover a segunda declaração. Nós já declaramos que é um ponto de interrupção mais estreito, e assim ainda será um efeito quando chegarmos ao mais amplo. Então, agora temos um layout de quatro colunas. Você pode se lembrar desse estranho posicionamento padrão de itens em nosso layout de grade da lição anterior. Mas o que realmente fizemos aqui, se ativarmos as linhas de grade no Firefox, você pode ver que criamos uma grade flexível de quatro colunas. Agora, podemos usar isso para completar nosso projeto como fizemos antes. Neste ponto de interrupção, eu ainda quero que meu cabeçalho abranja toda a largura do módulo. Então, para fazer isso, eu posso realmente pegar a regra
do ponto de interrupção widescreen e movê-la para o estreito. Isso é algo que eu quero que seja verdade tanto neste ponto de interrupção intermediário também no widescreen. Eu posso basicamente dizer coluna de grade iniciar um, e coluna de grade e um negativo para ter a sua extensão a largura total da linha. Agora, temos um cabeçalho de linha completa no topo. Agora, lembre-se, temos um layout de quatro colunas com o qual estamos trabalhando em vez de um layout de cinco colunas. Então, o que eu gostaria de ver acontecer é que eu gostaria que todas as histórias dentro do meu bloco de
artigos recentes tivessem uma grade coluna-end, e eu quero abranger duas colunas. Então, uma vez que eu salvar isso, agora
temos mais ou menos o tipo de layout que estamos procurando neste intervalo médio. Ambas as histórias são igualmente ponderadas através deste eixo horizontal, ambas abrangendo duas colunas, e as histórias secundárias estão sentadas abaixo. Isso é muito melhor do que o que tínhamos antes, porque tínhamos um layout de coluna única para telas pequenas, e agora temos um ponto de interrupção de faixa média agradável para tudo no meio, movendo-se para o topo. Então, isso é uma melhoria, mas há um pouco de ajuste e acabamento de trabalho que ainda podemos fazer. Especificamente, esta lista de histórias aqui no fundo parece um pouco que poderia estar aproveitando melhor o espaço disponível. Para fazer isso, eu vou realmente tratar esta lista como uma grade em si neste ponto de interrupção em particular. O que eu vou fazer a seguir é eu vou dizer que uma vez que eu tenha atingido um ponto de interrupção de pelo menos uma largura de 35 ems, mas também com uma largura máxima de 60 ems. Quero tratar essa lista um pouco diferente. Então, esta é uma maneira que podemos combinar recursos de
mídia juntos para tornar a consulta de mídia mais complexa. Podemos basicamente dizer que queremos que tenha pelo menos 35 ems de largura, mas não superior a 65 ems, apenas para atingir a área do meio. Assim que tivermos o ponto de interrupção do meio no lugar, então eu posso escrever um pequeno código para atingir minha barra lateral. Especificamente, eu vou escrever artigos-recent-aside e artigos-recent-teaser-list. Isso vai me deixar segmentar tanto o elemento de lado que contém a barra lateral, e também a lista dentro dele. Então eu vou escrever display: conteúdo. Agora, esta é uma pequena peça mágica da especificação CSS Grid que nos
permite desligar essas partes de HTML. Em outras palavras, estamos dizendo ao navegador para fingir que esses elementos não existem e apenas focar em tudo o que está dentro da lista em si, especificamente nossos links para histórias secundárias. Uma vez que fazemos isso, eu salvo meu trabalho, eu volto para o navegador. Esses itens da lista serão tratados como se fossem parte da grade que fica acima deles, e assim eles serão dispostos nessas quatro colunas. Existem diferentes maneiras de abordar este problema. Você poderia usar outros métodos de layout para definir esses elementos estão ao longo das mesmas linhas de grade, mas isso eu acho que é uma maneira realmente eficaz de fazer algo semelhante. Como nós realmente alcançamos o escopo para uma largura máxima de 60 ems, uma vez que passamos para o nosso design widescreen, você notará que eles voltam para a barra lateral. Desativamos esses estilos acima do nosso layout widescreen
e, em seguida, eles estão basicamente situados de volta na quinta coluna. Então, agora, temos uma grade flexível, imagens
flexíveis e consultas de mídia trabalhando juntos. Começamos com o layout widescreen e
desativamos partes do design que não são apropriadas para telas menores. Isso para mim é o sinal de um designer responsivo realmente eficaz. Para se perguntar essas perguntas difíceis, não apenas sobre a tela pequena e o widescreen, mas para se perguntar, quais outras experiências você pode não estar necessariamente considerando, e ter um design ou layout no lugar que fala com alguns dessas faixas médias? Então, agora que fizemos o módulo de artigos recentes responsivo, eu fui em frente e realmente traduzi tanto a carta
dos editores como também nossos módulos de capa da história ao longo da mesma maneira exata. Comecei analisando esse layout flexível e analisando maneiras em que ele estava quebrando, e apliquei algumas consultas de mídia, não apenas para desativar estilos mais complexos, mas também para refinar a abordagem em telas mais largas menores. Só para lhe dar uma visão rápida de algumas das decisões que eu tomei, a carta para nossos editores na verdade eu
abordei uma forma muito semelhante ao módulo de artigos recentes. Então, em layouts menores, acabei optando por outro layout de quatro colunas novamente especificado com CSS Grid. Novamente, estou tratando os links secundários para baixo na parte inferior uma forma muito semelhante à maneira que eu fiz no bloco artigos recentes. Em seguida, abaixo de um determinado ponto de tela, eu estou confiando apenas no texto para fornecer algum design para telas menores. Em outras palavras, não há layout de grade aqui para falar, embora eu certamente poderia aplicar quando eu quiser. Para a história de capa, fiz algo muito parecido. Então, em vez de sobrepor o blurb e a imagem umas sobre as outras, decidi empilhá-las em telas menores. É igualmente impactante, mas é um pouco mais simples quando não tenho tanta propriedade de tela para trabalhar. Mas, em seguida, como a tela fica um pouco mais larga, eu posso começar a procurar oportunidades
no widescreen para, em seguida, introduzir o layout completo somente quando eu estou acima da largura da tela de 60 ems. Mas abaixo desse ponto, há simplesmente empilhados. É assim que você torna esses layouts fluidos responsivos, com um pouco de trabalho de consulta de mídia.
6. Refinando seu design: Nesta lição, eu quero tocar em três áreas distintas que podem realmente colocar um nível extra de polimento em seus designs responsivos, especificamente tipografia, layouts de fallback e imagens. Então, em nossa última seção, analisamos algumas maneiras de remodelar nossos layouts flexíveis usando consultas de
mídia para garantir que as coisas fiquem bonitas na tela pequena, mas também no widescreen. Então, o que fizemos até agora é que temos uma boa adaptação acontecendo no nível da grade para cada um desses módulos. As coisas passam de um layout de uma coluna para um layout de quatro colunas
e, finalmente, para um layout de cinco colunas na extremidade superior. Mas se você passar um pouco de tempo olhando sobre esses projetos, você vai notar algumas áreas em que eles ainda precisam de um pouco de atenção extra, especificamente em sua tipografia. Então, por exemplo, esta manchete realmente proeminente nas cartas do módulo do nosso editor. Em telas menores, esse texto proeminente realmente grande começa a se sentir bem grande e proeminente e. Na verdade, se você olhar para isso em um dispositivo de tela pequena ou em um tablet, você provavelmente notará que ele começa a ultrapassar o resto da tela. Então, na lição anterior, usamos consultas de mídia para modificar nossas grades que não estivéssemos servindo layouts widescreen até usuários de tela pequena. Também devemos procurar oportunidades em nossos designs responsivos para garantir que
não estamos servindo topografia widescreen até usuários de tela pequena. Então, o que eu acabei fazendo nesta lição, é realmente olhar para algumas maneiras de usar consultas de mídia para personalizar a tipografia. Então, por exemplo, em um dispositivo de tela menor, eu basicamente trouxe o tamanho do tipo inferir esse título consideravelmente. Então, quando chegamos ao nosso ponto de interrupção médio em cerca de 35 M, eu posso aumentar o tamanho do tipo um pouco mais. Assim que chegarmos ao layout widescreen, teremos o título e a visualização completos. Agora, isso também pode se aplicar à nossa história de capa também. Você tem essa manchete realmente grande e
bonita e aquela sinopse em telas mais largas. Mas em telas menores, esse tamanho de tipo não parece necessariamente apropriado. Então, nós também podemos apertar isso, talvez tornar essa subcabeça um pouco menor também e reduzir o preenchimento na sinopse,
bem como para garantir que ele se sinta realmente agradável e apropriado em todos os tamanhos de tela. Então, esses são os desafios na frente dos designers responsivos para pensar não apenas sobre como o layout está mudando no nível macro, mas também para olhar para esses pequenos detalhes como este e garantir que as coisas se sintam em casa em telas menores também. Outra coisa sobre a qual devemos falar é o que fazer quando os navegadores não suportam alguns dos recursos que você pode estar usando para potencializar seus designs responsivos. Agora, para a aula de hoje, temos usado o CSS Grid realmente fortemente para fornecer essa grade de fluidos flexível que é a base para nossos designs responsivos. Agora, você não precisa usar CSS Grid, você pode usar floats ou flexbox ou o que você tem se preferir fazer isso, mas pelo menos para mim eu acho que é uma ótima maneira de projetar layouts para a web moderna. A coisa com CSS Grid é que ele é relativamente novo e
ainda existem alguns navegadores e dispositivos mais antigos que não suportam nativamente. Então, qual é o melhor cenário para esses dispositivos e navegadores? Você tem algumas opções diferentes. Um deles é que você poderia evitar CSS Grid. É uma escolha perfeitamente válida. Em vez disso, o que eu realmente gosto de usar é algo chamado Consultas de Recursos. Agora, temos usado consultas de mídia extensivamente ao longo deste curso para adaptar nossos layouts responsivos com base
nas características da mídia que está renderizando nossos designs. Consultas de recurso nos permitem realmente perguntar ao navegador se ele suporta certos recursos CSS, e se isso acontecer, então podemos implicar condicionalmente aqueles layouts mais aprimorados. Agora, a maneira como as consultas de recurso são escritas é com a diretiva de suporte de arte. Agora, se olharmos para o nosso projetado no Internet Explorer, as coisas ficarão um pouco estranhas
nas versões mais antigas do Internet Explorer que não suportam CSS Grid. Então, as perguntas que temos que
fazer a si mesmo é, queremos fornecer um layout de fallback escrito com flutuadores, ou com flexbox, ou o que você tem, que é basicamente semelhante ao que criamos com CSS Grid? Essa é uma abordagem perfeitamente válida, e dependendo de quem está no seu público e dos tipos de navegadores que eles usam, essa pode ser a melhor opção para você. Para a maioria dos projetos que eu tenho trabalhado recentemente, em
vez disso, o que eu optei por fazer é servir um layout de coluna única para navegadores que não entendem CSS Grid,
e, em seguida, para navegadores que fazem, para dispositivos e navegadores, eu lhes sirvo um layout orientado por grade completa. Então, liste quatro nossa revista fictícia, eu vou escrever uma consulta de recurso, e eu vou perguntar ao navegador se ele suporta grade de exibição. Agora, se o navegador entende Consultas de Recursos, e entende a grade de exibição, eu posso aplicar regras mais avançadas dentro deste bloco. Agora, realmente o que eu quero ver acontecer é que eu quero restringir a largura do elemento corpo apenas para navegadores que não entendem isso. Então, em vez disso, eu vou definir uma margem de zero auto para todos os navegadores e definir uma largura máxima de 30 ems no elemento corpo que basicamente criará uma boa coluna
centrada no meio da janela do navegador se eles não suportarem CSS Grid. Agora, para navegadores que suportam CSS Grid, eu quero desativar essa largura máxima e quero definir a margem de volta para zero. Estas são as minhas regras de layout mais avançadas. Agora, se voltarmos ao Internet Explorer, você verá que as coisas estão perfeitamente centradas no meio da janela do navegador. Agora, isso pode não ser necessariamente layout que você e eu passamos uma quantidade considerável de tempo projetando, mas o importante é que ele permite que todos os navegadores e dispositivos acessem o conteúdo em nossa página web independentemente de suas capacidades. Para navegadores um pouco mais avançados, eles têm uma experiência um pouco mais refinada. Então, nesta lição de ajuste fino, analisamos maneiras de massagear um pouco nossa topografia e também para proporcionar uma melhor experiência para dispositivos e navegadores menos capazes. Há também maneiras diferentes de tornar nossas imagens responsivas também. Às vezes, simplesmente redimensionar uma imagem não é necessariamente a melhor abordagem. Convém fornecer formatos de arquivo diferentes para dispositivos
diferentes se eles não suportarem o tipo de imagem que você está tentando entregar a eles. Talvez você queira fornecer imagens de maior definição para telas
de alta qualidade sem sobrecarregar dispositivos com
menos capacidade com imagens que eles não renderizarão. Ou talvez, em certas circunstâncias, você queira ser muito específico sobre as colheitas de imagens que você está mostrando para certas classes de dispositivos. Se você passar algum tempo navegando por este layout de página inteira que eu fiz, você verá diferentes instâncias em que eu usei diferentes partes
da especificação de imagens responsivas para fazer exatamente isso. Por exemplo, o logotipo que aparece no cabeçalho
usa o elemento de imagem e, dentro do elemento de imagem, você notará que há uma tag de origem. Bem, essa tag fonte aponta para um arquivo SVG que é uma renderização vetorial agradável e
nítida de nossa pequena marca de logotipo, mas é servido apenas para navegadores que entendem o elemento de imagem e que exceto imagens SVG baseadas no tipo atributo que colocamos nessa fonte. Se um navegador não entende o elemento de imagem ou não aceita imagens SVG, deixamos uma imagem dentro de nosso elemento de imagem que atua como um fallback que aponta para um arquivo SVG simples e antigo. Em outras palavras, podemos entregar condicionalmente essa imagem de alta qualidade aos navegadores e dispositivos que a entendem, e se não o fizerem, deixamo-los com uma boa alternativa. Também podemos ser muito prescritivos sobre quais tipos de imagens queremos mostrar em diferentes pontos de quebra. Também podemos usar o elemento de imagem para fazer isso. Você vai notar na história de capa, em telas menores, eu estou carregando um corte ligeiramente diferente da imagem. É um pouco mais focado no rosto do dinossauro, mas em telas mais largas, voltamos para aquela imagem
quadrada completa que está sobreposta em cima do módulo completo. É uma cultura ligeiramente diferente e é um pouco mais amigável para widescreen. Eu sou capaz de especificar qual imagem é carregada em onde usando o elemento de imagem novamente. Mas agora eu estou realmente usando a tag de origem para realmente dizer acima de um certo ponto de interrupção, eu quero usar essa consulta de mídia para carregar condicionalmente na imagem de tela branca. Então, por padrão, eu tenho essa tag de imagem simples e
antiga que atua como a experiência de linha de base para usuários de tela pequena. Então, em nossa lição até agora, analisamos diferentes maneiras de adaptar nossos layouts para torná-los mais flexíveis e mais responsivos, mas na próxima lição vamos dar um passo atrás do HTML e CSS,
e em vez disso falar sobre nosso processo de design e como ele pode precisar mudar agora que estamos projetando para mais dispositivos do que nunca.
7. Um processo mais responsivo: Na lição até agora, procuramos muitos layouts e responsivos. Mas agora, eu gostaria de falar um pouco mais amplamente sobre como seu trabalho como desenvolvedor responsivo ou designer responsivo pode mudar nos próximos meses ou alguns anos. Em uma das primeiras lições, eu disse que as coisas que tornam um design responsivo são grades fluidas, imagens
fluidas e consultas de mídia. Mas, a coisa é que eles são realmente apenas sobre layout, sobre estabelecer uma hierarquia visual, e definir como essa hierarquia pode precisar mudar ao longo tempo usando pontos de interrupção e grades fluidas. A coisa é que todos esses ingredientes estão realmente focados no layout,
no estabelecimento de uma hierarquia visual
e, em seguida, usando consultas de mídia para articular como essa hierarquia precisa mudar à medida que as telas ficam maiores ou menores. O problema é que o design é muito mais do que isso. Há uma citação que adoro por Paul Rand. Ele disse uma vez que o design é o método de colocar forma e conteúdo juntos. Mais recentemente, um colega e amigo meu, Mark Boulton disse que o design é o material em torno do resultado final. Design não é apenas o conjunto final de maquetes ou o site que você lançou, é o processo que você tomou para chegar lá. O caminho que você seguiu para as perguntas difíceis que você tinha que fazer a si mesmo como um designer ou como um desenvolvedor. É isso que, em última análise, molda seu design. Então, quando nos perguntamos, o que torna um design responsivo? Acho que a ênfase está um pouco na parte errada da frase. Em outras palavras, como nosso processo precisa mudar para tornar o design
responsivo muito mais fácil para nós? Como precisamos nos tornar designers mais responsivos ou desenvolvedores mais responsivos? Então, eu gostaria de falar um pouco nesta lição sobre como minha prática mudou nos últimos anos. Gostaria de começar falando sobre um estudo de caso específico, que é o redesenho do Boston Globe, que foi o primeiro redesenho responsivo em grande escala que aconteceu há alguns anos. Agora, quando eu e meus colegas fomos trazidos para ajudar com este projeto, a equipe já havia criado este conjunto de comps
realmente bonitas para um layout de tela ampla, assim como fizemos neste curso hoje. Então, o desafio que tivemos que descobrir era como tirar essas fotos de um site, e traduzi-las em um design fluido completamente responsivo. Porque o desafio das maquetes é que elas são imagens de largura fixa de um site. Eles não são necessariamente tão flexíveis quanto a tela para a qual estamos projetando na web moderna. Agora, você pode ser capaz de contornar isso, certo? Como as composições podem ser replicadas, você pode mostrar diferentes versões de um layout em diferentes pontos de interrupção, mas isso é incrivelmente caro. Quebrar os pontos de interrupção de tela pequena e média para todas essas páginas diferentes fica muito difícil no Photoshop ou no Sketch. Então, essas ferramentas de design não são necessariamente tão
flexíveis quanto precisamos quando estamos projetando de forma responsável. Também descobrimos que a maneira pela qual estávamos gerenciando o processo criativo era um pouco inflexível demais para um produto responsivo. Mais especificamente, quando chegou ao ponto de fazer a transição entre design e desenvolvimento front-end, o cliente teve a ideia de que já havia aprovado o trabalho. Eles assinaram as composições, e então era apenas mais ou menos um design no navegador que representava o design nas composições que aprovaram. Infelizmente, essas composições não eram tão flexíveis quanto precisávamos. Então, é por isso que muito cedo, eu e os outros colegas de equipe com quem eu estava trabalhando,
percebemos que precisávamos quebrar essa parede entre design e desenvolvimento, e em vez disso, iterar mais rapidamente sobre o design e o navegador. Todos nós estávamos trabalhando de forma eficaz como uma equipe criativa. Alguns de nós projetamos principalmente no Illustrator ou no Photoshop. Outros trabalhando principalmente com HTML e CSS. Estávamos todos projetando este site responsivo juntos. A maneira como trabalhamos com isso foi com uma revisão de design mais colaborativa, é onde nos sentamos como um grupo e realmente revisamos o próximo conjunto de trabalho juntos, especificamente revisando as composições que metade do projeto da equipe havia produzido. Quando nos reunimos como uma equipe de design, apresentamos o design um ao outro. Então, o design que metade da equipe contaria um pouco de uma história sobre como eles chegaram lá, algumas das decisões que eles tomaram neste layout, e como ele atendia as necessidades do negócio. partir de então, foi realmente na metade
de desenvolvimento da equipe de design para fazer um monte de perguntas, e eles foram questões de grande alcance. Eles podem abordar questões de layout, sobre o que acontece quando você tem duas partes dominantes de informação. Digamos que em um módulo, e então quais eram as expectativas sobre a metade do projeto da equipe se você perdeu o benefício de duas colunas lado a lado. Se você estiver renderizando este módulo em uma tela pequena, qual dessas duas informações deve aparecer primeiro? Eles podem tratar de questões de interação. Se você estiver olhando para um carrossel de fotos, por exemplo, como ele foi projetado no Photoshop, provavelmente
é bastante fácil adivinhar como isso pode funcionar se você tiver um mouse disponível para o dispositivo. Se você tocar ou clicar em um item para avançar no carrossel. Mas o que acontece se você não tiver um rato? O que acontece se você estiver em um monitor baseado em toque? Você quer construir um affordance para toque e ser capaz de deslizar através dessas fotografias? O que acontece se alguém não vê o design como você e eu podemos, e eles estão tendo essa informação lida em voz alta para eles em um navegador falante? Isso também é algo que podemos projetar. Então, quais são as expectativas
do design metade da equipe sobre o que deve ser essa experiência? Eu vou ser honesto, eu estive no lado receptivo para algumas
dessas perguntas em muitos projetos e eles são terríveis. Porque muitas vezes, como designer, não
considerei algumas dessas opções. Mas percebemos muito cedo na reformulação do Boston Globe, há problema se não tivéssemos respostas. Realmente, o que estamos tentando fazer é garantir que cada membro da equipe tenha uma compreensão compartilhada do que nos levou até este ponto, porque em algum momento, o processo vai caber a metade da equipe herdar o O trabalho da outra metade. Então, eles precisam ser capazes de fazer recomendações sobre como proceder. Isto é algo que ouvi de todos os meus clientes, desde que trabalhei no Boston Globe. Que quando você pode aproximar o design e o desenvolvimento , sempre
resulta em produtos digitais responsivos mais fortes. A qualidade do trabalho melhora, mais estreitamente
o design e o desenvolvimento podem trabalhar juntos. Parte disso é realmente tratar a fase de prototipagem como parte do processo de design, porque uma vez que você tem um entendimento compartilhado de como as composições chegaram até este ponto, você tem que tirá-las de composições e codificá-lo. Em outras palavras, você precisa colocá-los em um protótipo flexível responsivo que na verdade é a tela para a qual estamos projetando. Uma vez que você pode fazer, você pode ter desenvolvedores front-end realmente fazendo recomendações sobre como começar com um layout de tela pequena, e introduzindo grades flexíveis, imagens flexíveis e consultas de mídia para criar um protótipo que é como responsivo quanto possível. Agora, no protótipo, eles muitas vezes não terão necessariamente projetos de
referência para cada um desses pontos de interrupção. Em outras palavras, eles estão projetando no navegador, e eles estão fazendo boas recomendações na maioria das vezes,
mas são apenas recomendações. Então, é por isso que na outra extremidade da fase de prototipagem, acho que é incrivelmente útil voltar como uma equipe, e ter uma revisão de design mais interativa. Mas ao invés de imprimir desenhos e colocá-los em uma parede ou talvez projetá-los na tela, é realmente incrivelmente útil carregar o protótipo em tantos dispositivos e navegadores quanto possível, e entregá-lo para as pessoas. Na verdade, deixe-os trabalhar com o design nesses diferentes dispositivos, e falar sobre como o design realmente se sente para eles. Essas avaliações de design mais interativas são uma maneira incrivelmente poderosa de verificar um design responsivo ao vivo em tantos dispositivos e navegadores quanto possível. Você pode apenas ter uma conversa sobre como o design responsivo se sente. Será que o layout parece apropriado quando estamos olhando para ele em telas de tamanhos diferentes? Será certo se eu estiver em um monitor baseado em toque e passar por elementos diferentes? Ou, o mais importante, algum elemento realmente precisa de direção de design adicional? Procure oportunidades em seu design onde algumas partes do elemento podem estar se quebrando, e talvez o design metade da equipe possa decamp, e faça algumas recomendações sobre como discar em alguns desses detalhes. Em outras palavras, se você pode usar prototipagem e ferramentas de design tradicionais em conjunto, isso sempre resultará em um produto mais responsivo. Em outras palavras, tratar suas composições do Photoshop ou seus arquivos do Sketch
como canônicos, como referência perfeita, é algo que vai realmente comprometer o valor do seu produto responsivo porque eles são fotos de um site em o fim do dia. Eles não podem dizer o que acontece em telas de tamanhos diferentes ou quando fontes não carregam ou quando alguma parte do design não é renderizada no navegador. Em outras palavras, HTML e CSS são as melhores ferramentas de design que temos para preencher algumas dessas lacunas. Mas, idealmente, trabalharemos com estes juntos. Agora, a outra coisa que é incrivelmente poderosa, e eu acho que isso é verdade para qualquer projeto responsivo, é dar uma olhada nas informações que projetamos nessas telas, e isso era muito valioso para nós no Boston Globe. Em cada ponto do processo, estávamos sempre nos perguntando qual o valor que esse conteúdo tem para o usuário móvel? Mobile primeiro foi cunhado pelo designer chamado Luke Wroblewski há mais de 10 anos. Na época, ele estava argumentando que as telas móveis precisam ser nossa prioridade no processo de design. Ele estava discutindo isso por uma série de razões. O tráfego móvel explodiu naquela época e,
francamente, ainda está explodindo agora. Mas também, esses dispositivos têm todas essas capacidades maravilhosas. Então, se começarmos a projetar para eles primeiro, isso irá realmente melhorar o produto, e introduzir novos e emocionantes recursos. Mas finalmente, e eu diria que talvez o mais importante, ele estava argumentando que telas móveis nos forçam a focar. Que são telas que são 80% menores do que aquelas para as quais tradicionalmente projetamos. Então, se pudermos começar projetando lá, podemos construir um consenso sobre o que mais importa para o nosso design, e usá-lo para melhorar a experiência para todos. Isso é algo que eu ouvi de todos os projetos responsivos bem-sucedidos em escala. Um dos meus exemplos favoritos disso é, na verdade o falecido site da Virgin America, e depois que o redesenho surgiu, um colega meu e eu entrevistamos a equipe por trás do redesenho. O líder de design do projeto, um cara chamado Joe Stewart disse uma vez: “Por qualquer motivo, as pessoas acham que é bom ter experiências de usuário focadas em dispositivos móveis, mas quando você chega ao desktop, é sobre lançar o pia da cozinha. Uma das grandes coisas do responsivo é que ele força você a tomar essas decisões móveis em um desktop.” No final do dia, o celular primeiro é sobre projetar para foco. Independentemente de você estar projetando para um layout de tela pequena ou layout de tela larga, dê uma olhada em cada pedaço de informação que está sendo encaixado atualmente nessa página, e pergunte a si mesmo se ele realmente tem algum valor para o usuário móvel? Se não acontecer, talvez valha a pena ter uma conversa difícil sobre o valor que tem para qualquer usuário. Como nossos públicos são tão predominantemente móveis nos dias de hoje, esse realmente tem que ser o nosso ponto de partida. O grande segredo sobre o design móvel primeiro, é que se você realmente pode se concentrar no que realmente importa para seus usuários, ele vai fazer seus usuários não-móveis muito mais felizes também. Então, essas são apenas algumas das estratégias a ter em
mente quando você está projetando de forma responsável. Veja as maneiras como você colabora com designers e desenvolvedores, e também faça algumas
dessas perguntas difíceis sobre uma prioridade para dispositivos móveis em seu layout. Se você pode fazer isso, você vai criar alguns designs responsivos realmente bonitos que se encaixam e se sentem em casa em qualquer classe de dispositivo que possa visitá-los.
8. Considerações finais: Então, nesta classe, usamos os principais ingredientes de um design responsivo. Grades fluidas, imagens fluidas e consultas de mídia, para criar mais layouts flexíveis e agnósticos de dispositivos. Também passamos um pouco de tempo analisando algumas maneiras ajustar nossas experiências responsivas. Para ajustar a tipografia ou imagens com base nas necessidades do dispositivo ou do navegador, para garantir que as coisas se encaixam e se sentem em casa em tela de qualquer tamanho. Eu realmente espero que você apenas use esta aula como um ponto de salto fora. Então você usa algumas das técnicas que analisamos hoje para construir seu próprio vocabulário de como construir belos sites responsivos. Eu adoraria ver um pouco do trabalho responsivo que você faz, talvez compartilhar na galeria do projeto. Muito obrigado por fazer essa aula, estou muito animado para ver o trabalho que você fez.
9. O que vem a seguir?: [ MUSIC]