Applying Responsive Retrofitting Techniques to a Fixed-width Site in CSS
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.
What you'll learn
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.
Table of contents
- Adjusting the Meta Viewport Tag 5m
- Creating a High-fidelity Layout with Font-relative Units 6m
- Replacing Legacy Images with Web Fonts 4m
- Creating Responsive Columns 12m
- Ensuring Images Are Retina-ready 13m
- Implementing Retina Hairline Borders 4m
- Using In-line Media Queries 9m
- Linking Style Sheets with Media Queries 8m
- Exploring Other Responsive Design Resources 3m
About the author
Rachel Wilkins Patel is a technologist with experience in web and application development, web marketing, and new media production. She is founder of HER Ideas in Motion, a mentorship program for girls in technology and media arts. She has lived and traveled extensively across four continents and holds a M.F.A. and B.A. from Hollins University.