Contente
- Projetando para o desconhecido
- Uma abordagem pragmática para o design
- Tornando-se agnóstico em termos de layout
- Codificando progressivamente
- Mergulhando na marcação
Parece que todo mundo está falando sobre web design responsivo atualmente, e com razão; como o número de dispositivos habilitados para web continua a crescer - cada um com diferentes recursos e capacidades - não é mais sensato construir sites de largura fixa.
A verdade é que nunca foi. No entanto, até agora, era considerada a melhor prática projetar experiências que fizessem várias suposições, seja em torno da resolução da tela, largura de banda ou método de entrada. Se você já projetou um site de 960 pixels de largura, apenas para visualizá-lo na pequena tela do netbook de um amigo (e sim, estou escrevendo com uma experiência dolorosa aqui), você entenderá por que esta não foi uma abordagem particularmente inteligente. Agora, com smartphones e tablets misturados, está claro que nossos métodos tradicionais não são mais adequados.
Felizmente, o advento das consultas de mídia CSS e um crescente reconhecimento de que a web é um meio por si só significa que estamos começando a abraçar a verdadeira natureza da plataforma, aceitando que sua universalidade é uma força, não uma fraqueza.
Nos próximos cinco dias, vou guiá-lo através de uma técnica que reconhece esse fato: web design responsivo. Desenvolvido por Ethan Marcotte, ele combina layouts fluidos, imagens flexíveis e consultas de mídia para nos ajudar a construir sites que se adaptam perfeitamente a qualquer ambiente que encontrem.
Vou demonstrar essa abordagem mostrando como construir uma galeria de mídia simples. Em meus exemplos, estarei criando um pequeno site para documentar uma viagem recente que fiz pelos Estados Unidos, mas sinta-se à vontade para personalizar o código e o design para atender às suas necessidades.
Projetando para o desconhecido
Grande parte deste tutorial se concentrará no aspecto de desenvolvimento do design responsivo. Mas antes de nos aprofundarmos em qualquer código, vamos parar um momento para pensar como podemos projetar um site que poderia ter layouts infinitos.
Agora, tenho sorte em poder projetar interfaces e desenvolver o código de front-end que os torna reais. Esta não é uma habilidade única, é claro - se você trabalha para si mesmo, provavelmente é o mesmo. Mas certamente é vantajoso entender como o conteúdo pode se adaptar e refluir durante a elaboração de designs fluidos.
Também trabalho como parte de uma equipe maior, onde minha função é mais especializada. Em tal ambiente, o designer visual pode se concentrar exclusivamente em traduzir wireframes em composições atraentes e envolventes (assinadas, perfeitas em pixels). E não é incomum que os desenvolvedores estejam localizados separadamente, traduzindo esses layouts em marcação e CSS enxuta e eficiente.
No entanto, esses fluxos de trabalho lineares e segregados rapidamente se desintegram quando começamos a avaliar como os projetos se adaptarão a ambientes diferentes. Tanto quanto qualquer nova ferramenta ou tecnologia, devemos também considerar formas de trabalho mais colaborativas e ágeis. Muitos dos problemas mais complicados encontrados ao projetar sites responsivos podem ser resolvidos simplesmente por meio de conversação, experimentação e iteração.
Uma abordagem pragmática para o design
Isso não quer dizer que não haja espaço para os designers pensarem sobre como um design pode funcionar fora dos limites de qualquer dispositivo específico.
Na Clearleft, iniciamos o design visual da perspectiva da área de trabalho. Começamos definindo uma linguagem de design abrangente e estética visual, muitas vezes baseando as explorações iniciais em torno de uma parte central do conteúdo. Por exemplo, se estamos projetando um site de comida, vamos começar com uma página de receitas; para um site de notícias, uma página de história.
Esta não é apenas uma página importante do site, mas provavelmente inclui conteúdo estruturado o suficiente para que possamos construir uma paleta tipográfica. Também vamos pensar em como o layout pode se adaptar - mesmo que seja apenas no fundo de nossas mentes neste estágio.
Uma maneira útil de testar a resistência de um design é pegar essa página e adaptá-la para uma tela mais estreita (~ 320px de largura). Você provavelmente descobrirá que alguns aspectos do design precisarão ser repensados para que funcionem nessa largura. aqui estão alguns exemplos:
- Tipografia: Títulos grandes podem funcionar bem em layouts mais amplos, mas em telas menores podem ocupar muito espaço vertical e, portanto, requerem rolagem adicional. Conforme os comprimentos das linhas se alteram, você deve considerar também as alturas das linhas e outros tratamentos tipográficos.
- Links: Como seu design funcionará em dispositivos com tela sensível ao toque? Embora ainda não tenhamos uma maneira fácil de detectá-los (o que significa que devemos levar em conta todos os aspectos de nosso design), projetar para uma tela mais estreita pode nos dar a oportunidade de pensar sobre as áreas de destino para links e outros elementos interativos . As diretrizes do iOS recomendam que eles tenham pelo menos 44 pixels / pontos quadrados, o que é uma boa cifra de se almejar.
- Navegação: Este provavelmente será o componente mais estranho de qualquer design responsivo, especialmente se o seu site tiver muitas seções e uma hierarquia profunda. Brad Frost escreveu um resumo de algumas abordagens diferentes para a navegação que estão sendo consideradas.
- Conteúdo supérfluo: Algum conteúdo não é necessário? Outro conteúdo só precisa ser mostrado em determinados cenários? Não defendo a ocultação de conteúdo com base no dispositivo que o usuário está usando, mas técnicas como o carregamento condicional (que veremos mais tarde nesta semana) podem nos ajudar a servir páginas menores que carregam apenas conteúdo complementar quando necessário.
Projetar dois layouts contrastantes reforça a ideia de que um design se adaptará, ao mesmo tempo em que resolverá problemas potenciais desde o início. Embora isso pareça uma duplicação do trabalho, tenha em mente que não estamos projetando todas as páginas com uma precisão de pixel perfeita. Em vez disso, estamos nos concentrando na construção de uma linguagem de design escalável - uma que evoluirá à medida que começarmos a implementá-la no código e que seja baseada em módulos e componentes individuais.
Tornando-se agnóstico em termos de layout
Não é novidade que, para uma indústria que historicamente tratou a web como a impressão, os layouts de largura fixa permearam muitos dos produtos que produzimos. À medida que começamos a projetar para um meio adaptável, novas abordagens estão sendo consideradas que nos permitem resolver problemas e comunicar ideias, ao mesmo tempo que reconhecemos a natureza fluida do meio. Aqui estão alguns dos meus favoritos:
- Diagramas de descrição de página: Embora os wireframes possam frequentemente implicar layout (e, portanto, assumir um certo tipo de dispositivo), os diagramas de descrição de página removem essa suposição e, em vez disso, descrevem os componentes individuais, organizados no documento em termos de prioridade.
- Mosaicos de estilo: Ao comunicar ideias de design com os clientes, podemos nos encontrar apresentando "pinturas de sites". Se não formos cuidadosos, os clientes irão, com razão, pedir para ver conceitos que demonstrem como um design será exibido em outros dispositivos também. Isso pode nos forçar a uma situação insustentável de produção de várias páginas para vários dispositivos. Samantha Warren pensou sobre esse problema e veio com peças de estilo. Eles ficam em algum lugar entre um moodboard (mas menos vago) e composições totalmente realizadas (mas menos precisas) e nos ajudam a comunicar tipografia, estilos de botão e tratamentos de masthead. Eles também incentivam um nível mais maduro de discussão com nossos clientes.
- Jogo de design do Mobilify: Este exercício pode funcionar muito bem durante workshops de design colaborativo. Neste exercício, todos escrevem em post-its os elementos que podem aparecer em uma determinada página. Eles são então colados na parede em ordem de importância, como se estivessem aparecendo linearizados em um telefone celular. A discussão resultante pode gerar algumas conclusões surpreendentes. Por exemplo, você pode perceber que a navegação não é o componente mais importante da página. Isso poderia seguir até o design, onde um link de pular no topo da página vincula à navegação no rodapé.
Ainda há espaço para as ferramentas que já usamos, é claro, mas ao projetar um site em termos gerais, precisamos ter em mente que o layout não é mais conhecido.
Codificando progressivamente
Felizmente, não precisamos nos preocupar com o design visual do exemplo em que estamos trabalhando, pois o trabalho árduo foi feito para nós! Em vez disso, podemos nos concentrar em codificar nosso design em um site totalmente responsivo.
Mais uma coisa antes de começarmos. É importante lembrar um princípio fundamental do meio com o qual estamos trabalhando: universalidade. Isso significa não apenas construir para os dispositivos habilitados para web de hoje, mas também garantir a compatibilidade com os de ontem e amanhã. John Allsopp descreveu por que esse princípio é importante em sua postagem The Next 6 Billion:
"Os próximos seis bilhões são crianças nas áreas rurais da Índia, África, China, onde o acesso ao poder e às redes pode ser intermitente. É alguém em Sumatra em uma caixa Wintel de uma década de idade. São pessoas que falam centenas de idiomas diferentes, com dezenas de sistemas de escrita. São as pessoas que são as primeiras na família a saber ler e escrever. São os 20 por cento das pessoas em todo o mundo que não sabem ler nem escrever. Ainda.’
Podemos rastrear nossa compreensão da web observando as diferentes modas (na falta de uma palavra melhor) que se estabeleceram em nossa profissão: padrões da web, acessibilidade, JavaScript discreto ... todos são variantes do mesmo tema: aprimoramento progressivo. O mesmo se aplica ao web design responsivo. Para construir um verdadeiramente Um site responsivo é construir um site que não seja apenas compatível com as versões anteriores, mas também compatível com o futuro.
Mergulhando na marcação
Ok, chega de preâmbulo, é hora de abrir um editor de texto.Nosso designer nos forneceu um design voltado para a área de trabalho e foi gentil o suficiente para fornecer exemplos de como isso pode aparecer em uma janela de visualização mais estreita também.
Pode ser tentador codificá-los separadamente, mas vou sugerir uma abordagem diferente. Colocando os componentes separados - ou padrões - que compõem o design em uma única página, podemos criar um portfólio de padrões. Isso nos permite desenvolver componentes fora dos limites de qualquer layout de página e nos dará algo para consultar posteriormente para qualquer teste de regressão. Vamos ver a marcação inicial em alguns dispositivos diferentes:
Veja nosso portfólio de padrões marcados
Bem, maldito seja - já temos um site responsivo! Nosso conteúdo está se adaptando aos limites de cada dispositivo, seja um novo iPad sofisticado ou um telefone comum descartado. Ele funciona até mesmo em um navegador somente de texto como o Lynx.
Graças aos princípios básicos de universalidade, a web é responsivo por padrão. Isso é ótimo, mas também significa que qualquer coisa que fizermos no código a partir de agora pode comprometer essa adaptabilidade nativa.
Amanhã: Seguiremos com cuidado e começaremos a aplicar o primeiro aspecto do design responsivo: tipografia e grades fluidas.
