I recently started to modify the design for the Chains and Charms Pandora bracelet builder to be more user friendly.

At first, I thought I would have to learn the ins and outs of AJAX being used in combination with Coldfusion, but I found this to not be the case. I initially saw that this one interactive online application was made of roughly 10 Coldfusion pages and even more Javascript files. This was intimidating, but I’ve found for the most part that the visuals I had to change were all modifiable on the same page. This was made possible by some handywork with div layers and some skillfull CSS style sheet creation.

Since this bracelet builder had a lot of components, I was facing a lot of div layers, most of which were hidden from the start. Changing these was best done by figuring out which div contained what component and then altering the CSS style sheet. The large quantity of div layers and the fact that so many were hidden made the prospect of relocating and resizing these by mouse click in the design view a nightmare.

Luckily, the div layers were all named with descriptive and relevant ids so figuring out which div contained what content wasn’t too much of a pain. So the lessons learned are, that descriptive names for your div layers can make future modifcations less of a headache and the other lesson would be that you should know how to use CSS style sheets if you don’t already.

What? Templates at DDA! NEVER! What I am referring to are the custom HTML website templates that we build for each and every website we design and develop. Templates allow any of our talented, and experienced graphic designers and programmers to add pages of search engine optimized content to a site, while, at the same time, keeping the site design consistent from page to page.

That’s my task today. Well, at least one of them, since I will be enjoying a few days off and need to tie up some loose ends. While it’s nearly impossible to forsee all possible layouts for a page, it’s of the utmost importance to prepare proper style sheets (CSS) which include headers, paragraphs, menus, submenus, and other miscellaneous styles. AND, also considering the look for each of the link, hover, active and visited states for the aforementioned styles is important as well. While the templates are made, the seo copywriters are busy working on the optimized content, which involves writing content and then getting it approved by the client.

Below is a list of other considerations that we need to address before identifying the template(s) as “complete”.
• Does the template look and function the same on all browsers and platforms?
• Has a home page and inside page template been completed?
• Has a spell check been run?
• Have additions to the site been considered, such as new pages, new product, etc.?

For the better part of Thursday afternoon and a couple hours of the weekend, I worked on learning and implementing a Spry MenuBar into a new HTML website template. Prior to Dreamweaver CS, adding a pop-up menu to a site was fairly simple. Click on the image or text link that you wish to have the pop-up menu activated and add the pop-up menu Behavior to the link. Some adjusting to the design and placement was allowable, but unless you were familiar with Javascript, there were restrictions.

Again, I’m no programmer, however, I get very excited and dare I say “giddy” when I venture into the Code View of an HTML page in Dreamweaver and begin tweaking code. So, now it was time to learn a new method for adding pop-up menus to an html page since Dreamweaver CS has done away with the pop-up menubar and added the Spry MenuBar Widget (I believe that is the right terminology). Instead of using Javascript like its predecessor, the Spry MenuBar Widget uses CSS (Cascading Style Sheets). CSS is a style sheet language that is used to describe the presentation of a document written in a markup language (description courtesy of Wikipedia).  I do love style sheets and DDA graphic designers and programmers use them all the time.

After I was very pleased with the design and functionality of my menu bar I tested it in Safari (looked great!) and Firefox, Mac version (again great!). I then ventured over to the PC to test it on Firefox, PC version (beautiful) and now my arch nemesis Internet Explorer 7 (@^##*$#@^*#@!!!). After some brief troubleshooting I called my DDA support team to help. Why, oh why would it work on all three other browsers and not IE7? While I still don’t have the answer, rest assure that the DDA programming and web development team is working on it and soon another site will work wonderfully in all available browsers and platforms!