<p style="margin: 0px;">Responsive design isn’t merely another technique. It’s a way of building sites and applications that requires a fundamental shift in approach. From planning to development, every aspect of building for the web is affected.</p> <div style="color: rgb(0, 0, 0); font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; word-spacing: 0px; background-color: rgb(255, 255, 255);"> <br> </div> <div style="color: rgb(0, 0, 0); font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; word-spacing: 0px; background-color: rgb(255, 255, 255);">This video course starts by explaining the three primary components of responsive design: fluid layouts, media queries and responsive images. With a firm understanding of those in place, we branch out and explore how responsive design impacts workflow, how to maintain the hierarchy of content, how to use feature detection to enhance the experience, how to organize your JavaScript to play along nicely, how to optimize responsive sites for performance–and more.</div> <div style="color: rgb(0, 0, 0); font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; word-spacing: 0px; background-color: rgb(255, 255, 255);"> <br> </div> <div style="color: rgb(0, 0, 0); font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; word-spacing: 0px; background-color: rgb(255, 255, 255);">Course objectives & goals: This course arms its students with the skills necessary to start building quality responsive sites today. By the end of the course, students will know how to:</div> <div style="color: rgb(0, 0, 0); font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; word-spacing: 0px; background-color: rgb(255, 255, 255);"> <ul> <li>Use fluid layouts, media queries and fluid images to create responsive layouts</li> </ul> </div> <div style="color: rgb(0, 0, 0); font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; word-spacing: 0px; background-color: rgb(255, 255, 255);"> <ul> <li>Use responsive image techniques to serve appropriately sized images to a variety of devices</li> </ul> </div> <div style="color: rgb(0, 0, 0); font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; word-spacing: 0px; background-color: rgb(255, 255, 255);"> <ul> <li>Ensure that the hierarchy of content is preserved across screen sizes</li> </ul> </div> <div style="color: rgb(0, 0, 0); font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; word-spacing: 0px; background-color: rgb(255, 255, 255);"> <ul> <li>Enhance the functionality of your site with feature detection</li> </ul> </div> <div style="color: rgb(0, 0, 0); font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; word-spacing: 0px; background-color: rgb(255, 255, 255);"> <ul> <li>Improve the performance of your site and avoid becoming another example of "fat" responsive design</li> </ul> </div> <div st