Hello folks!
Phew, it has been a long time since my last post. Truth is I have been concentrating all of my efforts on my previous job. Oh, did I say previous? Yes, I did. Unfortunately, the temp assignment that was supposed to be my foot-in-the-door opportunity turned out to be another dead end. Chock it all up to experience and move on. Glad to say, though, that it was not a complete waste of time, as I had a chance to work with some amazing people, and to expand my knowledge/skills in areas which I had only previously dabbled in. I experienced a lot of satisfaction and success at this job. I am sad that it came to an end. And since I like to accentuate the positive, I’ll go out on a limb and say that believe everything happens for a reason. Perhaps my dream job is just around the corner! So, with that in mind, I move onwards and upwards.
Today I wanted to share a technique in e-blast construction which I have come to really appreciate – using Slices. I have made this a two part blog. Part One concentrates on the reasons why I choose to use the technique which I will share on Part Two. After exploring different avenues leading to the same destination, I feel very confident in the work process I have developed. But first, let me explain how I arrived at my conclusions.
What can I say about Dreamweaver that has not been said before?
- That it is a great tool for web design?
In a manner of speaking, it can be. - That it can be a crutch that keeps one’s coding skills half-developed?
Most assuredly, if you let it. - That its WYSIWYG interface makes web design and development less complicated?
That’s definitely debatable. Though some would argue that it actually complicates things.
In any event, even though I had started out by learning how to hand-code, once I acquired Dreamweaver I began using it as a crutch, really resisting the need to code from scratch. In the end, using Dreamweaver without deeply delving into the actual code creates huge headaches. Hence, why I no longer use Dreamweaver to craft my web projects from start to finish. Most importantly, I never use Dreamweaver to structure a wireframe or build a template. But don’t get me wrong, Dreamweaver is helpful in moving production along quickly. The real trick is knowing when to use it. For instance, the Image Map feature really makes things a cinch because Dreamweaver figures out all the coordinates, so you don’t have to. Using Dreamweaver to configure your Image Maps significantly cuts down on production time. And that is only one instance; there are many other reasons to continue implementing DW’s sporadic use in the development process.
From Dreamweaver I moved on to exploring tools that would force me to hone my hand-coding skills. Among some of the software I explored were MSWord, Open Office Writer, Notepad, and Notepad++. Aaaaah! Notepad ++. I want to take a moment and tout this awesome little open-source program’s features. It is, at present, one of my favorite web development tools. Not only is it customizable, it is simple and to the point. Color code settings, numbered lines and indenting make searching through lines and lines of code as easy as pie. The Color coding makes it easy to distinguish functions from values, variables from events, etc. It also helps to pick out inline programming languages at a glance! You can spot HTML code in a different color from the CSS code or Javascript, for instance. Notepad++ is not only for web development, it supports a lot of other programming languages. Also, searching and replacing instances can be done with the click of a mouse, or changing the letter-case on a portion of, or on an entire document is effortless. Testing your code across different platforms, whether Firefox, Opera, Safari, IE, or email blasts, etc., is really, really simple. And I could go on and on. These are only a small number of advantages to using this neat and free program. I recommend you check it out and decide for yourself!
From Notepad++ we move on to Illustrator and Photoshop. Both of these have a feature that allow designers to turn any document into a web page, using Slices. This definitely helps in making your online design dream a reality. However, just as Dreamweaver can complicate things , so too do these two programs. For starters, if you are using older versions, like CS4 or CS3, you will have a finished document that does not meet W3C standards. In fact, there is a lot of deprecated code still being used in CS5 versions. Even so, because the standards are evolving so frequently, if you want to use this method, I cannot stress enough the importance of keeping up to date on W3C standards. In addition, creating a website from Slices does not necessarily spit out the best structured document. I find it necessary to go through the page, line by line, to eliminate unnecessary table rows and/or data. You may find yourself nesting tables within tables, or using Ps, DIVs or SPANs intead. Whatever your coding style, using Slices will work best if you hand-code the wireframe, and then insert the necessary Slices.
If your work demands that you crank out a high volume of e-blasts, I recommend creating a template/wireframe as your standard. Always use this structure when designing the artsy stuff to fill it with. Once your wireframe is finished, create a document in both Photoshop and Illustrator that uses the same exact dimensions for its overall size, TDs and TRs. The rest will be a cinch, and it will free up time you can now devote to being creative!
To view a step-by-step use of my work technique, be sure to read “E-blast design simplified – Part Two” coming up next week. Be sure to email me if you have any questions or suggestions for this article.