However, I promised everyone that attended my MAX 2011 session that I’d post the slides, hand-outs, and exercise files today, so here they are! For everyone that attended my sessions: THANK YOU! You guys were awesome and made the conference and my sessions so much fun.

Exercise Files (61 MB)

Lab hand out (249K)

Slides

If you are planning on going to one of my sessions, or if I happen to talk to you along the way, I’ll mention that you can download my exercise files and handouts from my Getting Started with Dreamweaver CS5 here.

So here they are: Exercise Files & Handouts.

If you have questions, email me at james AT simpleprimate DOT com.

I’m looking forward to reconnecting with some old friends and hanging out at MAX again this year. See you soon!

Over the years, Interactive Fun! has become Lodestone Digital, and the company has grown to become one of the largest providers of Authorized Adobe Training in the country. We opened offices in Cleveland and New York, and offered satellite training in Houston and Boston. Along the way we’ve trained in almost every state in the country (I never went to North Dakota) and I personally have logged over 175,000 miles in frequent flier points. It has been an absolute blast.

However, life is about changes, and a couple of months ago I had a wonderful opportunity open to me. As some of you know, I’ve been writing titles for lynda.com for about a year now. My first title, Dreamweaver CS3 Beyond the Basics, was recorded in Garrick Chow’s office in Harrisburg, PA. The booth was tiny, not air-conditioned, and my days frequently had me recording from 9 in the morning to 2 or 3 the next morning. As you can imagine, I was hooked. Since then, I’ve recorded seven additional titles, including Adobe’s in-box training for Dreamweaver’s CS4 release. The work is very rewarding, and the people in the lynda.com organization are top-notch from top to bottom. So when the chance to become a full-time author was offered to me, I had a very tough decision to make. In the end, I decided that once again I had been presented with an opportunity that was just too good to pass up.
So today I’d like to publicly announce that I’m leaving Lodestone Digital as Director of Training to accept a position as a full-time author at lynda.com. I’m extremely excited about what the future holds and what I can accomplish as a part of the lynda.com team. I want to thank all my colleagues and past clients at Lodestone Digital, it was a true joy working with all of you.

Of course, now it’s full steam ahead. I’m about to start work on my next title, and this blog will become much more active as I discuss what I’m working on, where I’m going to be speaking during the year, and answering questions from lynda.com subscribers. I’d like to thank you all for your support and I can’t wait to get started!!

Maria had noticed that when testing her Spry Menu Bars in Firefox that the sub-menus would not reset if the user hit the Back button to return to the page. Unlike other browsers which would show the default menu, Firefox would show the sub-menus still in their hover state. Maria checked my example files to see if she had done something wrong and noticed that my menus did the exact same thing. Now, truthfully, most clients might not care about this behavior, but Maria was wondering what the heck was going on and how she could fix it.

So, the first question is why is this happening? Well, since the behavior tends to happen in Firefox and not other browsers, that’s a good place to start. A quick look at Firefox’s caching policy tells us all we need to know:

Firefox 1.5 uses in-memory caching for entire Web pages, including their JavaScript states, for a single browser session. Going backward and forward between visited pages requires no page loading and the JavaScript states are preserved. This feature, referred to by some as bfcache (for “Back-Forward Cache”), makes page navigation very fast. This caching state is preserved until the user closes the browser.

Since that hasn’t changed since 1.5 we can safely say that Firefox’s caching preference is what is causing the issue. Also, it’s worth pointing out that Opera uses Back-Forward Caching as well, so the issue also appears in Opera.

Javascript to the rescue…

Now that we know the problem, solving it should be pretty easy! However, as always, the most obvious solution isn’t necessarily the right one. We could simply prevent the page from caching, thereby forcing the menu to reload each time the page is navigated to. We could do this by using an unload event handler (which forces Firefox to reload the page) or by changing the cache-control property for the page. Although this would work, it would also slow site browsing down and could break pages relying on the cache for functionality, so that’s probably not the best solution.

A better solution would be to look at how the Spry Menubar javascript displays and hides the submenus in the first place, and then to figure out the most efficient means of hiding them from the Back-Button inclined user. Like most Ajax-driven menus, Spry shows and hides submenus by dynamically assigning class names to nested unordered lists based on user interaction. The associated CSS then shows or hides the menus based on the class attributes as well as controlling positioning and formatting for the submenus. By removing those dynamic class names when a link has been clicked, the menus should reset themselves to their default states. Although Firefox has the pagehide event (which would allow us to reset the menus as the user navigates away from the page without resetting the cache) it is proprietary to Firefox. Since Opera also has the same issue, tracking a mouse click would give us more cross-browser compatibility.

