o acesso a web era feito através de computadores desktop
os sites tinham um tamanho fixo que se assemelhavam a revistas
os tamanhos usados eram 800 x 600 e 1024 x 768 e correspondiam ao tamanho dos monitores da época
os layouts eram, na sua maioria, rígidos e inflexíveis
os smartphones já existem há algum tempo mas o surgimento do iPhone em 2007 foi um grande marco na história dos dispositivos móveis
Foto 1 - Steve Jobs com o primeiro iPhone
ele foi o primeiro dispositivo que possuía um navegador completo
Foto 2 - iPhone com um navegador completo
e, antes da popularização dos aplicativos, a web foi a primeira aposta de Steve Jobs
a ideia era que o iPhone utilizasse aplicações web ao invés de aplicações instaladas
após o surgimento do iPhone outras empresas continuaram a investir pesado no mercado móvel
empresas como o Google viam o mercado móvel com um gigantesco potencial para o futuro e investiram bilhões de dólares
com o passar do tempo e a enorme concorrência os smartphones se tornaram mais populares e acessíveis
hoje os smartphones fazem parte da vida de boa parte da população e se tornaram uma ferramenta indispensável para o indivíduo
ele está presente em quase todos os momentos do nosso dia-a-dia
ao acordar, durante o café, naquela mensagem para o grupo da família, durante o almoço, para checar aquela notícia de última hora, para fugir do trânsito, para estudar, para pagar conta, para se divertir, para pedir comida...
e... para comprar ou vender carro!
ele se tornou o principal meio de acesso a internet pela população e foi o que de fato democratizou o acesso a internet
e se tornou um grande negócio
hoje em dia, as pessoas acessam a web em sua maior parte pelos smartphones
mas, no início, os sites não eram otimizados para dispositivos móveis
era necessário ficar "dando zoom" para conseguir utilizar um site que foi construído para desktop em um dispositivo móvel
isso gerava uma péssima experiência para o usuário final e algo precisava ser feito!
e, com a popularização dos smartphones, os sites passaram a criar uma versões mobile
com a versão mobile parte dos problemas do usuário foram resolvidos...
mas passaram a surgir problemas para o(a) desenvolvedor(a) web
é necessário ter que lidar com código duplicado?
caso haja alguma alteração precisaremos sempre mexer em dois lugares diferentes?
e surgir a necessidade para ajustar o layout para um novo dispositivo como um tablet?
trata-se de uma abordagem que permite disponibilizar um único site que seja adaptável de acordo com o dispositivo
a utilização dessa técnica traz inúmeros benefícios como...
o site é melhor arquitetado, ou seja, se torna mais acessível e melhor ranqueado por mecanismos de busca
oferece uma melhor experiência de uso em dispositivos móveis, ou seja, permite uma melhor conversão
uma base de código única para dar manutenção, ou seja, facilita a inclusão de uma nova funcionalidade
para alcançar o web design responsivo utiliza-se algumas técnicas como...
as media queries são uma funcionalidade do CSS que permite a aplicação de regras de acordo com um critério específico
esses critérios podem ser: largura da tela, altura da tela, orientação do dispositivo ou resolução
código 1a - exemplo de media query com a largura da tela
body {
background-color: #fff;
}
@media screen and (min-width: 360px) {
body {
background-color: #ff123c;
}
}o layout fluído permite que o conteúdo se acomode dentro do layout
para isso deve-se evitar utilizar unidades de medidas absolutas como
pxe dar preferência para unidades de medidas relativas como%ouem
os breakpoints são os pontos de quebra em que um elemento do layout é reacomodado
evite o device driven development, isto é, definir as quebras de acordo com tamanhos de dispositivos conhecidos
prefira o content driven development, isto é, definir as quebras de acordo com o conteúdo
isso garante a consistência do layout independentemente do tamanho do dispositivo
mas como devemos implementar o design responsivo? começando do mobile para o desktop ou do desktop para o mobile?
trata-se de uma abordagem que sugere iniciar a criação de um site a partir da versão mobile e ir adaptando para tamanhos maiores
é mais fácil de evoluir uma versão mobile para uma versão desktop do que o contrário
cria-se uma base sólida e vai adicionando funcionalidades mais avançadas
isso permite priorizar o conteúdo
evite esconder conteúdo
o design responsivo e o mobile first são técnicas bem-sucedidas e que são utilizadas para a criação de aplicações web modernas
são inúmeros benefícios que essam técnicas trazem tanto em relação a parte técnica ou de negócio