I haven’t posted much in the past month, but rest-assured I have indeed been working on new items for this website.

• New Design - The new design is still being fleshed out. I’d like to add some Calvin & Hobbes-esque art to it, but we’ll have to see how that looks.
• Flickr-style Image Annotations - I’ll be releasing a really nice looking image annotation plugin I wrote. It’s based on the Flickr image annotation system, except I’ve thrown in some nice jQuery fade effects and the comments look a little better (IMHO anyways).
• Yahoo-style Slideshow Gallery - If you’ve ever viewed photos on Yahoo Autos, you’re familiar with this type of photo gallery. I’ve created my own version of their gallery and I think it came out very nice.
• Viget-style Lightbox - For some reason, I always thought that creating a lightbox wouldn’t be very easy to do….but, after attempting to recreate Viget’s lightbox I found it was super simple! So, I’ll make that available too. (For those that don’t know, a lightbox is when the screen fades to black and something else appears over the site…..e.g. my current recent work to the right does this)

The tasks I take on at work range from developing emails and creating new webpages to animating online banner ads. Throughout all of this, there have been a couple of tools that have made these experiences so much easier.

• Aptana Studio - Although a bit slow to load, Aptana is an excellent tool to code anything from HTML to PHP or Javascript in. The built-in previews are nice, but what I really like are the snippets. Snippets allow you to create small, easy to insert, files that you can add to any project you’re working on. They can even be customized to prompt for variables (e.g. a swf’s filename). This is excellent for the web developers out there that have to do any type of regular website maintenance.
  Runner-up: Notepad++ - Up until I started using Aptana, Notepad++ was my favorite windows app to write any piece of code in. It’s extraordinarily fast to load and can color-code just about any file format you want to write code for.
• Web Developer Toolbar (Firefox Plugin)- This single plug-in for Firefox has so many useful features for web development that it’s probably why I took to liking Firefox so much (that and Firefox’s greater use of web standards). You can outline any element on a page, find broken images, display an on-page ruler, view css, and closely examine an elements css. And that’s just to start.
• 960 Grid System - Although I may switch to Blueprint eventually, 960 is the first CSS Framework I’ve worked with and it makes constructing websites extremely easy and fast. Using 960, you can quickly generate mock-ups or full-blown templates in a fraction of the time. No longer do you have to construct the css for every single structural component of your website’s design.
• Firebug (Firefox Plugin)- I admit, I didn’t originally think Firebug would be a plug-in that I’d use so often. But, it’s now an essential tool. It’s great for troubleshooting css problems with the inspection tool and the live-edit feature makes creating “what-ifs” for management super-easy.
• Screengrab (Firefox Plugin)- Before screengrab, I used to have to stitch together screenshots to get one of the full webpage. With this tool, you just right click to get a copy of the full page.
• ImageMajick & Ghostscript - In one of my old jobs, I had tasks that involved prepping multi-page PDFs for the web. Not having a quick computer, Photoshop wasn’t really an option for doing a batch job on these. Plus, I had to adhere to a certain file-naming convention which I’m not certain that PS can handle without me having to type it in. Anyways, in comes ImageMajick, an image editor that can manipulate graphics via the command line. Plus, with Ghostscript it can modify PDFs and convert them to jpegs or gifs. So, all you have to do is supply the PDF and a batch file, and it will do all the dirty work of resizing & thumbnailing(or whatever) for you.
• WinFF - Like many web developers out there, I was inevitably asked to take some video and convert it to another format. Thankfully, I found WinFF, which gets the job done (but it does have a tendency to quit unexpectedly after converting a video - although apparently there is a new version out now….so, you may have better luck with it).
• Terminal - Ok, so this one is probably a little out of place on this list. But, having access to a unix-based CLI is awesome. True story, I was once asked by a certain IT department to provide a list of *ALL* the files I had modified in the past day or two, so they could check each one. If I had had only a Windows machine, that task would have taken hours to complete (which I think was IT’s point-to get me to go away, since they do have access to linux machines). Fortunately though, using Terminal on my Apple I was able to give IT a list of all 300+ files to check on within a few minutes(their response? “f*ck! he’s not one of our usual ID-ten-T coworkers.”).

So, what are some of your favorites?

Lately, I’ve been reviewing resume after resume for a Jr. Web Designer/Developer position at work. Going through this process, I’m realizing just how good I did on my own and how such simple things can keep an individual from landing an interview. So, here are my 5 tips for web designers & developers to getting past the resume review stage.

