Eu navego na internet todos os dias, em vários dispositivos. Eu uso o meu Macbook Pro, iMac, PC, iPad, iPhone e sim até a minha televisão. Por isso, realmente me incomoda quando vejo sites que não são otimizados para resoluções de tela maiores ou que levam dois minutos para carregar no meu dispositivo móvel.
Todos nós abraçamos o conceito de design responsivo. Muito poucas pessoas argumentam contra isso. De fato, a única reposta convincente que ouvi recentemente é que um cliente não está disposto a pagar pelo tempo extra envolvido. Mas, como acontece com qualquer nova prática, os mitos cresceram para contrapô-lo.
Vamos ver se conseguimos quebrar alguns desses equívocos ...
Sim, a web móvel está explodindo e, sim, é a força motriz por trás do design responsivo, mas quando pensamos em design responsivo, precisamos considerar mais do que apenas dispositivos móveis. Com a introdução de telas de retina e navegadores de videogames, os usuários da Internet agora visualizam sites em resoluções de tela maiores e em muitos contextos diferentes.
Tente levar em conta contextos de usuários diferentes ao projetar e desenvolver sites responsivos. Você precisa pensar sobre qual dispositivo o usuário está usando: o usuário está em um dispositivo móvel ou em casa, em frente à televisão? Você precisa pensar onde o usuário está localizado: o usuário está na fila da mercearia ou acampando no deserto? Ter bom conteúdo não significa nada se o site levar dez minutos para carregar enquanto seus usuários estiverem sentados na praia com uma margarita.
O conteúdo é tudo, mas o contexto está em toda parte e é algo sobre o qual você não tem absolutamente nenhum controle. É por isso que, realisticamente, seu conteúdo deve ser dimensionado para qualquer resolução, grande ou pequena. Temos um conjunto de ferramentas à nossa disposição que nos permitirá manipular layouts, otimizar tamanhos de texto e aumentar o desempenho em qualquer contexto, portanto, lembre-se de usá-los.
Lembre-se de que o contexto está mudando o tempo todo, e é por isso que é tão importante equilibrar o layout visual, as necessidades do usuário e o desempenho ao abordar um design responsivo. Não é apenas sobre celular.
Eu costumava argumentar que o web design responsivo não funcionará para cada projeto e que depende do caso de uso. Bem, eu recentemente alterei minha opinião e acredito firmemente que, se quisermos ser designers e desenvolvedores focados no usuário, precisamos abordar cada projeto com design responsivo em mente.
Sites de largura fixa podem estar limitando resoluções de tela maiores e menores. O resultado é que nossos sites devem ser acessíveis a todos, independentemente do dispositivo ou resolução de tela que estejam usando, sem restrições.
Tenho notado uma tendência emergente na indústria em que designers e desenvolvedores estão criando websites responsivos que escalam apenas para determinadas resoluções de dispositivos, e sou culpado disso também. Os três dispositivos mais comuns são obviamente laptops / desktops, iPads e iPhones (ou outros dispositivos móveis). Como designers, precisamos entender que o design responsivo é sobre pontos de interrupção de design e tornar o conteúdo legível e acessível a todos, não apenas aos usuários de determinados dispositivos.
Dito isto, se você está projetando sites em um programa de software, é importante ter algum tipo de estrutura com pontos de interrupção para funcionar. Eu sugiro criar o seu próprio. Otimize seu layout de acordo com o conteúdo. A melhor maneira de descobrir quais breakpoints funcionam melhor é esboçar alguns wireframes primeiro para ter uma ideia, então você pode começar a colocar pixels em seu software de escolha. Certifique-se de trabalhar na mesma grade ao projetar e projetar.
Se você é como eu, codifique seus wireframes e crie um protótipo ao vivo. Isso me ajudou muito com meu fluxo de trabalho responsivo, pois posso criar um modelo fluido e adicionar pontos de interrupção ao design à medida que o design é interrompido, em vez de tentar empilhar pixels no Photoshop.
Um dos maiores problemas que notei em muitos sites responsivos é que a tipografia é lançada aos lobos quando designers e desenvolvedores optam por usar pontos de interrupção de dispositivos em pontos de interrupção de design. Na minha opinião, a escolha do dispositivo em relação ao design mostra um desrespeito total pelo conteúdo que está sendo publicado e pelo usuário que consome esse conteúdo. O conteúdo deve manter a legibilidade até que tenha que se ajustar para manter essa legibilidade. O conteúdo sempre será o melhor e a acessibilidade e a legibilidade do seu conteúdo sempre devem ser a prioridade mais alta.
Uma das maneiras pelas quais gosto de lidar com a manutenção da legibilidade do conteúdo em um design responsivo é usar unidades relativas, como ems, para tamanho de fonte, preenchimento, margens e layout. Design responsivo é tudo sobre layouts proporcionais e, na minha opinião, ems são um ajuste perfeito.
Ems são unidades relativas que são escaláveis para o tamanho da fonte dos elementos pai, podem poupar muito tempo e complicações e ajudam a manter a estrutura de todo o layout. O que isso significa que você pergunta? Bem, isso significa que, conforme o tamanho da fonte base aumenta ou diminui, o layout é ajustado uniformemente, sem falsificar nada.
Aqui está um exemplo, digamos que encontramos dois pontos de interrupção de design, um para um monitor de desktop muito grande em uma super resolução e um para um pequeno tablet. Digamos também que nosso tamanho básico da fonte é 16px, o que é igual a 1.0em e aumentamos o tamanho da fonte até 22px quando o site é visualizado em uma resolução de 3840 x 2160 (super resolução) e diminuímos esse tamanho de fonte 14px em uma resolução de 800 x 600 (pequeno laptop / tablet). Acabamos de alterar drasticamente o tamanho do tipo e o layout do nosso site em dois pontos de interrupção designados, um grande e outro pequeno. Uma manchete em 1.4em com um tamanho de fonte base de 22px para resoluções maiores significa que 1.4em é igual a 30.8px e no menor tamanho de fonte base de 14px, 1.4em seria igual a 19.6px. Mesmo que o tamanho da nossa fonte tenha aumentado drasticamente em 3840 x 2160, não precisamos nos preocupar com a quebra do layout, porque ela também se ajustou. Digamos que nosso elemento contendo tenha uma largura de 50em. Em uma resolução de 800 x 600, seria de 700px, mas na resolução de 3840 x 2160 seria 1100px. Nosso preenchimento e margens também se ajustariam. Na resolução maior, com tamanhos de fonte e layout definidos em ems, nosso dimensionamento foi dimensionado proporcionalmente, o que torna nosso conteúdo mais acessível e mais legível.
O objetivo do design responsivo é tornar seu conteúdo acessível a todos, mesmo aos deficientes, em todas as resoluções e dispositivos de tela. Ocultar conteúdo nunca é uma boa ideia e, provavelmente, se você precisar ocultá-lo, não precisará dele para começar. Escondendo o conteúdo torna ilegível para os leitores de tela e agora você está fazendo o seu conteúdo inacessível para aqueles com deficiências visuais ou cognitivos. Lembre-se de que o conteúdo deve ser universal em todos os dispositivos e não punir seus usuários limitando o que eles podem ver em um dispositivo separado.
Dito isto, ainda encontro alguns casos de uso em que display: none; vem a calhar. Principalmente, todos os casos de uso lidam com algum tipo de navegação, e eu uso display: none; em elementos de navegação que mudam de forma em diferentes dispositivos. Nunca é uma boa ideia limitar ou ocultar conteúdo em dispositivos diferentes porque você provavelmente baseou essa decisão em uma suposição e algum usuário, em algum lugar, terá uma experiência muito ruim.
Tem havido uma série de sites que tenho visto ultimamente que mostraram uma falta de empatia para com os usuários com baixa largura de banda. A maioria desses sites tem as mesmas coisas em comum: imagens grandes e grandes bibliotecas JavaScript, e muitos desses sites poderiam ter sido otimizados se tivessem sido criados com uma primeira abordagem móvel.
Como ainda há muita discussão sobre imagens responsivas, é difícil para qualquer um se comprometer com qualquer solução. Eu entendo o dilema, mas esperar por uma solução perfeita que seja padrão em todos os navegadores e dispositivos não está facilitando o uso do seu site atual em dispositivos com largura de banda limitada. Encontre uma solução que melhor corrija seu problema e corra com ele. Não encontrar uma solução significa problemas de desempenho para todos, e isso anula completamente o propósito do design responsivo.
Grandes bibliotecas JavaScript também podem causar problemas em dispositivos menores. Tente encontrar uma maneira de chamá-los condicionalmente com base na resolução da tela ou no tipo de dispositivo. O desempenho não deve ser uma reflexão tardia quando se trata de design responsivo.
A web explodiu e, com o advento da tecnologia móvel e smartphone, podemos acessar o conteúdo em qualquer lugar e em qualquer contexto. É importante ter certeza de que podemos alcançar todos os nossos usuários e dar a eles o que eles quiserem, quando quiserem. O design responsivo é uma técnica muito nova e, na minha opinião, é a técnica perfeita para unificar nosso conteúdo na Web.
Que outros mitos sobre design responsivo você gostaria de desmascarar? Existem desvantagens no design responsivo? Deixe-nos saber nos comentários.
Imagem em destaque / miniatura, imagem da Web responsiva via Shutterstock.