I’m a firm believer in not re-inventing the wheel, so the first approach I took was to register a click event listener to the Spry menu and then “piggy back” a mouse click function on the existing mouse out function (which hides the menu). To do this I added the following to the SpryMenuBar.js file:

Spry.Widget.MenuBar.prototype.mouseClick =
Spry.Widget.MenuBar.prototype.mouseOver = function (listitem, e)

This worked fine except for the built in delay which caused the menus to display briefly as the user navigated back to the page. At that point I was trying to decide whether to add some conditional logic to the mouse out function –adding the delay if it detected the mouse out event and removing it if it didn’t– or just writing another function for the mouse click that left out the delay altogether.

Adobe Forums to the Rescue!

It was at this point that I found out someone had already done just that! Checking Adobe’s forums to see if anyone else had taken a stab at the problem (mental note, check the forums first next time…), I found that Niels Hofkes of Solutions In Balance had indeed taken that very approach and written a nice, compact function that adds the mouse out functionality without the associated delay. So rather than write my own, I tried out Niels and found out it worked great.

Essentially, Niels added an mouse click event listener to the menu bar initialization and then took the existing mouse out function, stripped it down to remove the delay, and added it as a new function. It works great and doesn’t cause any weirdness on any of the browsers I tested it on (IE, Firefox, Chrome, and Opera). I’m guessing it will work well on Safari as well, but be sure to test that one as well before releasing this into the wild.

Kudos to Niels for slogging through this and posting about it in the Adobe forums! This solution won’t be for everyone (in fact, some of you may not see this as an issue), and a few of you javascript superstars might have a more efficient solution (if you do feel free to add it to the comments) but for the most part I think this approach works fine. I also think this approach would work equally as well for any Ajax menu bar experiencing the same issues, just find the function that handles the mouse out event and write a similar function for the click handler.

Try it out! Use the menu to browse to About > Contributors and hit the back button. The default should still show the submenus, while the fix should hide the submenus.

Default | Fix

For those of you looking for a more step-by-step approach here’s what you do:

1. Add an event listener to the Spry.Widget.MenuBar.prototype.initialize function. Just below the existing mouseover and mouseout handlers add the following line of code:

this.addEventListener(listitem, 'click', function(e)
{self.mouseClick(listitem, e);}, false);

This adds a click event listener to each item on the menu bar.

2. Next, scroll to the bottom of the page and add the following function:

//remove menu bar hover states when back button is pressed in FF/Opera
Spry.Widget.MenuBar.prototype.mouseClick = function (listitem, e) {
     link = listitem.getElementsByTagName('a')[0];
     var submenus = listitem.getElementsByTagName('ul');
     var menu = (submenus.length > 0 ? submenus[0] : null);
     var hasSubMenu = (menu) ? true : false;
     this.removeClassName(link, hasSubMenu ?
     ↵this.subHoverClass : this.hoverClass);
     if (menu)
       this.hideSubmenu(menu);
     if (this.hasFocus)
     link.blur();
};

This finds all the menus and submenus and removes the subHoverClass and hoverClass when a link is clicked.

That’s it! I’d like to point out that if this is the result you are always looking for, you’ll need to save this SpryMenuBar.js file and reuse it each time you employ a Spry Menu Bar.

• Understanding the Cascade, Inheritance, and Specificity
• Using Dreamweaver to resolve style conflicts
• Creating custom CSS starter pages
• Using Fireworks to build design prototypes
• Building a CSS workflow around Live View, Related Files, and the Code Navigator
• Online typography
• Strategies for using background images
• Styling tables and forms
• Building navigation
• Controlling page layout
• Styling Spry Widgets through custom CSS
• Using CSS to validate CSS and check for errors
• …and, as they say, much, much more!!

For CS4 I’ve updated the design and layout of the site you’ll build and threw in a few surprises as well. Head over, give it a look and let me know what you think! As always questions are welcome…

It’s amazing how fast an hour goes by when you’re having fun! Do yourself a favor, pour a tasty beverage, take your shoes off and head on over to the Deke Lounge…

To be fair, the design process I go through typically protects me from this cycle most of the time. I had a professor in college who repeatedly challenged us during our critiques. “If you can’t defend it, if you can’t explain your choices, don’t bring it in here….and ‘it looks good’ is not a defense!” That phrase (thanks Professor Rose!) helped lay the foundation for my own design principles, which is if it doesn’t mean anything, if it doesn’t relate to the information you’re trying to communicate, it doesn’t become part of the design. Although staying focused on the best way to deliver information to the viewer helps most of the time, there’s no getting around those occasional creative doldrums.

