Click on any phrase to play the video from that point.
[CS6]
As a web professional today, you've no doubt heard about responsive design.
[Greg Rewis] [Creative Suite Evangelist] But if you've tried it yourself,
you probably found, like me, that it's not as easy as you thought,
so that's where Dreamweaver CS6 comes in
with its fluid grid layouts.
The fluid grid layouts allow us to create adaptive designs
that respond to the screen or device
that the design is being displayed upon.
Let's take a look.
To create a fluid grid in Dreamweaver CS6
I can either--if I've got my start screen up--
just simply click on the fluid grid layout option
or use the File menu and choose New Document,
where you'll notice we have the fluid grid layout option.
Now here we're presented with 3 screens, one for mobile,
tablet, and desktop.
And Dreamweaver wants to know how we want our grids set up.
We can specify a number of grids.
You can see that I have 4, 8 and 12 specified for my mobile, tablet, and desktop.
And then I'm going to specify a column width
that's going to be consistent across all 3 of those devices.
Finally, we can specify how much of the actual screen
the grid is going to take up on the given device.
Here you can see in mobile I have it set to 100,
for tablet 98, and for my desktop 80.
Now once I have specified all of these options,
I'll simply click the Create button where Dreamweaver is going to ask me
to name my CSS file,
so I'll just call it styles.css and save it into my site.
Now something new in Dreamweaver CS6.
You'll notice that I'm, first of all, seeing these grids,
and I have 3 new icons down here at the bottom of the screen
representing those breakpoints, the desktop,
tablet, and mobile phone size.
Now, we'll start with the mobile size because of course
we want to design mobile first.
That allows us to concentrate on our content,
and you'll notice that I already have a grid
already laid out here on the page.
I'm going to go ahead and add a new grid
by simply using my Insert Fluid Grid Layout Div Tag.
Now, Dreamweaver is going to ask me once again for a name,
and I'll just click "Okay."
You'll notice as I do this a second time
not only can I give it a name, I also can choose whether or not
I want it to start on a new row.
We'll just--by default here--click through a couple of these
with new rows so that I can then show you how we begin
to move things about.
I have 4 divs that I've laid out here on the page,
the 3 that I've added and the one that was already there.
Now, on my mobile device, maybe I just want all this content
to be stacked up vertically, as you can see.
But on a tablet device where I have more screen real estate,
maybe I want to move things around just a bit,
so let's go over to the tablet view.
In the tablet view, maybe we want to have these things
divide themselves up across the page, so I'm simply going to
click on one and begin to divide it up,
let's say maybe moving it right about to there.
And let's do the same with this second div,
maybe have it be 3 columns as well.
I want it to move up, so you'll notice that Dreamweaver is giving me
a move up a row arrow, so I can just click that
to move it up so that it now floats
right alongside of this other div.
Finally, let's do this last one.
We'll take it and maybe narrow it down to the 2 columns
that we have room for and move it up like that.
One more for our desktop.
Here again we can design completely differently.
Maybe this one we're going to have things be a little bit wider
and perhaps even take this one,
move it up alongside.
You know what? Let's just go ahead and stretch it on out.
Now we have a completely different design
for our desktop, for our tablet,
and for our mobile view.
Once you begin working like this, you're going to eventually
come to a point where you're going to need to add your HTML content,
and I've already done that here on this particular design.
You can see here I have, again, HTML content
that I've poured into the actual framework that I was building
with those fluid grid layouts, and you can see, for example,
here in my phone view under my Designer Spotlight area
I've got these 2 items sitting side by side.
Again, I can then go and make the adjustments
that I want for my tablet view,
again, moving things around exactly in the same manner
that you just saw me doing even though now
these actually have real content in them.
Let's go ahead and move that up a row or move it over.
You'll notice I'm seeing also the margins that are being set.
These margins are being defined here by the individual object's width
and being placed here on the page by Dreamweaver.
Again, all of this is being done in CSS,
and in fact, this is the way that we actually built
the entire Pluralist site based on
that very same grid system.
I can go ahead and turn this on, so you can see here is my finished design.
You can see how it was laid out in the desktop view.
In the tablet view, though, it looks completely different.
I'll go ahead and turn off this visual aid,
the fluid grid layout guide, so that you can actually see the design.
It makes it a little bit easier to see things.
And you'll notice that here we have our desktop view where I had 4 pictures
all aligned here, and we have our tablet view
where we've now dropped down to only 3.
In our mobile view, we have stacked all of our content on top of each other.
Of course, this is in Dreamweaver.
Let's go look at the browser and actually see
that there's a little bit more that happens here as well.
As I begin to narrow the page, watch the content begin to move,
even images beginning to resize themselves.
When I get down to the tablet size, again,
we've dropped down to those 3 pictures there,
and then continuing on down until I get down to that mobile view.
Even if I had a much smaller phone, then again,
all of the content is going to adapt,
and all of this is being done with the new fluid grids layout in Dreamweaver CS6.
[Adobe]
