Adaptação ou responsividade? Vamos ler o livro de receitas da vovó - Agência Setap

A web toda está em evolução, as bibliotecas, as linguagens de programação. O HTML mudou totalmente e na versão 5 vem mostrar o que realmente é uma marcação. Nos proporcionando uma otimização extrema e de ponta a ponta em cada tela desenvolvida.

O Google pede para que criemos a web única, onde um site deve servir o mesmo conteúdo de maneira singular, e não criando versões para cada dispositivo. Mas será certo pensar nos dispositivos para criar responsividade? Será que seria essa a receita @AlunoNome?

O mercado mobile tem novidades todos os dias, novos dispositivos são lançados, e a cada dispositivo temos novas resoluções, o tamanho da tela muda, cada celular e tablet tem duas maneiras de visualizar o conteúdo, podendo ser em portrait ou landscape. Sem contar é claro nos outros dispositivos como a TV, o Fogão, o Micro ondas, a Bicicleta e os Adaptadores de tomadas dos anos 90. (Isso me persegue)

Vamos pensar na receita da vovó!

Para entender esse conceito e preciso enxergar todos os dispositivos como usuários, ou ainda como pessoas, que tem seus gostos e sabores preferidos. Quando uma receita de bolo de chocolate é preparada, esse bolo é feito com ingredientes que possam agradar a todos, ou o maior número de pessoas possível. Você já comeu uma nega maluca né? Tem bolo mais simples que esse? E não agrada a grande maioria?

O Design Responsivo é assim. Como uma única receita temos que preparar nosso site para servir conteúdo procurando atender a todos os dispositivos. É como uma nega maluca, a receita e a mesma e igualmente simples. E nem é preciso ter outros dispositivos a mão para construir um site responsivo, basta um navegador e um mouse para ir diminuindo a janela e melhorando os ingredientes.

Agora a receita do vovô!

Em meados de 2010 o vovô Ethan Marcotte publicou uma receita de nega maluca, O nome dessa receita? Responsive Web Design. A partir daí a comunidade e muitos entusiastas em uma enxurrada de feedbacks atrás de mais detalhes sobre a arquitetura e filosofia de Ethan deram sentido ao Design Responsivo.

Devemos aceitar de fato que fato que a web não tem as mesmas restrições e projetar para essa flexibilidade!

Essa foi a frase de Ethan quando comparou o design impresso com o design web, e com essa frase um ano depois foi lançado o livro com o mesmo título. Responsive Web Design.

E tão simples como a receita de uma nega maluca, em resumo o livro fala que para criar design responsivo temos que ter layouts fluidos, imagens e recursos flexíveis, e media queries.

Preparando o Bolo:

Claro que um bom bolo não é feito apenas com os ingredientes, temos que saber preparar. Então vou deixar algumas dicas sobre esse preparo. E alguns ingredientes que apresentam a melhor qualidade e sabor pós forno!

Primeiramente deixemos de lado o sache de pixels, em design responsivo temos que trabalhar com porcentagem para marcação, tamanhos relativos para fontes e projetar as viewports de acordo com o conteúdo, e numa com base em qualquer dispositivo.

E sempre sirva o conteúdo do site como prato principal. Claro que o bolo tem que ser bonito para dar fome. Mas se o gosto estiver ruim, você não irá vender muitas fatias do mesmo.

Vou te deixar um desafio. Escreva um site com puro HTML, pensando apenas no conteúdo e marcando ele com todas as tags de maneira coesa. Esqueça por um momento que existe CSS, JS e qualquer outra tecnologia. Vamos voltar lá na época que a vovó cozinhava e ver o resultado.

Com seu bolo pronto, abra ele no navegador e vá ajustando a tela do menor ao maior ponto de visualização. O que você vai perceber é que tem uma marcação responsiva. Todos os textos vão se adaptando de forma progressiva ou regressiva e todo conteúdo se ajusta da melhor maneira.

Com isso você vai perceber que já tem o sabor, só falta o visual!

Gostou do artigo @AlunoNome? Espero que sim, e espero poder debater com você nos comentários. Não esquece de compartilhar nos links abaixo! Aquele forte abraço e #BoraProgramar!