Série Como personalizar um blog? Aula 2: tamanho, fontes e resolução de tela

em 4 de fevereiro de 2016


Na primeira aula da Série Como personalizar um blog? a gente ficou conhecendo um pouco a estrutura do template do blog.
Relembre:
Série Como personalizar um blog? A estrutura do template

Hoje, na segunda aula, vamos aprender um pouco sobre a aparência do blog, como ele é visto pelos leitores.
Vamos falar sobre fontes e largura. E aprender como é simples alterar isso!


Blog de teste- crie um agora!


Antes de começarmos você precisa ter um blog de testes pois vamos mexer com ele.
Para criar um é bem simples: vá ao seu painel Blogger e clique no botão Novo blog, que aparece à esquerda.
Crie o blog, escolha qualquer modelo pois vamos mudar depois, ao começar a personalizar!
A seguir  faça um post de teste qualquer, com imagem e texto, que servirão ao nosso teste e volte aqui para continuarmos.

Criou o blog de testes?
Então vamos falar da aula de hoje!


A largura, a resolução e o tamanho


É muito comum, dentro do meu trabalho com blogs, eu receber os seguintes pedidos:
"Pode ser mais largo?"
"Pode ser com fonte maior?"
"Pode colocar um fundo mais vibrante?"

Quando isso acontece eu sempre explico ao meu cliente o que vou explicar pra você.
Vamos falar, primeiro, da largura que o blog deve, e da largura que o blog pode ter.
Sim, são coisas diferentes!

Antes de mais nada precisamos ter em mente o seguinte: cada leitor de seu blog navega usando uma resolução de tela, que pode ser bem diferente da sua, aliás.
Vou dar o exemplo do meu blog, e da minha própria resolução de tela.

Eu uso, atualmente, um monitor de 26 polegadas e resolução de tela 1152 por 864. Meu blog mede 1120px de largura total.
Isso significa que eu vejo meu blog centralizado em minha tela, com uma pequena margem nas laterais.
Um visitante que use a resolução 1366 por 768, por exemplo (que é a resolução de mais de 70% dos meus leitores), verá meu blog centralizado na tela, mas com sobras maiores nas laterais.
Se, contudo, meu visitante usar uma resolução mais baixa, 1024 por 768, ele não verá o blog centralizado, precisará mover a barrinha horizontal para ver o conteúdo completo da sidebar.
Claro que isso se aplica à quem navega pelo computador já que em celulares o tamanho do meu blog é ajustado de acordo com a tela de cada aparelho.


Agora me responda 2 perguntas:

  1. Como você vê meu blog? Tem pouca sobra, muita sobra ou nenhuma sobra nas laterais?
  2. Qual a sua resolução de tela?

Assim como acontece com meu blog, acontece com o seu. Cada leitor vê o blog de uma forma, dependendo principalmente da resolução de tela que ele use!
Então, se sua resolução de tela for alta, você verá mais espaço lateral "sobrando". As fontes parecerão menores, as imagens idem.
Se sua resolução for mais baixa, verá tudo maior, fontes e imagens inclusive.
E assim é com cada visitante de seu blog: cada um vê de uma forma, devido às variações de resolução de tela, tamanho do monitor, grau de luminosidade da tela, etc...


Várias resoluções, uma solução


Então, como resolver isso?
Não tem solução pois até templates responsivos são vistos de forma diferente dependendo da resolução do visitante!
Mas tem dica de como tornar o template agradável para qualquer visitante, seja qual for a resolução de tela que ele use.
A dica é: não ultrapassar 1130px de largura total.
Assim o visitante que usar qualquer resolução acima de 1024px verá o blog inteiro, sem prejuízo.
Na verdade o ideal mesmo seria nada acima de 1000px mas como a resolução 1024x768 é a menos usada a gente sobe um pouco o parâmetro para não ficar desconfortável para a maioria.

Faça o teste: vá ao painel de seu blog de testes e clique na aba modelo.
a seguir clique em Personalizar.
Vai abrir a página que precisamos.
Clique em Ajustar larguras e faça o teste.
Quando estiver como deseja clique em Aplicar ao blog.
Viu? Nos templates do Blogger (Designer de modelo) é aí que alteramos as larguras do blog!



