{"id":2832,"date":"2013-11-28T13:20:19","date_gmt":"2013-11-28T15:20:19","guid":{"rendered":"https:\/\/www.kadunew.com\/blog\/?p=2832"},"modified":"2015-05-08T19:30:59","modified_gmt":"2015-05-08T21:30:59","slug":"melhoria-progressiva-e-mobile-first","status":"publish","type":"post","link":"https:\/\/www.kadunew.com\/blog\/web-design\/melhoria-progressiva-e-mobile-first","title":{"rendered":"Melhoria Progressiva e Mobile First: Dupla Perfeita"},"content":{"rendered":"
\"Melhoria<\/a>
Melhoria progressiva e Mobile First a combina\u00e7\u00e3o perfeita<\/figcaption><\/figure>\n

Quando falamos em melhoria progressiva<\/strong> (Progressive Enhancement) estamos falando de uma estrat\u00e9gia utilizada no desenvolvimento de sites. A cria\u00e7\u00e3o do site acontece em camadas. Voc\u00ea come\u00e7a desenvolvendo para dispositivos e navegadores com recursos mais limitados depois vai progredindo para os dispositivos e navegadores com mais recursos.<\/p>\n

Melhoria Progressiva<\/h2>\n

Inicialmente todos podem ver<\/strong> e usar o conte\u00fado. Em um outro n\u00edvel, aqueles com navegadores melhores, por exemplo, conseguem funcionalidades adicionais de estilo e interatividade que aprimoram a experi\u00eancia do usu\u00e1rio.<\/p>\n

Nessa etapa foque no conte\u00fado e tamb\u00e9m em uma marca\u00e7\u00e3o sem\u00e2ntica. O Principal objetivo aqui \u00e9 criar um conte\u00fado perfeitamente estruturado. Lembre, monte sua marca\u00e7\u00e3o pensando em Melhoria Progressiva no HTML<\/a> tamb\u00e9m.<\/p>\n

Depois que voc\u00ea j\u00e1 fez o b\u00e1sico adicione uma camada de apresenta\u00e7\u00e3o usando Melhoria Progressiva no CSS<\/a>. Logo ap\u00f3s partimos para a camada de comportamento utilizando JavaScript.<\/p>\n

\"Melhoria<\/a>
Exemplo de Melhoria Progressiva<\/figcaption><\/figure>\n

N\u00e3o presuma que o navegador dos usu\u00e1rios dar\u00e1 suporte a esses recursos, entretanto, se der os visitantes do seu site ter\u00e3o uma melhor experi\u00eancia. Primeiro devemos pensar nos navegadores e dispositivos menos capazes.<\/p>\n

O objetivo ao utilizar essa t\u00e9cnica \u00e9 primeiro pensar nos dispositivos limitados<\/strong> e partindo para os dispositivos menos limitados. O que muitos desenvolvedores e designers fazem \u00e9 justamente o contr\u00e1rio, come\u00e7am projetando seus sites para telas grandes, navegadores cheio de recursos, uma internet r\u00e1pida, etc. e s\u00f3 depois pensam nos outros dispositivos que s\u00e3o limitados em tamanho, em velocidade de conex\u00e3o, etc.<\/p>\n

Agora, voc\u00ea sabe o que acontece? Todos os recursos que foram adicionados pelo desenvolvedor come\u00e7am a ser retirados. Isso \u00e9 retrabalho. Sem contar que utilizando esta estrat\u00e9gia, conhecida como desktop-first<\/strong>, de fazer primeiro para o dispositivo maior e depois para o menor voc\u00ea n\u00e3o escapa da sobreposi\u00e7\u00e3o de regras no seu CSS.<\/p>\n

A melhoria progressiva quebra essa pr\u00e1tica, ou seja, primeiro pensamos e criamos para os acessos mais limitados e vamos melhorando progressivamente.<\/p>\n

Mobile First<\/h2>\n

Mobile First \u00e9 um exemplo de uso da melhoria progressiva, criamos o site pensando primeiro no mobile<\/strong> para depois pensar em como o site vai ficar no desktop. Uma boa pr\u00e1tica.<\/p>\n

Criar primeiro para Desktop, que n\u00e3o tem restri\u00e7\u00f5es, e tentar limitar depois<\/strong> para o mobile \u00e9 uma p\u00e9ssima estrat\u00e9gia. Um computador Desktop \u00e9 bem menos restrito, ent\u00e3o colocamos muito conte\u00fado, muitos scripts, espa\u00e7os gigantes entre o conte\u00fado… Depois adaptar isso tudo em uma tela menor \u00e9 uma briga.<\/p>\n

Conclus\u00e3o<\/h2>\n

A maior diferen\u00e7a entre um dispositivo m\u00f3vel e um Desktop \u00e9 o tamanho da \u00e1era de conte\u00fado<\/strong>. Em um dispositivo m\u00f3vel cabe menos informa\u00e7\u00e3o que em um computador desktop. Dispositivo m\u00f3vel tem touch screen, tela menor, processamento mais lento… Perceba quanta limita\u00e7\u00e3o tem um dispositivo m\u00f3vel. Uma pergunta, n\u00e3o \u00e9 mais f\u00e1cil come\u00e7ar o site pensando nas restri\u00e7\u00f5es dos dispositivos m\u00f3veis? SIM! Claro que \u00e9.<\/p>\n

E acredite, fazer Mobile First \u00e9 bem mais complexo, j\u00e1 que voc\u00ea tem que atingir o mesmo objetivo ( uma venda, informar..) do design da tela de um Desktop. A vantagem de pensar primeiro no m\u00f3bile<\/strong> \u00e9 que no momento que voc\u00ea estiver fazendo o design voc\u00ea vai focar bem mais no conte\u00fado, fato!<\/p>\n

Curta a p\u00e1gina do blog kadunew<\/a> no Facebook. Siga-me no Twitter: @kadunew<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"

Quando falamos em melhoria progressiva (Progressive Enhancement) estamos falando de uma estrat\u00e9gia utilizada no desenvolvimento de sites. A cria\u00e7\u00e3o do site acontece em camadas. Voc\u00ea come\u00e7a desenvolvendo para dispositivos e navegadores com recursos mais limitados depois vai progredindo para os dispositivos e navegadores com mais recursos. Melhoria Progressiva Inicialmente todos podem ver e usar o […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[28],"tags":[],"class_list":["post-2832","post","type-post","status-publish","format-standard","hentry","category-web-design"],"yoast_head":"\nMelhoria Progressiva e Mobile First: Dupla Perfeita<\/title>\n<meta name=\"description\" content=\"Melhoria progressiva \u00e9 uma t\u00e9cnica de desenvolvimento web que inicia projetos pensando nos usu\u00e1rios com recursos limitados.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.kadunew.com\/blog\/web-design\/melhoria-progressiva-e-mobile-first\" \/>\n<meta property=\"og:locale\" content=\"pt_BR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Melhoria Progressiva e Mobile First: Dupla Perfeita\" \/>\n<meta property=\"og:description\" content=\"Melhoria progressiva \u00e9 uma t\u00e9cnica de desenvolvimento web que inicia projetos pensando nos usu\u00e1rios com recursos limitados.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.kadunew.com\/blog\/web-design\/melhoria-progressiva-e-mobile-first\" \/>\n<meta property=\"og:site_name\" content=\"KADUNEW\" \/>\n<meta property=\"article:published_time\" content=\"2013-11-28T15:20:19+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2015-05-08T21:30:59+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.kadunew.com\/blog\/wp-content\/uploads\/2013\/11\/melhoria-progressiva-mobilefirst.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"770\" \/>\n\t<meta property=\"og:image:height\" content=\"300\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Kadu Oliveira\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Kadu Oliveira\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. tempo de leitura\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.kadunew.com\/blog\/web-design\/melhoria-progressiva-e-mobile-first\",\"url\":\"https:\/\/www.kadunew.com\/blog\/web-design\/melhoria-progressiva-e-mobile-first\",\"name\":\"Melhoria Progressiva e Mobile First: Dupla Perfeita\",\"isPartOf\":{\"@id\":\"https:\/\/www.kadunew.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.kadunew.com\/blog\/web-design\/melhoria-progressiva-e-mobile-first#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.kadunew.com\/blog\/web-design\/melhoria-progressiva-e-mobile-first#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.kadunew.com\/blog\/wp-content\/uploads\/2013\/11\/melhoria-progressiva-mobilefirst.jpg\",\"datePublished\":\"2013-11-28T15:20:19+00:00\",\"dateModified\":\"2015-05-08T21:30:59+00:00\",\"author\":{\"@id\":\"https:\/\/www.kadunew.com\/blog\/#\/schema\/person\/07b2297c4825efbd1e9f2a1018926b05\"},\"description\":\"Melhoria progressiva \u00e9 uma t\u00e9cnica de desenvolvimento web que inicia projetos pensando nos usu\u00e1rios com recursos limitados.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.kadunew.com\/blog\/web-design\/melhoria-progressiva-e-mobile-first#breadcrumb\"},\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.kadunew.com\/blog\/web-design\/melhoria-progressiva-e-mobile-first\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\/\/www.kadunew.com\/blog\/web-design\/melhoria-progressiva-e-mobile-first#primaryimage\",\"url\":\"https:\/\/www.kadunew.com\/blog\/wp-content\/uploads\/2013\/11\/melhoria-progressiva-mobilefirst.jpg\",\"contentUrl\":\"https:\/\/www.kadunew.com\/blog\/wp-content\/uploads\/2013\/11\/melhoria-progressiva-mobilefirst.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.kadunew.com\/blog\/web-design\/melhoria-progressiva-e-mobile-first#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.kadunew.com\/blog\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Web Design\",\"item\":\"https:\/\/www.kadunew.com\/blog\/category\/web-design\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Melhoria Progressiva e Mobile First: Dupla Perfeita\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.kadunew.com\/blog\/#website\",\"url\":\"https:\/\/www.kadunew.com\/blog\/\",\"name\":\"KADUNEW\",\"description\":\"Artigos sobre Front-End e Programa\u00e7\u00e3o web\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.kadunew.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pt-BR\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.kadunew.com\/blog\/#\/schema\/person\/07b2297c4825efbd1e9f2a1018926b05\",\"name\":\"Kadu Oliveira\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\/\/www.kadunew.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/780660fded589936b30467c54c99d51a?s=96&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/780660fded589936b30467c54c99d51a?s=96&r=g\",\"caption\":\"Kadu Oliveira\"},\"sameAs\":[\"https:\/\/www.kadunew.com\/blog\"],\"url\":\"https:\/\/www.kadunew.com\/blog\/author\/admin\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Melhoria Progressiva e Mobile First: Dupla Perfeita","description":"Melhoria progressiva \u00e9 uma t\u00e9cnica de desenvolvimento web que inicia projetos pensando nos usu\u00e1rios com recursos limitados.","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:\/\/www.kadunew.com\/blog\/web-design\/melhoria-progressiva-e-mobile-first","og_locale":"pt_BR","og_type":"article","og_title":"Melhoria Progressiva e Mobile First: Dupla Perfeita","og_description":"Melhoria progressiva \u00e9 uma t\u00e9cnica de desenvolvimento web que inicia projetos pensando nos usu\u00e1rios com recursos limitados.","og_url":"https:\/\/www.kadunew.com\/blog\/web-design\/melhoria-progressiva-e-mobile-first","og_site_name":"KADUNEW","article_published_time":"2013-11-28T15:20:19+00:00","article_modified_time":"2015-05-08T21:30:59+00:00","og_image":[{"width":770,"height":300,"url":"https:\/\/www.kadunew.com\/blog\/wp-content\/uploads\/2013\/11\/melhoria-progressiva-mobilefirst.jpg","type":"image\/jpeg"}],"author":"Kadu Oliveira","twitter_misc":{"Escrito por":"Kadu Oliveira","Est. tempo de leitura":"3 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.kadunew.com\/blog\/web-design\/melhoria-progressiva-e-mobile-first","url":"https:\/\/www.kadunew.com\/blog\/web-design\/melhoria-progressiva-e-mobile-first","name":"Melhoria Progressiva e Mobile First: Dupla Perfeita","isPartOf":{"@id":"https:\/\/www.kadunew.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.kadunew.com\/blog\/web-design\/melhoria-progressiva-e-mobile-first#primaryimage"},"image":{"@id":"https:\/\/www.kadunew.com\/blog\/web-design\/melhoria-progressiva-e-mobile-first#primaryimage"},"thumbnailUrl":"https:\/\/www.kadunew.com\/blog\/wp-content\/uploads\/2013\/11\/melhoria-progressiva-mobilefirst.jpg","datePublished":"2013-11-28T15:20:19+00:00","dateModified":"2015-05-08T21:30:59+00:00","author":{"@id":"https:\/\/www.kadunew.com\/blog\/#\/schema\/person\/07b2297c4825efbd1e9f2a1018926b05"},"description":"Melhoria progressiva \u00e9 uma t\u00e9cnica de desenvolvimento web que inicia projetos pensando nos usu\u00e1rios com recursos limitados.","breadcrumb":{"@id":"https:\/\/www.kadunew.com\/blog\/web-design\/melhoria-progressiva-e-mobile-first#breadcrumb"},"inLanguage":"pt-BR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.kadunew.com\/blog\/web-design\/melhoria-progressiva-e-mobile-first"]}]},{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/www.kadunew.com\/blog\/web-design\/melhoria-progressiva-e-mobile-first#primaryimage","url":"https:\/\/www.kadunew.com\/blog\/wp-content\/uploads\/2013\/11\/melhoria-progressiva-mobilefirst.jpg","contentUrl":"https:\/\/www.kadunew.com\/blog\/wp-content\/uploads\/2013\/11\/melhoria-progressiva-mobilefirst.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.kadunew.com\/blog\/web-design\/melhoria-progressiva-e-mobile-first#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.kadunew.com\/blog"},{"@type":"ListItem","position":2,"name":"Web Design","item":"https:\/\/www.kadunew.com\/blog\/category\/web-design"},{"@type":"ListItem","position":3,"name":"Melhoria Progressiva e Mobile First: Dupla Perfeita"}]},{"@type":"WebSite","@id":"https:\/\/www.kadunew.com\/blog\/#website","url":"https:\/\/www.kadunew.com\/blog\/","name":"KADUNEW","description":"Artigos sobre Front-End e Programa\u00e7\u00e3o web","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.kadunew.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pt-BR"},{"@type":"Person","@id":"https:\/\/www.kadunew.com\/blog\/#\/schema\/person\/07b2297c4825efbd1e9f2a1018926b05","name":"Kadu Oliveira","image":{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/www.kadunew.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/780660fded589936b30467c54c99d51a?s=96&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/780660fded589936b30467c54c99d51a?s=96&r=g","caption":"Kadu Oliveira"},"sameAs":["https:\/\/www.kadunew.com\/blog"],"url":"https:\/\/www.kadunew.com\/blog\/author\/admin"}]}},"_links":{"self":[{"href":"https:\/\/www.kadunew.com\/blog\/wp-json\/wp\/v2\/posts\/2832"}],"collection":[{"href":"https:\/\/www.kadunew.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.kadunew.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.kadunew.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.kadunew.com\/blog\/wp-json\/wp\/v2\/comments?post=2832"}],"version-history":[{"count":20,"href":"https:\/\/www.kadunew.com\/blog\/wp-json\/wp\/v2\/posts\/2832\/revisions"}],"predecessor-version":[{"id":3863,"href":"https:\/\/www.kadunew.com\/blog\/wp-json\/wp\/v2\/posts\/2832\/revisions\/3863"}],"wp:attachment":[{"href":"https:\/\/www.kadunew.com\/blog\/wp-json\/wp\/v2\/media?parent=2832"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.kadunew.com\/blog\/wp-json\/wp\/v2\/categories?post=2832"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.kadunew.com\/blog\/wp-json\/wp\/v2\/tags?post=2832"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}