O webdesign responsivo tornou-se um termo abrangente para que o seu site funcione bem em baixas resoluções.
Smartphones revolucionaram a web móvel, e tablets estão jogando outra chave nas engrenagens com sua crescente popularidade. Com todas as coisas consideradas, um site hoje pode ser experimentado em um smartphone de baixa resolução, um tablet de resolução média ou um desktop ou laptop de alta resolução. Quando você joga retina exibe na mistura, o número de tamanhos de tela em potencial é vertiginoso. Idealmente, o seu site irá procurar e funcionar de forma elegante em todos os itens acima, em qualquer resolução.
Webdesign responsivo em si é o processo de fazer um website funcionar em telas muito pequenas, telas muito grandes e em qualquer resolução entre elas.
Nos últimos anos, o setor desenvolveu coletivamente uma lista de boas práticas comuns. Muitas dessas práticas enfocam a atualização de websites destinados a alta resolução para tamanhos menores. Outros começam no mobile e trabalham até as viewports maiores, otimizando conforme necessário. Todas essas práticas geralmente podem ser categorizadas como layouts responsivos ou adaptativos.
Geralmente, os layouts responsivos têm melhor desempenho do que os layouts adaptativos, mas, em alguns casos (aplicativos da Web complexos, por exemplo), uma abordagem adaptativa pode atender melhor aos usuários. De qualquer maneira, o objetivo é fazer com que seu site tenha sempre a melhor aparência possível na resolução desejada.
A maioria das pessoas escolhe usar consultas de mídia para fazer isso, como eles são maciços a menos que você precise de suporte para o IE8 ou abaixo. Para aqueles de nós que ainda têm uma audiência no IE6 - 8, Scott Jehl criou um Polyfill de JavaScript chamado Respond.js isso fará as coisas funcionarem.
Antes, muitos webdesigners tinham comunicação mínima com os desenvolvedores até a entrega. Agora, designers e desenvolvedores têm que trabalhar juntos através do processo de design e desenvolvimento para que tudo corra bem. Da análise do usuário ao que pode ou não pode ser reorganizado ao mudar de viewports - designers e desenvolvedores estão mais próximos do que nunca, se não a mesma pessoa. Se você está procurando inspiração sobre como os layouts responsivos ou adaptativos se parecem, Consultas de mídia é uma galeria popular de webdesign que exibe quatro viewports de um website.
Quando a ideia de webdesign responsivo começou a ganhar terreno, as técnicas de adaptação dominaram durante algum tempo. É mais fácil fazer a transição para o design e desenvolvimento desses layouts, embora eles exijam mais trabalho do que seus correspondentes responsivos. Esta é também a rota que muitas pessoas realizam quando adaptam um site existente para serem compatíveis com dispositivos móveis. Por causa da natureza dos layouts adaptativos, eles dão muito mais controle sobre o design do site. Você só precisa projetar para viewports específicos e os navegadores exibem apenas o mais alto que couber em sua largura. Esses layouts são os que “encaixam” ao ajustar conforme você redimensiona a janela do navegador. Na verdade, se você redimensionar sua janela para ser menor que 1024 pixels, verá essa mudança súbita de que estou falando, conforme o layout deste website se ajusta para focar em uma porta de visualização de média resolução.
Ao projetar para uma abordagem de desenvolvimento adaptável, o trabalho é bastante fácil. Antes de o webdesign responsivo se tornar uma coisa, você simplesmente projetou um layout e o desenvolveu. Agora, você projetará várias viewports e as desenvolverá. Geralmente, é mais fácil começar em viewports de baixa resolução e subir o seu caminho. Se você começar com viewports de alta resolução e descer, as coisas podem acabar um pouco ... compactas. E no momento em que você chegar móvel, desordenado.
O número de viewports que você projeta depende inteiramente de você e do desenvolvedor. Desenvolva um plano de batalha com base em seus usuários. Se a análise atual do site mostrar os usuários usando principalmente viewports de baixa e média resolução, planeje-os. Você precisa de pelo menos três: um para viewports de baixa resolução (smartphones), viewports de resolução média (tablets) e um para viewports de alta resolução (desktops e laptops). Idealmente, o planejamento para seis é o padrão, com um layout de alta e baixa resolução para cada uma das três viewports listadas acima. No entanto, ter muito mais do que isso tornará o desenvolvimento e a manutenção demais para ser gerenciado, portanto, seja cauteloso.
Desenvolver um layout adaptativo é bem simples também. Supondo que você tenha trabalhado com o designer (ou o designer) desde o início, é como desenvolver um site tradicional. Você começará desenvolvendo o site em uma viewport móvel de baixa resolução. Depois disso, usaremos as consultas de mídia para expandir o layout para viewports de resolução mais alta. Abaixo estão as consultas de mídia da viewport de baixa, média e alta resolução:
/* Mobile low and high resolution viewports */ @media (min-width: 320px) { ... } @media (min-width: 480px) { ... }/* Tablet low and high resolution viewports */ @media (min-width: 768px) { ... } @media (min-width: 1024px) { ... }/* Desktop low and high resolution viewports */ @media (min-width: 1080px) { ... } @media (min-width: 1440px) { ... }É daí que vem o “estalo” na abordagem adaptativa. Já que estamos alvejando várias resoluções de viewport comuns, indo de uma para outra quando o redimensionamento da janela pode fazer com que o layout salte. Como mencionei antes, o design e desenvolvimento adaptativos são altamente úteis apenas para adaptação ou para aplicações web complexas. Projetar e desenvolver para isso muitos layouts para viewports independentes é muito mais trabalhoso se não for necessário.
A partir de hoje, o design e desenvolvimento responsivo é a abordagem de fato a ser usada. Embora ofereça menos controle sobre o layout em comparação a uma abordagem adaptativa, é muito menos trabalhoso implementar e manter, já que tecnicamente você só tem um layout. Também é mais personalizado para o site, e esse é o principal ponto de venda. Você será capaz de criar seus próprios pontos de interrupção com base em quando o seu design quebra ou não parece como pretendido.
Layouts responsivos também incluem layouts fluidos. Antes que o webdesign responsivo entrasse em cena, os sistemas fluidos eram populares - layouts usando porcentagens para larguras. Enquanto eles certamente funcionaram bem na maioria dos casos, isso foi antes de termos smartphones e tablets. Agora, a maioria dos layouts fluidos é aumentada por consultas de mídia em resoluções muito baixas e muito altas. Caso contrário, você pode acabar com layouts altamente compactos ou imensamente grandes.
Embora você tenha um guia muito simples para seguir com o design adaptável, o design responsivo não é tão claro. Há um debate acalorado de que projetar no navegador é a melhor maneira de fazê-lo - projetar e desenvolver ao mesmo tempo. Como você essencialmente levará em consideração todas as viewports ao projetar, há mais trabalho envolvido no lado do design. Idealmente, queremos manter as viewports em mente, mas não projetar nenhuma em particular. Se possível, tente se encontrar em um meio termo; Concentre-se em viewports de resolução média, tendo em mente que o layout precisará ser ajustado para resoluções mais baixas e mais altas posteriormente.
É extremamente importante usar a análise de usuário existente, se você a tiver. Se o seu site já tiver análises que demonstrem que seu público-alvo lê principalmente a partir de viewports de baixa resolução, projete com foco naquelas. Segmente seu público-alvo , mesmo que isso signifique ignorar algumas das melhores práticas existentes. No final, seu site vai atendê-los, não as pessoas que agregam essas práticas "melhores".
Quando a fase de design estiver completa, o desenvolvimento é onde a verdadeira diversão começa. Como mencionado anteriormente, se você tiver dados analíticos de seu público típico, comece por aí. Depois de desenvolver seu layout, você usará consultas de mídia para torná-lo responsivo. Em vez de definir viewports de conjunto, em vez disso, você redimensionará manualmente seu navegador até que o layout seja interrompido. Quando isso acontece, essa é a largura do seu ponto de interrupção - adicione uma consulta de mídia para corrigir a quebra no design e continuar redimensionando. Idealmente, você estará fazendo isso a partir de um dispositivo de alta resolução para poder ver todas as viewports. Depois de garantir o suporte para viewports de baixa e alta resolução, passe para o teste.
Raramente, você pode encontrar um site que use uma solução personalizada, como {$lang_domain} . De um modo geral, a maioria da web se enquadra nos grupos responsivos ou adaptativos, conforme descrito acima, mas às vezes as pessoas são criativas e fazem sua própria solução. {$lang_domain} Faz isso começando com os pontos de interrupção padrão baixo, médio e alto e, em seguida, complementando conforme necessário, quando o layout é interrompido. Além disso, o layout também é fluido na natureza até uma resolução máxima definida. Com isso em mente, seja criativo e construa algo que rompa a norma!
Infelizmente, não há realmente nenhuma boa solução para o navegador testando esses layouts ainda. A melhor maneira de realizar testes é fazer isso manualmente: carregando a página em seu telefone, tablet, laptop e qualquer outra coisa ao redor. Você também pode usar um spoofer de viewport no seu navegador se ele suportar essa extensão. Emulador de ondulação é uma extensão que eu uso no chrome para testar algumas viewports de baixa resolução. Embora seja certamente inconveniente testar manualmente em dispositivos, ele fornece uma impressão mais precisa da funcionalidade do seu site. A interface do usuário que parece bem em um emulador pode, na verdade, ter um desempenho muito ruim em um dispositivo real.
Tão extenso quanto este artigo é, isso é simplesmente uma cartilha sobre o assunto dos tipos de layout. Há muitas informações sobre os métodos responsivos de webdesign não incluídos neste artigo; A otimização de elementos da interface do usuário e tipografia, imagens e mídias responsivas, proporções de pixels de dispositivos e muito mais não são explicadas aqui. No entanto, existem muitas fontes para esse conhecimento, em formas muito mais densas de informações. Desde que surgiu a idéia de webdesign responsivo, contribuímos para uma enorme riqueza de conhecimentos sobre o assunto. Espero que, ao explicar a diferença entre os tipos de layout aqui, você consiga lidar melhor com a ideia de uma web responsiva… sem se perder na toca do coelho.
A comunidade está constantemente criando novas técnicas e construindo soluções criativas para problemas que estamos apenas começando a encontrar. Portanto, embora exista uma vasta gama de informações disponíveis sobre o webdesign responsivo por aí, é um conceito ainda em sua infância. Embora as práticas recomendadas e os casos de uso comum sejam fáceis de serem obedecidos, ser criativo e preparar sua própria solução sempre é incentivado. Se você tem alguma dica ou sugestão para aqueles que estão apenas começando, ou ampliando nosso conhecimento de webdesign e desenvolvimento responsivo, acenda uma discussão abaixo!
Imagem / miniatura em destaque, usa imagem responsiva via Shutterstock.