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.
Course info
Level
Advanced
Updated
Oct 28, 2014
Duration
1h 5m
Table of contents
Description
Course info
Level
Advanced
Updated
Oct 28, 2014
Duration
1h 5m
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.

About the author
About the author

Rachel Wilkins Patel is a technologist with experience in web and application development, web marketing, and new media production.

Section Introduction Transcripts
Section Introduction Transcripts

Introduction and Project Overview
Hi, I'm Rachel Wilkins Patel, web and new media developer and lecturer here at Digital-Tutors. And I want to welcome you to responsive retrofit. In this course, we're going to explore strategies and techniques you can do to control the appearance and behavior of sites across multiple screen sizes and devices. As we explore how to responsibly retrofit an existing site, we'll review techniques that can easily be adapted to make your existing site perform better across multiple devices without a complete code rewrite. We'll cover how to take your current legacy site and make it responsive using font relative units, web fonts, responsive columns, retina ready images, border control, media queries, and additional resources you can use. Responsive design is no longer just a nice to have. It's the new reality of designing for users who expect a great experience of your site across multiple devices and screen sizes. So open up your favorite code editor, and let's get started retrofitting your existing site. So let's get started with the first lesson.