A responsividade \u00e9 uma caracter\u00edstica dos sites que se adaptam aos diferentes tamanhos de tela<\/strong> dos mais diversos dispositivos que existem. Para isso, eles precisam ser desenvolvidos com determinadas t\u00e9cnicas, que visam n\u00e3o apenas adaptar as p\u00e1ginas \u00e0 tela, mas principalmente oferecer a melhor experi\u00eancia ao usu\u00e1rio<\/a> em diferentes contextos.<\/p>\n Neste artigo, voc\u00ea vai entender melhor o que \u00e9 um site responsivo, qual a sua import\u00e2ncia, como funciona e como criar um para o seu neg\u00f3cio. Siga com a gente para saber tudo!<\/p>\n[post-table-index]\n Site responsivo \u00e9 um tipo de site que se adapta a diferentes tamanhos de tela<\/strong> para proporcionar a melhor experi\u00eancia ao usu\u00e1rio em qualquer dispositivo.<\/p>\n Trata-se de um \u00fanico site, com mesmo dom\u00ednio, URLs, conte\u00fados e imagens, cujo design se altera conforme as configura\u00e7\u00f5es de tela do dispositivo. Dessa forma, ele se torna compat\u00edvel com dispositivos m\u00f3veis<\/strong> (mobile-friendly<\/a>), que \u00e9 uma das caracter\u00edsticas essenciais para o desempenho de um site atualmente.<\/p>\n No exemplo abaixo, voc\u00ea pode ver como \u00e9 um site responsivo na pr\u00e1tica: o layout se modifica \u00e0 medida que o tamanho da tela se altera. Para isso, \u00e9 preciso aplicar layouts fluidos, imagens flex\u00edveis e configura\u00e7\u00f5es de folhas de estilo (CSS), que entram no campo do desenvolvimento web<\/a>.<\/p>\n Por\u00e9m, um site responsivo n\u00e3o se faz apenas com a t\u00e9cnica dos desenvolvedores. Designers tamb\u00e9m trabalham para planejar a melhor interface com o usu\u00e1rio<\/a> em diferentes dispositivos, considerando a relev\u00e2ncia de conte\u00fados e funcionalidades para cada contexto de uso.<\/p>\n A ideia de sites responsivos foi criada por Ethan Marcotte. Em um artigo para o blog A List Apart<\/a>, em 2010, o designer provocou designers e desenvolvedores a praticarem o web design responsivo<\/a>. Veja o que ele escreveu:<\/p>\n Em vez de adaptar designs desconectados a cada um de um n\u00famero cada vez maior de dispositivos da web, podemos trat\u00e1-los como facetas da mesma experi\u00eancia. Podemos projetar para uma experi\u00eancia de visualiza\u00e7\u00e3o ideal, mas incorporar tecnologias baseadas em padr\u00f5es em nossos projetos para torn\u00e1-los n\u00e3o apenas mais flex\u00edveis, mas mais adapt\u00e1veis \u200b\u200b\u00e0 m\u00eddia que os processa. Resumindo, <\/em>precisamos praticar o design responsivo da web<\/em><\/strong>.<\/em><\/p>\n Ethan percebeu que os profissionais estavam desenvolvendo diferentes solu\u00e7\u00f5es para cada dispositivo que surgia, o que j\u00e1 estava se tornando invi\u00e1vel.<\/p>\n Nos \u00faltimos anos, o surgimento de novos dispositivos conectados se acelerou ainda mais. Se antes t\u00ednhamos apenas o computador de mesa, agora temos notebooks, tablets, celulares, smart TVs e uma s\u00e9rie de aparelhos que ainda podem surgir no \u00e2mbito da Internet das Coisas<\/a>.<\/p>\n Por isso, sites responsivos se tornaram uma solu\u00e7\u00e3o relevante para criar sites adequados \u00e0 era digital<\/strong>. Designers e desenvolvedores que trabalham com essa t\u00e9cnica preparam os sites n\u00e3o apenas para os dispositivos atuais, mas tamb\u00e9m para os do futuro.<\/p>\n Para ter um site mobile-friendly, o design responsivo \u00e9 uma das formas mais indicadas. Mas n\u00e3o \u00e9 a \u00fanica. Voc\u00ea tamb\u00e9m pode adotar outras solu\u00e7\u00f5es, cada uma com seus pr\u00f3s e contras, assim como os sites responsivos. Conhe\u00e7a outras possibilidades:<\/p>\n Sites responsivos surgiram no contexto da explos\u00e3o de smartphones e tablets no mercado. Cada dispositivo trazia uma configura\u00e7\u00e3o diferente, que exigia dos designers e desenvolvedores uma nova solu\u00e7\u00e3o a cada novo lan\u00e7amento.<\/p>\n Como vimos, o design responsivo veio para solucionar isso, de maneira que voc\u00ea n\u00e3o precisa desenvolver um novo site para cada novo aparelho que surge<\/strong>.<\/p>\n Com a evolu\u00e7\u00e3o dos smartphones, as pessoas passaram a usar o celular para as mais diversas atividades do dia a dia, como consultar o Google, acessar as redes sociais, ler emails e, \u00e9 claro, visitar sites, blogs e lojas virtuais. O computador, que at\u00e9 ent\u00e3o era hegem\u00f4nico no acesso \u00e0 internet, ficou para tr\u00e1s.<\/p>\n O Think With Google<\/a> mostra, nos dados abaixo, como o celular se tornou o principal dispositivo para acessar a internet, embora o desktop n\u00e3o tenha sido esquecido.<\/p>\n Por\u00e9m, muitas empresas demoraram para entender essa mudan\u00e7a de comportamento do consumidor. Muitos usu\u00e1rios se deparavam \u2014 e ainda se deparam \u2014 com sites que n\u00e3o funcionam no celular, demoram a carregar, n\u00e3o t\u00eam conte\u00fados leg\u00edveis e outros v\u00e1rios erros. Diante de todos esses obst\u00e1culos, s\u00f3 resta desistir da visita ao site…<\/p>\n Por isso, ter um site responsivo \u00e9 importante para atender a esses usu\u00e1rios que se conectam ora no mobile, ora no desktop<\/strong> \u2014 e, futuramente, nos mais diversos dispositivos conectados. Assim, voc\u00ea n\u00e3o perde nenhum visitante e nenhuma oportunidade de neg\u00f3cio. Afinal, segundo uma pesquisa<\/a>:<\/p>\n O uso do design responsivo no site da sua empresa traz diversas vantagens. Como voc\u00ea j\u00e1 viu, a responsividade \u00e9 uma forma de adaptar o seu neg\u00f3cio \u00e0 realidade de crescimento dos acessos por celular e de lan\u00e7amento acelerado de novos dispositivos com diferentes telas.<\/p>\n Agora, voc\u00ea vai entender como essa mudan\u00e7a no seu site pode trazer benef\u00edcios reais para o seu neg\u00f3cio:<\/p>\n O foco de um site responsivo \u00e9 a experi\u00eancia do usu\u00e1rio<\/strong>. \u00c9 para oferecer uma melhor usabilidade aos usu\u00e1rios de dispositivos m\u00f3veis que esse tipo de design foi criado.<\/p>\n Por isso, o site responsivo colabora para a satisfa\u00e7\u00e3o dos clientes<\/a>, que se sentem bem recebidos nas suas p\u00e1ginas e conseguem realizar facilmente o que desejam. Dessa maneira, a marca ganha a confian\u00e7a dos usu\u00e1rios e constr\u00f3i uma imagem positiva.<\/p>\n A taxa de rejei\u00e7\u00e3o acontece quando o visitante acessa o site e fecha a p\u00e1gina sem realizar qualquer intera\u00e7\u00e3o. Em muitos casos, significa que ele n\u00e3o encontrou ou n\u00e3o conseguiu realizar o que queria.<\/p>\n Se o site n\u00e3o \u00e9 responsivo, a taxa de rejei\u00e7\u00e3o tende a ser alta, porque faz os usu\u00e1rios desistirem da visita. Ent\u00e3o, a responsividade pode melhorar essa m\u00e9trica do seu site e gerar mais intera\u00e7\u00f5es com as p\u00e1ginas<\/strong>.<\/p>\n Se o usu\u00e1rio consegue acessar o site e realizar o que deseja sem obst\u00e1culos, as convers\u00f5es do site tendem a aumentar.<\/p>\n Por outro lado, se o site n\u00e3o funcionar bem em dispositivos m\u00f3veis, voc\u00ea pode perder in\u00fameras oportunidades de neg\u00f3cio, j\u00e1 que os usu\u00e1rios logo desistem da visita quando encontram qualquer dificuldade.<\/p>\n Ter um site mobile-friendly \u00e9 um dos principais fatores de rankeamento do Google<\/a>. Afinal, o buscador sabe a import\u00e2ncia de melhorar a usabilidade em dispositivos m\u00f3veis.<\/p>\n Al\u00e9m disso, o Google identifica os sinais da experi\u00eancia do usu\u00e1rio no site \u2014 taxa de rejei\u00e7\u00e3o, tempo de perman\u00eancia na p\u00e1gina, cliques e intera\u00e7\u00f5es, entre outros indicadores. Se esses sinais s\u00e3o positivos, como deve acontecer em um site responsivo, as p\u00e1ginas tendem a melhorar o SEO<\/a> e ganhar posi\u00e7\u00f5es no Google<\/strong>.<\/p>\n Um site responsivo tem uma mesma URL, independentemente do dispositivo que o visitante usa. Isso facilita a divulga\u00e7\u00e3o do site, j\u00e1 que a marca pode informar uma \u00fanica URL<\/strong>, que se adapta ao dispositivo do usu\u00e1rio.<\/p>\n N\u00e3o \u00e9 o que acontece em sites com uma vers\u00e3o mobile, por exemplo, que t\u00eam URLs diferentes. Dessa forma, o usu\u00e1rio desktop pode clicar em um link (como m.exemplo.com), cair em uma p\u00e1gina desenvolvida para mobile e ter uma m\u00e1 experi\u00eancia. Veja, por exemplo, como fica a experi\u00eancia do mobile.facebook.com<\/a> no desktop:<\/p>\n O gerenciamento do site tamb\u00e9m fica mais f\u00e1cil. Afinal, voc\u00ea administra, edita e atualiza apenas um site<\/strong>, e as adapta\u00e7\u00f5es entre desktop e mobile s\u00e3o autom\u00e1ticas. J\u00e1 as diferentes vers\u00f5es para desktop e mobile exigem uma gest\u00e3o independente uma da outra.<\/p>\n De qualquer forma, sempre que atualizar um site responsivo, o ideal \u00e9 analisar as atualiza\u00e7\u00f5es em diferentes dispositivos para verificar poss\u00edveis erros.<\/p>\n Agora, vamos entender um pouco melhor o que est\u00e1 por tr\u00e1s de um site responsivo. Esse tipo de site precisa de tr\u00eas principais elementos: layout fluido, imagens flex\u00edveis e media queries. Vamos analisar cada um desses pontos.<\/p>\n Voc\u00ea vai ver que vamos entrar em algumas quest\u00f5es mais t\u00e9cnicas, mas \u00e9 importante conhecer alguns termos mesmo que voc\u00ea n\u00e3o trabalhe diretamente com desenvolvimento web. Mas, para colocar em pr\u00e1tica, talvez voc\u00ea precise de um profissional da \u00e1rea.<\/p>\n Para mais orienta\u00e7\u00f5es t\u00e9cnicas sobre esses elementos, veja as dicas da comunidade de desenvolvedores do Google<\/a>.<\/p>\n Layout fluido \u00e9 a capacidade de adapta\u00e7\u00e3o dos grids<\/strong> para os diferentes tamanhos de tela. Os grids, por sua vez, s\u00e3o o conjunto de linhas e colunas de base que definem a estrutura do layout e ajudam a escolher a melhor localiza\u00e7\u00e3o dos elementos.<\/p>\n Para que os grids sejam flex\u00edveis, \u00e9 preciso definir medidas relativas para eles no CSS (folhas de estilo), geralmente em porcentagem, em vez de pixels ou pontos, que s\u00e3o fixos. Dessa forma, as linhas e colunas se reorganizam automaticamente \u00e0 medida que o tamanho de tela aumenta ou diminui. Isso cria um design consistente em diferentes dispositivos.<\/p>\n Assim como os grids, as imagens tamb\u00e9m devem ser flex\u00edveis. Por\u00e9m, geralmente as imagens s\u00e3o formadas por pixels (em JPG ou BMP, por exemplo), que s\u00e3o uma unidade de medida fixa. Ent\u00e3o, ao diminuir o tamanho da tela, uma imagem fixa poderia extrapolar o elemento em que est\u00e1 inserida.<\/p>\n Uma maneira de resolver isso \u00e9 definir os elementos max-width e min-width no CSS. Eles definem, respectivamente, o tamanho m\u00e1ximo e m\u00ednimo da largura do elemento. Para serem fluidos, devem ser um percentual em rela\u00e7\u00e3o ao elemento que cont\u00e9m a figura<\/strong>, de maneira que acompanhem a sua varia\u00e7\u00e3o de tamanho.<\/p>\n Outro problema com as imagens \u00e9 um usu\u00e1rio de dispositivo m\u00f3vel n\u00e3o precisaria carregar uma imagem de 1000pix de largura, por exemplo, se o seu dispositivo tem 320px apenas. Isso poderia acarretar problemas de performance na velocidade de carregamento.<\/p>\n[rock-convert-cta id=”35343″]\n Nesse caso, o ideal n\u00e3o seria \u201cencolher\u201d a imagem, mas carregar diferentes imagens para diferentes dispositivos<\/strong>.<\/p>\n Para isso, voc\u00ea pode usar o elemento <picture>, que indica o uso de media queries (veja abaixo) para selecionar as imagens adequadas para cada aparelho, e o atributo \u201csrcset\u201d, que oferece diferentes resolu\u00e7\u00f5es e dimens\u00f5es de uma mesma imagem.<\/p>\n Layouts fluidos e imagens flex\u00edveis fazem o site se adaptar com o redimensionamento do navegador. Por\u00e9m, h\u00e1 momentos em que o site pode n\u00e3o ficar bem. Esses momentos s\u00e3o chamados de breakpoints ou pontos de quebra do layout fluido.<\/p>\n Para corrigir isso, existem os media queries, que permitem ocultar, fazer aparecer ou reposicionar elementos automaticamente<\/strong>, de acordo com o redimensionamento da p\u00e1gina e sua resolu\u00e7\u00e3o atual.<\/p>\n Um bom exemplo do uso de media queries \u00e9 a adapta\u00e7\u00e3o do menu, que geralmente \u00e9 expandido e horizontal no desktop. J\u00e1 no mobile, o menu \u00e9 condensado em um menu \u201chamburguer\u201d e, quando aberto, \u00e9 verticalizado. O que define a mudan\u00e7a de um menu para o outro \u00e9 o breakpoint, definido no CSS, e o uso de media queries.<\/p>\n Layouts fluidos, imagens flex\u00edveis e media queries s\u00e3o os pilares do desenvolvimento de sites responsivos. Com eles, voc\u00ea j\u00e1 pode criar um site responsivo!<\/p>\n Mas temos ainda algumas dicas que v\u00e3o ajudar voc\u00ea nesse processo, sempre de olho na experi\u00eancia do usu\u00e1rio. Confira:<\/p>\n Sites responsivos devem funcionar em uma infinidade de aparelhos. Ent\u00e3o, um layout simples tende a facilitar essa adapta\u00e7\u00e3o<\/strong>.<\/p>\n Procure eliminar elementos que s\u00e3o dispens\u00e1veis, que n\u00e3o cumprem uma fun\u00e7\u00e3o importante no site. Al\u00e9m de facilitar a responsividade, isso ajuda a direcionar o foco do usu\u00e1rio para o que interessa: a convers\u00e3o.<\/p>\n Evite tamb\u00e9m intera\u00e7\u00f5es complexas ou desnecess\u00e1rias. Um formul\u00e1rio longo demais, um checkout de v\u00e1rias etapas no e-commerce, um pop-up dif\u00edcil de fechar \u2014 tudo isso atrapalha a responsividade e, \u00e9 claro, a experi\u00eancia do usu\u00e1rio.<\/p>\n Mobile-First Design \u00e9 uma abordagem de design e desenvolvimento de sites que inicia os projetos pelas telas menores de smartphones<\/strong>. Afinal, os acessos por dispositivos m\u00f3veis j\u00e1 ultrapassaram o desktop em muitos mercados, ent\u00e3o devem ser a prioridade.<\/p>\n Dessa maneira, os sites s\u00e3o desenvolvidos primeiramente pensando na experi\u00eancia do usu\u00e1rio mobile e, depois, no desktop. \u00c9 o contr\u00e1rio do que profissionais e empresas costumam fazer, j\u00e1 que est\u00e3o acostumados a trabalhar em computadores ou notebooks, o que costumava deixar a experi\u00eancia mobile em segundo plano.<\/p>\n Na perspectiva do Mobile-First, os projetos j\u00e1 come\u00e7am pensando no tamanho da tela que \u00e9 menor, nas conex\u00f5es mais lentas que dificultam o carregamento, nos pontos de toque em vez de cliques e outras caracter\u00edsticas do mobile. Assim, os usu\u00e1rios de smartphones tendem a ser melhor atendidos nos sites responsivos.<\/p>\n Otimizar a experi\u00eancia do usu\u00e1rio significa melhorar todos os elementos que comp\u00f5em a sua navega\u00e7\u00e3o no site. Independentemente do dispositivo que estiver usando, o visitante deve conseguir encontrar e realizar facilmente o que deseja<\/strong>.<\/p>\nO que \u00e9 um site responsivo?<\/h2>\n
Como surgiu o design responsivo<\/h3>\n
Outras formas de compatibilidade com dispositivos m\u00f3veis<\/h3>\n
\n
Por que ter um site responsivo?<\/h2>\n
\n
Como o site responsivo pode ajudar a sua empresa?<\/h2>\n
Melhora a satisfa\u00e7\u00e3o dos clientes<\/h3>\n
Reduz a taxa de rejei\u00e7\u00e3o<\/h3>\n
Aumenta as convers\u00f5es<\/h3>\n
Melhora o SEO<\/h3>\n
Facilita a divulga\u00e7\u00e3o do site<\/h3>\n
![\"site](\"https:\/\/mlgzkyrbq6eh.i.optimole.com\/cb:AiM1.588\/w:1024\/h:416\/q:mauto\/f:best\/https:\/\/pingback.com\/br\/resources\/wp-content\/uploads\/2021\/08\/site-responsivo-3-1024x416.png\")
<\/figure>\n<\/div>\nFacilita o gerenciamento do site<\/h3>\n
Como funciona um site responsivo?<\/h2>\n
Layout fluido<\/h3>\n
Imagens flex\u00edveis<\/h3>\n
Media queries<\/h3>\n
Como criar um site responsivo?<\/h2>\n
Aposte na simplicidade<\/h3>\n
Priorize o mobile (Mobile-First Design)<\/h3>\n
Otimize a experi\u00eancia do usu\u00e1rio<\/h3>\n