(Serious) Fun with Web, Mobile, and Dreamweaver CS5.5
- Dreamweaver CS5.5 Rises to the Challenge
- Creating Visual Effects Without Images
- Gearing Up for Mobile
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
After years of very little happening, web designers are suddenly caught up in a maelstrom of change. Forget predictions that HTML5 won't be ready until 2022 and that CSS3 is merely a pipe dream. They're already here. What's more, the web standards body, the World Wide Web Consortium (W3C), is encouraging web designers to start using the new features even though the specifications are still evolving. And in case you hadn't noticed, huge numbers of people now access the web on their mobile phones and tablets. Designs need to look just as good on a tiny screen as a desktop monitor.
Where's the fun in that? It sounds like a nightmare.
The greatest barrier to adopting new techniques has been buggy implementation and inconsistencies between browsers. While bugs and differences between browsers are unlikely to go away in a hurry, what's different now is that the browser manufacturers are competing to implement common standards, rather than going their own separate ways. All the latest versions of the major browsers—including Internet Explorer—support large parts of HTML5 and CSS3.
The other important factor is that HTML5 is deliberately designed to be backwardly compatible. For example, you can start implementing the new HTML5 form features in your websites without worrying that those features will break in older browsers. If a browser doesn't recognize the specialized input types, such as email, url, number, and range, it simply treats that type as a standard text-input field. As for CSS3, browsers ignore properties or values that they don't understand, so you can feel safe using many new features, such as rounded corners and drop shadows, to enhance the look of web pages in the latest browsers. Older browsers won't render the effects, but the pages shouldn't break, either.
As long as you're aware of the limitations of older browsers, and you check to make sure that your site looks acceptable with them, you can have plenty of (serious) fun experimenting with new features, progressively enhancing the experience for visitors with the most up-to-date browsers. CSS3 in particular makes light work of design elements that used to involve images and tediously complex markup.
Dreamweaver CS5.5 Rises to the Challenge
The latest version of Adobe Dreamweaver embraces all three challenges—HTML5, CSS3, and mobile—with vigor. Some of the new features were heralded in a free update to Dreamweaver CS5 in August 2010, but those features have been fleshed out and expanded in Dreamweaver CS5.5. Among all the new features, these are the most important:
- Support in Live view for all CSS3 selectors
- Visual tools for creating rounded corners and drop shadows with CSS
- Rendering of web fonts in Live view
- Greatly improved support for CSS media queries to create adaptive designs for desktops, tablets, and mobile phones
- Defining colors with alpha transparency (RGBa and HSLa)
- Integration of the jQuery Mobile framework to create dedicated mobile sites and apps
- Integration of PhoneGap, an open source framework that converts sites built with HTML, CSS, and JavaScript into native apps for Android, iPhone, iPad, and iPod touch
- Full code-hinting for jQuery, the most popular JavaScript library
As if that bounty weren't enough, built-in support for PHP code hints and syntax checking has been upgraded to PHP 5.3, and Dreamweaver CS5.5 can connect to your remote server using FTP over the Secure Sockets Layer (FTPS).
Don't be fooled by .5 in the version number. This is a major upgrade to Dreamweaver, rather than the addition of just a few nice-to-have features.
By default, Dreamweaver CS5.5 still uses XHTML 1.0 Transitional as its default doctype. The only time it defaults to HTML5 is when you use one of the jQuery Mobile starter pages, or one of the two predefined CSS layouts that employ HTML5 semantic tags (such as <article>, <header>, and <nav>). Support for HTML5 remains subdued in the background. You'll find it in code hints and in the Tag Inspector. All the semantic tags are listed in the New CSS Rule dialog box, but there are no tools for inserting the new elements in Design view. I think this was a wise decision by Adobe. Support is handy for designers and developers who want to experiment with the bleeding edge of HTML5, but it's kept in the background for the time being.