{"id":666,"date":"2013-07-01T15:32:08","date_gmt":"2013-07-01T22:32:08","guid":{"rendered":"http:\/\/www.cassandraking.net\/wordpressapp\/?p=666"},"modified":"2013-07-02T09:25:24","modified_gmt":"2013-07-02T16:25:24","slug":"get-responsive-in-a-few-short-css-codechanges-give-it-a-try","status":"publish","type":"post","link":"https:\/\/www.cassandraking.net\/wordpressapp\/get-responsive-in-a-few-short-css-codechanges-give-it-a-try\/","title":{"rendered":"Get &#8216;RESPONSIVE&#8217; In a Few Short CSS Codechanges: Give It A Try!"},"content":{"rendered":"<p>This is a followup to my previous post <a title=\"Learning how to be Responsible &amp; Responsive is Fun!\" href=\"http:\/\/www.cassandraking.net\/wordpressapp\/learning-how-to-be-responsible-responsive-is-fun\/\">Learning how to be Responsible &amp; Responsive is Fun!<\/a>.<\/p>\n<p>With this quick &#8216;Site Makeover&#8217; I wanted to demonstrate that in a few worthwhile hours of your time, you can take \u00c2\u00a0 older, non-responsive sites and make them easily accessible to \u00c2\u00a0modern viewports.<\/p>\n<p>BEFORE and AFTER (Visit <a href=\"http:\/\/law.widener.edu\/envisioning\">the deprecated Fixed-width site<\/a>\u00c2\u00a0(The original 820px fixed-width site\u00c2\u00a0<a href=\"http:\/\/law.widener.edu\/envisioning\/\">Envisioning a More Democratic Global System, fixed-width site<\/a>\u00c2\u00a0is not very friendly when viewed from tablets or mobile devices.)\u00c2\u00a0and my <a href=\"http:\/\/www.cassandraking.net\/demos\/responsive\/envisioning\/index.html\">&#8220;Makeover Edition&#8217;, the demo Responsive Version of the Site <\/a>)<div id='gallery-1' class='gallery galleryid-666 gallery-columns-3 gallery-size-thumbnail'><figure class='gallery-item'>\n\t\t\t<div class='gallery-icon landscape'>\n\t\t\t\t<a href='https:\/\/www.cassandraking.net\/wordpressapp\/get-responsive-in-a-few-short-css-codechanges-give-it-a-try\/screen-shot-2013-07-01-at-6-22-54-pm\/'><img loading=\"lazy\" decoding=\"async\" width=\"150\" height=\"150\" src=\"https:\/\/www.cassandraking.net\/wordpressapp\/wp-content\/uploads\/2013\/07\/Screen-shot-2013-07-01-at-6.22.54-PM-150x150.png\" class=\"attachment-thumbnail size-thumbnail\" alt=\"BEFORE and AFTER of Fixed-Width 820px Site Conversion to Responsive\" aria-describedby=\"gallery-1-681\" \/><\/a>\n\t\t\t<\/div>\n\t\t\t\t<figcaption class='wp-caption-text gallery-caption' id='gallery-1-681'>\n\t\t\t\tBEFORE:Fixed-Width 820px Site Conversion to Responsive\n\t\t\t\t<\/figcaption><\/figure><figure class='gallery-item'>\n\t\t\t<div class='gallery-icon portrait'>\n\t\t\t\t<a href='https:\/\/www.cassandraking.net\/wordpressapp\/get-responsive-in-a-few-short-css-codechanges-give-it-a-try\/screen-shot-2013-07-01-at-6-12-02-pm\/'><img loading=\"lazy\" decoding=\"async\" width=\"150\" height=\"150\" src=\"https:\/\/www.cassandraking.net\/wordpressapp\/wp-content\/uploads\/2013\/07\/Screen-shot-2013-07-01-at-6.12.02-PM-150x150.png\" class=\"attachment-thumbnail size-thumbnail\" alt=\"\" aria-describedby=\"gallery-1-682\" \/><\/a>\n\t\t\t<\/div>\n\t\t\t\t<figcaption class='wp-caption-text gallery-caption' id='gallery-1-682'>\n\t\t\t\tAFTER: Mobile Responsive Version\n\t\t\t\t<\/figcaption><\/figure><figure class='gallery-item'>\n\t\t\t<div class='gallery-icon portrait'>\n\t\t\t\t<a href='https:\/\/www.cassandraking.net\/wordpressapp\/get-responsive-in-a-few-short-css-codechanges-give-it-a-try\/screen-shot-2013-07-01-at-6-12-15-pm\/'><img loading=\"lazy\" decoding=\"async\" width=\"150\" height=\"150\" src=\"https:\/\/www.cassandraking.net\/wordpressapp\/wp-content\/uploads\/2013\/07\/Screen-shot-2013-07-01-at-6.12.15-PM-150x150.png\" class=\"attachment-thumbnail size-thumbnail\" alt=\"\" aria-describedby=\"gallery-1-683\" \/><\/a>\n\t\t\t<\/div>\n\t\t\t\t<figcaption class='wp-caption-text gallery-caption' id='gallery-1-683'>\n\t\t\t\tAFTER: Tablet Responsive Version\n\t\t\t\t<\/figcaption><\/figure>\n\t\t<\/div>\n<\/p>\n<p><strong>My approach:<\/strong> By adding a few media queries set at Breakpoints<strong><em> &#8216;under 320px&#8217;, &#8216;320px to 480px&#8217;, &#8216;480px to 768&#8217; <\/em><\/strong>and<em><\/em><strong><em> &#8216;larger than 960 \u00c2\u00a0or widescreen<\/em><\/strong>&#8216;, I was able to make \u00c2\u00a0this site responsive. It required the re-organization of a few html blocks of content so that hiding and revealing \u00c2\u00a0of certain elements at different viewport sizes would render content in the appropriate semantic order. I moved \u00c2\u00a0the sidebar from it&#8217;s original spot at the top of the HTML order to the bottom. I did this so that the sidebar (<em><strong>&lt;div id=&#8221;sidebar&#8221;&gt;<\/strong><\/em>) &#8212; which is viewable at 320px or larger floated to the left &#8212; collapses and displays UNDER the main div (<em><strong>&lt;div id=&#8221;main&#8221;&gt;<\/strong><\/em>). <strong><em>Remember to always design for MOBILE first<\/em> <\/strong>and in your media queries everything gets inherited from smaller (<strong><em>&#8216;320px to 480px&#8217;) <\/em><\/strong>to larger<em><\/em><strong><em> (<\/em><\/strong>\u00c2\u00a0<strong><em>larger than 960 \u00c2\u00a0or widescreen<\/em><\/strong>&#8216;)\u00c2\u00a0.<\/p>\n<p>&nbsp;<\/p>\n<p>You want to be sure you also target all your WIDTHS. convert all your widths into percentages. Be sure to use your CONTEXT width ( the container) to figure out your TARGET with (the value you are converting to percentage). Here is a <a href=\"http:\/\/alistapart.com\/article\/fluidgrids\">quick review of Context and Target<\/a> and a <a href=\"http:\/\/rqrwd.com\/\">neat calculator to help you convert quickly<\/a>.<\/p>\n<p>&nbsp;<\/p>\n<p>Since <strong>THIS IS A WORK IN PROGRESS<\/strong> more remains to be tweaked (for example, IE browsers below version 8 do not support background image scaling, so I need to add an IE specific style to target the header, footer and body background images to allow them to scale), but you can see the progress as of now by collapsing and expanding your browser window. OH, and remember: you need to add \u00c2\u00a0this little bit\u00c2\u00a0to your page, to ensure you can view it all on mobile devices.<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<pre><code class=\"html\">\n&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width&quot; \/&gt;\n<\/code><\/pre>\n<p>Also, I would suggest that you use the normalize.css \u00c2\u00a0and the\u00c2\u00a0modernizr-2.6.2-respond-1.1.0.min.js and\u00c2\u00a0jquery-1.9.1.min.js that come bundled with<a href=\"www.initializr.com\/\"> Initilizr&#8217;s HTML5 Boilerplate.<\/a> It gives you lots out of the box to make your life easier.<\/p>\n<p>I used the elements at the top as seen here:<\/p>\n<pre><code class=\"html\">\n&lt;!--&amp;#91;if lt IE 7&amp;#93;&gt; &lt;html class=&quot;no-js lt-ie9 lt-ie8 lt-ie7&quot;&gt; &lt;!&amp;#91;endif&amp;#93;--&gt;\n&lt;!--&amp;#91;if IE 7&amp;#93;&gt; &lt;html class=&quot;no-js lt-ie9 lt-ie8&quot;&gt; &lt;!&amp;#91;endif&amp;#93;--&gt;\n&lt;!--&amp;#91;if IE 8&amp;#93;&gt; &lt;html class=&quot;no-js lt-ie9&quot;&gt; &lt;!&amp;#91;endif&amp;#93;--&gt;\n&lt;!--&amp;#91;if gt IE 8&amp;#93;&gt;&lt;!--&gt;&lt;!--&lt;!&amp;#91;endif&amp;#93;--&gt;\n&lt;meta charset=&quot;utf-8&quot; \/&gt;\n&lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge,chrome=1&quot; \/&gt;\nEnvisioning a More Democratic Global System: MAIN\n&lt;meta name=&quot;description&quot; content=&quot;Envisioning a More Democratic Global System&quot; \/&gt;\n&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width&quot; \/&gt;\n&lt;link href=&quot;css\/normalize.min.css&quot; rel=&quot;stylesheet&quot; \/&gt;   &lt;link href=&quot;css\/envisioning.css&quot; rel=&quot;stylesheet&quot; \/&gt;\n&amp;nbsp;\n&lt;!--&amp;#91;if lt IE 7&amp;#93;&gt;\n\n&lt;p class=&quot;chromeframe&quot;&gt;You are using an &lt;strong&gt;outdated&lt;\/strong&gt; browser. Please &lt;a href=&quot;http:\/\/browsehappy.com\/&quot;&gt;upgrade your browser&lt;\/a&gt; or &lt;a href=&quot;http:\/\/www.google.com\/chromeframe\/?redirect=true&quot;&gt;activate Google Chrome Frame&lt;\/a&gt; to improve your experience.\n\n&lt;!&amp;#91;endif&amp;#93;--&gt;\n<\/code><\/pre>\n<p>For IE browsers I will need to fiddle with this code:<br \/>\n<pre><code class=\"html\">\n\/********************************************\nLAYOUT\n********************************************\/\ndiv#wrap {\nwidth: 100%;\nheight: 100%;\n-ms-filter:&amp;#8221;progid:DXImageTransform.Microsoft.AlphaImageLoader(src=&amp;#8217;http:www.cassandraking.net\/demos\/responsive\/envisioning\/images\/content.jpg&amp;#8217;, sizingMethod=&amp;#8217;scale&amp;#8217;)&amp;#8221;;\nfilter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=&amp;#8217;http:www.cassandraking.net\/demos\/responsive\/envisioning\/images\/content.jpg&amp;#8217;, sizingMethod=&amp;#8217;scale&amp;#8217;);\n}\n<\/code><\/pre><\/p>\n","protected":false},"excerpt":{"rendered":"<p>This is a followup to my previous post Learning how to be Responsible &amp; Responsive is Fun!. With this quick &#8216;Site Makeover&#8217; I wanted to demonstrate that in a few worthwhile hours of your time, you can take \u00c2\u00a0 older, non-responsive sites and make them easily accessible to \u00c2\u00a0modern viewports. BEFORE and AFTER (Visit the [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":685,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_exactmetrics_skip_tracking":false,"footnotes":""},"categories":[29,114,138,137,1],"tags":[142,268,149,148,139,143,278],"_links":{"self":[{"href":"https:\/\/www.cassandraking.net\/wordpressapp\/wp-json\/wp\/v2\/posts\/666"}],"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=666"}],"version-history":[{"count":27,"href":"https:\/\/www.cassandraking.net\/wordpressapp\/wp-json\/wp\/v2\/posts\/666\/revisions"}],"predecessor-version":[{"id":689,"href":"https:\/\/www.cassandraking.net\/wordpressapp\/wp-json\/wp\/v2\/posts\/666\/revisions\/689"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.cassandraking.net\/wordpressapp\/wp-json\/wp\/v2\/media\/685"}],"wp:attachment":[{"href":"https:\/\/www.cassandraking.net\/wordpressapp\/wp-json\/wp\/v2\/media?parent=666"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.cassandraking.net\/wordpressapp\/wp-json\/wp\/v2\/categories?post=666"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.cassandraking.net\/wordpressapp\/wp-json\/wp\/v2\/tags?post=666"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}