Tudo bem, é tão tecnicamente que terminamos
de construir nosso site.
Temos a página inicial,
temos a página do blog e também teremos uma página de contato,
e também teremos uma página de contato
bem como o cabeçalho e o rodapé.
Mas há uma coisa muito, muito
importante que precisamos cuidar e
que será um design responsivo.
Lembre-se sempre de que tantas pessoas
hoje em dia usam seus telefones celulares para navegar na Internet.
E se alguém tropeçar,
tropeçar em seu site no celular,
você quer ter certeza de que ele parece bom.
Então, o que vamos fazer no
resto desta seção é que vou
mostrar como você pode reconstruir o cabeçalho, a página inicial,
o rodapé
e as outras páginas para parecer responsivo.
Para que, se ele for visualizado em um tablet
ou em um dispositivo móvel, ficará bem.
Lambdas lhe dá uma demonstração muito,
muito rápida agora
isso é para a visualização do tablet.
Você pode ver que eu reduzi
o tamanho da minha tela para o de um tablet.
E você pode ver agora que ainda parece
muito, muito, muito bom.
Não temos problemas com espaço no cabeçalho.
Parece bom.
seção de notas de testemunho parece boa.
A foto parece boa.
Mas agora, se eu rolar até o
menor tamanho de tela,
que normalmente será o seu celular.
Deixe-me voltar ao topo agora você pode
ver que o cabeçalho parece diferente.
Temos um fundo preto.
Nós temos nosso logotipo.
Temos o menu principal aqui,
que agora é o menu de hambúrguer,
que você já viu muitas vezes antes.
E então, se eu rolar para baixo novamente,
você pode ver que fica bem
até o rodapé.
Portanto, o design responsivo é extremamente importante.
Então, chegando, vou mostrar como você
pode fazer alterações em seu site para
que ele fique bem em qualquer dispositivo móvel.
Lambda também menciona rapidamente
que, quando se trata de um design responsivo,
existem alguns conceitos que devem estar cientes.
Um envolveria fazer coisas como reduzir
margens são padrões que você
adicionou na versão para desktop.
Por exemplo, você se lembra de lá com o banner da página inicial.
Para esta seção, tivemos que adicionar
uma quantidade ultrajante de
margem negativa e acho que era
menos dois a dois pixels quando se trata de versões móveis.
Então, versões responsivas, você pode
ter que reduzir esse tamanho ou Mabou,
ou talvez até mesmo em determinadas situações aumentar o tamanho.
Ajuste a imaginas ou padrões será necessário.
Além disso, há momentos em que você só precisa ocultar
tipos de elementos de configuração
quando visualizados em um dispositivo móvel, pois ele
pode ficar ótimo na área de trabalho.
Um exemplo seria que um editor de vídeo
ficará ótimo na área de trabalho.
Mas em um dispositivo móvel,
pode não ser necessariamente tão bom.
A mesma coisa se aplica às animações também.
E as medidas ficarão bem em uma área de trabalho,
nas passarelas em uma área de trabalho,
mas o celular pode ter
problemas para exibir essa animação.
Então, o ponto principal desse design massivo é o sacrifício.
Você faz alterações, você remove determinados recursos para que
quando visualizado em um dispositivo móvel, seja a grade Uber.
Então é isso para
a introdução rápida de indução ao design responsivo.
Vamos agora começar com isso.