{"id":13550,"date":"2024-11-04T09:01:38","date_gmt":"2024-11-04T09:01:38","guid":{"rendered":"http:\/\/boomer.pt\/?p=13550"},"modified":"2024-11-04T09:01:38","modified_gmt":"2024-11-04T09:01:38","slug":"webdesign-responsive","status":"publish","type":"post","link":"https:\/\/boomer.pt\/raiodoblog\/webdesign-responsive\/","title":{"rendered":"WebDesign Responsive"},"content":{"rendered":"\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

WebDesign Responsive<\/h1>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Com a chegada da internet e com a variedade de ecr\u00e3s, o uso de sistema de grelha teve uma maior presen\u00e7a na web. O sistema de grelha j\u00e1 era utilizado nos sites, mas s\u00f3 mais recentemente \u00e9 que a utiliza\u00e7\u00e3o de sistemas como o Bootstrap<\/em> come\u00e7aram a ser mais utilizados.<\/p>

\u00a0<\/p>

Neste artigo vamos falar sobre a import\u00e2ncia da constru\u00e7\u00e3o de uma p\u00e1gina responsiva e quais as suas principais caracter\u00edsticas.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t
<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"w39_WebResponsivo\"\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t
<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

The grid<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\n\t\t\t\t\t\t<\/span>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Depois da Segunda Guerra Mundial, v\u00e1rios designers gr\u00e1ficos, como Max Bill e Josef M\u00fcller-Brockmann, come\u00e7aram a questionar a relev\u00e2ncia da p\u00e1gina convencional. Influenciados pelas ideias modernistas come\u00e7aram por criar um sistema flex\u00edvel capaz de ajudar a obter uma coer\u00eancia na organiza\u00e7\u00e3o da p\u00e1gina. O trabalho de M\u00fcller-Brockmann, Grid systems in graphic design, ajudou a divulgar o uso da grelha primeiro na Europa e depois na Am\u00e9rica do Norte.<\/p>

\u00a0<\/p>

Uma Homepage n\u00e3o tem a mesma fun\u00e7\u00e3o que uma p\u00e1gina de About me ou mesmo de uma p\u00e1gina de um Blog.
<\/u>(tradu\u00e7\u00e3o livre de Luton, 2014)<\/p>

\u00a0<\/p>

O uso da grelha traz muitas vantagens na fase de desenvolvimento dos projetos. Os conte\u00fados das p\u00e1ginas podem ser organizados em blocos, permitindo uma reorganiza\u00e7\u00e3o coordenada pelo designer para diferentes formatos de ecr\u00e3, sem perder a coer\u00eancia de leitura e a consist\u00eancia gr\u00e1fica. O uso deste sistema flex\u00edvel permite otimizar a efici\u00eancia do processo de design, tornando o projeto equilibrado e coeso ao longo de todas as p\u00e1ginas do website, programa ou aplica\u00e7\u00e3o.<\/p>

\u00a0<\/p>

Nesta varia\u00e7\u00e3o existem duas categorias para a cria\u00e7\u00e3o de uma p\u00e1gina web, o Design Responsivo e o Design Adaptativo. A diferen\u00e7a entre estas duas varia\u00e7\u00f5es est\u00e1 na forma como \u00e9 solucionado o \u201cproblema\u201d da varia\u00e7\u00e3o de ecr\u00e3s.<\/p>

\u00a0<\/p>

No Design Responsivo, o conte\u00fado ir\u00e1 seguir de maneira fluida o tamanho dos ecr\u00e3s, utilizando o reposicionamento dos \u201cblocos\u201d criados, e \u00e9 fundamental para quem cria\/programa a p\u00e1gina web, definir quais altera\u00e7\u00f5es e onde as altera\u00e7\u00f5es ir\u00e3o acontecer usando uma das caracter\u00edsticas da visualiza\u00e7\u00e3o do conte\u00fado (exibi\u00e7\u00e3o, largura, altura). Na teoria este processo torna-se mais complexo pois exige um conhecimento mais pormenorizado e um conhecimento das regras mais aprofundado. No fundo \u00e9 aconselhado usar apenas na cria\u00e7\u00e3o de novos designer.<\/p>

\u00a0<\/p>

No Design Adaptativo a compreens\u00e3o e a maneira de aplicar \u00e9 mais l\u00f3gica e mais \u201cf\u00e1cil\u201d, \u00e9 t\u00e3o simples como, se temos A apresentamos A1, se passarmos para B temos A2. Ou seja, para cada tamanho teremos um designer pr\u00f3prio da mesma p\u00e1gina.<\/p>

Geralmente no design adaptativo, \u00e9 importante criarmos pelo menos de 3 a 6 larguras de ecr\u00e3, para que o conte\u00fado seja apresentado da melhor maneira para o utilizador, da\u00ed a import\u00e2ncia das p\u00e1ginas responsiva.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t

\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t
<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

Design mobile-frist<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\n\t\t\t\t\t\t<\/span>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

H\u00e1 alguns anos o processo de cria\u00e7\u00e3o das p\u00e1ginas web deveriam ser criadas com o principal prop\u00f3sito de serem apresentadas apenas em ecr\u00e3s de computadores e isso fazia todo o sentido, pois os acessos eram todos feito num limite de tamanho de ecr\u00e3, mas o mundo evoluiu assim como toda a tecnologia onde as p\u00e1ginas web s\u00e3o visitadas. Desde 2014 que o principal dispositivo de acesso \u00e0s web p\u00e1gina \u00e9 o telem\u00f3vel, por isso \u00e9 que os atuais criadores de website s\u00e3o encorajados a \u201cdesenhar\u201d primeiro para uns ecr\u00e3s mais pequenos, pois o principal objetivo \u00e9 dar a melhor experiencias aos utilizadores. A constru\u00e7\u00e3o de p\u00e1ginas seguindo a ordem de mobile-frist<\/em> segue um processo f\u00e1cil sendo desenhado o conte\u00fado essencial para vers\u00f5es mobile<\/em> e depois acrescentando mais conte\u00fado consoante o ecr\u00e3 fosse crescendo.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t

\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t
<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

Tipografia responsiva<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\n\t\t\t\t\t\t<\/span>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Os designers tentam sempre atenuar os problemas com a tipografia nesta nova era de v\u00e1rios dispositivos com ecr\u00e3s. Os defensores do design responsivo planearam e desenvolveram p\u00e1ginas web onde o conte\u00fado se ajusta ao ecr\u00e3 do dispositivo. Existem duas formas de abordar esta quest\u00e3o: a primeira chamada \u201cliquid design\u201d em que a tipografia apenas se ajusta ao tamanho ecr\u00e3; a segunda, \u201cadaptive design\u201d que vai se ajustando com a medida do ecr\u00e3 com tamanhos diferentes, previamente escolhidos na parte da programa\u00e7\u00e3o do mesmo, usando os chamados \u201c@media query\u201d.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t

\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t
<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

Experi\u00eancia do usu\u00e1rio<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\n\t\t\t\t\t\t<\/span>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

O principal objetivo do web design responsivo \u00e9 oferecer ao utilizador a melhor experi\u00eancia poss\u00edvel na navega\u00e7\u00e3o dos sites desenhados. Muitas das vezes o que acontece \u00e9 quase a cria\u00e7\u00e3o de duas p\u00e1ginas para o mesmo website pois a experi\u00eancia que existe no mobile nunca ser\u00e1 igual a uma experi\u00eancia da navega\u00e7\u00e3o num site no desktop, pois a maneira como \u00e9 feita a intera\u00e7\u00e3o no site \u00e9 diferente.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t

\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

A constru\u00e7\u00e3o de um web design tem muitas outras quest\u00f5es, por isso deve ser um trabalho para uma equipa completa, e n\u00f3s na BOOMER temos pessoas com o\u00a0know how<\/em>\u00a0e experiencia de anos que ajudam a encontrar as melhores solu\u00e7\u00f5es para dar aos seus clientes a melhor experiencia.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"

Com a chegada da internet e com a variedade de ecr\u00e3s, o uso de sistema de grelha teve uma maior presen\u00e7a na web. O sistema de grelha j\u00e1 era utilizado nos sites, mas s\u00f3 mais recentemente \u00e9 que a utiliza\u00e7\u00e3o de sistemas como o Bootstrap come\u00e7aram a ser mais utilizados.<\/p>\n","protected":false},"author":2,"featured_media":13551,"comment_status":"open","ping_status":"open","sticky":false,"template":"elementor_theme","format":"standard","meta":{"footnotes":""},"categories":[126,98],"tags":[131,130,197,198,140,154,151,139,148,133,132,223,229],"class_list":["post-13550","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-desenvolvimento-web","category-design","tag-agencia-digital","tag-agenciademarketing","tag-boomer","tag-boomer-academy","tag-branding","tag-design","tag-gestaoredesosciais","tag-marca","tag-marketingdigital","tag-redessociais","tag-vila-nova-de-famalicao","tag-webdesign","tag-webdesign-responsivo"],"yoast_head":"\nWebDesign Responsive - BOOMER<\/title>\n<meta name=\"description\" content=\"No Design Responsivo, o conte\u00fado ir\u00e1 seguir de maneira fluida o tamanho dos ecr\u00e3s, utilizando o reposicionamento dos \u201cblocos\u201d criados, e...\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/boomer.pt\/raiodoblog\/webdesign-responsive\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"WebDesign Responsive - BOOMER\" \/>\n<meta property=\"og:description\" content=\"No Design Responsivo, o conte\u00fado ir\u00e1 seguir de maneira fluida o tamanho dos ecr\u00e3s, utilizando o reposicionamento dos \u201cblocos\u201d criados, e...\" \/>\n<meta property=\"og:url\" content=\"https:\/\/boomer.pt\/raiodoblog\/webdesign-responsive\/\" \/>\n<meta property=\"og:site_name\" content=\"BOOMER\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/boomer.pt\" \/>\n<meta property=\"article:published_time\" content=\"2024-11-04T09:01:38+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/boomer.pt\/raiodoblog\/wp-content\/uploads\/2022\/10\/w39_WebResponsivo.png\" \/>\n\t<meta property=\"og:image:width\" content=\"2001\" \/>\n\t<meta property=\"og:image:height\" content=\"1001\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Pedro Santos\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Pedro Santos\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/boomer.pt\/raiodoblog\/webdesign-responsive\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/boomer.pt\/raiodoblog\/webdesign-responsive\/\"},\"author\":{\"name\":\"Pedro Santos\",\"@id\":\"https:\/\/boomer.pt\/raiodoblog\/#\/schema\/person\/95ab929bda16e84d1e2383c7934138a5\"},\"headline\":\"WebDesign Responsive\",\"datePublished\":\"2024-11-04T09:01:38+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/boomer.pt\/raiodoblog\/webdesign-responsive\/\"},\"wordCount\":862,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/boomer.pt\/raiodoblog\/#organization\"},\"image\":{\"@id\":\"https:\/\/boomer.pt\/raiodoblog\/webdesign-responsive\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/boomer.pt\/raiodoblog\/wp-content\/uploads\/2022\/10\/w39_WebResponsivo.png\",\"keywords\":[\"agencia digital\",\"agenciademarketing\",\"Boomer\",\"Boomer Academy\",\"branding\",\"design\",\"gestaoredesosciais\",\"marca\",\"marketingdigital\",\"redessociais\",\"vila nova de famalicao\",\"webdesign\",\"Webdesign responsivo\"],\"articleSection\":[\"Desenvolvimento Web\",\"Design Gr\u00e1fico\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/boomer.pt\/raiodoblog\/webdesign-responsive\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/boomer.pt\/raiodoblog\/webdesign-responsive\/\",\"url\":\"https:\/\/boomer.pt\/raiodoblog\/webdesign-responsive\/\",\"name\":\"WebDesign Responsive - BOOMER\",\"isPartOf\":{\"@id\":\"https:\/\/boomer.pt\/raiodoblog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/boomer.pt\/raiodoblog\/webdesign-responsive\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/boomer.pt\/raiodoblog\/webdesign-responsive\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/boomer.pt\/raiodoblog\/wp-content\/uploads\/2022\/10\/w39_WebResponsivo.png\",\"datePublished\":\"2024-11-04T09:01:38+00:00\",\"description\":\"No Design Responsivo, o conte\u00fado ir\u00e1 seguir de maneira fluida o tamanho dos ecr\u00e3s, utilizando o reposicionamento dos \u201cblocos\u201d criados, e...\",\"breadcrumb\":{\"@id\":\"https:\/\/boomer.pt\/raiodoblog\/webdesign-responsive\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/boomer.pt\/raiodoblog\/webdesign-responsive\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/boomer.pt\/raiodoblog\/webdesign-responsive\/#primaryimage\",\"url\":\"https:\/\/boomer.pt\/raiodoblog\/wp-content\/uploads\/2022\/10\/w39_WebResponsivo.png\",\"contentUrl\":\"https:\/\/boomer.pt\/raiodoblog\/wp-content\/uploads\/2022\/10\/w39_WebResponsivo.png\",\"width\":2001,\"height\":1001,\"caption\":\"w39_WebResponsivo\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/boomer.pt\/raiodoblog\/webdesign-responsive\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"In\u00edcio\",\"item\":\"https:\/\/boomer.pt\/raiodoblog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"WebDesign Responsive\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/boomer.pt\/raiodoblog\/#website\",\"url\":\"https:\/\/boomer.pt\/raiodoblog\/\",\"name\":\"BOOMER\",\"description\":\"Brand & Digital Agency\",\"publisher\":{\"@id\":\"https:\/\/boomer.pt\/raiodoblog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/boomer.pt\/raiodoblog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/boomer.pt\/raiodoblog\/#organization\",\"name\":\"BOOMER\",\"url\":\"https:\/\/boomer.pt\/raiodoblog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/boomer.pt\/raiodoblog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/boomer.pt\/raiodoblog\/wp-content\/uploads\/2022\/10\/BoomerLogo-2.svg\",\"contentUrl\":\"https:\/\/boomer.pt\/raiodoblog\/wp-content\/uploads\/2022\/10\/BoomerLogo-2.svg\",\"width\":154,\"height\":40,\"caption\":\"BOOMER\"},\"image\":{\"@id\":\"https:\/\/boomer.pt\/raiodoblog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/boomer.pt\",\"https:\/\/www.instagram.com\/boomerpt\/\",\"https:\/\/www.linkedin.com\/company\/2641069\/admin\/\",\"https:\/\/www.youtube.com\/channel\/UCJ4-FswWDdO5i1UVdIUqtGw\/feed\",\"https:\/\/www.behance.net\/boomer_pt\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/boomer.pt\/raiodoblog\/#\/schema\/person\/95ab929bda16e84d1e2383c7934138a5\",\"name\":\"Pedro Santos\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/boomer.pt\/raiodoblog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/29064e2ffd89dbe09bcc4ffc9ab2cbe0342db9e454b72b522f0d5852f58417eb?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/29064e2ffd89dbe09bcc4ffc9ab2cbe0342db9e454b72b522f0d5852f58417eb?s=96&d=mm&r=g\",\"caption\":\"Pedro Santos\"},\"description\":\"Designer\",\"url\":\"https:\/\/boomer.pt\/raiodoblog\/author\/pedro-santos\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"WebDesign Responsive - BOOMER","description":"No Design Responsivo, o conte\u00fado ir\u00e1 seguir de maneira fluida o tamanho dos ecr\u00e3s, utilizando o reposicionamento dos \u201cblocos\u201d criados, e...","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:\/\/boomer.pt\/raiodoblog\/webdesign-responsive\/","og_locale":"en_US","og_type":"article","og_title":"WebDesign Responsive - BOOMER","og_description":"No Design Responsivo, o conte\u00fado ir\u00e1 seguir de maneira fluida o tamanho dos ecr\u00e3s, utilizando o reposicionamento dos \u201cblocos\u201d criados, e...","og_url":"https:\/\/boomer.pt\/raiodoblog\/webdesign-responsive\/","og_site_name":"BOOMER","article_publisher":"https:\/\/www.facebook.com\/boomer.pt","article_published_time":"2024-11-04T09:01:38+00:00","og_image":[{"width":2001,"height":1001,"url":"https:\/\/boomer.pt\/raiodoblog\/wp-content\/uploads\/2022\/10\/w39_WebResponsivo.png","type":"image\/png"}],"author":"Pedro Santos","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Pedro Santos","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/boomer.pt\/raiodoblog\/webdesign-responsive\/#article","isPartOf":{"@id":"https:\/\/boomer.pt\/raiodoblog\/webdesign-responsive\/"},"author":{"name":"Pedro Santos","@id":"https:\/\/boomer.pt\/raiodoblog\/#\/schema\/person\/95ab929bda16e84d1e2383c7934138a5"},"headline":"WebDesign Responsive","datePublished":"2024-11-04T09:01:38+00:00","mainEntityOfPage":{"@id":"https:\/\/boomer.pt\/raiodoblog\/webdesign-responsive\/"},"wordCount":862,"commentCount":0,"publisher":{"@id":"https:\/\/boomer.pt\/raiodoblog\/#organization"},"image":{"@id":"https:\/\/boomer.pt\/raiodoblog\/webdesign-responsive\/#primaryimage"},"thumbnailUrl":"https:\/\/boomer.pt\/raiodoblog\/wp-content\/uploads\/2022\/10\/w39_WebResponsivo.png","keywords":["agencia digital","agenciademarketing","Boomer","Boomer Academy","branding","design","gestaoredesosciais","marca","marketingdigital","redessociais","vila nova de famalicao","webdesign","Webdesign responsivo"],"articleSection":["Desenvolvimento Web","Design Gr\u00e1fico"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/boomer.pt\/raiodoblog\/webdesign-responsive\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/boomer.pt\/raiodoblog\/webdesign-responsive\/","url":"https:\/\/boomer.pt\/raiodoblog\/webdesign-responsive\/","name":"WebDesign Responsive - BOOMER","isPartOf":{"@id":"https:\/\/boomer.pt\/raiodoblog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/boomer.pt\/raiodoblog\/webdesign-responsive\/#primaryimage"},"image":{"@id":"https:\/\/boomer.pt\/raiodoblog\/webdesign-responsive\/#primaryimage"},"thumbnailUrl":"https:\/\/boomer.pt\/raiodoblog\/wp-content\/uploads\/2022\/10\/w39_WebResponsivo.png","datePublished":"2024-11-04T09:01:38+00:00","description":"No Design Responsivo, o conte\u00fado ir\u00e1 seguir de maneira fluida o tamanho dos ecr\u00e3s, utilizando o reposicionamento dos \u201cblocos\u201d criados, e...","breadcrumb":{"@id":"https:\/\/boomer.pt\/raiodoblog\/webdesign-responsive\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/boomer.pt\/raiodoblog\/webdesign-responsive\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/boomer.pt\/raiodoblog\/webdesign-responsive\/#primaryimage","url":"https:\/\/boomer.pt\/raiodoblog\/wp-content\/uploads\/2022\/10\/w39_WebResponsivo.png","contentUrl":"https:\/\/boomer.pt\/raiodoblog\/wp-content\/uploads\/2022\/10\/w39_WebResponsivo.png","width":2001,"height":1001,"caption":"w39_WebResponsivo"},{"@type":"BreadcrumbList","@id":"https:\/\/boomer.pt\/raiodoblog\/webdesign-responsive\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"In\u00edcio","item":"https:\/\/boomer.pt\/raiodoblog\/"},{"@type":"ListItem","position":2,"name":"WebDesign Responsive"}]},{"@type":"WebSite","@id":"https:\/\/boomer.pt\/raiodoblog\/#website","url":"https:\/\/boomer.pt\/raiodoblog\/","name":"BOOMER","description":"Brand & Digital Agency","publisher":{"@id":"https:\/\/boomer.pt\/raiodoblog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/boomer.pt\/raiodoblog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/boomer.pt\/raiodoblog\/#organization","name":"BOOMER","url":"https:\/\/boomer.pt\/raiodoblog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/boomer.pt\/raiodoblog\/#\/schema\/logo\/image\/","url":"https:\/\/boomer.pt\/raiodoblog\/wp-content\/uploads\/2022\/10\/BoomerLogo-2.svg","contentUrl":"https:\/\/boomer.pt\/raiodoblog\/wp-content\/uploads\/2022\/10\/BoomerLogo-2.svg","width":154,"height":40,"caption":"BOOMER"},"image":{"@id":"https:\/\/boomer.pt\/raiodoblog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/boomer.pt","https:\/\/www.instagram.com\/boomerpt\/","https:\/\/www.linkedin.com\/company\/2641069\/admin\/","https:\/\/www.youtube.com\/channel\/UCJ4-FswWDdO5i1UVdIUqtGw\/feed","https:\/\/www.behance.net\/boomer_pt"]},{"@type":"Person","@id":"https:\/\/boomer.pt\/raiodoblog\/#\/schema\/person\/95ab929bda16e84d1e2383c7934138a5","name":"Pedro Santos","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/boomer.pt\/raiodoblog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/29064e2ffd89dbe09bcc4ffc9ab2cbe0342db9e454b72b522f0d5852f58417eb?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/29064e2ffd89dbe09bcc4ffc9ab2cbe0342db9e454b72b522f0d5852f58417eb?s=96&d=mm&r=g","caption":"Pedro Santos"},"description":"Designer","url":"https:\/\/boomer.pt\/raiodoblog\/author\/pedro-santos\/"}]}},"_links":{"self":[{"href":"https:\/\/boomer.pt\/raiodoblog\/wp-json\/wp\/v2\/posts\/13550","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/boomer.pt\/raiodoblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/boomer.pt\/raiodoblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/boomer.pt\/raiodoblog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/boomer.pt\/raiodoblog\/wp-json\/wp\/v2\/comments?post=13550"}],"version-history":[{"count":1,"href":"https:\/\/boomer.pt\/raiodoblog\/wp-json\/wp\/v2\/posts\/13550\/revisions"}],"predecessor-version":[{"id":26172,"href":"https:\/\/boomer.pt\/raiodoblog\/wp-json\/wp\/v2\/posts\/13550\/revisions\/26172"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/boomer.pt\/raiodoblog\/wp-json\/wp\/v2\/media\/13551"}],"wp:attachment":[{"href":"https:\/\/boomer.pt\/raiodoblog\/wp-json\/wp\/v2\/media?parent=13550"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/boomer.pt\/raiodoblog\/wp-json\/wp\/v2\/categories?post=13550"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/boomer.pt\/raiodoblog\/wp-json\/wp\/v2\/tags?post=13550"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}