See monkey suit...

I was reminded of this recently as I was asked to officiate a wedding (don’t ask…LONG story). Since I was performing the ceremony, my wife was left with my three daughters (young daughters might I add) which left absolutely nobody to take pictures. Well…almost nobody. My oldest daughter was 5, and fairly advanced for a 5 year old. Figuring something was better than nothing; my wife gave her that camera and had her shoot away.

The result astounded me. Not because Morgan took great pictures of the wedding…she didn’t. No, what really caused me to do a double-take is the totally different perspective that came through in Morgan’s set of pictures. I was presented with the wedding through the eyes of my five year old, and realized that she had a very different take on the evening than I did. Not only that, she managed to catch some things and some textures that I know I’ll use in future designs; things that I didn’t think a five year old was capable of focusing on and capturing. This led me directly to the point that I’m making in this post: When we feel like we’re in a rut, one of the best ways to lead ourselves out of it is by changing our perspective. Putting yourself in someone else’s shoes or looking at your assignment through the eyes of another can really help you find a solution that’s outside of your normal, comfortable old bag of tricks.

So in celebration of Morgan I present you with a few of her images from that evening…un-retouched and in their original glory. Look closely, you’ll see some textures and objects that will undoubtedly show up in a few of my future designs…

Morgan’s calvacade of whimsy…

The auteur & sister

wood

What people look like at a 5 year old height...

Floral patterns...

My sister, my focus

About head high...

Nice composition...good use of lighting

Candids are really candid when shot by kids

Her sister's finger...you'll see the results later

I have no idea

A baseball, I think

Accident or not, this is a good shot

Note the use of the smudge for artistic effect...

Morgan's journey into texture...

Pool balls, if you were wondering

I have no idea what this is...

Artistic salad shot is go!

Nice!

More texture...

Nice framing...nice lighting, odd perspective...

Morgan found the nightshot setting...and my lap

Go Carolina!

Sister close-up

I don't know why, but I really, really dig this shot

Well, there you have it, just a few examples of Morgan’s unique perspective. Occasionally taking a fresh look at things from a different angle can steer us in directions we might otherwise have missed. For example, the Featured Article banner image was made from several of Morgan’s files, can you spot them?

So hey, if you’re really stuck…hand your camera to a five year old and get out of the way…

Stockpile what you can now, because when it’s gone, it’s gone. Of course, a couple of generations from now kids will be saying, “what’s film?”

You can check out a tribute to Kodachrome complete with slide show on Kodak’s site.

For most designers, making the transition from print design to web design can be a frustrating process. At first it seems easy. You’re a visual designer, so design is design regardless of medium…right?! Undaunted, you jump right in and the next thing you know you are confronted with the most dizzying array of acronyms this side of the military. Suddenly you find yourself surrounded by terms like CSS, XHTML, PHP, AJAX, XSLT and countless other shorthand terms for technologies you never wanted to learn. It can be more than a little intimidating.

I consider myself fortunate to have made the transition in the mid 90’s, when the web had fewer moving parts than it does now. There was less to learn, and consequently I was allowed to grow along with the industry. For a print designer interested in adding web design to his or her skill set today, there is a much steeper hill to climb. I’ve heard more than one web designer say to their print design friends, “hire somebody, just not me, I’m really busy,” when the discussion turns to what they need to do to start designing web pages. I’ve often been asked that question myself, and my Dreamweaver and CSS courses are filled with print designers who are making that leap and want a clearer path from point A to point B.

Recently this question was put to me during an interview with Deke McClelland during his Martini Hour show, and during my discussion with Deke I decided to write a more thought-out response here, detailing what I’ve learned over the years about web design and how a new designer might go about making the transition. So here goes it (and Deke, here’s that more detailed answer…), seven tips from me to you on how to successfully design for both the print and the web.

Learn your craft

Are any of your friends web developers, stock brokers, or fast food employees? Imagine them purchasing a copy of InDesign and then taking on a Fortune 500 company’s annual report as their first project. Sound funny? Well, I’ve seen plenty of print designers do just that. They’ll snag a copy of Dreamweaver and fumble about, cursing the fact that it doesn’t work like InDesign as they try to put together a web site for their largest in-house client. Web design is not a subset of print design; it is not subordinate to it nor is it something you can pick up over a weekend. Web design is a discipline that requires your full attention. Learn your craft. As distasteful as it may seem at first, at a minimum you need to be comfortable with both XHTML and CSS. Technology is a tool; it allows us to get the stuff we see in our head to the printed page and onto the screen. Not knowing your tool means not being able to fully realize your vision.

