Web design responsivo e adaptável são ambos métodos para criar websites amigáveis para vários dispositivos que funcionam bem em diversos tamanhos de tela. Embora o design responsivo da Web seja recomendado pelo Google e seja o mais popular das duas abordagens, esses dois métodos para o design da Web com vários dispositivos têm seus pontos fortes e seus pontos fracos.
Vamos dar uma olhada nas diferenças entre design web responsivo e adaptável, focando especificamente nessas áreas-chave:
- Facilidade de desenvolvimento
- O nível de controle que você tem sobre o design
- Amplitude do suporte de dispositivo / tela
- Como futuro amigável a solução é
- Velocidade geral de download e desempenho do site
Algumas definições
Antes de entrarmos em nossas comparações lado-a-lado de um design web responsivo e adaptável, deixe-se levar um momento para observar uma definição de alto nível dessas duas abordagens.
Os sites responsivos têm um layout fluido que muda e se adapta independentemente do tamanho da tela que está sendo usado. As consultas de mídia permitem que sites responsivos mudem até mesmo na mosca se o navegador for redimensionado.
O design adaptável usa tamanhos fixos com base em pontos de interrupção predeterminados para fornecer a versão de layout mais apropriada para o tamanho da tela que é detectada quando a página é carregada pela primeira vez.
Com essas definições amplas, vamos nos concentrar em nossas principais áreas de foco.
Facilidade de desenvolvimento
A diferença mais significativa entre o design da Web responsivo e adaptativo está no modo como essas soluções são aplicadas a um website. Como o design responsivo cria um layout completamente fluido, ele é melhor usado em projetos em que você está reprojetando o site desde o início. Tentar reformular o código de um site existente para ser responsivo geralmente é um caso difícil, porque você simplesmente não tem o nível de controle que teria se estivesse desenvolvendo esse código desde o início e levando em consideração o design responsivo para os primeiros estágios do código. esse processo. Isso significa que, quando você reajusta um site para ser responsivo, você é forçado a fazer concessões para permanecer dentro da base de código existente.
Se você estiver trabalhando com um site de largura fixa existente, uma abordagem adaptável significa que você pode deixar o tamanho que o site foi projetado para intacto e adicionar pontos de interrupção adaptáveis adicionais conforme necessário. Em alguns casos, se o orçamento de um projeto for pequeno e se acomodar apenas uma pequena quantidade de trabalho de desenvolvimento, você poderá adicionar apenas novos pontos de interrupção adaptáveis para tamanhos menores centrados em tela / dispositivo móvel. Isso significa que você permitiria que telas maiores usassem o mesmo layout - talvez uma versão de ponto de interrupção de 960, para a qual esse site provavelmente foi projetado originalmente.
O lado positivo de uma abordagem adaptativa é que você pode aproveitar melhor o código de um site existente, mas uma das desvantagens é que você está criando modelos de layout diferentes para cada ponto de interrupção escolhido por você. Isso terá um impacto na carga de trabalho necessária para desenvolver e manter essa solução a longo prazo.
Controle de Design
Um dos pontos fortes dos sites responsivos é que sua fluidez permite que eles se adaptem e suportem todos os tamanhos de tela, em oposição a apenas os pontos de interrupção predefinidos determinados em uma abordagem adaptativa. A realidade, no entanto, é que os sites responsivos podem parecer ótimos em determinados tamanhos de tela chave (normalmente tamanhos que correspondem a dispositivos populares disponíveis no mercado), mas o design visual geralmente se divide entre essas resoluções populares.
Por exemplo, um site pode parecer ótimo no layout widescreen de 1400 pixels, o tamanho de tela média de 960 pixels e a tela pequena em 480 pixels, mas e os estados intermediários desses tamanhos? Como designer, você tem pouco ou nenhum controle sobre esses tamanhos intermediários e a aparência visual da página nesses tamanhos geralmente é inferior à ideal.
Com um site adaptável, você tem muito mais controle de design sobre os vários layouts que estão sendo usados porque eles são tamanhos fixos com base em seus pontos de interrupção estabelecidos. Aqueles estados in-between desajeitados não são mais um problema porque você projetou cuidadosamente cada “visão” (significando a exibição de cada ponto de interrupção) que será entregue aos visitantes.
Por mais atraente que esse nível de controle de design possa parecer, você deve estar ciente de que isso tem um preço. Sim, você tem controle total sobre a aparência de cada ponto de interrupção, mas isso significa que você deve investir o tempo de design necessário para o design de cada um desses layouts exclusivos. Quanto mais pontos de interrupção você optar por projetar, mais tempo precisará gastar nesse processo.
Amplitude do Suporte
O design web responsivo e adaptável desfruta de um suporte bastante robusto, especialmente em navegadores modernos.
Sites adaptáveis exigem componentes do lado do servidor ou Javascript para detecção de tamanho de tela. Obviamente, se um site adaptativo requer Javascript, isso significa que um navegador precisa ativá-lo para que o site funcione corretamente. Isso pode não ser uma grande preocupação para você, já que a maioria das pessoas terá Javascript em seus navegadores, mas sempre que um site tiver uma dependência crítica de qualquer coisa, deve ser notado.
Sites responsivos e as consultas de mídia que os capacitam funcionam bem em todos os navegadores modernos. Os únicos problemas que você terá são as versões mais antigas do Internet Explorer, pois as versões 8 e inferiores não suportam consultas de mídia. Para contornar isso, um polyfill de Javascript é frequentemente usado, o que significa que há uma dependência do Javascript aqui também, pelo menos para as versões antiquadas do IE.Novamente, isso pode não ser uma grande preocupação para você, especialmente se a análise do seu site mostrar que você não recebe muitos visitantes usando as versões mais antigas do navegador.
Futura Simpatia
A natureza fluida dos sites responsivos lhes dá uma vantagem sobre os sites adaptáveis no que diz respeito ao futuro. Isso ocorre porque esses sites responsivos não são criados para acomodar apenas um conjunto de pontos de interrupção previamente estabelecido. Eles se adaptam para caber todas as telas , incluindo aqueles que podem não estar realmente no mercado hoje. Isso significa que os sites responsivos não precisarão ser "consertados" se uma nova resolução de tela se tornar popular de repente.
Observando a incrível variedade no cenário de dispositivos (em agosto de 2015, havia mais de 24.000 dispositivos Android distintos no mercado), ter um site que faça o possível para acomodar essa ampla variedade de telas é extremamente importante para o futuro. Isso ocorre porque é improvável que essa paisagem seja menos diversificada no futuro, o que significa que projetar telas ou tamanhos específicos se tornará impossível, se ainda não tivermos atingido essa realidade.
Do outro lado deste cenário de comparação, se um site é adaptativo e não acomoda novas resoluções que podem se tornar importantes no mercado, então você pode ser forçado a adicionar esse ponto de interrupção nos sites que você criou. Isso adiciona projeto e tempo de desenvolvimento aos projetos e isso significa que esses sites adaptáveis devem ser monitorados consistentemente para garantir que nenhum novo ponto de interrupção tenha sido introduzido no mercado e que seja adicionado ao site. Novamente, com a diversidade de dispositivos sendo o que é, ter que verificar constantemente novos tamanhos e acomodá-los com novos pontos de interrupção é um desafio contínuo que terá um impacto no trabalho necessário para dar suporte a um site e no custo dessa manutenção. a empresa ou organização para quem o site se destina.
atuação
O web design responsivo tem sido acusado (injustamente, em muitos casos) de ser uma solução ruim do ponto de vista da velocidade / desempenho do download. Isso se deve em grande parte ao fato de que, nos primeiros dias dessa abordagem, muitos web designers simplesmente adicionavam consultas de mídia de tela pequena ao CSS existente em um site. Isso forçou as imagens e os recursos destinados a telas maiores a serem entregues a todos os dispositivos, mesmo que essas telas menores não as usassem em seus layouts finais. Design responsivo percorreu um longo caminho desde aqueles dias e a realidade é que os sites de qualidade responsiva hoje não sofrem de problemas de desempenho.
Velocidades de download lentas e sites inchados não são um problema de website responsivo - é um problema que pode ser encontrado em todos os sites. Imagens muito pesadas, feeds de mídias sociais, scripts excessivos e muito mais, além de pesar um site, mas sites responsivos e adaptáveis podem ser construídos para carregar rapidamente. Claro , eles também podem ser construídos de uma maneira que não faça do desempenho uma prioridade, mas isso não é um traço da solução em si, mas sim um reflexo da equipe que estava envolvida no desenvolvimento do próprio site.
Além do layout
Um dos aspectos mais atraentes do design da Web adaptável é que você não apenas tem controle sobre o design do site para definir pontos de interrupção, mas também os recursos que são fornecidos para essas versões de site. Por exemplo, isso significa que as imagens da retina podem ser enviadas apenas para dispositivos de retina, enquanto as telas sem retina obtêm imagens mais apropriadas que são menores no tamanho do arquivo. Outros recursos do site (arquivos Javascript, estilos CSS, etc.) podem ser entregues com inteligência somente quando forem necessários e serão usados.
Esse uso de web design adaptativo vai muito além da simples equação de “se você está adaptando um website, adaptável pode ser uma abordagem mais fácil de usar”. Todos os sites, incluindo redesenhas completas, podem se beneficiar de uma abordagem mais inteligente para uma experiência mais personalizada.
Este cenário mostra a natureza diferenciada deste debate “responsivo versus adaptativo”. Embora seja verdade que uma abordagem adaptativa possa ser mais adequada do que a capacidade de resposta de retrofits de sites, ela também pode ser uma ótima solução para reformulações completas. Da mesma forma, em alguns casos, uma abordagem responsiva pode ser adicionada à base de código de um site existente, oferecendo a esse site todos os benefícios de uma abordagem totalmente responsiva.
Qual abordagem é melhor?
Quando se trata de web design responsivo versus adaptativo, não há um “vencedor” claro, embora responsivo seja certamente a abordagem mais popular. Na verdade, a abordagem "melhor" depende das necessidades de um projeto específico. Além disso, isso não precisa ser uma situação “ou / ou”. Existem muitos profissionais da Web que estão construindo sites que combinam o melhor do design da Web responsivo (larguras de fluidos, suporte futuro) com os pontos fortes do design adaptável (melhor controle de design, carregamento inteligente dos recursos do site).
Comumente conhecido como RESS (Responsive Web Design com Server Side Components), essa abordagem mostra que realmente não existe uma solução “tamanho único”. Tanto o design web responsivo quanto o adaptável têm seus pontos fortes e seus desafios, portanto, é necessário determinar qual deles funcionará melhor para o seu projeto específico, ou se uma solução híbrida pode realmente servir melhor para você.
