Um guia simples para design responsivo.
30 |
Feito por Adam Kaplan. Versão brasileira por webfatorial.
33 | 
39 | Queremos que nossos sites sejam usáveis em todos os dispositivos, respondendo ao comportamento e tamanho e orientação de tela do visitante.
41 |Desde 2013 existem milhares de diferentes dispositivos e tamanhos de tela que acessam a internet, tornando impossível projetar layouts para todos. Ao invés disso, precisamos adotar uma abordagem mais fluida ao design.
52 |O termo "mobile first" (móvel primeiro) tem aparecido bastante ultimamente. O que isso realmente significa é começar com os estilos para mobile e ir avançando em estilos otimizados para telas maiores apenas quando necessário. Em outras palavras, seus estilos para dispositivos móveis se tornam o padrão e você não os precisa mais sobrescrever depois. é muito mais simples!
59 |61 |64 |Assumindo um layout flexível, mas simples, por padrão, você pode melhor se resguardar contra navegadores — com viewports pequenas e grandes — que não são totalmente capazes em relação a layout responsivo. Então, quando falamos sobre layout, "mobile first" realmente significa "progressive enhancement" (melhoramento progressivo).
62 | —Ethan Marcotte 63 |
70 | Introduza regras específicas ao layout somente quando precisar delas. Use min-width para lidar com complexidade à medida em que a viewport se torna maior. É mais fácil ter todas as media queries próximas ao invés de no final da folha de estilos ou em documento separado.
Navegadores irão renderizar seu CSS de maneira diferente. Para evitar isso, é uma boa ideia usar uma alternativa moderna ao reset, como Normalize.css, que irá renderizar seus elementos mais consistentemente entre os navegadores (cross-browser). Lembre-se de incluí-lo antes de sua folha de estilos.
87 |Coloque na <head> de seu HTML. Isso habilita o uso de media queries para layouts cross-device.
105 | É importante entender o básico, tal como os elementos são gerados e se comportam no navegador, antes de se aprofundar em web design responsivo. O CSS Box Model consiste em quatro partes diferentes.
112 |
116 | O conteúdo do box, onde texto e imagem aparecem.
118 |
122 | Área ao redor do conteúdo.
124 |
128 | Borda que vai ao redor do padding.
130 |
134 | Área ao redor da borda.
136 |Coloque no início de seu arquivo CSS. O * vai afetar todos os elementos na página.
O que antes era um bug 155 | é agora uma propriedade CSS amplamente usada. Basicamente, isso significa que você pode escolher entre incluir ou não border e padding no cálculo da largura de seu conteúdo.
156 |
161 | Margem, bordas e padding são desenhados fora da especificação de largura do conteúdo.
163 |
167 | Bordas e padding são desenhados dentro da especificação da largura do conteúdo. A margem é desenhada fora.
169 |Um contêiner detém todos os elementos e controla a largura máxima da página. Usando um contêiner você faz de projetos de design responsivo mais fáceis!
179 |
188 | Com mobile first, colunas são nível de bloco (block), por padrão tomando a largura total disponível. Nenhum estilo adicional é necessário!
Em telas grandes, colunas obtêm float: left a fim de "empilhar" (stack) o conteúdo horizontalmente. Colunas agora usam padding para espaçamento, então você não precisa mais se preocupar em remover margens.
Colunas são envoltas em linhas para evitar que outros elementos fiquem "empilhados" (stacking) próximo a elas, isso também conhecido como "questões de limpeza" (clearing issues). Linhas recebem clear usando o popular clearfix, criado por Nicolas Gallagher.
Adicione a classe .flow-opposite em colunas nas quais você quer o conteúdo apareça primeiro em mobile, mas apareçam à direita em telas maiores.
Seguindo esses simples passos, você está no caminho para dominar o web design responsivo. Continue a praticar e ajude a tornar a web um lugar melhor e mais usável.
372 |