{"id":3962,"date":"2017-10-15T12:31:38","date_gmt":"2017-10-15T12:31:38","guid":{"rendered":"http:\/\/b.parsons.edu\/~dejongo\/?p=3962"},"modified":"2018-01-22T15:09:31","modified_gmt":"2018-01-22T15:09:31","slug":"04-accessibility","status":"publish","type":"post","link":"http:\/\/b.parsons.edu\/~dejongo\/04-accessibility\/","title":{"rendered":"04 Building A Website"},"content":{"rendered":"<h2><a href=\"04-responsive-web-design\">Week 4<\/a><br \/>9\/28<\/h2>\n<p><strong>Responsive Design.<\/strong> The web is on display on iPhone and iPad screens to desktop computers. CSS media queries allow you to target each of these devices in one style sheet. <strong>Activity:<\/strong> Using media queries to target different devices.<\/p>\n<h2 class=\"hw\"><a href=\"04-homework\/\">Homework<\/a><\/h2>\n<\/p>\n<p class=\"close\"> 1) Design midterm to be responsive and use media queries to target different devices. 2) Publish midterm for midterm grade. <strong>Read<\/strong> chapter 12. <strong>Due:<\/strong> The following week.<\/p>\n<h2>Materials For Responsive Design<\/h2>\n<\/p>\n<p>Additional materials for this unit can be found by following these links:<\/p>\n<ul>\n<li><a class=overview href=\"04-designing-for-the-future\/\">Designing for the Future<\/a><\/li>\n<li><a class=read href=\"04-responsive-design\/\">Responsive Design<\/a><\/li>\n<li><a class=read href=\"04-media-queries\/\">Media Queries<\/a><\/li>\n<li><a class=read  href=\"04-accessibility\/\">Accessibility<\/a>\n<\/li>\n<li><a href=\"04-print-stylesheets\/\">Print Stylesheet<\/a>\n<\/li>\n<li><a href=\"http:\/\/b.parsons.edu\/~dejongo\/12-fall\/stuff\/08-exercise.html\"> In Class Demonstration<\/a>\n<\/li>\n<li><a href=\"http:\/\/b.parsons.edu\/~dejongo\/12-fall\/stuff\/08-exercise-answer.html\"> Answer to Exercise<\/a>\n<\/li>\n<li><a href=\"http:\/\/www.cleancss.com\/oldsites\/cleancss\/\">Clean CSS: A CSS Formatter and Optimizer<\/a>\n<\/li>\n<li><a href=\"08-homework\/\">Homework<\/a>\n<\/li>\n<\/ul>\n<h2>Materials For Building a Website<\/h2>\n<\/p>\n<p>Additional materials for this unit can be found by following these links (30 pages):<\/p>\n<ul>\n<li><a class=\"overview\" href=\"05-information-architecture\/\">Information Architecture (IA)<\/a><\/li>\n<li><a class=\"read\" href=\"05-styling-the-navigation\/\">Styling the Navigation<\/a><\/li>\n<li><a class=\"read\" href=\"05-boilerplate\/\">The HTML5 Boilerplate<\/a>\n<\/li>\n<li><a class=\"read\" href=\"05-browser-dev-tools\/\">Browser Development Tools<\/a>\n<\/li>\n<li><a class=\"read\" href=\"05-seo\/\">Search Engine Optimization<\/a><\/li>\n<li><a class=\"\" href=\"05-google-analytics\/\">Google Analytics<\/a>\n<\/li>\n<li><a class=\"\" href=\"05-troubleshooting\/\">Trouble Shooting<\/a>\n<\/li>\n<li><a href=\"05-404-page\/\">404 page<\/a>\n<\/li>\n<li><a href=\"05-print-stylesheet\/\">Print Style Sheet<\/a>\n<\/li>\n<li><a href=\"visual-literacy\/\">Visual Literacy<\/a><\/li>\n<li><a href=\"05-homework\/\">Homework<\/a>\n<\/li>\n<\/ul>\n<h2>Materials for Fonts and Typography<\/h2>\n<\/p>\n<p>Additional materials for this unit can be found by following these links (29 pages):<\/p>\n<ul>\n<li><a class=overview href=\"06-web-typography\/\">Type on the Web<\/a>\n<\/li>\n<li><a class=read href=\"06-typographic-resource\/\">Typographic Resource<\/a><\/li>\n<li><a class=read href=\"06-text-formatting\">Formatting Text<\/a>\n<\/li>\n<li><a class=read href=\"06-web-fonts\">Web Fonts<\/a>\n<\/li>\n<li><a href=\"http:\/\/b.parsons.edu\/~dejongo\/06-character-encoding\/\">Character Encoding and entities lookup<\/a>\n<\/li>\n<li><strong>Midterm Evaluation:<\/strong> <a href=\"13-peer-review\/\">Peer Review<\/a>\n<\/li>\n<li><strong>Midterm Evaluation:<\/strong> <a href=\"00-assessable-tasks\/\">Assessable Tasks<\/a>\n<\/li>\n<li><strong>Midterm Evaluation:<\/strong> <a href=\"midterm-rubric\/\">Grading Rubric<\/a>\n<\/li>\n<li><a href=\"visual-literacy\/\">Visual Literacy<\/a><\/li>\n<li><a href=\"06-homework-2\/\">Homework<\/a>\n<\/li>\n<\/ul>\n<h2>Goals<\/h2>\n<\/p>\n<p>The goals of this unit are to:<\/p>\n<ul>\n<li>Incorporate media queries into web design.\n<\/li>\n<li>To design around the challenges that media queries create when layout out a page across dissimilar devices.\n<\/li>\n<\/ul>\n<blockquote><p> The future of the web is not necessarily tied to the browser window that you have been using. Chances are that it&#8217;ll be mobile. Spanning screens from large to small requires a complete separation between content and form, so that the content can be rearranged to fit the different viewports.<\/p><\/blockquote>\n<h2>\nOutcomes<\/h2>\n<\/p>\n<p>At the end of this unit, students will have:<\/p>\n<ul>\n<li>Been prepared for a much more expansive web of the future<\/li>\n<li>Incorporated media queries as the basis for future-proofing their own designs.\n<\/li>\n<li>used the various layout strategies that CSS offers in conjunction with media queries.\n<\/li>\n<li>Applied these skills to their Portfolio site.\n<\/li>\n<\/ul>\n<h2>Step-by-Step<\/h2>\n<table>\n<tr>\n<td style=\"width: 20px; text-align: right;\">15 <\/td>\n<td>Review homework and answer questions. <\/td>\n<\/tr>\n<tr>\n<td>40<\/td>\n<td><a href=\"?p=310\">media queries<\/a><\/td>\n<\/tr>\n<tr>\n<td>20<\/td>\n<td>practice: media queries<\/td>\n<\/tr>\n<tr>\n<td>10<\/td>\n<td>break<\/td>\n<\/tr>\n<tr>\n<td>70<\/td>\n<td>Hands on in class: making the portfolio responsive<\/td>\n<\/tr>\n<\/table>\n<h2>Talking Points<\/h2>\n<\/p>\n<p>Topics covered in the <a href=\"http:\/\/instructors.coursesmart.com\/9780133064040\/328\">reading:<\/a><\/p>\n<p><strong>Chapter 12: <\/strong>Style Sheets for Mobile to Desktop<\/p>\n<ol>\n<li>Mobile Strategies and Considerations 328\n<\/li>\n<li>Understanding and Implementing Media Queries 333\n<\/li>\n<li>Building a Page that Adapts with Media Queries 340\n<\/li>\n<\/ol>\n<h2>Current Practices<\/h2>\n<\/p>\n<p>Responsive Web Design is all over the web. In its short existence, no big site has not been redesigned to take advantage of it, and many do it very well:<\/p>\n<li><a href=\"http:\/\/bradfrost.github.com\/this-is-responsive\/patterns.html#fluid-images\">This Is Responsive<\/a>\n<\/li>\n<li><a href=\"http:\/\/www.mulenog.com\/\">Mule Design Holiday Party<\/a>\n<\/li>\n<li><a href=\"http:\/\/www.caavadesign.com\/\">Caava Design<\/a>\n<\/li>\n<li><a href=\"http:\/\/frankchimero.com\/\">Frank Chimero<\/a>\n<\/li>\n<li><a href=\"http:\/\/bloom-london.com\">Blood, the Branding Agency<\/a>\n<\/li>\n<li><a href=\"http:\/\/womenandtech.com\/\">Women and Tech<\/a>\n<\/li>\n<li><a href=\"http:\/\/www.jeremyholmesstudio.com\/\">Jeremy Holmes Studio<\/a>\n<\/li>\n<li><a href=\"http:\/\/html.adobe.com\/\">Adobe HTML<\/a>\n<\/li>\n<li><a href=\"http:\/\/disney.com\/\">Disney<\/a>\n<\/li>\n<li><a href=\"http:\/\/www.editoskastingas.lt\/\">Edita&#8217;s Casting<\/a>\n<\/li>\n<li><a href=\"http:\/\/www.richbrown.info\/\">Rich Brown<\/a>\n<\/li>\n<li><a href=\"http:\/\/etchapps.com\/\">Etch<\/a><br \/>\n<h2>News and External Resources<\/h2>\n<p>Inspirational Links to help you explore in preparation for the final. <\/p>\n<ol>\n<li>Smashing Magazine&#8217;s <a href=\"http:\/\/www.smashingmagazine.com\/2015\/03\/23\/content-mobile-content-strategy\/\">Mobile Content Strategy <\/a> article.\n<\/li>\n<li> Google&#8217;s <a href=\"https:\/\/www.google.com\/webmasters\/tools\/mobile-friendly\/\"> Friendly Mobile Test<\/a>. Does your site pass?\n<\/li>\n<li> Google&#8217;s <a href=\"https:\/\/developers.google.com\/speed\/pagespeed\/insights\/\"> Page Speed Test<\/a>. This test (and recommendations on how to fix  the problems) are a great way to  make sure your site is as good as it can be.\n<\/li>\n<\/ol>\n<h2>Definitions<\/h2>\n<\/p>\n<p>These are the terms that participants should be familiar with during this unit:<\/p>\n<dl>\n<dt><a href=\"http:\/\/en.wikipedia.org\/wiki\/Responsive_Web_Design\">Responsive Web Design article from Wikipedia<\/a><\/p>\n<dd>\n<p><b>Responsive Web Design<\/b> (<b>RWD<\/b>) is an approach to web design in which a site is crafted to provide an optimal viewing experience\u2014easy reading and navigation with a minimum of resizing, panning, and scrolling\u2014across a wide range of devices (from desktop computer monitors to mobile phones).\n<\/p>\n<\/dd>\n<\/dt>\n<\/dl>\n<\/li>\n","protected":false},"excerpt":{"rendered":"<p>Week 49\/28 Responsive Design. The web is on display on iPhone and iPad screens to desktop computers. CSS media queries allow you to target each of these devices in one style sheet. Activity: Using media queries to target different devices. &hellip; <a href=\"http:\/\/b.parsons.edu\/~dejongo\/04-accessibility\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[14],"tags":[],"_links":{"self":[{"href":"http:\/\/b.parsons.edu\/~dejongo\/wp-json\/wp\/v2\/posts\/3962"}],"collection":[{"href":"http:\/\/b.parsons.edu\/~dejongo\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/b.parsons.edu\/~dejongo\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/b.parsons.edu\/~dejongo\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/b.parsons.edu\/~dejongo\/wp-json\/wp\/v2\/comments?post=3962"}],"version-history":[{"count":11,"href":"http:\/\/b.parsons.edu\/~dejongo\/wp-json\/wp\/v2\/posts\/3962\/revisions"}],"predecessor-version":[{"id":3974,"href":"http:\/\/b.parsons.edu\/~dejongo\/wp-json\/wp\/v2\/posts\/3962\/revisions\/3974"}],"wp:attachment":[{"href":"http:\/\/b.parsons.edu\/~dejongo\/wp-json\/wp\/v2\/media?parent=3962"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/b.parsons.edu\/~dejongo\/wp-json\/wp\/v2\/categories?post=3962"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/b.parsons.edu\/~dejongo\/wp-json\/wp\/v2\/tags?post=3962"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}