Sign In | Subscribe
Start learning today, and be successful in your academic & professional career. Start Today!
Loading video...
This is a quick preview of the lesson. For full access, please Log In or Sign up.
For more information, please see full course syllabus of Adobe Dreamweaver CC
  • Discussion

  • Study Guides

  • Download Lecture Slides

  • Table of Contents

  • Related Books

Bookmark and Share

Start Learning Now

Our free lessons will get you started (Adobe Flash® required).
Get immediate access to our entire library.

Sign up for

Membership Overview

  • Unlimited access to our entire library of courses.
  • Search and jump to exactly what you want to learn.
  • *Ask questions and get answers from the community and our teachers!
  • Practice questions with step-by-step solutions.
  • Download lesson files for programming and software training practice.
  • Track your course viewing progress.
  • Download lecture slides for taking notes.
  • Learn at your own pace... anytime, anywhere!

What is Responsive Design?

  • When you are planning a website, you need to consider all the various devices and screen sizes that will be viewing your web page
  • Responsive Design describes a web page layout that automatically adjusts the page design based on the device viewing the web page so it works well on any screen size
  • This topic could be an entire course, so we will just touch on the concept and show you how Dreamweaver can assist you in working with responsive design using media queries
  • Dreamweaver offers interface features that allow you to work with media queries and preview your web pages as you work in CSS to ensure that both tablet and mobile devices can view your web pages easily
  • Ethan Marcotte, a web designer out of Boston coined the term responsive design a couple of years ago as he noticed that there is such a wide variety of devices and screen sizes available that designers can no longer target specific page widths when creating web pages. There are just too different devices being used to view web pages
  • His website is located at
  • In this group of lessons we will take a look at various ways to create responsive design using CSS rules

What is Responsive Design?

Lecture Slides are screen-captured images of important points in the lecture. Students can download and print out these lecture slide images to do practice problems as well as take notes while watching the lecture.

  • Intro 0:00
  • Responsive Website 1:17
    • Responsive Image Example
    • Fireworks File
  • Mobile Version 4:13
    • Planning for Mobile
  • Responsive Web Design 6:29