Applying Responsive Retrofitting Techniques to a Fixed-width Site in CSS
Pluralsight
Course Summary
Explore responsive retrofitting strategies and techniques to control the appearance and behavior of fixed-width sites across multiple screen sizes and devices without a complete code rewrite. Software required: CSS, HTML, Sublime Text, Chrome, Photoshop CS6.
-
+
Course Description
Throughout these CSS tutorials, we'll explore responsive retrofitting strategies and techniques to control the appearance and behavior of fixed-width sites across multiple screen sizes and devices without a complete code rewrite. We'll cover how to make a legacy site responsive using font-relative units, web fonts, responsive columns, retina-ready images, border control, media queries, and some additional resources. By the end of this CSS training, you'll have learned that responsive design is no longer just a nice to have; it's the new reality of designing for users who expect a great experience on your site across multiple devices and screen sizes. Software required: CSS, HTML, Sublime Text, Chrome, Photoshop CS6.
-
+
Course Syllabus
Introduction and Project Overview- 1m 12s
—Introduction and Project Overview 1m 12sApplying Responsive Retrofitting Techniques to a Fixed-width Site in CSS- 1h 3m
—Adjusting the Meta Viewport Tag 5m 19s
—Creating a High-fidelity Layout with Font-relative Units 5m 36s
—Replacing Legacy Images with Web Fonts 4m 11s
—Creating Responsive Columns 12m 16s
—Ensuring Images Are Retina-ready 12m 52s
—Implementing Retina Hairline Borders 3m 33s
—Using In-line Media Queries 8m 57s
—Linking Style Sheets with Media Queries 8m 11s
—Exploring Other Responsive Design Resources 2m 44s