{"id":110,"date":"2013-03-11T03:30:17","date_gmt":"2013-03-10T17:30:17","guid":{"rendered":"http:\/\/www.jasonshanks.com\/?p=110"},"modified":"2013-03-14T15:27:25","modified_gmt":"2013-03-14T05:27:25","slug":"wk-3tut-2-responsive-web-design-part-1","status":"publish","type":"post","link":"https:\/\/www.jasonshanks.com\/2013\/lectures-and-tuts\/kib204-web_interface_design\/wk-3tut-2-responsive-web-design-part-1\/","title":{"rendered":"Wk 3\/Tut 2 : Responsive Web Design &#8211; Part 1"},"content":{"rendered":"<p>Responsive Web Design is a term initially coined by web designer\/developer <a href=\"http:\/\/ethanmarcotte.com\/\" title=\"Ethan Marcotte is a web designer &amp; developer who lives in Boston.\">Ethan Marcotte<\/a>. It is now a <a href=\"http:\/\/www.w3.org\/TR\/css3-mediaqueries\/\" title=\"W3C Media Queries\">W3C Candidate Recommendation<\/a>, ready to be implemented by all modern browser vendors. Following on from support in CSS2 for different media types such as <strong>screen<\/strong> and <strong>print<\/strong>, it essentially a set of additional media types based mostly on <strong>width<\/strong> (or not as widely used <strong>height<\/strong>). It could also be considered a subset of a more far-reaching movement called <a href=\"http:\/\/en.wikipedia.org\/wiki\/Progressive_enhancement\" title=\"Progressive enhancement - Wikipedia, the free encyclopedia\">Progressive enhancement<\/a> \u2013 in which all content is designed to gracefully degrade to the lowest common denominator.<\/p>\n<h2 id=\"progressionofresponsiveapproaches\">Progression of Responsive Approaches<\/h2>\n<p>Luke Wroblewski, author of <a href=\"http:\/\/www.abookapart.com\/products\/mobile-first\" title=\"A Book Apart, Mobile First\">Mobile First<\/a>, writes and speaks extensively on the subject. In <a href=\"http:\/\/www.lukew.com\/ff\/entry.asp?1514\" title=\"LukeW | Multi-Device Layout Patterns\">this<\/a> article he gives an excellent run down of the progression of responsiveness in approaches.<\/p>\n<h4 id=\"mostlyfluid\">Mostly Fluid<\/h4>\n<ul>\n<li>larger margins on big screens<\/li>\n<li>fluid grids<\/li>\n<li>images that scale<\/li>\n<li>mainly changes layout in narrowest incarnation by stacking columns (less essential information below)<\/li>\n<\/ul>\n<h4 id=\"columndrop\">Column Drop<\/h4>\n<ul>\n<li>using the same stacking column idea as Mostly Fluid but the width of each column stays mostly consistent.<\/li>\n<\/ul>\n<h4 id=\"layoutshifter\">Layout Shifter<\/h4>\n<ul>\n<li>Goes further to deliberately craft unique layouts for different screen sizes.<\/li>\n<\/ul>\n<h4 id=\"tinytweaks\">Tiny Tweaks<\/h4>\n<ul>\n<li>Not really relevant to most websites as it assumes you have a single column layout with few elements and can simply make tweaks to font sizes (larger in smallest screen for easy reading) and image layout (one per line centred in smallest screen for instance).<\/li>\n<\/ul>\n<h4 id=\"offcanvas\">Off Canvas<\/h4>\n<ul>\n<li>Move secondary or occasional use information off-screen to slide back in with various triggers.<\/li>\n<\/ul>\n<h2 id=\"choosingbreakpointstargetingrangesoforaddressingspecificviewports\">Choosing Break Points (targeting ranges of or addressing specific Viewports)<\/h2>\n<p>Rather than target specific devices, a current list of which would change monthly these days, the general idea is that you consider typical screen widths and at which points to alter your content.<\/p>\n<p>As you set up your Media Queries you must take your actual content into consideration and subjectively apply that to a loose current understanding of where the majority of devices fall in <em>perceived<\/em> screen dimensions. For instance the iPad with Retina display reches 2048&#215;1536 pixels or 264ppi, however that is an exact doubling of 1024&#215;768 at which content designed for those dimensions will appear completely normal as the iPad intuitively zooms in 200%.<\/p>\n<p>For instance, at the most basic level one could set up a break point right above the size of most smartphones:<\/p>\n<pre><code>@media (min-width: 500px){\/*selectors*\/{\/*properties*}}\r\n@media (max-width: 499px){\/*selectors*\/{\/*properties*}}\r\n<\/code><\/pre>\n<p>For more advanced possibilities check out these articles:<\/p>\n<ul>\n<li><a href=\"http:\/\/css-tricks.com\/snippets\/css\/media-queries-for-standard-devices\/\" title=\"Media Queries for Standard Devices | CSS-Tricks\">Media Queries for Standard Devices | CSS-Tricks<\/a><\/li>\n<li><a href=\"http:\/\/www.metaltoad.com\/blog\/simple-device-diagram-responsive-design-planning\" title=\"A Simple Device Diagram for Responsive Design Planning | Metal Toad Media\">A Simple Device Diagram for Responsive Design Planning | Metal Toad Media<\/a><\/li>\n<\/ul>\n<h2 id=\"whatdoyoudowiththenavigationmenu\">What do you do with the Navigation Menu?<\/h2>\n<p>Brad Frost has a great collection of <a href=\"http:\/\/bradfrostweb.com\/blog\/web\/responsive-nav-patterns\/\" title=\"Responsive Navigation Patterns\">common implementations<\/a>.<\/p>\n<h2 id=\"whatdoyoudowithtables\">What do you do with Tables?<\/h2>\n<p><a href=\"http:\/\/css-tricks.com\/responsive-data-table-roundup\/\" title=\"Responsive Data Table Roundup | CSS-Tricks\">Responsive Data Table Roundup<\/a><\/p>\n<h2 id=\"otherrwdresources\">Other RWD Resources<\/h2>\n<h3 id=\"examples:\">Examples:<\/h3>\n<ul>\n<li><a href=\"http:\/\/mediaqueri.es\/\" title=\"Media Queries\">Media Queries<\/a> &#8211; a huge gallery of sites is Media Queries<\/li>\n<\/ul>\n<h3 id=\"articles:\">Articles:<\/h3>\n<ul>\n<li><a href=\"http:\/\/alistapart.com\/article\/responsive-web-design\" title=\"Responsive Web Design \u00b7 An A List Apart Article\">Responsive Web Design \u00b7 An A List Apart Article<\/a><\/li>\n<li><a href=\"http:\/\/blog.teamtreehouse.com\/beginners-guide-to-responsive-web-design\" title=\"Beginner\u2019s Guide to Responsive Web Design - Treehouse Blog\">Beginner\u2019s Guide to Responsive Web Design &#8211; Treehouse Blog<\/a><\/li>\n<li><a href=\"http:\/\/blog.cloudfour.com\/the-ems-have-it-proportional-media-queries\" title=\"The EMs have it: Proportional Media Queries FTW! Cloud Four Blog\">The EMs have it: Proportional Media Queries FTW! Cloud Four Blog<\/a><\/li>\n<li><a href=\"http:\/\/upstatement.com\/blog\/2012\/01\/how-to-approach-a-responsive-design\/\" title=\"How to Approach a Responsive Design | Upstatement\">How to Approach a Responsive Design | Upstatement<\/a><\/li>\n<\/ul>\n<h3 id=\"boilerplates:\">Boilerplates:<\/h3>\n<ul>\n<li><a href=\"http:\/\/goldilocksapproach.com\/\" title=\"The Goldilocks Approach to Responsive Web Design\">The Goldilocks Approach to Responsive Web Design<\/a><\/li>\n<li><a href=\"http:\/\/stuffandnonsense.co.uk\/projects\/320andup\/\" title=\"320 and Up \u2018tiny screen first\u2019 responsive web design boilerplate\">320 and Up \u2018tiny screen first\u2019 responsive web design boilerplate<\/a><\/li>\n<\/ul>\n<h3 id=\"flexiblefonts:\">Flexible Fonts:<\/h3>\n<p>It&#8217;s best practice these days to use a fixed Base font size and relative proportions to this for every other declared size. This can be done through either:<\/p>\n<ul>\n<li>% &#8211; using decimal percentages is not the best choice.<\/li>\n<li>Ems &#8211; the most compatible and what brings support to IE in general when a viewer may change the font size in their browser and expect all the fonts to change proportionally. You can get caught in calculation problems though when you have multiple nested styles.<\/li>\n<li>REMs &#8211; most accurate as they always refer back to the Base Font size regardless of their positioning in nested styles. Some compatibility issues with older browsers.<\/li>\n<\/ul>\n<p>Here are 2 examples of free online tools to help with your calculations:<\/p>\n<ul>\n<li><a href=\"http:\/\/offroadcode.com\/prototypes\/rem-calculator\/\" title=\"Rem Calculator - Offroadcode.com\">Rem Calculator<\/a><\/li>\n<li><a href=\"http:\/\/pxtoem.com\/\" title=\"PZtoEM.com - PX to EM conversion made simple\">PXtoEM<\/a><\/li>\n<\/ul>\n<h3 id=\"responsivetesting:\">Responsive Testing:<\/h3>\n<ul>\n<li><a href=\"http:\/\/responsive.is\/typecast.com\" title=\"Responsive.is \u2013 Display and present responsive web designs\">Responsive.is \u2013 Display and present responsive web designs<\/a><\/li>\n<li><a href=\"http:\/\/responsivepx.com\/\" title=\"responsivepx - find that tricky breakpoint\">responsivepx &#8211; find that tricky breakpoint<\/a><\/li>\n<li><a href=\"http:\/\/responsinator.com\/\" title=\"The Responsinator\">The Responsinator<\/a><\/li>\n<li><a href=\"http:\/\/mattkersley.com\/responsive\/\" title=\"Responsive Design Testing\">Responsive Design Testing<\/a><\/li>\n<li><a href=\"http:\/\/screenqueri.es\/\" title=\"ScreenQueri.es | Pixel Perfect Responsive Design Testing Tool\">ScreenQueri.es<\/a><\/li>\n<li>Firefox 15&#8217;s <a href=\"http:\/\/paulrouget.com\/e\/devtoolsupdate\/\" title=\"Responsive Mode and Layout View in Firefox 15\">Responsive Mode<\/a><\/li>\n<\/ul>\n<hr \/>\n<h2 id=\"responsivedesignexercise-part1\">Responsive Design Exercise &#8211; Part 1<\/h2>\n<p>Either continue with your developed example from Tutorial 1 Exercise, begin a fresh page (populated by some content from your final project if you have any!), or follow along with <a href=\"http:\/\/dave.if90.net\/files\/kib204\/responsive_layouts\/responsive_layouts.zip\">Dave Wallace&#8217;s example<\/a>.<\/p>\n<p>Apply the <strong>Mostly Fluid<\/strong> approach:<\/p>\n<ul>\n<li>fluid column grids<\/li>\n<li>make all images flexible with min &amp; max widths.<\/li>\n<li>make all fonts adaptive by basing them on EMs or REMs.<\/li>\n<li>Create at least 1 Media Query and:\n<ul>\n<li>Stack at least 1 column below the main content.<\/li>\n<li>Make at least one other content change within this query.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<div id=\"themify_builder_content-110\" data-postid=\"110\" class=\"themify_builder_content themify_builder_content-110 themify_builder\">\n\n    <\/div>\n<!-- \/themify_builder_content -->","protected":false},"excerpt":{"rendered":"<p>Responsive Web Design is a term initially coined by web designer\/developer Ethan Marcotte. It is now a W3C Candidate Recommendation, ready to be implemented by all modern browser vendors. Following on from support in CSS2 for different media types such as screen and print, it essentially a set of additional media types based mostly on [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[17],"tags":[],"builder_content":"","_links":{"self":[{"href":"https:\/\/www.jasonshanks.com\/wp-json\/wp\/v2\/posts\/110"}],"collection":[{"href":"https:\/\/www.jasonshanks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.jasonshanks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.jasonshanks.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jasonshanks.com\/wp-json\/wp\/v2\/comments?post=110"}],"version-history":[{"count":5,"href":"https:\/\/www.jasonshanks.com\/wp-json\/wp\/v2\/posts\/110\/revisions"}],"predecessor-version":[{"id":119,"href":"https:\/\/www.jasonshanks.com\/wp-json\/wp\/v2\/posts\/110\/revisions\/119"}],"wp:attachment":[{"href":"https:\/\/www.jasonshanks.com\/wp-json\/wp\/v2\/media?parent=110"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jasonshanks.com\/wp-json\/wp\/v2\/categories?post=110"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jasonshanks.com\/wp-json\/wp\/v2\/tags?post=110"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}