This blog is about Graphic Design, Vector Art, and Cartoon Illustration BradHallArt.com


Why you should upgrade to Dreamweaver 5.5

I have been teaching Adobe software for over fifteen years and, believe me, I have seen a lot of upgrades. As adjunct faculty here at the local Community College and as a personal trainer, I have to pay for these upgrades myself, and usually I am still reeling from the expense of the last upgrade. Of course, as a teacher I have to be familiar with the latest version, and even though I always express a positive attitude, I have often thought *why is there a new version?!*

It's rare that I personally see a big difference from version to version, but the latest upgrade to Dreamweaver, which only from CS5 to 5.5, is something that I am highly recommending to my students. I'm not kidding here. If you only have Dreamweaver CS5, you will see some cool stuff in 5.5. I sound like a commercial here, but, well, I am a teacher.

The main reason to upgrade to Dreamweaver 5.5 is the Multiscreen Preview. That's what allows you to see what you are doing when you update your web pages for mobile devices, tablets, and the desktop. It really works.

As you can see, I am in the process of optimizing my professional website. In order to do this, you have to have a little knowledge of CSS. What you are looking at is the same HTML page linked to different CSS styles that accommodate a 320-pixel screen (mobile), a 768-pixel screen (tablet), and an ordinary desktop (which I have set at 1126 pixels). Contrary to popular belief, it is NOT sending a different page to each device, it is only displaying the correct CSS for the displayed page width. It doesn't really know if it's displaying on a cell phone, or an iPad, it just knows how wide it's displaying. And in my opinion, that is a very good thing. Trying to keep track of multiple sets of pages for multiple displays just seems like an accident waiting to happen. This is all about using a single set of pages for your site, which will display slightly differently based on different CSS files. To make this work takes some design considerations!

I learned how to use the Multiscreen Preview by watching the Adobe tutorials, and now I am refining it. What they don't explain is how to get the information into the new CSS files, for phone and tablet, so I just copied the CSS from my existing file and tweaked it a bit to get it to work. If you have used best practices for your CSS, or started with a Dreamweaver template, you will see that you will need to adjust the width of the container and the main content. If you had a large margin left over on your MainContent to allow for a sidebar, you will need to eliminate that.

This is a new feature that I am genuinely excited about. The support for HTML5 and CSS3 comes along for the ride, and I am exploring that, too. If you haven't used code hinting in Dreamweaver, by the way, this is a good time to start, as that is where you will see all of the new HTML5 tags, like video.

Kudos to the nice people at Adobe! Ya done good!