Crise comum no design responsivo e como resolvê-las

Sem nada definido em base sólida e elementos de layout tão flexíveis quanto a água, não é nem mesmo 'projetar' no sentido tradicional. O design responsivo acompanha (e se adapta) ao fluxo de dispositivos no mercado. Todo mundo está experimentando e nunca foi tão incrível ser um web designer.

Existem tantas práticas para design responsivo que é difícil olhar para um conjunto e chamá-los de melhores. Não podemos ter uma lista de 'O que fazer'. Podemos, no entanto, aprender com os erros uns dos outros.

Então aqui está o que eu aprendi projetando para uma web responsiva:

Design para o seu público. Não você mesmo.

Suponha que você esteja tentando alcançar um público em grande parte indiano com um site super-rápido e brilhantemente projetado e um ótimo UX para esses usuários móveis. Há 1,2 bilhão de pessoas lá; deve ser um sucesso instantâneo e maciço. Os próprios números estão a seu favor. Ou seriam se você soubesse que apenas 13% das pessoas têm telefones inteligentes. (Fonte: Google Mobile Planet).

Essa é apenas uma das razões pelas quais aprender e entender seu público é crucial.

Diversidade cultural, idade, sexo, profissão, idioma, dispositivos populares, etc. podem ser fatores muito importantes que farão ou quebrarão sua marca/site.
É mais fácil do que parece.

Designers são conhecidos por perder de vista para quem estão projetando.

Portanto, se você não tiver um arquiteto de UX em mãos, fará bem em pesquisar isso sozinho. Isso acabará refletindo no seu trabalho, então não dê de ombros e diga que não é o seu forte.

Para números específicos para celular, use o Mobile Planet do Google. Questione seus clientes sobre seu público.

Se você se colocar no lugar do seu público, poderá criar designs intuitivos e fáceis de usar. Não é ciência de foguetes, apenas psique humana básica.

Um 'wireframe' precisa de uma história

Seu projeto de design responsivo ficará incompleto sem interações. O mesmo se aplica à sua maquete.

Seu design (provavelmente) não será um show de uma página onde o conteúdo aparece e nada mais acontece.

Sem interações, sem estados, sem animações ou efeitos: basicamente tudo o que pode tornar seu site um sucesso (ou um fracasso, se usado sem pensar) é retirado. Embora o Style Tiles seja um clássico por um bom motivo (como disse seu fundador, “para iniciar uma conversa sobre o design”), é simples demais para ser sofisticado nos termos de design atuais.

INVISTA ALGUM TEMPO NA CRIAÇÃO DE PROTÓTIPOS INTERATIVOS DE SUAS IDEIAS. COLABORE COM ISSO EXTENSAMENTE ANTES DE COMEÇAR COM O DESENVOLVIMENTO FRONT-END.

Não jogue apenas ideias. Você já ouviu falar em storytelling?

Conte uma história responsiva e interativa para seus clientes com nada além de seu protótipo e intuição.

Use ferramentas como Balsamiq, Axure, UXPin, etc. para criar versões visuais dessas 'histórias'. Acaricie sua imaginação com palavras; alimente-o com um protótipo bem elaborado.
Ele servirá para agilizar seu trabalho de design e desenvolvimento para mais tarde e fornecerá uma faixa definida para seguir. E como bônus: as primeiras impressões ainda importam. Um bom protótipo mostra que você está entusiasmado com o projeto.

Conteúdo: Primeiro, Visível e Adaptável. Sempre

A razão pela qual você está respondendo é para que sua mensagem tenha um alcance mais amplo, sendo acessível de maneira uniforme e independente de dispositivo.

Você derrota todo o propósito do design responsivo ao ter que ocultar seu conteúdo.

Seu público móvel vai baixar os dados de qualquer maneira, então qual é o sentido de escondê-los? Crie um inventário de elementos de conteúdo. Identifique quais elementos vão em todas as páginas e quais vão em páginas específicas. Por exemplo, seus botões de CTA podem estar em todas as páginas ou em páginas específicas (como landing page, páginas de recursos relacionados, etc.).

Você começa colocando os elementos de conteúdo em primeiro lugar e, em seguida, constrói a partir daí. Sinos e assobios vão no final.

Primeiro: entenda os objetivos do usuário e o que eles desejam do site e, em seguida, adapte seu conteúdo para facilitar o acesso em seus dispositivos.

Em vez de apenas espremer um artigo de um milhão de palavras para caber em uma página móvel, dê a seus usuários a chance de ler as informações sem rolar infinitamente. E o script de front-end ou do lado do servidor não é a resposta (real) para isso.

Uma boa maneira de fazer isso é usar um resumo breve e preciso para visualização .

