Eleita ” palavra- chave do ano 2013 ” pela revista Mashable , o Responsive Web Design (RWD) agora faz parte de todos os nossos projetos web, mas ainda permanece nebuloso e indescritível mesmo entre os profissionais!
Preâmbulo
Responsive Web Design, ou web design adaptativo , é uma abordagem de web design que visa, através de diferentes princípios e técnicas, oferecer ao usuário uma consulta confortável e autoadaptável independentemente do seu meio de leitura (Desktop, Celulares, tablets, e- leitores, etc).
O termo “Responsive Web Design” foi citado pela primeira vez por Ethan Marcotte em um artigo A List Apart publicado em maio de 2010.
Quais são as principais técnicas de Web Design Responsivo?
O Web Design Responsivo também utiliza métodos de design ergonômico , pois não se trata mais de projetar tantos caminhos quantas famílias de terminais existem, mas de projetar uma única interface autoadaptável. Mas também para consultas (Media Queries) empurrando diferentes estilos CSS dependendo do tamanho da tela do usuário.
Isso gera economia no design e manutenção de sites que se beneficiam dessa modalidade de design.
Site dedicado, aplicativo ou responsivo? Qual solução?
Quando você deseja oferecer aos seus visitantes um site visível no celular, três soluções estão disponíveis para nós:
- Crie um site dedicado
- Desenvolver um aplicativo
- Crie um site responsivo
Cada uma dessas escolhas tem suas vantagens e desvantagens.
Um site dedicado
Isso consiste em projetar um site dedicado para cada meio : um site para desktop, um site para tablets, um site para smartphones, etc.
Vantagens
- A estrutura e o conteúdo do site dedicado são precisamente adaptados ao suporte
- Capacidade de desenvolver várias funcionalidades (incluindo toque)
- Pode ser uma alternativa “rápida”, enquanto aguarda uma reformulação completa (e responsiva) de seu site
Desvantagens
- conteúdo duplicado
- Manter várias versões de sites e vários endereços da Web é extremamente demorado
- Diferentes endereços da web são menos facilmente indexáveis pelos mecanismos de pesquisa
Um aplicativo móvel
Um aplicativo é um produto desenvolvido especificamente em vários idiomas (iOS, Android, WindowsPhone) e que é baixado e referenciado dentro de uma “Store” (AppStore, Google Play, Windows store).
Vantagens
- Suporte fácil para recursos nativos (toque, acelerômetro, notificações, GPS, etc.)
- Um ajuste total ao dispositivo (ergonomia, desempenho, densidade de pixels)
- Visibilidade da marca nas “lojas”
- Acesso direto ao smartphone do usuário
Desvantagens
- Requer desenvolvimento em várias linguagens específicas para iOS, Android, WindowsPhone, etc.
- Esta solução representa um certo custo em termos de desenvolvimento e manutenção de conteúdo
- Não indexado pelos motores de busca
- A atualização do aplicativo requer ação do usuário
Um site responsivo
Esta solução parece a mais fácil em um momento em que centenas de formatos de tela diferentes estão conectados o tempo todo.
Vantagens
- Responsivo pode ser considerado após o design inicial do site mesmo que não seja o ideal
- O custo, bem como os atrasos são geralmente mais baixos do que outras soluções
- Atualização perfeita e implantação multiplataforma
- Gerenciamento de projetos facilitado
Uma das vantagens inegáveis há algum tempo é que o Google promove sites “mobile-friendly” dentro de seus resultados de busca.
Desvantagens
- É difícil contornar os limites ergonômicos e de desempenho dos navegadores da web
- É necessário planejar testes ao longo do projeto
É comum usar uma combinação de diferentes métodos: por exemplo, um site dedicado e responsivo ou um site responsivo preenchido com um aplicativo.
Outros conceitos a saber:
PROJETO ESTÁTICO
O layout estático corresponde à grande maioria dos sites construídos antes da chegada do Responsive Web Design na década de 2010.
Ele usa dimensões fixas (geralmente 960px) independentemente da superfície da tela.
Por exemplo, se a janela do navegador for mais larga que o site, haverá branco nas laterais. Por outro lado, se for menos largo, haverá uma barra de rolagem horizontal na parte inferior da janela para poder acessar a parte oculta, que não é nada ergonômica.
PROJETO ADAPTÁVEL
Um design adaptável é uma melhoria no design estático: as unidades de largura são fixas, mas diferentes dependendo do tamanho da tela . Quando a janela do navegador é redimensionada, cada vez que os pontos de interrupção são cruzados (geralmente: 320px, 480px, 768px, 1024px), um layout correspondente é usado.
PROJETO LÍQUIDO
Aqui as larguras dos diferentes elementos são expressas em porcentagem , o que significa que o site se adapta automaticamente ao tamanho da janela. Este design não é muito adequado para tamanhos de tela muito grandes ou tamanhos de tela muito pequenos.
PRIMEIRO DESIGN MÓVEL
Sistema que favorece a construção de ergonomia móvel com um pequeno espaço de exibição antes de projetar aquele para “desktop” (computador de mesa) que continua sendo o padrão de exibição tradicional.
O aumento constante das vendas via smartphone aumenta o interesse por esta abordagem que visa melhorar a experiência do usuário…
Entre as ferramentas destinadas à criação de sites, o CMS Drupal desenvolveu a versão 8 de seu CMS integrando esse pensamento “Mobile First”.
