{"id":76329,"date":"2015-09-25T00:00:00","date_gmt":"2015-09-25T00:00:00","guid":{"rendered":"https:\/\/rockcontent.com\/br\/2015\/09\/25\/web-design-responsivo\/"},"modified":"2015-09-25T00:00:00","modified_gmt":"2015-09-25T00:00:00","slug":"web-design-responsivo","status":"publish","type":"post","link":"https:\/\/pingback.com\/br\/resources\/web-design-responsivo\/","title":{"rendered":"9 princ\u00edpios b\u00e1sicos do web design responsivo"},"content":{"rendered":"\n

O web design responsivo \u00e9 uma \u00f3tima solu\u00e7\u00e3o na hora de resolver problemas de multi-telas de um site<\/a>, mas resolver isso a partir da perspectiva de impress\u00f5es \u00e9 um pouco mais dif\u00edcil. <\/p>\n\n\n\n

N\u00e3o h\u00e1 nenhum tamanho fixo das p\u00e1ginas, nem mil\u00edmetros, cent\u00edmetros e muito menos nenhum tipo de restri\u00e7\u00e3o f\u00edsica que precisa ser resolvida. <\/p>\n\n\n\n

Projetar um site atrav\u00e9s de pixels para desktop ou Mobile tamb\u00e9m j\u00e1 \u00e9 passado, principalmente \u00e0 medida que novos gadgets surgem e te permitem abrir um site, por exemplo.<\/p>\n\n\n\n

Portanto, \u00e9 preciso esclarecermos alguns princ\u00edpios b\u00e1sicos a respeito do web design responsivo a fim de consolidar todo o conceito ao inv\u00e9s de ir contra a mar\u00e9. <\/p>\n\n\n\n

Para facilitar o processo, vamos apenas nos concentrar nos layouts (sim, o design responsivo vai muito al\u00e9m do falado acima e, se voc\u00ea realmente deseja aprender sobre ele, o layout \u00e9 a melhor maneira de come\u00e7ar).<\/p>\n\n\n\n

Design Responsivo X Adaptativo<\/strong><\/h2>\n\n\n\n

Pode parecer o mesmo, mas n\u00e3o se engane. Ambas as abordagens realmente se completam, por isso n\u00e3o h\u00e1 uma maneira certa ou errada de fazer isso. Deixe que o conte\u00fado decida.<\/p>\n\n\n\n

\"gif<\/figure>\n\n\n\n

O Fluxo<\/strong><\/h3>\n\n\n\n

A partir do momento que a tela do dispositivo diminui de tamanho, o conte\u00fado tamb\u00e9m come\u00e7a a preencher um espa\u00e7o mais vertical, onde tudo que est\u00e1 abaixo \u00e9 \u201cempurrado\u201d tamb\u00e9m para baixo. Esse processo \u00e9 chamado de fluxo.<\/p>\n\n\n\n

Talvez seja um pouco complicado de entender caso voc\u00ea esteja acostumado a projetar sites com pixels e pontos, mas logo far\u00e1 todo o sentido, assim que voc\u00ea se acostumar com o processo.<\/p>\n\n\n\n

\"compara\u00e7\u00e3o<\/figure>\n\n\n\n

Unidades Relativas<\/strong><\/h3>\n\n\n\n

Imagine que a tela possa ser um desktop, tela de smartphone ou qualquer coisa que atinja o meio termo entre as duas. A densidade dos pixels tamb\u00e9m pode variar e \u00e9 por isso que tamb\u00e9m precisamos de unidades flex\u00edveis e que funcionem em qualquer lugar.<\/p>\n\n\n\n

\u00c9 ai que as unidades relativas baseadas em porcentagens vem a calhar. Assim, fazer algo na escalade 50% significa que ele sempre ocupar\u00e1 a metade da tela (ou da janela de exibi\u00e7\u00e3o, que \u00e9 o tamanho da janela do navegador aberta).<\/p>\n\n\n\n

\"compara\u00e7\u00e3o<\/figure>\n\n\n\n

Pontos de Interrup\u00e7\u00e3o<\/strong><\/h3>\n\n\n\n

Os pontos de interrup\u00e7\u00e3o permitem que o layout mude em pontos predefinidos, ou seja: ter 3 colunas em um desktop, mas apenas uma coluna em dispositivos m\u00f3veis, por exemplo. A maioria das propriedades CSS podem ser alteradas de um ponto de interrup\u00e7\u00e3o para outro.<\/p>\n\n\n\n

Normalmente, onde se coloca um desses pontos depender\u00e1 primeiramente do tipo de conte\u00fado que est\u00e1 ali. Se ocorrer de uma sequ\u00eancia se quebrar, talvez seja necess\u00e1rio adicionar um ponto de interrup\u00e7\u00e3o.<\/p>\n\n\n\n

Mas certifique-se de us\u00e1-los com cuidado. \u00c9 poss\u00edvel que tudo vire uma grande bagun\u00e7a rapidamente caso voc\u00ea n\u00e3o entenda o que est\u00e1 influenciando o qu\u00ea.<\/p>\n\n\n\n

\"compara\u00e7\u00e3o<\/figure>\n\n\n\nVoc\u00ea tamb\u00e9m pode se interessar por este conte\u00fado!<\/strong>
Design de Sites: 10 dicas imperd\u00edveis para 2020!<\/a><\/biblioteca>\n\n\n\n

Valores M\u00ednimos e Valores M\u00e1ximos<\/strong><\/h3>\n\n\n\n

\u00c0s vezes \u00e9 \u00f3timo que o conte\u00fado ocupe toda a largura de uma tela, assim como funciona nos dispositivos m\u00f3veis, por exemplo. Mas ter esse mesmo conte\u00fado se estendendo por toda a largura da tela de uma TV pode simplesmente n\u00e3o fazer sentido.<\/p>\n\n\n\n

\u00c9 por isso que os valores m\u00ednimos e m\u00e1ximos ajudam bastante. Por exemplo, uma largura de 100% com m\u00e1xima largura de 1000 pixels significaria que o conte\u00fado ir\u00e1 preencher toda a tela, mas nunca ultrapassando a marca de 1000 pixels.<\/p>\n\n\n\n

\"compara\u00e7\u00e3o<\/figure>\n\n\n\n

Objetos Aninhados<\/strong><\/h3>\n\n\n\n

Voc\u00ea se lembra da posi\u00e7\u00e3o relativa? \u00c9 muito dif\u00edcil apenas ter um monte de elementos dependendo uns dos outros, pois isso seria dif\u00edcil de controlar. Portanto, manter os elementos bem envolvidos e \u00fanicos os deixaria mais compreens\u00edveis, limpos e muito mais bem-arrumados.<\/p>\n\n\n\n

\u00c9 ai que as unidades est\u00e1ticas como os pixels podem ajudar. Eles s\u00e3o bastante \u00fateis para aquele tipo de conte\u00fado que voc\u00ea n\u00e3o quer manter em escala, como logos e bot\u00f5es, por exemplo.<\/p>\n\n\n\n

\"compara\u00e7\u00e3o<\/figure>\n\n\n\n

Desktop ou Mobile \u2013 Qual vem primeiro?<\/strong><\/h3>\n\n\n\n

Tecnicamente n\u00e3o existe uma real diferen\u00e7a se o projeto \u00e9 iniciado a partir de uma tela menor para uma tela maior ou vice-versa. No entanto, existem algumas limita\u00e7\u00f5es caso voc\u00ea decida come\u00e7ar pelo Mobile, mas que poder\u00e3o ser bastante \u00fateis na hora de algumas tomadas de decis\u00e3o.<\/p>\n\n\n\n

Muitas vezes as pessoas at\u00e9 mesmo come\u00e7am de ambas as extremidades (mobile e desktop simultaneamente). \u00c9 ai que voc\u00ea precisa decidir o que melhor funcionar\u00e1 para voc\u00ea a fim de obter a m\u00e1xima dos dois.<\/p>\n\n\n\n

\"compara\u00e7\u00e3o<\/figure>\n\n\n\n

Fontes Web ou Fontes do Sistema<\/strong><\/h3>\n\n\n\n

Que tal despertar aquele ar futur\u00edstico e bem legal no seu site? Ent\u00e3o use fontes da web! No entanto, embora elas sejam realmente deslumbrantes, lembre-se de que cada uma delas dever\u00e3o ser carregadas, e quanto maior for a quantidade delas, mais tempo demorar\u00e1 para a p\u00e1gina ser carregada.<\/p>\n\n\n\n

J\u00e1 as fontes do sistema, por outro lado, s\u00e3o muito mais r\u00e1pidas, exceto quando os usu\u00e1rios n\u00e3o as possui, o que faz com que toda a p\u00e1gina fique apenas na fonte padr\u00e3o.<\/p>\n\n\n\n

\"compara\u00e7\u00e3o<\/figure>\n\n\n\n

Imagens Bitmap X Vetores<\/strong><\/h3>\n\n\n\n

Os \u00edcones da sua p\u00e1gina possuem muitos detalhes e alguns efeitos bem arrojados em sua aplica\u00e7\u00e3o? Se a resposta for sim, utilize bitmap. Se a resposta for n\u00e3o, considere o uso de imagens vetoriais.<\/p>\n\n\n\n

Para bitmap, utilize imagens jpg, png ou gif; j\u00e1 para vetores a melhor op\u00e7\u00e3o ser\u00e1 SVG ou uma fonte \u00edcone. Cada uma delas possui suas vantagens e tamb\u00e9m algumas desvantagens.<\/p>\n\n\n\n

No entanto, tenha sempre em mente o tamanho \u2013 nenhuma imagem deve ser postada em qualquer lugar da internet sem que antes tenha sido otimizada. J\u00e1 os vetores, por outro lado, muitas vezes s\u00e3o imagens pequenas e podem n\u00e3o ser suportadas em navegadores mais antigos.<\/p>\n\n\n\n

Al\u00e9m disso, se o vetor possuir muitas curvas, certamente ele pode ser mais pesado que o bitmap, ent\u00e3o \u00e9 melhor que voc\u00ea escolha sabiamente.<\/p>\n\n\n\n

\"compara\u00e7\u00e3o<\/figure>\n\n\n\n

Voc\u00ea acha que esquecemos de alguma coisa neste texto? Quer contribuir com ideias e informa\u00e7\u00f5es adicionais que poder\u00e3o ajudar na hora de desenvolver um web design responsivo?<\/p>\n\n\n\n

Deixe seu coment\u00e1rio no campo abaixo!<\/p>\n\n\n\n

\"Redesign<\/a><\/figure><\/div>\n\n\n\n

Esse texto \u00e9 uma tradu\u00e7\u00e3o do artigo “9 basic principles of responsive web design”<\/em>, que voc\u00ea pode conferir aqui<\/a> em ingl\u00eas.<\/p>\n","protected":false},"excerpt":{"rendered":"

O web design responsivo \u00e9 uma \u00f3tima solu\u00e7\u00e3o na hora de resolver problemas de multi-telas de um site, mas resolver isso a partir da perspectiva de impress\u00f5es \u00e9 um pouco mais dif\u00edcil. N\u00e3o h\u00e1 nenhum tamanho fixo das p\u00e1ginas, nem mil\u00edmetros, cent\u00edmetros e muito menos nenhum tipo de restri\u00e7\u00e3o f\u00edsica que precisa ser resolvida. Projetar […]<\/p>\n","protected":false},"author":1,"featured_media":6991,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[22],"tags":[],"class_list":["post-76329","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tech"],"yoast_head":"\n9 princ\u00edpios b\u00e1sicos do web design responsivo<\/title>\n<meta name=\"description\" content=\"O que \u00e9 o web design responsivo e quais s\u00e3o seus princ\u00edpios b\u00e1sicos? Descubra aqui!\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/pingback.com\/br\/resources\/web-design-responsivo\/\" \/>\n<meta property=\"og:locale\" content=\"pt_BR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"9 princ\u00edpios b\u00e1sicos do web design responsivo\" \/>\n<meta property=\"og:description\" content=\"O que \u00e9 o web design responsivo e quais s\u00e3o seus princ\u00edpios b\u00e1sicos? Descubra aqui!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/pingback.com\/br\/resources\/web-design-responsivo\/\" \/>\n<meta property=\"og:site_name\" content=\"Pingback\" \/>\n<meta property=\"article:published_time\" content=\"2015-09-25T00:00:00+00:00\" \/>\n<meta name=\"author\" content=\"Pingback\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@pingbackoficial\" \/>\n<meta name=\"twitter:site\" content=\"@pingbackoficial\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Pingback\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. tempo de leitura\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/pingback.com\/br\/resources\/web-design-responsivo\/\",\"url\":\"https:\/\/pingback.com\/br\/resources\/web-design-responsivo\/\",\"name\":\"9 princ\u00edpios b\u00e1sicos do web design responsivo\",\"isPartOf\":{\"@id\":\"https:\/\/pingback.com\/br\/resources\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/pingback.com\/br\/resources\/web-design-responsivo\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/pingback.com\/br\/resources\/web-design-responsivo\/#primaryimage\"},\"thumbnailUrl\":\"\",\"datePublished\":\"2015-09-25T00:00:00+00:00\",\"author\":{\"@id\":\"https:\/\/pingback.com\/br\/resources\/#\/schema\/person\/170478128352e2f21e2360c2e4944a66\"},\"description\":\"O que \u00e9 o web design responsivo e quais s\u00e3o seus princ\u00edpios b\u00e1sicos? Descubra aqui!\",\"breadcrumb\":{\"@id\":\"https:\/\/pingback.com\/br\/resources\/web-design-responsivo\/#breadcrumb\"},\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/pingback.com\/br\/resources\/web-design-responsivo\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\/\/pingback.com\/br\/resources\/web-design-responsivo\/#primaryimage\",\"url\":\"\",\"contentUrl\":\"\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/pingback.com\/br\/resources\/web-design-responsivo\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"In\u00edcio\",\"item\":\"https:\/\/pingback.com\/br\/resources\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"9 princ\u00edpios b\u00e1sicos do web design responsivo\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/pingback.com\/br\/resources\/#website\",\"url\":\"https:\/\/pingback.com\/br\/resources\/\",\"name\":\"Pingback Blog\",\"description\":\"Marketing for builders\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/pingback.com\/br\/resources\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pt-BR\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/pingback.com\/br\/resources\/#\/schema\/person\/170478128352e2f21e2360c2e4944a66\",\"name\":\"Pingback\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\/\/pingback.com\/br\/resources\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/70cde532238b4f8bf4a6e7e589ff0a259eda38fa966564ca7ed7d23e61c27774?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/70cde532238b4f8bf4a6e7e589ff0a259eda38fa966564ca7ed7d23e61c27774?s=96&d=mm&r=g\",\"caption\":\"Pingback\"},\"description\":\"Pingback: Marketing for builders.\",\"sameAs\":[\"https:\/\/pingback.com\",\"https:\/\/www.instagram.com\/pingbackoficial\/\",\"https:\/\/www.linkedin.com\/company\/pingbackoficial\/\",\"https:\/\/x.com\/pingbackoficial\",\"https:\/\/www.youtube.com\/@pingbackoficial\"],\"url\":\"https:\/\/pingback.com\/br\/resources\/author\/adm1n\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"9 princ\u00edpios b\u00e1sicos do web design responsivo","description":"O que \u00e9 o web design responsivo e quais s\u00e3o seus princ\u00edpios b\u00e1sicos? Descubra aqui!","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/pingback.com\/br\/resources\/web-design-responsivo\/","og_locale":"pt_BR","og_type":"article","og_title":"9 princ\u00edpios b\u00e1sicos do web design responsivo","og_description":"O que \u00e9 o web design responsivo e quais s\u00e3o seus princ\u00edpios b\u00e1sicos? Descubra aqui!","og_url":"https:\/\/pingback.com\/br\/resources\/web-design-responsivo\/","og_site_name":"Pingback","article_published_time":"2015-09-25T00:00:00+00:00","author":"Pingback","twitter_card":"summary_large_image","twitter_creator":"@pingbackoficial","twitter_site":"@pingbackoficial","twitter_misc":{"Escrito por":"Pingback","Est. tempo de leitura":"5 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/pingback.com\/br\/resources\/web-design-responsivo\/","url":"https:\/\/pingback.com\/br\/resources\/web-design-responsivo\/","name":"9 princ\u00edpios b\u00e1sicos do web design responsivo","isPartOf":{"@id":"https:\/\/pingback.com\/br\/resources\/#website"},"primaryImageOfPage":{"@id":"https:\/\/pingback.com\/br\/resources\/web-design-responsivo\/#primaryimage"},"image":{"@id":"https:\/\/pingback.com\/br\/resources\/web-design-responsivo\/#primaryimage"},"thumbnailUrl":"","datePublished":"2015-09-25T00:00:00+00:00","author":{"@id":"https:\/\/pingback.com\/br\/resources\/#\/schema\/person\/170478128352e2f21e2360c2e4944a66"},"description":"O que \u00e9 o web design responsivo e quais s\u00e3o seus princ\u00edpios b\u00e1sicos? Descubra aqui!","breadcrumb":{"@id":"https:\/\/pingback.com\/br\/resources\/web-design-responsivo\/#breadcrumb"},"inLanguage":"pt-BR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/pingback.com\/br\/resources\/web-design-responsivo\/"]}]},{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/pingback.com\/br\/resources\/web-design-responsivo\/#primaryimage","url":"","contentUrl":""},{"@type":"BreadcrumbList","@id":"https:\/\/pingback.com\/br\/resources\/web-design-responsivo\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"In\u00edcio","item":"https:\/\/pingback.com\/br\/resources\/"},{"@type":"ListItem","position":2,"name":"9 princ\u00edpios b\u00e1sicos do web design responsivo"}]},{"@type":"WebSite","@id":"https:\/\/pingback.com\/br\/resources\/#website","url":"https:\/\/pingback.com\/br\/resources\/","name":"Pingback Blog","description":"Marketing for builders","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/pingback.com\/br\/resources\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pt-BR"},{"@type":"Person","@id":"https:\/\/pingback.com\/br\/resources\/#\/schema\/person\/170478128352e2f21e2360c2e4944a66","name":"Pingback","image":{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/pingback.com\/br\/resources\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/70cde532238b4f8bf4a6e7e589ff0a259eda38fa966564ca7ed7d23e61c27774?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/70cde532238b4f8bf4a6e7e589ff0a259eda38fa966564ca7ed7d23e61c27774?s=96&d=mm&r=g","caption":"Pingback"},"description":"Pingback: Marketing for builders.","sameAs":["https:\/\/pingback.com","https:\/\/www.instagram.com\/pingbackoficial\/","https:\/\/www.linkedin.com\/company\/pingbackoficial\/","https:\/\/x.com\/pingbackoficial","https:\/\/www.youtube.com\/@pingbackoficial"],"url":"https:\/\/pingback.com\/br\/resources\/author\/adm1n\/"}]}},"_links":{"self":[{"href":"https:\/\/pingback.com\/br\/resources\/wp-json\/wp\/v2\/posts\/76329","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pingback.com\/br\/resources\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/pingback.com\/br\/resources\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/pingback.com\/br\/resources\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/pingback.com\/br\/resources\/wp-json\/wp\/v2\/comments?post=76329"}],"version-history":[{"count":0,"href":"https:\/\/pingback.com\/br\/resources\/wp-json\/wp\/v2\/posts\/76329\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/pingback.com\/br\/resources\/wp-json\/"}],"wp:attachment":[{"href":"https:\/\/pingback.com\/br\/resources\/wp-json\/wp\/v2\/media?parent=76329"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/pingback.com\/br\/resources\/wp-json\/wp\/v2\/categories?post=76329"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/pingback.com\/br\/resources\/wp-json\/wp\/v2\/tags?post=76329"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}