O design responsivo é um termo relativamente novo no design da web. Foi cunhado há três anos em maio de 2010, quando o web designer Ethan Marcotte usou o termo em seu artigo para uma lista separada.
Hoje, há até um mini debate sobre se o design responsivo está aqui para ficar ou se é apenas um flash na bandeja. Só o tempo dirá, mas por enquanto, fica claro que o design responsivo se esforça para tornar a experiência do usuário o mais confortável possível.
O design responsivo é uma filosofia de design da web que se concentra na criação de sites que oferecem aos usuários uma experiência de visualização aprimorada. Isso inclui recursos como navegação e leitura sem esforço e um mínimo de redimensionamento, rolagem e deslocamento do navegador. Tudo isso ocorre em vários dispositivos diferentes, de desktops a smartphones.
Uma vez que esta abordagem de web design ainda está em um estado incipiente, você pode não estar totalmente claro sobre o design responsivo. É mais sobre a exibição contínua de conteúdo em várias plataformas ou principalmente sobre como ajudar empresas a criar sites mais atraentes para aumentar suas vendas por meio de uma melhor experiência do usuário?
Mashable já saiu em um membro e chamado 2013 o ano do design responsivo. Enquanto isso continua a ser visto, alguns aspectos básicos do design responsivo são padrões que nunca desaparecerão. Aqui estão os fatos de design responsivo mais importantes para se familiarizar.
Você seria perdoado por pensar que design responsivo e design móvel são um e o mesmo - mas eles não são. Com certeza, o design responsivo cria sites para que eles respondam ao tamanho do navegador e sejam compatíveis com dispositivos móveis, mas o design responsivo realmente é um design completo da web. O problema de se referir a essa abordagem de design da web como design móvel é que ela é inerentemente limitante, o que prejudica a abordagem em si.
Os sites responsivos mais eficazes podem ser vistos como deveriam, em várias resoluções. Isso inclui tudo, desde os usuais 1024 × 768 pixels até as telas 1920 × 1080 e tudo mais. Sites como esses também parecem esplêndidos em tablets (retina e displays padrão), bem como em smartphones. Se um web designer olha design responsivo apenas pelo contexto do celular, ele está potencialmente perdendo uma experiência de usuário mais ampla.
Ao mesmo tempo, o celular é um ponto de partida realmente oportuno para toda a discussão de design responsivo. Tem sido a norma começar com um esquema móvel e depois expandir esse design para tamanhos adicionais à medida que um site responsivo é desenvolvido. Muitos designers acreditam que é mais simples desenvolver recursos visuais do que minimizá-los.
Se há uma regra que os web designers devem seguir, é que a qualidade da imagem é muito mais vital do que o número real de imagens. A razão é que uma imagem de baixa qualidade simplesmente não parece atraente em nenhum tamanho. O tempo que um site leva para carregar uma imagem é quase tão importante quanto o tamanho. Os usuários de dispositivos móveis concordarão com isso, porque eles têm largura de banda limitada para enfrentar.
O que é um web designer para fazer? Basta alcançar um equilíbrio inteligente entre o tempo de carregamento e a qualidade. Isso inclui dimensionamento de imagens com propriedades de altura e largura CSS, controle de carregamento de imagens em tamanho real e otimização de imagens para a Internet. Antes de fazer o upload, é altamente aconselhável recortar quaisquer imagens e salvar cada imagem no menor tamanho possível, desde que ela mantenha uma qualidade visual nítida.
Confira Site da Sony USA . Note como todas as imagens são super nítidas em qualidade, independentemente do tamanho. Depois de visitar o site ou atualizar a página inicial, observe também o quão rápido as imagens são carregadas. Você não precisa esperar mais que um segundo para que tudo entre em foco de forma extremamente nítida.
Os designers têm muitas opções ao incorporar imagens em uma configuração responsiva. Eles podem usar apenas algumas imagens; diminuir o uso de imagens dentro de esquemas de tamanho móvel; permitir imagens para mascarar-se em ambientes móveis; ou utilize vários tamanhos e versões de arquivos. Essas opções funcionarão de forma eficaz, embora alguns desenvolvedores estejam contra a ocultação de imagens, porque o usuário ainda terá que carregar as imagens, apesar de não serem vistas.
O tipo não deve ser tamanho único. Um tipo de fonte que parece atraente para o olho em sua área de trabalho pode ser horrível em seu smartphone. A tipografia deve seguir as mesmas regras que outros aspectos do design responsivo.
O aspecto mais importante da tipografia responsiva é o tamanho da linha. Para facilitar a leitura, o tipo deve ser otimizado com base na largura da tela. A regra geral, para sites de desktop, é que entre 50 e 75 caracteres, uma linha é ideal; para dispositivos móveis, apenas entre 35 a 50 caracteres é ideal.
O tipo também deve ser lido facilmente na vertical. Muitos sites utilizam um espaço de linha de até 140% do tamanho de pontos da tela para blocos maiores de texto. Se a tela for menor, mais espaço deve ser adicionado.
Até mesmo o tipo de letra específico utilizado é significativo. Fontes sofisticadas e fontes novinhas têm a capacidade de parecer visualmente atraentes em telas maiores, mas são difíceis de ler se o tamanho do ponto for pequeno. Esses tipos de fontes devem ter muito espaço entre eles. Quando você trabalha com tamanhos menores, é mais fácil utilizar estilos normais sem serifas e até mesmo traçados.
Em Site do Hardboiled Web Design , você pode ver muitos desses princípios sendo seguidos, contribuindo para uma boa capacidade de resposta. Observe como o tamanho da linha do texto em uma área de trabalho - embora em média seja maior que a recomendação ideal de 50 a 75 caracteres - é composto por um tipo de letra que é limpo e fácil de ler. Além disso, o espaço de linha também é maior que o tamanho de ponto da fonte. Em dispositivos móveis, a capacidade de resposta do site é ainda melhor: em um display do iPhone 5, o número de caracteres por linha era de aproximadamente 67, o que é um pouco acima da regra ideal entre 35 e 50 caracteres.
Quando se trata da experiência do usuário - que é um dos fatores mais importantes que os web designers devem pensar - a navegação está no topo das prioridades. A navegação deve ser suave e eficiente para garantir uma experiência de usuário confortável.
O design responsivo eficiente deve garantir isso prestando atenção extra à largura específica de um determinado navegador. Um site que use bem o design responsivo exibirá a navegação do site em diferentes áreas, todas dependentes da largura do navegador. Um dos melhores exemplos disso é Sentido Alimentar Navegação do site.
Seria um erro para o design responsivo dimensionar a navegação do site para proporções maiores em dispositivos com telas maiores.
Agora, quando você ouve os designers da Web falando sobre design responsivo, você sabe que não é apenas uma questão de fazer com que um site pareça bom e funcione sem problemas em telas menores e móveis. Você saberá que essa abordagem de design se baseia no princípio de fazer com que sites de todos os tamanhos forneçam a melhor experiência possível ao usuário, independentemente do que estiver usando para visualizar o site.
O design responsivo ainda é um conceito relativamente novo, pelo menos para a maioria das pessoas que apenas visualizam sites na Internet. É por isso que muitas pessoas ainda não conseguem concordar sobre o que torna o design responsivo ... design responsivo. É sobre ver tudo corretamente nas telas dos dispositivos móveis? É apenas sobre tempos de carregamento e imagens de alta qualidade que irão agradar aos olhos? Trata-se de um design limpo e tipos de letra fáceis de ler?
É tudo isso e muito mais. Esses são apenas os fundamentos dessa abordagem de web design, mas o design responsivo ainda está evoluindo e mudando, então é bom que os elementos adicionais também sejam considerados. No final, trata-se de melhorar a experiência do usuário, porque ninguém quer lidar com um site que seja lento, embaçado, difícil de ler, confuso ou difícil de navegar.
O design responsivo é apenas uma tendência? Quais são os principais aspectos do design responsivo? Deixe-nos saber seus pensamentos nos comentários.