30/04/2016 DesignFludo|alura

Design Fludo
Link do projeto: (http://s3.amazonaws.com/caelum-online-public/responsivo/curso-web-design-
responsivo.zip)http://s3.amazonaws.com/caelum-online-public/responsivo/curso-web-design-responsivo.zip
(http://s3.amazonaws.com/caelum-online-public/responsivo/curso-web-design-responsivo.zip)

Ol! Bem-vindo ao curso online de Web Wesign Responsivo do Alura. Nesse curso, ns vamos ver um pouco sobre
como trabalhar com a web, pensando principalmente em novos dispositivos - como dispositivos mveis de
smartphones, tablets -, mas tambm em desktop, e em como fazer para os sites adaptarem-se para essas diferentes
possibilidades de hoje em dia.

Quando ns trabalhamos com design responsivo, pensamos em atacar os dispositivos mveis. Geralmente, a
primeira pergunta que fazemos : eu quero um site mobile ou um com design responsivo? O que eu quero dizer
com isso? Bom, veja, por exemplo, o site do UOL:

Abri o UOL aqui no meu desktop (voc j deve ter visto essa pgina alguma vez) e eu tenho vrias nticias, colunas,
um menu grande etc. Se eu abrir o mesmo site, agora em um mobile, eu vou ver essa tela aqui:

https://cursos.alura.com.br/course/webdesignresponsivo/section/1/explanation 1/9
30/04/2016 DesignFludo|alura

Repare que tenho agora um site adaptado para mobile, bem diferente daquele para desktop, mas, principalmente,
eu tenho at um endereo novo: m.uol.com.br. Esse um claro exemplo de um grande portal do Brasil. H vrios
outros possveis, mas, para ns vermos um contraponto de qual seria a outra alternativa, ainda nesse assunto de
notcias, peguei um outro. Por exemplo, o site do Boston Globe:

bostonglobe.com, um site americano de notcias. Aqui, estou abrindo ele no desktop. Alis, peguei-o, no por que
no temos bons exemplos no Brasil, mas porque esse site famoso nessa parte de responsivo, por ter sido um dos
grandes primeiros projetos com responsivo no mundo. Inclusive, a pessoa que criou o termo web design
responsivo, Ethan Marcotte, participou desse projeto, ento ele acabou cando famoso por isso. Mas, veja bem,
esse um site em sua verso desktop. E o que acontece se o abro no tablet? D uma olhada:
https://cursos.alura.com.br/course/webdesignresponsivo/section/1/explanation 2/9
30/04/2016 DesignFludo|alura

Eu tenho o mesmo site, no mesmo endereo, com a mesma URL, mesmo design e mesmo cdigo. A diferena que
ele se adapta a essa resoluo um pouco menor. Ento, aqui, voc v, por exemplo, duas notcias de coluna. Se eu
abrir no celular, agora:

Dando uma olhada v-se que o mesmo site novamente, mesma URL, mesmo endereo e mesma HTML. S que
tenho uma coluna de contedo, um menu compactado etc. Isso design responsivo.

Ento, estamos nessa dvida: se fazemos um site mobile espec co, como vimos no caso do UOL, ou um design
responsivo, como nesse caso do Boston Globe.

https://cursos.alura.com.br/course/webdesignresponsivo/section/1/explanation 3/9
30/04/2016 DesignFludo|alura

Mais um exemplo:

Olhe a pgina do site da Caelum que peguei. Gravei, inclusive, um vdeo para voc dar uma olhada de como o site se
adapta com as diferentes resolues. Voce v que uma coluna viram duas, e ento viram trs. Voc percebe as fotos
aumentando de tamanho; e o texto e o menu adaptando-se. Tudo isso mostra a ideia de que a mesma pgina
adapta-se a diferentes resolues, inclusive, a vrios intervalos dessas resolues, como mostrei nesse vdeo.

Ento, pensando de novo naquela dvida - site mobile ou design responsivo? -, essa pergunta tem um detalhe que
queria discutir. Quando falamos de mobile, o que mobile exatamente?

Vamos tentar de nir mobile. Quando voc pensa em fazer um site mobile, uma pgina para dispositivos mveis, o
que separa esses dispositivos de outros que no so mobile?

Vamos pensar. Seria uma tela pequena? Ento, tendo uma tela pequena, quer dizer que ele um dispositivo mvel?
Bom, se eu tiver um tablet, ele no mvel? No bem isso, certo?

Vamos tentar de novo. Talvez seja a portabilidade. Tenho um dispositivo que posso usar em qualquer lugar: na
praa, na rua. Bom, ento, se eu levar meu notebook para praa, ele seria mobile? Talvez no.

Vamos pensar. Talvez, ento, seja as redes mveis. O fato de eu poder acessar meu dispositivo atravs de 3G ou 4G
de ne que mobile. Bom, assim, se eu comprar aquele 3G USB de plugar no computador, eu estou em um mobile?
, veja bem. Talvez no.

Ento, vamos tentar mais um: touch screen. Talvez o que de ne mobile seja uma tela de touch. Ento, se voc tem
um computador hbrido, com Windows 8, por exemplo, os primeiros computadores com touch, voc est em um
dispositivo mobile? A voc pensa: ento, no sei. difcil.

A grande questo, na verdade, que no existe mobile. Tentar fazer essa separao entre o que e o que no
mobile problemtica. Existe, claro, os extremos. Se mostrar um smartphone pequenininho, voc falar para mim

https://cursos.alura.com.br/course/webdesignresponsivo/section/1/explanation 4/9
30/04/2016 DesignFludo|alura

que ele um mobile; se mostrar um computador desktop grando, ele, obviamente, no ser mobile. Mas a questo
que, no meio, entre esses dois dispositivos, existem vrias possibilidades, e elas so d ceis de de nirmos. s
vezes voc tem um tablet to grande quanto um notebook, mas s vezes voc tem um notebook hbrido que vira
tablet. s vezes voc tem touch screen, s vezes no, como pode ser que tenha tambm 3G, como tambm no.

En m. A grande questo que no interessa, no importa. No existe mobile, logo no nos interessa essa diviso. O
que existe so vrios dispositivos diferentes, com caractersticas diferentes e ns queremos que o nosso site
suporte todos eles.

Ento, se voltarmos para aquela nossa questo, o design responsivo a nica maneira de atingir todos esses
dispositivos diferentes atravs de uma nica web, uma nica pgina.

Podemos tentar fazer um site mobile separado, como vimos no exemplo do UOL, porm, a grande questo : onde
passaramos o trao? Onde de no o que mobile e o que no ? Isso o que acabamos de ver. Essa linha muito
tnue e complicada de ser de nida.

A voc decide trabalhar com design responsivo. Mas, quais so os princpios? O grande corao do design
responsivo o uso de layout uido. O que signi ca isso?

Peguei essa pgina do site da Caelum, por exemplo. Uma pgina simples, que serve para os usurios entrarem em
contato. Temos l um menu, um banner e duas colunas de contedo: uma com um menu e outra com alguns
endereos da Caelum.

Uma pgina com layout xo, no uido. Se voc for dar uma olhada, tenho medidas em pixels para cada uma dessas
partes do texto do site:

https://cursos.alura.com.br/course/webdesignresponsivo/section/1/explanation 5/9
30/04/2016 DesignFludo|alura

Veja que coloquei os pedaos mais importantes, em especial o banner. Vou coloc-lo em um grid de 960 pixels, e
depois dividir o contedo em duas colunas, que coloquei em 470 pixels, certo?

A grande questo que estou de nindo as coisas em pixels. Quando eu fao isso, como se fazia bastante
antigamente na web, eu estou indo contra a questo de design responsivo, impedindo a pgina de se adaptar.

Preciso transformar tudo isso em design de nido. Ou seja, usar medidas exveis. Como assim? A medida exvel
mais importante a porcentagem. Quando trabalho com porcentagens, possvel fazer meu site se adaptar em
diferentes resolues. Vamos voltar l no exemplo.

https://cursos.alura.com.br/course/webdesignresponsivo/section/1/explanation 6/9
30/04/2016 DesignFludo|alura

Seria eu olhar para esse mesmo grid, e em vez de enxergar os pixels, ver porcentagens. Por exemplo, quero dividir
em duas colunas, ento em vez de colocar 470px, colocar isso em porcentagens.

Coloquei 49%, pois dividi no meio e deixei um espainho. Logo, se vocr quer dividir duas colunas, far 50% para
cada lado; se forem trs colunas, 33%; e se forem quatro, 25%.

En m. A questo parar de pensar em pixels e comear a pensar nas propores do design. Essa a grande
mudana do design responsivo quando falamos de layout uido. parar de pegar aquela medida em pixel exata -
que voc pega, por exemplo, no Photoshop e coloca no CSS -, e comear a enxergar no seu design, naquela sua
criao, as propores naturais entre os contedos. Ento, se h duas colunas, obviamente a proporo de 1 pra
1, 50% pra cada lado. E voc transforma em cdigo depois.

Vamos pegar, por exemplo, de novo essa nossa pgina:

https://cursos.alura.com.br/course/webdesignresponsivo/section/1/explanation 7/9
30/04/2016 DesignFludo|alura

J pensando em porcentagens, como que eu decodi caria isso? Ento, eu preciso do cdigo. Se eu tiver a classe
banner, que representa o banner l de cima, ele teria a largura de 100%:

.banner{
width:100%;
}

Se voc for trabalhar com as duas colunas, teremos a coluna do formulario, com a largura de 49%. Darei um oat left
para ela car na esquerda.

.formulario{
width:49%;
float:left;
}

E a eu coloco agora a coluna das unidades, com um width de 49% e tambm com oat right para car na direita.

.unidades{
width:49%;
float:right;
}

Um cdigo CSS simples que no tem grande segredo, mas que far ns deixarmos essa nossa pgina com um layout
mais uido, usando as medidas exveis. Essa a grande questo.

Bom, o que que vimos nessa primeira aula de design responsivo, nesse comeo de teoria? Vimos que vamos

https://cursos.alura.com.br/course/webdesignresponsivo/section/1/explanation 8/9
30/04/2016 DesignFludo|alura

trabalhar com design responsivo, principalmente, porque no h outra alternativa. Se quiser fazer um site mobile,
eu no consigo traar a diferena entre mobile e o resto. E a questo que isso s "vai piorar" para o futuro.
Teremos, cada vez mais, dispositivos com caractersticas diferentes. Logo,o design responsivo a nica alternativa,
j que no existe mobile.

Vimos tambm que para implementar isso, precisamos trabalhar com layout uido. E o grande corao dele so as
medidas exveis, em especial as porcentagens, que vimos no exemplo.

E a grande mudana do pensamento quando se est comeando com design responsivo comear a olhar para o
seu design e a pensar nas propores dele. voc conseguir enxergar em seu projeto as propores entre os
desenhos das coisas: entre as colunas e os outros elementos; e no mais em pixels xos.

Temos alguns exerccios agora e continuaremos na prxima aula.

Ver video Comear exerccios

Termos e condies FAQ Forum Sobre Sugira um curso Sugira uma funcionalidade

https://cursos.alura.com.br/course/webdesignresponsivo/section/1/explanation 9/9