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 CS6
  • Discussion

  • Study Guides

  • Download Lecture Slides

  • Table of Contents

  • Transcription

  • 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?

  • We are going to talk about responsive design, and show some examples of the concept which is an important one to consider as you are planning a website
  • This topic could be an entire course, so we will just touch on the concept by giving you an idea of the concept
  • We will be using this concept to be sure that both tablet & mobile devices can view our web pages easily
  • Responsive Design describes a web page layout that automatically adjusts the page design so it works well on any screen size
  • Visit and change the width of the browser window
  • 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 to web users that we cannot target specific widths when creating web pages any longer, there are just too many of them
  • It is important to think about the various browser widths that users can use to view your pages and plan for these various widths

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 Web Design 0:13
    • Website Examples
    • Wanderlust Travel Website
  • Summary 6:30

Transcription: What is Responsive Design?

Welcome back to

We are now going to take a look at a term that has become very popular; and it is something you need to consider when you are creating websites.0003

It was created by Ethan Marcotte (or "mahr-kott"--I'm not exactly sure which is correct); he coined this phrase, "responsive Web design."0014

I am starting this section of lessons with his specific website; and basically, the idea is: we are using so many devices now to view websites that it is very difficult to determine specifically what size browser is viewing our website.0026

We must be able to produce websites that can respond and look OK across multiple devices.0048

The idea here is: there are tablets; there are different e-readers; there are many different sizes of tablets now; there are also smartphones, and those are small; there are's every different size; and then we have the huge monitors, as well.0056

We can't really determine--or it's much harder to determine--what width you should make your web page.0075

As a part of that process, the idea is to allow your website to respond (become a responsive website) to whatever the device is--so in other words, it would adjust accordingly.0083

The concept is a great one, but it's a bit harder to implement; and I want to show you, within this group of lessons, some of the features that Dreamweaver can assist you with.0099

Now, responsive Web design is an entire, full course on its own, so we are only going to touch the surface of this topic; but I do want to show you what Dreamweaver can do for you, and also give you enough information about this topic to be able to explore it a little bit further on your own.0111

Let's look at some examples.0130

I am going to make my browser a little bit smaller--and notice this website: you can kind of see how it is changing as I am changing the size of the browser--it even gets tiny.0133

It is...let me grab that once more, and we'll make it a little bit bigger: can you see how even the images are growing, depending upon the width of the device looking at it?0149

Now, I'll do that same thing with this website; this was the example website that Ethan created to show this concept--and even images can become responsive.0160

You can see, that is exactly what is happening here: as I make the browser smaller, you can see how the page is adjusting accordingly, and the images themselves are getting smaller.0174

Let me get a hold of that there--there we go; see how the images are getting smaller and they're growing, based on the size of the browser?0188

I have a couple of other examples of this; these are created by Ethan, and they are some good examples of what I am talking about, or specifically, what he was talking about when he coined the phrase.0198

Let's take a couple of other examples: so here is another one--this website--can you see how these kind of jump all of a sudden?0212

And now my image is getting smaller and smaller, and notice how that ribbon--the orange or red ribbon--is changing a little bit.0221

I'll open that back, this is an Adobe website to reference this; and this is called Inspire.0230

As I make this one smaller, you can see, that image didn't change until I got to about right here; there is a set size that, as soon as the browser gets to that size, it changes the size of the actual page (so at full width, you would never know that).0241

Now, let's take a look at what we are going to research a little bit further; and that is our Wanderlust Travel website.0261

Now, this is just a base page; it is not an actual page with true content for the website; but it is still a responsive design.0269

Watch what happens as I make it smaller: you can see, out at this width, my image is on the right-hand side; this blue box represents where an image is going to be placed, so I call that my placeholder image.0280

Now that I have moved it a little bit smaller, you can see, that image is no longer on the right; it moves underneath.0295

I'll scroll back up again: notice, my upper navigation area is changing also, automatically, based on the browser size; and as soon as I get to this width, you can see, my buttons become more usable on a phone-sized device--and my image completely disappears from the page.0302

Now, this lower portion is a bit odd right now; this is actually designed to go to this width, in terms of getting small; so, I don't have my style sheet set up to go all the way to 0, so that is why it started looking a little bit odd when it got really narrow.0325

Nobody is going to be looking at it quite that narrow.0343

But that is a responsive Web design: you can see, here is the tablet size...basically, this is the phone size; here is the tablet size; and here is the desktop size.0347

That is an idea of what we are going to be doing.0360

Now, I could get really deep into this topic, as I mentioned; what I am going to try and do is kind of give you a starting point for how to create your responsive design, using Dreamweaver.0364

So, it kind of comes down to a phone size, a tablet size, and a desktop size; and I didn't go quite as far as making the images responsive--that would be a Responsive Web Design course.0377

But I wanted to give you a taste of this, and also show you some examples, so you can explore this concept a little bit further on your own.0390

I also want to give you a starting point in Dreamweaver, because you look at this and say, "That is do I even begin to create this type of website?!"--and that is what this group of lessons is all about--to assist you with getting over that starting point.0400

That is responsive Web design; and we are going to take a look at how we can work with that within Dreamweaver.0418