1. 2, 3... testando


Agora que já expliquei um pouco sobre resolução de tela convido você para testar seu blog em todas as resoluções de tela mais comuns.
Aqui: http://www.infobyip.com/testwebsiteresolution.php
Insira o endereço completo de seu blog real e escolha a resolução para testar.
Você verá, na prática, a diferença e poderá compreender como seus leitores veem seu blog.
Lembre: cada resolução, um modo de ver!



O tamanho das fontes


Olhe seu blog de testes.
A fonte do texto é legível?
Para que a leitura não fique desconfortável o visitante precisa conseguir ler seu texto sem esforço, concorda?
Na web um bom tamanho é até 16px, menor que isso pode ficar ruim, e muito maior pode ficar feio.
Para definir o tamanho da fonte de seu texto faça assim: clique na aba Modelo, e a seguir clique em Personalizar.
Vai abrir o painel de seu blog (de testes, espero!).
Na lateral esquerda aparece a opção Texto da página.
É aí que você escolhe a família da fonte, o tamanho dela e sua cor.
Faça experiências, você verá como muda tudo!


Antes de escolher qual fonte manter, 2 dicas:

1- Para texto as melhores fontes  são fontes básicas, simples.
Exemplo: arial, verdana (sem serifa) e georgia, times new roman (com serifa).
Eu, pessoalmente, prefiro as sem serifa.

"Serifa é aquele pequeno traço que pode ser identificado nas extremidades de alguns tipos de fonte. Serifas são bonitas no papel pois são impressas com alta resolução. Na tela do computador, que não possui uma resolução muito alta, as fontes mais quadradas e sem serifa, em geral, são mais nítidas e, por isto, mais adequadas."  
http://www.nce.ufrj.br/ginape/cursohtml/conteudo/textos/fonte.htm


2- A cor do texto é importante, então evite pouco contraste.
O ideal é fundo claro e fonte escura.
Teste, coloque a fonte clarinha em fundo branco.
Impossível, né?
E se o leitor tiver algum problema de visão, como eu, por exemplo?
danou-se, né?

Escolha sua fonte, defina a cor e depois de pronto, clique em Aplicar ao blog.


Para finalizar, duas dicas que ninguém te contou antes:
1- Quando postamos algo em nosso blog é ideal que o post seja feito no editor do próprio Blogger (tem opções, falaremos disso futuramente) mas evite com todas as suas forças escrever no Word e transportar para o blog.
Quando fazemos isso o Word transfere para o blog uma inacreditável quantidade de código inútil.

Sem contar que polui o código do texto, destrói a formatação e prejudica a indexação pois os robots do Google não indexam os códigos, e eles, acredite, são enormes.
Então, fique esperto: escreva direto no editor de postagens, jamais copie do Word para o blog.

2- Quando estiver escrevendo seus posts não altere cor e tipo de fonte no editor do blog.
Se desejar alterar faça o procedimento que fizemos acima com o blog de testes: Modelo/Personalizar/Texto da página.
Sempre!

Essa recomendação é importante porque a alteração feita manualmente no editor de postagens prevalece sobre a formatação feita no painel administrativo do blog.
Ou seja: se em cada post você colocar uma cor e um tipo de fonte (não, não faça isso, pelamor!) essa alteração vai prevalecer, e você não conseguirá aplicar ao seu blog a fonte que desejar pelo Designer de modelo.
E isso pode ser péssimo, deixar seu blog parecido com uma alegoria de carnaval, cada texto com uma cor e uma fonte...


Para não perder nenhum post da série você pode:

→ Seguir o blog via gadget Seguidores: basta clicar em Participar deste site ali na lateral do blog e concluir o processo;

→ Pode curtir nossa fanpage: todos os posts têm seu link enviados pra lá no momento em que são postados. Basta clicar em Curtir!




→ Cadastre seu email e receba a atualização direto nele, assim que for postada.
Digite seu endereço de email:



