Let's Get Dynamic
As I wrote in Are You Deprecated, I've been making a valiant effort to shake off my antiquated Web page coding habits, which date back to the days of Notepad and Netscape 0.9. With most of my more horrendous old practices now behind me, I've turned to looking for solutions to display problems in new places. Hence my recent, if belated, arrival in the land of Dynamic HTML and fancier CSS. If, like me, your main focus is graphics and publishing, with just a secondary need to create and maintain Web sites, then the good news is that you can use these to quickly add snappy, modern functionality to your pages without making it your life's work.
What got me going in this direction was, as is often the case, the need to solve a specific problem. The articles I lay out on Graphics.com typically employ lots of images, either of screen shots or of design examples. I had been using the venerable target="_blank" to create a new browser window to display these. But as well as being on the W3C deprecation death list, the increase in suppression of intrusive browser pop ups has made this a very unfriendly approach, as well providing little control over how the enlarged image displays.
Matters came to a head when I began coding the recent Creative Experimentation With Picture Fonts tutorial, which employed 20 screens to show how to use symbol fonts creatively. The detail in the screen shots needed to be available to the reader, and yet I didn't want to clutter the page with huge versions of them. Creating 20 popups was more than I could face, so off I went, trolling for solutions.
When it comes to new Web site techniques, I prefer to start with code snippets that are close to what I'm after, and then puzzle through how to tweak them. After a few dead ends I came across a site that many readers will no doubt be familiar with, Dynamic Drive, where I immediately experienced that pleasant "kid in a candy store" feeling, poking through the many handy examples. Lo and behold, there was the very thing I was after, a CSS Popup Image Viewer. Implementing this was as simple as adding the provided CSS styles and using the example HTML markup on the page. A few adjustments to the default styles and the result was the approach used in the Picture Fonts tutorial. Trivial for full-time site designers, perhaps, but it made my day.
Emboldened by this and subsequent efforts, I'm now trying to extend my abilities in this area, as time permits. To that end I have found the frighteningly-thick Dynamic HTML: The Definitive Reference, by Danny Goodman (O'Reilly), a useful tool when trying to tune code snippets for my own purposes. Now in a third edition encompassing 1,300 pages, it provides more than I'll probably ever need as a reference work covering HTML, XHTML, CSS, Document Object Model (DOM) and JavaScript, but it's a reassuring presence to have within reach. It's also useful for resolving more mundane issues, such as cross-brower display, the bête noir of the Web page creator.
These new directions have put some of the fun back into coding pages and I hope made the resulting viewing experience more enjoyable for visitors. If you're not already doing so, perhaps it's time you put a little dynamic zip into your pages?
Chris Dickman
Graphics.com
Though, the "pop-ups" don't show up correctly in Safari...