Permita que o usuário decida se deseja percorrer seu conteúdo pelo resto dele. TL; A DR é comum entre todos (até mesmo organizações de mídia, e é por isso que publicamos histórias sem checagem de fatos reais e baseadas em nada além de hype). Então adicione uma seção no final do seu conteúdo e facilite.

Segundo: dê aos usuários informações completas em vez de apenas uma versão fragmentada dela.

Use colunas e tipos de letra responsivos. Use Zurb Responsive Tables para tabelas de dados fluidos. Compacte a mídia (use CDN e cache para aumentar o desempenho).
O conteúdo é a sua mensagem. Certifique-se de que está claro e visível, independentemente do tamanho do dispositivo.

Bônus: o conteúdo em primeiro lugar coloca você em mente na hierarquia de conteúdo, e isso torna o processo de design da navegação um processo mais suave.

Respeite as limitações e capacidades do dispositivo

Quando falamos sobre 'mobile-first' ou 'melhoria progressiva', realmente entendemos e acomodamos o mínimo? Aqui está um resumo do que 'mínimo' deve ser:

• Largura da tela utilizável: 120 pixels, mínimo.
• Suporte à linguagem de marcação: XHTML Basic 1.1 fornecido com o tipo de conteúdo application/xhtml + xml.
• Codificação de caracteres: UTF-8
• Suporte ao formato de imagem: JPEG, GIF 89a.
• Cores: 256 Cores, mínimo.
• Suporte a folha de estilo: CSS nível 1, regra de mídia CSS nível 2 junto com o dispositivo portátil e todos os tipos de mídia
• HTTP: HTTP/1.0 ou HTTP1.1 mais recente
• Script: Não há suporte para scripts do lado do cliente.

Com base nessas especificações, não é difícil criar um design funcional. O problema é aumentar.
É bom considerar as dimensões do dispositivo, mas isso é apenas o começo e não tudo. Minimizar e normalizar scripts (desempenho e experiência), projetar interfaces limpas com cuidado com espaços em branco suficientes (para tapping), respeitar a conectividade e as limitações de carga dos dispositivos (desempenho) e sempre testar rigorosamente são importantes aqui.

Por favor, alivie a carga

Não quero insistir nisso (temos muitas opiniões sobre esse assunto), mas não há como negar a importância da velocidade da página para classificações mais altas e melhor experiência do usuário.

Simplificando: se sua página estiver lenta para carregar, ninguém se incomodará em esperar que ela a alcance.

Uma abordagem como mobile-first funciona muito bem para isso. No aprimoramento progressivo, começamos com o mínimo de tudo: elementos de interface do usuário, recursos e o fato de estarmos projetando para larguras de banda mais estreitas de todos os dispositivos. Aqueles que ainda criticam os méritos da abordagem mobile-first concordarão que isso coloca em mente o desempenho e a velocidade sobre todo o resto .

Além disso, e você não precisa ser lembrado disso, você deve manter o tamanho da sua mídia sob controle.

Portanto, empregue CDN (viável para sites de tráfego médio a alto) e técnicas de desenvolvimento de back-end que aliviam especificamente o carregamento da página. Use o cache. Melhore o desempenho percebido (a rapidez com que o site se sente para o usuário) marcando a caixa relevante antes de salvar uma imagem JPG para a web.

Mantenha seu design enxuto e aparado (menos de todos os seus clientes e usuários).

TL; RD

Então aqui está o que eu aprendi projetando para uma web responsiva:

• Design para um público. Pesquise um pouco e use o Google Mobile Planet (e outras ferramentas semelhantes) para números.
• Um Wireframe pode ser trazido à vida por uma história. 'Protótipo' significa a versão preliminar de um dispositivo/sistema. Faça algo que realmente funcione. Use ferramentas de prototipagem interativas.
• Torne o conteúdo visível e adaptável. Não esconda conteúdo de celulares quando ele for baixado de qualquer maneira. Se houver uma postagem original, adicione um breve resumo relevante que seja mais adequado para leitura em celulares.
• Respeite as limitações e capacidades do dispositivo. Debate com o mouse/toque com o dedo à parte ou dimensões à parte, projete para as especificações mínimas do dispositivo usado pelo seu público-alvo.
• Preste atenção no desempenho. Não apenas para melhores classificações de pesquisa, mas também para experiência.

Biografia do autor: Lucy Barret está associada à HireWPGeeks Ltd. Ela fornece serviços de conversão de HTML para WordPress e tem uma equipe de desenvolvedores especializados para ajudá-la. Ela também é uma blogueira apaixonada e adora compartilhar seu conhecimento com a grande comunidade do WordPress. Siga sua empresa em redes de mídia social como Facebook e Google+.