Decide what you want to focus on

Do you want to build kick-ass dynamically driven ecommerce sites? Or perhaps you want to create immersive interactive experiences? Maybe you’re more interested in clean, well-structured front end design? Or maybe you want to build easy to maintain sites through the use of content management software such as joomla or drupal. Regardless, one of the best pieces of advice I can give is to choose a direction and then dedicate yourself to mastering that aspect of web design. Becoming known for a specific area of web design or development is not a bad thing, it gives you a niche that you can carve out for yourself and serve as the foundation for your work. You’ll find that you can give clients more consistent, professional results, and that you’ll become a proficient web designer faster. It also then allows you to move on to other aspects of web design or development, and that helps me make my next point:

Eat the elephant slowly

The web is a big place…and there’s a lot going on. PHP, .NET, or ColdFusion? WordPress, Movable Type, or Expression Engine? Joomla or Drupal? Flash or AJAX? CSS or… well, OK, you HAVE to learn CSS, but my point is there is so much to learn that it can often seem a bit overwhelming. Sure the cool kids seem to know everything (damn you Jason Santa Maria!), but in reality if you talk to them there is a laundry list of stuff they haven’t gotten around to learning yet. Start with your core skills, and move outward from there. Once you get a handle on one area of web design, you’ll find that projects just naturally move you into another. After a few years go by, you’ll be amazed at how far you’ve come. The trick is to not get frustrated and to understand one very important rule… you will fail, and you will break stuff. That’s how we learn.

Online brand is about experience

If I have one criticism to level at pure print designers when they create online content it’s this one. The design aesthetic that allows you to convey brand through print doesn’t always translate well to web. You can’t just take your print campaign, slap some XHTML under the hood and call it a day. Web design, more so than print design, is about experience. Check out Nike.com or Apple.com, those are just two of the companies that really get how brand is conveyed over the web. Not only do the graphics, text, and layout reflect brand; how the interface works, how items load, and how you interact with the site builds brand as well. Instead of being restrictive, as some designers mistakenly bemoan, web design allows you to create immersive brand experiences that print design cannot match.

Content is king, embrace standards-based design

So…who is accessing your content today? Is it a suburban Mom, tooling around in Internet Explorer over a broadband connection, a working-class office employee in Mumbai surfing your content over his mobile connection, or is it an individual with a vision disorder accessing your page through a screen reader? Depending upon your site, it might be all of the above. Therefore, while design is incredibly important, on the web it doesn’t top content. Making sure that the widest array of devices and clients can access your content should be central to your design decisions. Embracing web standards –properly structured XHTML and CSS– can ensure that your content travels well across the multiple platforms available today and into the future. Don’t take my word for it, let Jeffery Zeldman explain it to you, he does a better job of it than I’ll ever do anyway…

Quit being a control freak

Hey, can I make my page look exactly the same on Internet Explorer, Safari, Opera, Firefox, and Chrome?! Can I make sure that regardless of platform or device my headlines work the same with my paragraphs? Is it possible to create a pixel perfect design and display it across multiple systems in a standards-compliant manner?

No. Get over it.

Allow your designs the flexibility to move and sway in the wind that is the multiple device and browser universe of the web. You’ll find you sleep better at night. Trust me.

Make friends…good friends, with a developer

Look, no matter how much you focus on web design, there’s always going to be stuff that’s beyond your current reach. I will never build an ecommerce shopping cart. There, I’ve said it. It’s not that I’m not capable of it, I just don’t have the time or energy necessary to master all of the techniques needed to pull it off successfully. Hell, I’d get lost just trying to master the security aspect of it. Thankfully, the web development world is filled with people who find this sort of stuff fascinating. By cultivating relationships with those outside of your area of expertise you’ll be able to increase your capabilities by a factor of 10. Just as someone is willing to pay your for your design sensibilities and your ability to communicate information, you should be willing to pay someone who has the capability to make all that stuff actually function. Of course, the relationship works both ways, most developers I know couldn’t design an exit sign, much less a front end to that really, really cool app they’re developing. The web’s a big ecosystem and you’ll be much more effective as part of a larger team than trying to do everything on your own.

So that’s it really. It’s simple when you boil it down to a single statement: “There is no ‘make webpage’ button in InDesign, nor should there be one. Quit pouting and go learn how to be a web designer.” Where do you start? Well, there are some great books on learning web design, you could always take a class, and there are some excellent online tutorials. In the end, nothing beats rolling up your sleeves and just getting to work.