First look at Adobe Dreamweaver CS5.5 (better development of websites for mobile)

This is reprinted, with permission, from Rackspace’s Building43.

Adobe helped spark the desktop publishing revolution in the mid 1980s with its PostScript page description language used in Apple LaserWriter printers. Today, publishing is vastly different than it was 25 years ago, as consumers are accessing content in more ways than ever, and Adobe’s Dreamweaver CS5 team is hard at work creating the tools that allow developers to work in this new environment.

Some of the coolest things about Dreamweaver 5.5 are…that we’ve just put support for HTML5 CSS3 right into the app. “You kind of have to be under a really big rock to have not noticed the change in devices people are using to access the Internet today,” explains Scott Fegette, Senior Product Manager at Adobe. “It’s not just desktop browsers on two platforms anymore. It’s a variety of devices from tablets to smart phones to connected set-top boxes on HDTVs, including the desktop browsers that we all became used to. So, this presents a number of issues for developers.”

A developer must be aware of several factors starting with how the user is going to interact with the app, whether it’s with a trackpad, a keyboard, joystick or trackball. The wide variations in screen sizes present additional challenges. Simple links on a desktop may not work so well on a phone. On an HDTV, you’re typically sitting away from the device, so you can’t fill a small space with a lot of text, and buttons on the screen have to be large enough for you to see and access. Much the opposite holds true for a tablet or phone.

Dreamweaver CS5.5 has added features that help developers deliver content to this wide array of devices. “CS5.5 is going to be a big step forward starting first with just existing content,” says Fegette. “Any publisher that really wants to become relevant immediately needs to start thinking about how they can make the interface to their site, their application, relevant on a number of different form factors. First up, CSS3 media query is a great way of managing this. We’ve got this feature in CS5.5 called Multiscreen Preview panel and media query management where you can very quickly set up a number of default resolutions for a phone, a tablet and just a desktop browser and then custom define them as well. It’s really mostly keyed around the dimensions of the screen right now, but the gist of it is, you can quickly target a CSS file to a specific resolution class—say max 400 pixels—and then go from 401 pixels to maybe 800 or 900 for a tablet and then anything above that deliver a specific style sheet just for the desktop. But the efficiency you get there is that you can really quickly build out these very targeted interfaces on top of the same HTML source, which lets you immediately repurpose your existing site.”

The latest version of Dreamweaver also makes it easier for developers to work with HTML5. “Some of the coolest things about Dreamweaver 5.5,” explains Fegette, “[are] quite frankly that we’ve just put support for HTML5 CSS3 right into the app in ways that just feel natural. We wanted to make sure that the HTML5 revolution wasn’t this big slap in the face to people, but it was something they could progress into really naturally and holistically. You’ll see things like CSS3 support in the CSS panel. You can do things like add border radius and opacity using RGBA colors to really take away some of the dependency of jumping back and forth to an image editor like Photoshop, baking these into an image and placing it into your file. Again, that’s another real power of HTML5 is that cuts down these round trips and these dependencies that a real standards-based developer would have.”

More change is sure to come, which makes familiarity with all of the hardware options even more important. “The modern content publisher really needs to understand these devices,” says Fegette, “what they’re capable of and how to become effective with them quickly, because it’s certainly not slowing down.”

More info:

Adobe Dreamweaver web site.
Adobe CS 5.5.