todos nós ouvimos muito essa palavra” responsivo ” no domínio do web design hoje em dia. As pessoas recomendam e vão ga-ga sobre a importância de usar o design responsivo. Mas novatos nas áreas de blogs Profissionais e webmastering muitas vezes levam um pouco de tempo para se apossar de todo esse burburinho sobre o que é um site responsivo e como desenvolver um.
as pessoas costumam criar seus temas de sites com base em um arquivo de imagem (por exemplo, PSD). Embora todos os designs de sites comecem como uma imagem, deve-se ter muito cuidado para que seu design esteja em conformidade com os princípios de capacidade de resposta e seja compatível com dispositivos móveis. Vamos dar um mergulho no assunto e descobrir tudo sobre esse assunto.
bem, a capacidade de resposta de um site refere-se à sua capacidade de ajustar a exibição de acordo com o dispositivo em que está sendo visto. Longe vão os dias em que a maioria das pessoas costumava usar PCs desktop –agora existem todos os tipos de dispositivos por aí. Desktop, laptops, netbooks, tablets, mini tablets, Leitores de E-book, smartphones e telefones não tão inteligentes! Ufa! Muitos para não se preocupar!
todos esses dispositivos têm seus próprios tamanhos e resoluções de tela específicos. Um site “rígido” não será capaz de se adaptar (ou, digamos, responder) aos diferentes tamanhos de tela. A aparência da barra de rolagem horizontal no navegador é um dos sinais mais visíveis de que o site não responde.
em contraste, o site com um tema responsivo será capaz de se adaptar e garantirá que o conteúdo seja facilmente legível de qualquer tamanho de tela.
realmente não. Um tema responsivo ajustará a exibição com o objetivo principal de que o conteúdo do Site possa ser usado pelo visitante. Para atingir esse objetivo, o site pode ocultar alguns de seus componentes acessórios (como barra lateral) e alterar o tamanho de outros componentes (por exemplo, imagens, fontes etc.)
é muito fácil saber o quão responsivo é o tema do seu site. Basta abri-lo em diferentes tamanhos de monitores de computador e telas de telefones celulares. Se você vir seu site bem e todo o conteúdo for legível, seu site será responsivo. Se você não tem diferentes tipos de dispositivos para testar seu site, você também pode usar o teste on-line para capacidade de resposta.
a resposta geral é que sim é muito importante. Mas antes de tomar uma decisão de fazer uma reforma do seu site para transformá –lo em um responsivo-você deve olhar para os seus dados de tráfego web. A partir desses dados, tente descobrir quanto tráfego seu site está recebendo de dispositivos móveis. Normalmente, os sites são projetados para serem usados em desktop / laptop –mas se você está recebendo tráfego significativo de dispositivos como tablets / telefones celulares –você deve ver como seu site está olhando em tais dispositivos.Atualmente, os sites asiáticos estão recebendo uma média de 27% de seu tráfego de dispositivos móveis. Essa porcentagem seria muito maior para sites em áreas como Europa e Américas porque os dispositivos móveis são relativamente muito mais populares.
você ficará surpreso que a capacidade de resposta pode ser facilmente alcançada usando apenas CSS. Os padrões CSS atuais permitem estilizar seu site para diferentes tipos de tela. Isso significa que você pode ter regras CSS separadas para diferentes tamanhos de tela. Por exemplo:
@media screen e (largura máxima: 320px) {
.primário-barra lateral {display: none } //ocultar barra lateral quando o tamanho da tela é de 320px ou menos
}
@media screen and (min-width:largura de 1024px) {
body { font-size: 12px } //define o tamanho da fonte para tamanhos de tela maior do que 1024px
}
Tais personalizado regras CSS irá controlar a aparência do seu site, dependendo do espaço disponível no ecrã.
se você decidir ir para o design responsivo para o seu site ou blog, você pode esperar ter as seguintes vantagens:
- o tráfego aumentará em seu site porque os usuários de dispositivos móveis poderão usá-lo e podem decidir retornar para novas informações. Se os usuários móveis não puderem usar o conteúdo de um site-eles não voltarão!
- se você usar anúncios em seu site para ganhar dinheiro online – sua receita pode aumentar porque um site responsivo também poderá exibir anúncios em dispositivos móveis.
- você não precisará desenvolver diferentes versões do seu site ou blog para diferentes plataformas. Isso economizará tempo na manutenção também porque mais versões exigem mais tempo de manutenção.
- se você desenvolver mais de uma versão para diferentes tipos de dispositivos, enfrentará o perigo de indexar URLs duplicados do Google. URLs diferentes que apontam para o mesmo conteúdo são chamados de URLs duplicados. O Google coloca uma grande penalidade em URLs duplicados, acreditando que o conteúdo também é duplicado. O design responsivo do site protege você de tal penalidade.
- você não precisaria se preocupar com a detecção correta do agente porque o mesmo site funcionará para todos os agentes do navegador.
- o compartilhamento de URL em sites de mídia social se tornará mais fácil porque cada página do seu site terá apenas um URL associado a ele.
não há desvantagens significativas do design responsivo, exceto que as regras CSS extras podem aumentar o tamanho do arquivo CSS e, como resultado, o tempo de download aumentará. Mas com a Internet mais rápida se tornando Disponível em todo o mundo –Eu não acho que isso representa qualquer problema real.
no design responsivo, imagens diferentes não são usadas para diferentes tamanhos de tela. Em vez disso, a mesma imagem é redimensionada por meio de CSS para caber na tela do dispositivo. Assim, os dispositivos móveis também terão que baixar as mesmas imagens de alta resolução que são veiculadas nas conexões de desktop.
agora, sabemos que o design responsivo pode colocar um pouco de carga extra na conexão de internet móvel, é importante que você seja capaz de testar a rapidez com que seu design atual (responsivo ou não responsivo) está funcionando. A melhor ferramenta online para testar isso é PageSpeed do Google. Esta ferramenta pode marcar seu site em dispositivos desktop e móveis.
a maioria dos sites do Google agora responde. Por exemplo, o site do Chromebook usa design responsivo. Mas o Google é uma empresa pioneira de qualquer coisa relacionada à Internet. À medida que mais e mais empresas estão reconhecendo a importância do design responsivo, os sites estão mudando para esse novo paradigma. Veja os sites da rede de restaurantes Wendy’s, da Empresa de marketing de entrada HubSpot e do jornal Boston Globe para obter alguma inspiração.
Sim, existem muitos sites importantes que ainda não adotaram o design responsivo. Os exemplos incluem CNN e BBC. Estes são sites enormes e um redesenho completo para incorporar a capacidade de resposta pode exigir um investimento significativo. Essa pode ser a razão pela qual essas casas de mídia ainda não responderam.
Não, Não é muito caro. Se você possui um site / blog baseado no WordPress, há muitos temas responsivos disponíveis. O tema padrão do WordPress (ou seja, TwentyThirteen) também foi projetado para ser responsivo. A maioria dos temas gratuitos oferecidos pelo WordPress e Blogger são responsivos. Mas se você estiver usando um tema de terceiros-você precisa verificar sua capacidade de resposta.