{"id":650,"date":"2013-06-28T16:27:24","date_gmt":"2013-06-28T23:27:24","guid":{"rendered":"http:\/\/www.cassandraking.net\/wordpressapp\/?p=650"},"modified":"2013-07-01T13:42:07","modified_gmt":"2013-07-01T20:42:07","slug":"learning-how-to-be-responsible-responsive-is-fun","status":"publish","type":"post","link":"https:\/\/www.cassandraking.net\/wordpressapp\/learning-how-to-be-responsible-responsive-is-fun\/","title":{"rendered":"Learning how to be Responsible & Responsive is Fun!"},"content":{"rendered":"
\"vetclinic<\/a>
Sample responsive site with breakpoints highlighted at the top of each page with a yellow background.<\/figcaption><\/figure>\n

With the rise of both very large mega desktop screens and smaller portable devices, we as developers have a RESPONSIBILITY<\/strong><\/em> to serve up sites that display properly no matter what the device or context. With that in mind, I recently started diving into responsive web design<\/a>. (Visit my Responsive VetClinic Demo site here<\/a>) \u00c2\u00a0Initially I was OVERWHELMED by the long, long, long list of resources, sites, frameworks and tips for beginners. Here are the few resources that, as a newcomer, you will want to have in your web developer’s toolkit:<\/p>\n

RESOURCE ONE:<\/strong><\/p>\n

Buy this book!<\/strong><\/em> RESPONSIVE WEB DESIGN, by Ethan Marcotte<\/a>. Indispensable, fun to read! I read through it over \u00c2\u00a0few nights. The great feature of this book is that you can simply read it, without having to sit in front of a browser or code editor. If you are familiar with the basics of HTML and CSS, you can read this in any spare moment: train, lunch, break, etc.<\/p>\n

RESOURCE TWO:<\/strong><\/p>\n

Be sure to sit down and either create a responsive mini site or page from scratch<\/a> or convert and existing fixed-width site \u00c2\u00a0to a responsive layout. The benefit of this first step is wrapping your head around the concept of \u00c2\u00a0Progressive Enhancement:<\/a> design to be sure you an offer the content of the site for the smallest device screen first and scale up to accomodate progressively larger screens and devices. You also want to really nail down the concept of Breakpoints<\/a> and Media Queries.<\/a><\/p>\n

RESOURCE THREE:<\/strong><\/p>\n

Once you have practiced creating a simple layout from the ground up, and you have the concept of designing for mobile and scaling up as well as media queries, you can definitely simply your life with some pre-made templates. \u00c2\u00a0You can begin with either of these three frameworks depending on what you prefer: HTML5 Initializr <\/a>allows you to begin an HTML5 responsive project in a matter of minutes. The Goldilocks Approach<\/a> is another great starting point with some premade CSS and HTML files, and finally, you can use Skeleton<\/a>, it comes with both the PSDS and the HTML\/CSS to begin creating your site.<\/p>\n","protected":false},"excerpt":{"rendered":"

With the rise of both very large mega desktop screens and smaller portable devices, we as developers have a RESPONSIBILITY to serve up sites that display properly no matter what the device or context. With that in mind, I recently started diving into responsive web design. (Visit my Responsive VetClinic Demo site here) \u00c2\u00a0Initially I […]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_exactmetrics_skip_tracking":false,"_exactmetrics_sitenote_active":false,"_exactmetrics_sitenote_note":"","_exactmetrics_sitenote_category":0,"footnotes":""},"categories":[29,114,138,137,1],"tags":[142,268,141,140,139,143,278],"_links":{"self":[{"href":"https:\/\/www.cassandraking.net\/wordpressapp\/wp-json\/wp\/v2\/posts\/650"}],"collection":[{"href":"https:\/\/www.cassandraking.net\/wordpressapp\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.cassandraking.net\/wordpressapp\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.cassandraking.net\/wordpressapp\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.cassandraking.net\/wordpressapp\/wp-json\/wp\/v2\/comments?post=650"}],"version-history":[{"count":10,"href":"https:\/\/www.cassandraking.net\/wordpressapp\/wp-json\/wp\/v2\/posts\/650\/revisions"}],"predecessor-version":[{"id":660,"href":"https:\/\/www.cassandraking.net\/wordpressapp\/wp-json\/wp\/v2\/posts\/650\/revisions\/660"}],"wp:attachment":[{"href":"https:\/\/www.cassandraking.net\/wordpressapp\/wp-json\/wp\/v2\/media?parent=650"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.cassandraking.net\/wordpressapp\/wp-json\/wp\/v2\/categories?post=650"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.cassandraking.net\/wordpressapp\/wp-json\/wp\/v2\/tags?post=650"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}