Jean Carlo Emer

Hipermídia as Avessas: Passo a passo

Espero que já tenha lido as outras postagens da série, comece pela introdução caso não o tenha, recomendo. Conheceremos a partir de agora os pontos e técnicas mais importantes para lembrar enquanto estiver desenvolvendo um projeto para diferentes suportes computacionais.

A dica mais importante é que você deve começar a desenvolver para os dispositivos que oferecem menor performance e nos quais você tem menos experiência como desenvolvedor:
 os dispositivos mobile. Nunca se esqueça de testar desde as fases iniciais e principalmente na de homologação como seu projeto se comporta em mobile.

Layout desktop

Caso seu projeto não seja responsivo, não utilize a meta viewport a menos que a página não renderize na largura correta em mobile.

<meta name="viewport" content="width=1024">

Layout responsivo

Defina a meta viewport e os breakpoints a medida que forem necessários, esqueça as receitas com resoluções padrões.

<meta name="viewport" content="width=device-width">

CSS

Escreva primeiro as folhas de estilo para que seu layout funcione bem em mobile. Suas media queries devem ser usadas para adaptar o layout para resoluções maiores, repare nos min-width abaixo:

/* Styles to mobile */

/* a bit wider */
@media screen and (min-width: ...em) { /* Styles */ }

/* wider */
@media screen and (min-width: ...em) { /* Styles */ }

Fontes

Utilize sempre medidas relativas. Isto possibilita que, ao alterar o tamanho da fonte no body, os tamanhos de fonte dos demais elementos sejam afetados na mesma proporção.

/* Styles to mobile */

.body { font-size: 23px; }

p { font-size: 0.8em; }

/* wider */
@media screen and (min-width: ...em) {
   .body { font-size: 16px; }
}

Imagens

Tente achar um tamanho que fique com nitidez razoável na maior parte dos dispositivos ou aplique uma das soluções possíveis até que exista uma melhor.

Por fim

Obrigado ao Marcelo por ter ajudado e apresentado comigo. Muitas das ideias desta série partiram da experiência e conhecimento dele. Outro salve à Morvana e Cynthia por terem organizado o primeiro evento de mobile do sul do país, o nível estava altíssimo.

A você, respeite e fique antenado a era mobile, ela está por aqui para ficar e a tendência é que teremos mais e mais dispositivos conectados. É nossa responsabilidade como desenvolvedores fazer uma web melhor e adequada a todos estes dispositivos.