{"id":8477,"date":"2019-10-23T13:00:46","date_gmt":"2019-10-23T16:00:46","guid":{"rendered":"https:\/\/www.blip.ai\/blog\/?p=8477"},"modified":"2023-07-16T10:19:06","modified_gmt":"2023-07-16T13:19:06","slug":"responsive-design","status":"publish","type":"post","link":"https:\/\/www.blip.ai\/blog\/tecnologia\/responsive-design\/","title":{"rendered":"A import\u00e2ncia do responsive design e melhores pr\u00e1ticas"},"content":{"rendered":"

Nos \u00faltimos tempos, percebemos n\u00e3o s\u00f3 o crescente h\u00e1bito das pessoas de consultar celular a todo momento, como tamb\u00e9m o surgimento de um grande n\u00famero de aparelhos com acesso a internet, desde rel\u00f3gios at\u00e9 geladeiras.
\nO Responsive design<\/i>, ou design responsivo, ganhou popularidade gra\u00e7as a esse h\u00e1bito: o conte\u00fado que \u00e9 publicado na internet precisa ser acess\u00edvel em diferentes aparelhos, que costumam oferecer algumas limita\u00e7\u00f5es em rela\u00e7\u00e3o ao tradicional desktop.
\nO Brasil j\u00e1 possui mais de um smartphone ativo por habitante<\/a>. Mais do que nunca, o usu\u00e1rio precisa conseguir localizar o que est\u00e1 procurando, mesmo que ele busque em aparelhos mais limitados e com telas menores.
\nNeste artigo, voc\u00ea vai entender um pouco mais sobre que \u00e9 o responsive design e como alguns dos elementos que comp\u00f5em um design responsivo funcionam. Tamb\u00e9m linkamos alguns artigos e materiais que podem te ajudar a entender melhor o que comp\u00f5e um responsive design.
\nConfira!<\/p>\n

O que \u00e9 responsive design?<\/h2>\n

Mas afinal, o que \u00e9 \u2014 de verdade \u2014 o responsive design?<\/b>
\nO termo foi criado pela Ethan Marcote<\/a> para se referir \u00e0 pr\u00e1tica de ajustar automaticamente o conte\u00fado de um site \u00e0 tela em que ele ser\u00e1 exibido.
\nTer um design responsivo consiste em adaptar o conte\u00fado de seu site ou produto a diferentes tipos de telas de forma autom\u00e1tica, por meio do CSS<\/b>.
\nAntigamente todos os sites se preocupavam apenas em desenvolver um layout para desktop, j\u00e1 que ainda n\u00e3o haviam smartphones ou outros aparelhos que acessassem a internet da forma como conhecemos hoje.
\nQuando a internet m\u00f3vel surgiu (quem se lembra do WAP?), ainda que muito limitada, alguns produtores de conte\u00fado come\u00e7aram a planejar formas de disponibilizar seus materiais tamb\u00e9m pelo celular.
\nDesde ent\u00e3o, a conex\u00e3o \u00e0 internet se desenvolveu muito, fazendo com que o consumo de conte\u00fado se torne mais f\u00e1cil. Por isso \u00e9 t\u00e3o importante fazer com que seu conte\u00fado seja acess\u00edvel com a menor perda poss\u00edvel por diferentes telas.<\/p>\n

Qual \u00e9 a import\u00e2ncia do responsive design?<\/h2>\n

N\u00e3o \u00e9 muito dif\u00edcil encontrarmos p\u00e1ginas com letras muito pequenas, imagens exageradamente grandes e menus dif\u00edceis de acessar quando acessadas pelo celular.
\n\u00c9 dif\u00edcil encontrar a informa\u00e7\u00e3o que voc\u00ea estava procurando, a lentid\u00e3o \u00e9 grande e o consumo de dados costuma ser bastante alto em alguns casos, fatores que tornam a experi\u00eancia extremamente ruim.
\nAs chances de um usu\u00e1rio voltar a seu site quando ele se encontra em tais condi\u00e7\u00f5es \u00e9 muito menor do que se as informa\u00e7\u00f5es estiverem claras, em um tamanho coerente e com elementos que se enquadrem de verdade na realidade dos acessos mobile.
\nAl\u00e9m disso, ter um design responsivo \u00e9 essencial em termos de SEO. Os mecanismos de busca avaliam diversos fatores nos sites para fazer o ranqueamento, e responsividade \u00e9 um dos mais importantes.
\nO Google consegue identificar quando um site n\u00e3o atende \u00e0s expectativas de quem est\u00e1 pesquisando a partir de fatores como o tempo em que o usu\u00e1rio permaneceu na p\u00e1gina, como ele interagiu com ela e se ele voltou para a p\u00e1gina de buscas e clicou em outro resultado.
\nSites que n\u00e3o ret\u00e9m usu\u00e1rios n\u00e3o ranqueam em boas posi\u00e7\u00f5es nos sites de busca. Um design responsivo tem impacto direto nisso: se a navegabilidade for ruim, a pessoa n\u00e3o se manter\u00e1 na p\u00e1gina.
\nA velocidade de carregamento tamb\u00e9m impacta diretamente nos resultados de SEO, j\u00e1 que usu\u00e1rios n\u00e3o costumam permanecer em p\u00e1ginas que demoram mais de 3 segundos para carregar.
\nIsso vale para o mobile tamb\u00e9m. A internet acessada pelo celular costuma ser mais lenta e inst\u00e1vel. Por isso, quanto mais r\u00e1pido e otimizado seu site for, melhor.<\/p>\n

Mas como fazer?<\/h2>\n

A parte pr\u00e1tica \u00e9 bem mais simples do que parece! Hoje, o CSS \u2014 que \u00e9 a linguagem respons\u00e1vel pelos estilos na web \u2014 possui nativamente funcionalidades que permitem incluir a responsividade de maneira simples.
\nAl\u00e9m de adaptar o conte\u00fado de acordo com o tamanho da tela, tamb\u00e9m \u00e9 poss\u00edvel deix\u00e1-lo flu\u00eddo, o que significa que os elementos da p\u00e1gina n\u00e3o v\u00e3o ficar est\u00e1ticos. Pelo contr\u00e1rio, eles v\u00e3o adequar suas posi\u00e7\u00f5es de acordo com o espa\u00e7o dispon\u00edvel. Isso \u00e9 poss\u00edvel gra\u00e7as \u00e0s diversas unidades de medida que s\u00e3o englobadas pelo CSS.
\nTempos atr\u00e1s a internet era toda baseada em pixels. Assim, se voc\u00ea precisasse adicionar qualquer tipo de estilo \u00e0 sua p\u00e1gina web, o melhor jeito de faz\u00ea-lo era determinando os tamanho exatos de cada elemento.
\nIsso mudou com o surgimento de novas unidades de medida dentro do CSS. Agora temos em, rem,<\/i> e tamb\u00e9m a op\u00e7\u00e3o de trabalhar diretamente com porcentagens, fra\u00e7\u00f5es (fr<\/i>) e medidas derivadas do tamanho da tela (vh, vw<\/i>). Vamos abordar neste post somente o em<\/i><\/b>, o<\/b> rem<\/i><\/b>, e as medidas de tamanho da tela<\/b>.<\/p>\n

Em <\/i>e rem<\/i><\/h3>\n

A unidade de medida em<\/i> \u00e9 baseada no tamanho-base da fonte do elemento no navegador, que por padr\u00e3o \u00e9 16px, ou seja, essa unidade \u00e9 baseada em pixels, mas ainda assim consegue ser responsiva<\/b>.
\nPor qu\u00ea? Acontece que esse tamanho-base est\u00e1 ligado ao zoom do navegador. Assim, se uma pessoa com problemas de vis\u00e3o aumenta o zoom da tela, o elemento escala de acordo.
\nEnquanto o em<\/i> est\u00e1 ligado ao elemento que o cont\u00e9m, o rem<\/i> \u00e9 mais generalista, tirando seu tamanho-base do corpo da p\u00e1gina. Muitas vezes, us\u00e1-lo \u00e9 suficiente para deixar a p\u00e1gina mais responsiva, mas existem situa\u00e7\u00f5es em que, para ter um controle maior do design por \u00e1rea, \u00e9 melhor usar em<\/i>.<\/p>\n

Viewport<\/h3>\n

O viewport \u00e9 a tela em que uma p\u00e1gina est\u00e1 contida. Assim, para que um programador possa ter mais controle usando o pr\u00f3prio viewport como unidade de medida, surgiram vh<\/i> (viewport height<\/i>) e vw<\/i> (viewport width<\/i>).
\nCom isso, \u00e9 poss\u00edvel controlar a \u00e1rea que cada elemento vai ocupar na tela independente do zoom. Cada unidade de viewport corresponde a 1% da \u00e1rea equivalente, ou seja, 1vh<\/i> significa 1% da altura da tela.<\/p>\n

Flexibilidade<\/h3>\n

\u00c9 poss\u00edvel deixar o layout de um elemento flex\u00edvel determinando o jeito que ele se mostra, ou seja, com a propriedade display. Definindo-a como flex, \u00e9 poss\u00edvel usar uma s\u00e9rie de propriedades que controlam a fluidez do elemento.
\nEste artigo<\/a> no site CSS-Tricks traz uma boa explica\u00e7\u00e3o de como usar estas propriedades para alcan\u00e7ar o layout desejado. Al\u00e9m disso, os jogos Flexbox Froggy<\/a> e Flexbox Defense<\/a> ensinam a propriedade flex de maneira l\u00fadica e interativa.<\/p>\n

Media-queries<\/h3>\n

Muitos artigos que abordam a responsividade no contexto de c\u00f3digo falam exclusivamente de media-queries.
\nAqui, optamos por deix\u00e1-la por \u00faltimo porque responsividade n\u00e3o se resume somente a adaptar o tamanho, como j\u00e1 foi dito anteriormente. Essas queries ajudam a organizar o layout, mas o tamanho-base e a fluidez devem sempre acompanhar as mudan\u00e7as no tamanho da tela.
\nAs queries permitem separar o c\u00f3digo por tamanho da tela e, assim, pode-se explicitar, usando pixels, como exibir determinados elementos na p\u00e1gina.
\n\u00c9 importante lembrar, ao us\u00e1-las, de organizar o c\u00f3digo referente ao estilo separado do layout, para n\u00e3o ocorrerem surpresas desagrad\u00e1veis ao se mudar o tamanho da tela. Aqui<\/a> h\u00e1 uma boa explica\u00e7\u00e3o de media-queries e aqui<\/a> uma colet\u00e2nea de exemplos.<\/p>\n

Boas pr\u00e1ticas para um design responsivo<\/h2>\n

Verifique a informa\u00e7\u00e3o em telas menores<\/h3>\n

Verifique se todas as informa\u00e7\u00f5es do seu site est\u00e3o acess\u00edveis e leg\u00edveis confortavelmente em telas menores.
\nCaso n\u00e3o tenha um celular dispon\u00edvel, voc\u00ea consegue verificar isso pelo “inspecionar” do Google. Clique com o bot\u00e3o direito na p\u00e1gina e selecione “inspecionar” (ou simplesmente digite F11). Depois, selecione o formato responsivo.<\/p>\n

Mantenha em tela apenas aquilo que for necess\u00e1rio<\/h3>\n

Imagens utilizadas para ilustrar determinados tipos de conte\u00fado no desktop n\u00e3o necessariamente precisam estar presentes em outros tamanhos de tela.
\n\u00c9 mais dif\u00edcil manter o n\u00edvel de detalhamento de um desktop em um celular, ent\u00e3o evite manter imagens que n\u00e3o s\u00e3o essenciais em seu layout responsivo.
\nQuando as imagens forem, sim, necess\u00e1rias, deixe-as otimizadas: imagens mais leves carregam mais r\u00e1pido e utilizam menos dados de quem estiver acessando. D\u00ea prefer\u00eancia para a op\u00e7\u00e3o “Salvar para a web” em suas ferramentas de edi\u00e7\u00e3o e escolha o formato mais adequado.
\nVoc\u00ea tamb\u00e9m pode utilizar ferramentas online de otimiza\u00e7\u00e3o de imagens. Leia mais sobre isso aqui<\/a> e aqui<\/a>.<\/p>\n

Por \u00faltimo: teste!<\/h3>\n

Nem todos os navegadores leem seu c\u00f3digo de forma igual, por isso \u00e9 importante testar seu site em v\u00e1rios deles (isso vale para desktop e mobile).
\nSeguindo as dicas e tutoriais que trouxemos por aqui, voc\u00ea consegue ter uma boa no\u00e7\u00e3o de onde come\u00e7ar no processo de tornar seu site responsivo. Acessibilidade \u00e9 um assunto importante e que, quando colocada como prioridade, pode ser uma grande aliada no desenvolvimento de sua presen\u00e7a digital!<\/p>\n

\n

\"L\u00edviaL\u00edvia Almeida e Brunna Amaral<\/strong>
\nL\u00edvia \u00e9 Desenvolvedora e Brunna \u00e9 Webdesigner na Take
\n 
\n <\/p>\n","protected":false},"excerpt":{"rendered":"

Nos \u00faltimos tempos, percebemos n\u00e3o s\u00f3 o crescente h\u00e1bito das pessoas de consultar celular a todo momento, como tamb\u00e9m o surgimento de um grande n\u00famero de aparelhos com acesso a internet, desde rel\u00f3gios at\u00e9 geladeiras. O Responsive design, ou design responsivo, ganhou popularidade gra\u00e7as a esse h\u00e1bito: o conte\u00fado que \u00e9 publicado na internet precisa […]<\/p>\n","protected":false},"author":1,"featured_media":8479,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[401],"tags":[],"class_list":["post-8477","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tecnologia"],"lang":"pt","translations":{"pt":8477},"pll_sync_post":[],"_links":{"self":[{"href":"https:\/\/www.blip.ai\/blog\/wp-json\/wp\/v2\/posts\/8477","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.blip.ai\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.blip.ai\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.blip.ai\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.blip.ai\/blog\/wp-json\/wp\/v2\/comments?post=8477"}],"version-history":[{"count":0,"href":"https:\/\/www.blip.ai\/blog\/wp-json\/wp\/v2\/posts\/8477\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.blip.ai\/blog\/wp-json\/wp\/v2\/media\/8479"}],"wp:attachment":[{"href":"https:\/\/www.blip.ai\/blog\/wp-json\/wp\/v2\/media?parent=8477"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.blip.ai\/blog\/wp-json\/wp\/v2\/categories?post=8477"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.blip.ai\/blog\/wp-json\/wp\/v2\/tags?post=8477"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}