{"id":1304,"date":"2022-04-04T18:08:42","date_gmt":"2022-04-04T18:08:42","guid":{"rendered":"https:\/\/appliedartand.design\/lj\/?p=1304"},"modified":"2022-04-04T18:08:42","modified_gmt":"2022-04-04T18:08:42","slug":"example-of-responsive-design","status":"publish","type":"post","link":"https:\/\/appliedartand.design\/lj\/2022\/04\/04\/example-of-responsive-design\/","title":{"rendered":"Example of responsive design"},"content":{"rendered":"\n<p>I was trying to figure out what to post about this week when I came across a great example of responsive web design via Abduzeedo. This project comes from Thought &amp; Found, an agency based in Australia, and the website is for KGM: an electrical contractor.<\/p>\n\n\n\n<!--more-->\n\n\n\n<p>Notice how the site&#8217;s layout expands and collapses depending on the size of your browser. For mobile devices, there is a single-column layout in place. When you stretch the browser, eventually, that turns into two columns. Also, the navigation menu moves from the top of the header to the switch places with the masthead once the screen is wide enough.<\/p>\n\n\n\n<p>These are just a couple of things I saw that have come up in the challenges this week. If you feel like browsing <a href=\"https:\/\/kgmelectrical.com.au\/\" data-type=\"URL\" data-id=\"https:\/\/kgmelectrical.com.au\/\">their website<\/a>, see if you can find other techniques that we&#8217;ve gone over in this class.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"545\" src=\"https:\/\/appliedartand.design\/lj\/wp-content\/uploads\/2022\/04\/Screen-Shot-2022-04-04-at-11.01.45-AM-1024x545.png\" alt=\"\" class=\"wp-image-1307\" srcset=\"https:\/\/appliedartand.design\/lj\/wp-content\/uploads\/2022\/04\/Screen-Shot-2022-04-04-at-11.01.45-AM-1024x545.png 1024w, https:\/\/appliedartand.design\/lj\/wp-content\/uploads\/2022\/04\/Screen-Shot-2022-04-04-at-11.01.45-AM-300x160.png 300w, https:\/\/appliedartand.design\/lj\/wp-content\/uploads\/2022\/04\/Screen-Shot-2022-04-04-at-11.01.45-AM-768x409.png 768w, https:\/\/appliedartand.design\/lj\/wp-content\/uploads\/2022\/04\/Screen-Shot-2022-04-04-at-11.01.45-AM-1200x639.png 1200w, https:\/\/appliedartand.design\/lj\/wp-content\/uploads\/2022\/04\/Screen-Shot-2022-04-04-at-11.01.45-AM.png 1266w\" sizes=\"auto, (max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px\" \/><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>I was trying to figure out what to post about this week when I came across a great example of responsive web design via Abduzeedo. This project comes from Thought &amp; Found, an agency based in Australia, and the website is for KGM: an electrical contractor.<\/p>\n","protected":false},"author":51,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[178],"tags":[],"class_list":["post-1304","post","type-post","status-publish","format-standard","hentry","category-aad-086-sp22"],"_links":{"self":[{"href":"https:\/\/appliedartand.design\/lj\/wp-json\/wp\/v2\/posts\/1304","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/appliedartand.design\/lj\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/appliedartand.design\/lj\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/appliedartand.design\/lj\/wp-json\/wp\/v2\/users\/51"}],"replies":[{"embeddable":true,"href":"https:\/\/appliedartand.design\/lj\/wp-json\/wp\/v2\/comments?post=1304"}],"version-history":[{"count":1,"href":"https:\/\/appliedartand.design\/lj\/wp-json\/wp\/v2\/posts\/1304\/revisions"}],"predecessor-version":[{"id":1308,"href":"https:\/\/appliedartand.design\/lj\/wp-json\/wp\/v2\/posts\/1304\/revisions\/1308"}],"wp:attachment":[{"href":"https:\/\/appliedartand.design\/lj\/wp-json\/wp\/v2\/media?parent=1304"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/appliedartand.design\/lj\/wp-json\/wp\/v2\/categories?post=1304"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/appliedartand.design\/lj\/wp-json\/wp\/v2\/tags?post=1304"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}