1. Setup a portfolio - Just having a portfolio puts you leaps and bounds ahead of everybody else applying for the same position. It’s the first thing I look for. Even if it’s only a website you made for a class or school group, use it as a foundation for your portfolio. A professional looking portfolio can say more than you ever can in your resume.
2. Show off your portfolio - Having one isn’t enough, it also needs to be readily apparent that you’ve got one. Remember, we’re going through hundreds of resumes (mostly text-based with limited formatting). So, don’t hide the link(s) to your portfolio. I don’t know how many I’ve tossed aside thinking it didn’t have a portfolio, only discover later that “whoops”, it actually did…it was just buried 5 paragraphs deep. Which brings me to #3…
3. Keep to the point - Given the amount of resumes that come in, keep your resume short and around one page in length. Excruciating details about every single job you’ve ever held are not important. Focus on the ones that relate to the job you’re applying for and single out the most important responsibilities of the job(s) you previously held. If you once worked at the Sizzler, that’s great…if you’re applying at TGIF, but for a Web Design job it’s just wasting space that you could be using to really sell your knowledge of the job.
4. Specialize - If you’re applying for a Web Designer job, emphasize your knowledge of Photoshop, XHTML, CSS, etc. Don’t pour out a list of obscure languages that you barely know. Nobody cares! It only shows that you’re, at best, a jack of all trades and at worst, a master of none. Focus on the technologies and skill-sets that are important for the job and ditch the rest. It’s better to admit you’re familiar with a skill unlisted on you’re resume than to admit you don’t really know it that well.
5. Stop Spearheading! - Don’t throw in words like “spearheading” for your own “self-puffery”. It comes across as amateurish. Stay with simple, strong words. If you’d be embarrassed to say it out-loud, don’t put it in your resume. (If you’d still say “spearheading” aloud, then you’re probably a jackass. Glad I could point it out for you.) e.g. “I led a team of engineers in defining project requirements” is better than “I spearheaded initiatives that led to the development of project requirements.” The first one comes across as an individual who can both lead and work with his co-workers. The second version comes across as somewhat self-aggrandizing and a bit narcissistic.

In the past year I’ve went from an HTML email novice to an expert. I’ve created a TON of HTML emails and have even went so far as to create my own program for mass mailings (a very simple implementation of phpmailer). Here’s what I’ve learned from diving into them:

• Forget Standards - Standards based design is great, and I practice it on most all of the websites I create. However, email is not really the place to do so. There are so many different mail clients, with so many different exceptions, that to achieve the best aesthetic results, you’ll need to bite your tongue and go against the W3C(Oh the humanity! ).
• Body only - Although you can leave all the other tags in, it’s likely that your recipients mail client will strip out everything that’s not inside the body tag (gmail anybody?).
• CSS - Inline is the best way to ensure that your emails come out looking the way you intended. Try to put all of your styles inline, otherwise you risk having them stripped out by your recipients mail client. Webmail clients are especially known for removing linked & embedded stylesheets. They do this to prevent your styles from screwing up their webmail layout and to prevent any mischief from emails sent with ill-intent.
• Embedded CSS -If you use embedded styles, make sure you place them within the body tag. Some webmail clients, gmail specifically, will remove everything outside of the body tag, so it’s best to include your styles within the body tag. I usually save embedded styles for things such as hover states. That way, if the embedded styles are removed, there’s not much lost.
• Linked CSS - You can try this, but it’s probably not going to work and is more likely to get your email flagged as spam.
• Use Tables - Yeah, there is support for DIVs in many email clients. However, to get the best looking email through all clients (even the monster known as Lotus Notes), you’ll be best served to use a table-based layout. Plus, some clients remove your padding & margin styles (regardless of if it’s embedded or inline), so a table will help keep items spaced appropriately.
• Don’t Overuse Tables - Remember, you’re developing for a format that is very easy to break. If you had to choose between using a complex table layout or adding a few Kb and using just a solid image, go with the image! Saving 1-2Kb is worth not having to deal with nested tables.
• <BR> - Don’t use <br/>, use <br>. Some email clients ignore <br/> completely.
• Alt Tags - images are usually disabled by default, so make generous use of the Alt text. Doing so can mean the difference between getting a conversion and losing a subscriber. Also, remember that in Thunderbird (and other clients I’m sure), your CSS can format alt text. So, test out your email with and without images.
• Lotus Notes - Your HTML emails will never look as great in Notes, don’t sweat it.

If you have any questions, comments, or would like a quote for your email, just leave a comment or contact me directly.

Just a short break from all of the real estate related posts to talk about one of my other passions, Web Design!

I’ve been creating websites since ~1997 and it’s always surprised me just how much people will pay for a few webpages. From day 1, my thought has been that I would be able to dominate web-design & development because I can create the same quality website as the big-dawgs, but for less.

But, year after year and company after company, I’m discovering that that’s not the case. The real deal is that individuals and companies associate price with quality. If the prices I charge aren’t around the market price, then the question becomes not “Where do I sign up?” but “What’s the catch?”, regardless of how my portfolio comes across.

I suppose it’s the same in most markets, even housing. If a house is selling for much less than it’s comps, then you automatically ask “What’s wrong with it? Termites? Degraded foundation?”

So, lesson learned. I’m going to reorganize my pricing structure. I’ve seen many start with a base price that covers the basics that one would need. They typically range from $700-1500. I’m leaning towards $1200. That will cover:

• Website Design: I’ll work with you to develop a layout that is pleasing to you, standards compliant, and optimized for search engines.
• Wordpress Template: Wordpress is an extremely popular website content management system (this site runs on it). Any design can be turned into a Wordpress template. Once created, you’ll be able to add as many pages as you want to your website without any additional cost, whenever you want.
• Static pages: If you prefer not to go with Wordpress, a static website can be setup. Typically, there’s not much work involved in setting up additional pages, so I’ll add as many as you want (within reason - I’m probably not going to hand code your novel and put it online )
• Web Hosting: One domain name registered and One Year of webhosting setup with Dreamhost.com (the CDI! Dreamhost Plan). You’ll have control over your account and will be able to manage it at your discretion.

If you’d rather setup hosting yourself, I’ll work with you to discount some or all of the hosting costs.

If you go through Dreamhost, feel free to use the following promo code to save $45: ZBPROMO (this promo is available to everybody).