Seguindo o meu post anterior sobre o novo site, agora gostaria de me aprofundar um pouco nos assuntos adaptabilidade e técnicas de construção.

Como disse anteriormente, a parte responsive do site não está 100% ainda, mas estou bem satisfeito com o seu comportamento até agora entre as diferentes telas e dispositivos.

Construí o CSS deste site desde o início. Usei alguns conceitos do HTML5 Boilerplate, que é uma referência muito boa, mas sempre recomendo a análise e a utilização apenas dos recursos necessários.

Ferramentas básicas

Começando com o começo, alguns estilos reset chave (alguns de minha autoria e outros do boilerplate):

/* sempre colocar uma barra de rolagem vertical em não-IE */
html { overflow-y: scroll; }
/* reset de margens */
* { margin: 0; padding: 0; }
/* nenhum estilo de lista */
ul { list-style-type: none; }
/* nenhuma borda em imagens e fieldsets */
a img, fieldset { border: 0;}
/* títulos sem negrito */
h1, h2, h3, h4, h5, h6 { font-weight: normal; }
/* imagens se adaptam a containers */
img { max-width: 100%; }
/* propriedade display para elementos HTML5 em navegadores antigos */
article,aside,details,figcaption,figure,footer,header,hgroup,nav,section,summary { display: block; }
/* correções no ajuste de texto no IE 6/7 e iOS */
html { font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
/* padronização de outline */
a:focus { outline: thin dotted; }
/* melhor legibilidade no hover e active dos links */
a:active, a:hover { outline: 0; }
/* correções no estilo bold */
b, strong { font-weight: bold; }
/* padronização da tag */
small { font-size: 80%; }
/* correções nas tags sub e sup */
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }
/* melhor qualidade de imagem no IE 7, retira espaços entre imagens */
img { -ms-interpolation-mode: bicubic; vertical-align: middle; }
/* correções na tag legend */
legend { border: 0; padding: 0; white-space: normal; *margin-left: -7px; }
/* padronização das tags */
button, input, select, textarea { font-size: 100%; vertical-align: baseline; *vertical-align: middle; }
/* correção de uma inconsistência no FF */
button, input { line-height: normal; }
/* tira a barra de rolagem padrão no IE. melhor alinhamento / apenas resize na vertical */
textarea { overflow: auto; vertical-align: top; resize: vertical; }
/* retira espaços das tabelas */
table { border-collapse: collapse; border-spacing: 0; }

Fundamental para o layout com floats é uma solução de "clearfix", ou seja, como finalizar flutuação de elementos para que o layout não quebre. Para isso, usei o modelo do boilerplate mas, com a dica do Dan Cederholm em Handcrafted CSS, renomeei esta classe para "grupo", pois acho um nome um pouco mais representativo:

.grupo:before, .grupo:after {
  content: " ";
  display: table;
}

.grupo:after {
  clear: both;
}

/* pequena regra para IE 6/7 */
.grupo {
  zoom: 1;
}

A classe "grupo" denotada acima simplifica muito o layout com floats. Basta aplicá-la a um container de elementos flutuados e pronto.

Estratégia de código CSS

Partindo para o projeto de CSS em si, usei uma abordagem mobile first com pouco posicionamento de elementos, para facilitar o fluxo de informações na página em telas menores e maiores. Para telas maiores, foquei em deixar o site inteiro maior para uma experiência mais confortável de leitura, enquanto para telas menores, além da legibilidade, o foco foi leveza e rapidez de carregamento.

Quanto a técnicas, usei principalmente float, com um pouco de display: table. Evitei usar position por causa das dificuldades apresentadas na hora de adaptar o layout. O principal uso de position é para um pequeno item de navegação: um link para o topo do site que aparece após a rolagem.

Conforme citei no post anterior, eu eliminei quase que completamente a unidade px da construção deste site. Tudo gira em torno de em, rem (relativo ao tamanho de fonte raiz da página) e %. Com isso, mesmo se o site não tivesse o objetivo de ser totalmente flexível, esta preparação já abriria muitas portas para possibilidades interessantes de adaptação.

Como resultado disso, todo o site gira em torno da propriedade font-size. Em telas maiores, colocar font-size: 120% aumenta o site inteiro na tela do usuário.

Com o site planejado do zero para dispositivos móveis e com o site focado no blog e em estruturas de apenas uma coluna, foi possível usar apenas um arquivo de CSS para o site inteiro, incluindo media queries. Dependendo da quantidade de estilos específicos, há estudos que propõem separar os arquivos CSS, mesmo com o peso adicional de mais pedidos HTTP.

Desafios do site adaptável

A técnica responsive webdesign ainda está em pleno desenvolvimento, por isso muitas boas ideias estão surgindo a cada dia. Para este novo site, inicialmente, tentei utilizar para ícones de comentários, carrinho de compras etc, os ícones do site famfamfam.com, conforme já demonstrei em outro post.

Porém, nesse caso, o problema foi com as telas maiores. O ícone se desalinha do texto maior ou, se usamos background-size, o ícone aumenta além da capacidade e perde qualidade. Foi uma ótima oportunidade para testar a técnica chamada icon fonts, que irei detalhar no próximo post.

Para mais informações sobre adaptabilidade, confira o meu curso via skype de responsive webdesign.