Blog
Dicas de front-end para o iOS
Desenvolvendo essa nova cara do blog, aprendi alguns detalhes de CSS que podem ajudar quem trabalha com web. Não chega a ser um bug, nem atrapalha na maior parte dos casos, mas no Safari do iOS (o sistema operacional de iPhones, iPods touch e iPads), textos e formulários podem aparecer de forma diferente.
Tamanho da fonte
O webkit ajusta o tamanho da fonte para facilitar a leitura de textos, mas em alguns casos pode ficar esquisito ou quebrar o seu layout.
A solução é acrescentar essas linhas no body {}, p {}, ou numa div específica da página. Por exemplo:
-webkit-text-size-adjust: none;
}
Formulários
Os campos de formulários também ganham uma cara nova na versão mobile do Safari. Pelo exemplo da imagem abaixo — os comentários deste blog que vos bloga — a alteração pode não fazer diferença; Mas, no caso de formulários mais customizados, pode tirar a graça do design.
Para retirar essa borda e efeito padrão, fica o exemplo:
-webkit-appearance:none;
-webkit-border-radius:0px;
}
Margem de leitura
Pra terminar, um detalhe relacionado à experiência do usuário. Alguns sites esquecem de deixar uma margem lateral no conteúdo, e para quem visualiza uma página, principalmente no caso de leituras, fica bem ruim quando o texto fica colado nos limites da tela.
Só colocar uma margin ou padding (dependendo do caso) de pelo menos 10 pixels em cada lado e problema resolvido! [Atualização: o pessoal do iG leu o post e colocou a margem de leitura na área de Economia :-)]
• • •
Dicas simples, mas pela repercussão que os tweets sobre o assunto causaram, achei que seria interessante pra compartilhar aqui.
Excelentes dicas Lari, e btw, amei como o blog ficou!
Usar um CSS Reset não resolve?
[]‘s!
Pelo que testei aqui, nesse caso não resolve…
Oi Larissa, tudo bem? Ótimas dicas, parabéns. Já atualizamos a margem de leitura dos novos sites do iG seguindo sua sugestão. O Economia, utilizado na imagem de exemplo, já está diferente. ;-)
Bjs!
Fica a dica de duplicar os códigos só que sem o “-webkit” para outros browsers atualizados.
Aliás, no Chrome (que também usa webkit) este comando não é necessário. Alguém já testou se funciona sem ele no Safari?
Excelentes dicas. Adorei teu blog e a abordagem dos temas, parabéns.
Legal, Larissa. Dicas simples, mas que que geram bons resultados. Uma dúvida: Olhando o mercado mobile de hoje e pensando no futuro, é viável uma startup com foco em otimização de sites para mobile? Vi um vídeo que foi exibido no Google I/O 2011 falando que quase 80% do e-commerce não tem versão mobile. Imagina o e-commerce brasileiro? Estou com essa ideia? O que acha?