· · 1

Bastidores do Novo Site: Parte 2

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 semântico:

.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 (em relativo ao padrão da página) e %. Com isso, mesmo se o site não tivesse o objetivo de ser totalmente flexível, esta preparação já abre muitas portas para possibilidades interessantes de adaptação.

No meu planejamento de responsive webdesign, a unidade em foi fundamental. 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. Esta abordagem pode apresentar alguns comportamentos indesejáveis com o zoom do navegador, mas a ideia é o usuário não precisar usar este recurso mesmo.

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 HTTP requests.

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 e etc, os ícones do site famfamfam.com, conforme já demonstrei em outro post.

Porém, neste caso, o problema foi com as telas maiores. O ícone desalinha com o texto maior ou, se usamos background-size, aumenta mas 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.


Um Comentário

  1. Gravatar
    marcos nunes

    "Olá Guilherme Muller, (...) parabéns pelo belíssimo trabalho, creio que tem acrescentado grandemente na vida pessoal e profissional dos que acessam o site. Já estou recomendando seu site para meus amigos e conhecidos, farei o que puder para que ele seja conhecido por um número cada vez maior de pessoas, não consigo parar de ler, é impressionante, me pergunto qual é a fórmula para isso acontecer é simplesmente incrível. Parabéééns!!!!"

Comente