Getting Started With Dreamweaver CS6 Fluid Grids

Today I’m going to introduce you to Adobe’s take on Responsive Web Design; Fluid Layouts in Dreamweaver CS6. These new tools allow designers to visually build their responsive layouts, mobile first, whilst Dreamweaver handles all the flexible calculations in the background. Let’s take a look..

Let me start off by letting you in on a little secret; I just love disruption. I love it when something new comes along which challenges everything we thought was true, ties it up in a little ball and kicks it out to the curb. This is one of those times and I love it. I just love it.

The disruption was “Responsive Web Design” and “Mobile First” which were first presented to an unsuspecting web industry in 2010. Think about it, the concepts of Mobile First and Responsive Design really weren’t solidly on your radar until a year or so ago.  Then, disruption happened.  

Before I get into the new features of Dreamweaver CS6 which respond to those two concepts, I think it’s important we understand what happened and how this disruption lead to this tutorial series.

Epiphany

It all started for me about two years ago. I was speaking at an Adobe Education Leaders event at Adobe HQ in San Jose and was talking about how educators had to wake up and start actively moving what I then called “Multiscreen” design and development into their classrooms.  

It all started for me in a Beijing taxi

My epiphany around this had occurred in November 2009 in, of all places, the rear seat of a taxi careening through Beijing. When I got into the cab a screen on the back of the front seat lit up and I could interact with the content on it. In many respects it was nothing more than a tablet bolted into the seat with the content fed wirelessly into the device. That is the moment when I truly realized the power of mobile devices, because my first reaction was: “This is the sort of stuff my students create.”

Mobile First

Around the same time I was rattling around Beijing, in November 2009, Luke Wroblewski was musing on his blog about developing a mobile first strategy when it came to web design. A few months later his musing really exploded on the scene when his Mobile First presentation was posted to Linked IN Tech Talks in May of 2010.This video link was quickly handed around the community with a “You gotta check this out.” The premise was simple: Forget about desktop, people. Design the mobile version of the site first, then start thinking about the desktop.

Luke Wroblewski started Mobile First on his blog

This flipped the entire web design process upside down, turned it inside out and rearranged its molecules. Here’s the thing: It made sense.

When designing for mobile the common best practice was to create a mobile version of the site to ensure consistency of the experience. This design was usually a compact version of the desktop site. If Flash was involved it also meant numerous versions of the project targeted at a variety of Flash Light players and devices. One trip to the now-abandoned Device Central was enough to convince me that this was not a great way to do things. The whole mobile workflow was so convoluted and complex I couldn’t help but think what we were trying to do was use a hammer in a situation where a screw driver was the best approach. My most common question when dealing with this was to exclaim: There has got to be a better way of doing this.

As it turns out, there was.

Responsive Web Design

In May of 2010, Ethan Marcotte published a rather interesting article on Alistapart. Entitled Responsive Design, the premise was, again, rather simple: content should adapt to the media displaying it, rather than the other way around.

This idea also made sense and is still resonating to this day.

Ethan Marcotte kicked things off at AListApart

Things really kicked into high gear in 2011. Both Ethan and Luke are successfully making their cases, HTML 5 is gaining traction in the industry and then, the earthquake. A couple of weeks after its annual user Conference, Adobe Max, Adobe dropped its bombshell.  They announce that Adobe is bailing out of mobile development on the Flash platform. To put this announcement in context consider this: The 2010 Max conference had such a heavy emphasis on Flash mobile they were freely handing out Flash-enabled Blackberries, Droids and Google TV to the attendees.

I didn’t find it all that surprising that Adobe was backing out, but the industry’s reaction ranged from “the world is ending” to “never used it anyway, so what’s the big deal”. What Adobe didn’t do was kill Flash because Apple hated it. It killed Flash in the mobile space because, they too had realized: There has got to be a better way of doing this, and both Luke and Ethan were showing how.

Even Adobe is "getting religion".

What really caught my attention was that Adobe made it very clear, after the rubble stopped bouncing, it was moving over to HTML 5 or, as they were now calling it, The Expressive Web big time. Edge, introduced in August 2011 is one response. Adobe’s new-found love for HTML is evident with a new site that is one great big HTML bear hug and Dreamweaver CS6, which hit the streets earlier this year, is also starting the migration in that direction.

Dreamweaver CS6

One of the really nifty additions to Dreamweaver CS6 is Fluid Grids, which, in a way, simultaneously use Ethan’s and Luke’s approaches to designing web pages. If you are just starting to explore the concepts of Mobile First and Responsive Design then a great place to start is Fluid Grid Layouts because, as a visual editor, Dreamweaver lets you see what you are doing and how changes to the CSS ripple from a smartphone, across a tablet and land on the desktop.

When I first started digging into this new feature I honestly felt Fluid Grid Layouts were a hidden gem. After spending some time wrapping my head around them I dialed back that enthusiasm. I couldn’t help but feel this is a work in progress. It was more like a really good first attempt rather than a solid addition to the lineup and I suspect that it will be one Dreamweaver CS6 feature that is regularly updated through the Creative Cloud.

Dreamweaver lets you see what you are doing and how changes to the CSS ripple from a smartphone, across a tablet and land on the desktop

The Fluid Grid layouts are clearly based on Ethan Marcotte’s Responsive Web Design (the book and the article that led to the book). This feature allows you to specify three fluid grids: one each for mobile, tablet, and desktop layouts. Each grid can have 2–24 columns; a common gutter width between the columns and you can specify how wide the grid should spread across each screen.

You then add fluid grid layout div elements to construct your page in the mobile layout. (Mobile First)  The next step lands squarely in the category of “brilliant”—you can resize the elements in each of the layouts, snap them to the grid, and then easily move individual elements to sit alongside and play nice with each other. This is done in either Design view or Live view, and, best of all all, Dreamweaver automatically calculates the percentage width of elements and margins to four decimal places.

This calculation is based on Ethan’s formula of target/context = result. A good example of this would be column width. Let’s assume you have a page width of 1232 pixels and you decide each column should be 350 pixels wide. To get the fluid column width you divide 350 (the Target) by 1232 (the Context) = 0.28409091. You would then move the decimal two places to the right for a result of 28.409091. Dreamweaver’s Fluid Grid layout calculation will shave off the final two numbers for a result of 28.4090 per cent. This calculation applies to anything that has “hard” numbers attached to it such as font size, margin, padding and so on.

The CSS created by the Fluid Grid Layouts uses percentage widths and floats, so it produces layouts that adapt to any screen size. These styles are constructed on the basis of “mobile first” and even work in browsers that don’t understand media queries. For those of you new to Responsive Web Design, this one feature alone is enough to get you into the game.

Caveats

Being a work in progress there are, naturally, “issues”.

For example, Dreamweaver doesn’t have an immediately evident way of showing you which media query controls a particular style rule. You can figure it out quite quickly, but this is a bit frustrating at first. Another is one that a few Dreamweaver users have pointed out: The feature doesn’t support nesting elements to create more complex layouts. Other missing features include the inability to use classes instead of ID’s and it would be rather nice to use semantic elements like header or footer.

There are also a few “gotcha’s” in the process that will bite the unwary and a couple of the assumptions made about mobile screen width are a bit wide of the mark. I’ll deal with many of these over the course of this series.

Still, Dreamweaver’s Fluid Grid Layouts should appeal to those of you starting to get into the RWD game.

Watch Screencast