Veja todos os posts desta série:

  1. Série como personalizar um blog- apresentação do projeto
  2. Aula 1: a estrutura do template
  3. Aula 2: tamanho, fontes e resolução de tela

Alguém que escreve. Especialista em si mesma. Leitora que lê muito menos do que gostaria. Blogueira por paixão e profissão. Propriedade da Princesa e da Menininha, e de um cachorrinho muito levado chamado Bloguinho. Tentando viver. Sempre.

13 comentários , comente também!

  1. Oi Elaine eu amei as dicas, amo suas dicas você é muito objetiva nas palavras dessa forma eu consigo entender tudo. Seu blog é excelente! Bjo

    www.garotaradiante26.com

    ResponderExcluir
  2. Oi Elaine tudo bom? Queria saber como você envia o template do blog que uma pessoa quer pra ela você pede email e senha do blog ou não.

    ResponderExcluir
    Respostas
    1. Gustavo, o arquivo .xml é enviado ao email da pessoa, ela mesma instala e configura, no caso dos templates free.
      No caso dos templates pagos eu instalo.
      Att.

      Excluir
  3. Elaine,como sempre você divide tutoriais maravilhosos.
    Parabéns,sucesso para você!

    ResponderExcluir
  4. Elaine esqueci de perguntar no painel de leitura do meu blog aparece assim o seu site:
    postado por noreply@blogger.com (Elaine Gaspareto)em* Elaine Gaspareto , pesquisei sobre mas não sei o que é noreply@blogger???

    ResponderExcluir
  5. Olá Elaine gostei muito das dicas e estou tentando aplicar algumas no meu blog,e acho que quando praticamos vamos evoluindo.Tenho um blog sobre bijuterias que eu mesma produzo e ainda falo um pouco sobre decoração,cultura e estilo de vida,se puder me faça uma visita.Beijinhos :)

    ResponderExcluir
  6. OI, Elaine.
    Esta dica de só usar o editor do próprio Blogger é importantíssima e realmente ninguém conta. Criei meu blog no extinto Windows Live e transferi todas as postagens para o Blogger em 2010. Não sabia nada sobre html e pesquisei muito, mas sem saber o que procurar.
    Por causa dos códigos importados do Windows, minhas postagens estavam extremamente pesadas e não consegui habilitar o serviço de newsletter de imediato. Eu só recebia a mensagem de "postagens pesadas", mas nenhuma indicação sobre como encontrar a fonte do problema e a solução correspondente.
    Enfim, quando aprendi a personalizar meu blog descobri os inúmeros códigos dispensáveis e até duplicados que causaram a rejeição pelo feedburner.
    Tive que "reescrever" cada postagem individualmente. Na verdade, abri o html de cada postagem e apaguei cada linha do código do WL. Valeu a pena.
    Desde o começo, em 2010, venho buscar soluções aqui.
    Muito obrigada por suas orientações.
    Gisele.

    ResponderExcluir
  7. Olá Elaine, primeiramente adoro seu blog rs, meu blog é mais arrumadinho por conta de suas dicas, acredite li todas :D Tenho uma dúvida, acabei de aprender que não posso passar uma postagem do word pro blog rs (por sinal, obrigada pela dica) mas e o bloco de notas? Tem algum problema também? Desde já grata!

    ResponderExcluir
    Respostas
    1. Silvana, o bloco de notas limpa toda formatação, então pode usar pois ele não gera códigos.
      Mas lembre de formatar o post porque parágrafos somem, etc...
      beijossss

      Excluir

Olá! Muito obrigada por ler meu blog e obrigada também por se dispor a comentar meus posts. Seja muito bem-vindo(a)!

Importante!
Devido à falta de tempo hábil eu não me comprometo a responder perguntas referentes aos tutoriais postados neste blog.
Pedidos de ajuda individual serão respondidos conforme o meu tempo e disponibilidade permitirem.
Por favor, entenda: comentários sem relação alguma com o post não serão liberados e nem respondidos.

Para saber mais sobre a melhor forma de utilizar este blog leia Termos de uso do blog.



Muito obrigada, fique à vontade para interagir.
Mas lembre-se:
Gentileza, educação e boas maneiras servem também para a vida nos blogs…