Agora somos um blog responsivo!
Autor: Adriana Helena | Publicado: 2016-11-03T18:18:00-02:00




Agora somos um blog responsivo!

&nbsp;:)))



Oi gente, preparei uma surpresa para vocês nesta semana. Estudei a melhor forma de deixar o Vivendo a Vida bem Feliz responsivo. Sim, era necessário. Ele estava ficando pesado e reformas são necessárias. Veja a partir de &nbsp;agora como deixei o site muito mais leve e interativo para facilitar a navegação.




 

Mas afinal o que é um site responsivo?&nbsp;
Vou explicar melhor...

Site ou layout responsivo, ou também conhecido como site flexível é quando o site automaticamente se encaixa no dispositivo do usuário (computador, celular, notebook, tablet, etc).

Um&nbsp;site responsivo&nbsp;muda a sua aparência e disposição com base no tamanho da tela em que o site é exibido. Então, se o usuário tem uma tela pequena, os elementos se reorganizam para lhe mostrar as coisas principais em primeiro lugar.

Faça uma experiência para entender melhor o conceito de responsivo.Tente aumentar ou diminuir muito a janela deste blog. Reparou como o conteúdo se reorganizou de acordo com o tamanho do browser? Agora entre na página inicial&nbsp;do blog. Notou &nbsp;que mesmo com novos slides, a tela abriu normalmente sem pesar tanto? É isso! Se você acessar esse blog de um celular ou tablet vai reparar em outras adaptações. Tudo pensando em melhorar a sua experiência de navegação. Isto é design responsivo.&nbsp;


Veja como é um site responsivo exibido no formato desktop:













O mesmo site responsivo exibido no formato celular e tablet:

Imagem do Site Comersite




Precisei me adaptar aos novos tempos em razão do aumento do acesso ao blog via celular. Uma pesquisa&nbsp;comprovou que os smartphones ultrapassaram os computadores pessoais em vendas e muitos dos meus amigos e visitantes &nbsp;acessam o blog via celular. Pensando em vocês e no seu conforto que tornei o blog mais leve. &nbsp;Foram dias de estudo para a escolha de um template que melhor se adaptasse às condições anteriores do site. Olha, e foi um estudo complicado para quem não entende muito de HTML como eu...rsrs &nbsp;Mas enfim, &nbsp;creio que consegui! 




Como testar um site responsivo

Existem dezenas de sites que simulam várias resoluções de telas para você testar o seu site como por exemplo o&nbsp;Responsive Design Checker. Testei o meu depois de pronto &nbsp;e digo que fiquei muito satisfeita com os resultados, &nbsp;pois agora o blog insere-se em todos os dispositivos de maneira regular. Veja só:

 






O Google também possui um site para você fazer um teste de compatibilidade com dispositivos móveis. Para acessá-lo&nbsp;clique aqui. Veja o resultado do&nbsp;Vivendo a Vida bem Feliz, o que me deixou muito feliz mesmo:














Entendeu agora porque &nbsp;precisei &nbsp;atualizar meu blog para responsivo?

Tempos atrás o Google lançou uma campanha chamada&nbsp;#MobileMadness&nbsp;onde a partir de 21 de abril a compatibilidade de um site com dispositivos móveis se tornou um fator de classificação nos resultados de buscas do Google. Hoje é fundamental que o seu site seja responsivo pela experiência de navegação que deve passar para o usuário e também para ficar adequado aos buscadores e aumentar a relevância.



Como o blog está agora?

Também aproveitei para reorganizar o blog aumentando o leque de compartilhamento nas redes sociais e &nbsp;inserindo o botão pin (pinterest) em todas as imagens. Muitos amigos vem do Pinterest para ler os artigos e gostam de compartilhar as imagens. É uma ótima plataforma e por isso facilitei o acesso e a interatividade.Se quiser pinar uma imagem é só passar o cursor em cima da foto que automaticamente o botão aparece. É só clicar em cima dele e pronto! Compartilhou!!

 Botão de pinar bem visível na imagem:

 








Novos slides de acordo com o tema escolhido:




Também inseri slides móveis de acordo com o tema semanal. Note que agora &nbsp;eles estão mais leves e com descrição para facilitar a procura do tema preferido dos leitores. Mas só se encontram na página inicial (HOME). Nas páginas internas, de marcadores e arquivos os slides não aparecem para não pesar! :)))








 

Páginas numeradas:




Também, na página inicial, você tem acesso direto a todos os artigos apenas clicando nas páginas numeradas próxima ao rodapé do blog. Agora você pode ler o que quiser facilmente. &nbsp;E todos os artigos estão com marcadores bem visíveis para facilitar a busca. É só ir clicando até encontrar o seu artigo favorito:







Imagens otimizadas:


Ah, e para aumentar ainda mais a leveza da abertura das páginas, terei que evitar o excesso de gifs e imagens. Esse é um processo que ainda farei devagar em todo o blog: otimizar as imagens pois algumas são bastante antigas e bem pesadas. Mas farei aos poucos, afinal são mais de 5 anos de blog e 317 artigos. E o número de visitantes &nbsp;está aumentando. Por isso que mudanças são necessárias.&nbsp;Este post já está otimizado para inaugurar os novos tempos.... rsrs :)))&nbsp;






Comentários do Blogguer e Facebook na mesma página

 

Amigos, aproveitem para deixar o seu comentário abaixo, pois preciso testar o novo sistema de comentários do blogguer e do Facebook juntos na mesma aba... rsrs É só escolher onde quiser comentar. &nbsp;O &nbsp;formulário do face aparece primeiro e em seguida vem o do blogguer. Até do celular será possível comentar agora gente!! &nbsp;:)))








Posts mais enxutos:




Evitarei ao máximo em escrever textos muito longos. Confesso que sou bastante prolixa em razão da minha profissão, por isso vou evitar de escrever verdadeiros testamentos....kkkkkkkk &nbsp;Os novos tempos pedem objetividade e rapidez. Ninguém tem paciência para ler artigos muito completos e com muitas &nbsp;informações. O poder de síntese tornou-se relevante.&nbsp;Por isso minha gente, preparem-se, &nbsp;novos tempos chegaram!!! Uhulllllllll &nbsp;O vídeo abaixo inseri para testar o tamanho que fica nos dispositivos móveis. É do meu canal no You tube. Se gostar, deixa um comentário aí tá? Beijos e até a próxima!!!!






Inspiração:&nbsp;comersite.com.br

Imagens do meu arquivo pessoal