Many times in my career, I’ve been asked by colleagues and students where to start if one wants to understand the fundamentals of web design and development. As a starting point, I usually point people to Zeldman’s book, Designing With Web Standards, as well as a few other books on HTML5, CSS, and JS.

This morning, while sitting in traffic, I came up with what I think is a good analogy to explain the basics of how HTML, CSS, JS, databases and PHP (or whatever you prefer) work together.

I explain it like this.

Imagine, an empty glass and a pitcher full of water sitting on a desk.

• HTML would be the glass. It’s the structure that holds everything together.
• CSS is how the glass looks. Is it blue? Is it red? Is it tall, or is it short? CSS controls the presentation of the structure (in our case, the glass/html).
• The pitcher holding the water is a database. The water is content. The pitcher holds the ‘water’ somewhere else until you need it. It can be big or small. You can have many ‘pitchers’. You can have only one. You can fill it with whatever you want.
• Pouring the water into the cup is the PHP (or whatever language you prefer). It takes the stuff from the database when you need it, and puts it into the cup.
• Javascript (in it’s simplest sense) are the physics of the scene. For example, it could be how the water behaves when it gets into the cup. Does it splash everywhere? Is it frozen? Is it hot? Does it float away? Does it turn into Coke after someone has consumed it?

I realize this is a pretty broad generalization, however for a beginner – I believe it could be a good visual metaphor to explain the main systems working behind the web.

This might seem a bit elementary for some more seasoned developers, but this is a step by step guide to get your cross browser testing working as seamlessly as possible in vmware under os x. This has saved me tons of time, since I no longer need to cross browser test on a development site, or under a separate local install for Windows.

I use Win XP as a VM to test in IE7, but this works in newer versions of windows as well for more modern browsers. XP is the only one that actually runs IE7 as intended. The emulators all suck.

1. In VMWare Fusion, go to Virtual Machine > Settings > Network. Make sure your Network settings are set to Bridged.
2. Open terminal. Type this in – sudo pico /applications/xampp/xamppfiles/etc/httpd.conf
3. Enter your password. Hit return.
4. Look for the line that says “Listen 80″. Change that to Listen 8888
5. Go like 2 pages down, and look for the string that says “#ServerName www.example.com:80″ and change that to “#ServerName www.example.com:8888″
6. Hit ctrl-x, hit ‘y’, then hit enter to save.
7. Open system preferences, network, and copy your IP address.
8. Open VM-Ware. Start Windows. In ‘my computer’ open c:\windows\system32\drivers\etc\hosts with notepad. You’ll see a few IP address, probably 127.0.0.1. Add your IP address to the end of the list, and a site name. Like this: 192.168.0.23 yoursite
9. Open your web browser within Windows. Now you should be able to open http://yoursite:8889 in IE.
10. Party down.

Good video from seomoz.org today. Check it out.

SEOmoz – SEO Software

One of the most eye opening moments in my music career was when I learned about subtractive equalization. The basic premise being that taking away sound, is always better than adding sound.

The human ear can only ear a specific frequency range of sound, and speakers can only produce an even smaller frequency range. If you combine that with dynamics of sound, volumes, and distortion, you have a very limited ‘space’ to fit your music into. One of the biggest mistakes inexperienced engineers and producers make, is they constantly boost elements of their track. They’ll crank up their kick drum, then they crank up their snare, then they crank up their lead, then the bass, then the hats, then everything is shouting in a big distorted cacophony. With subtractive EQ, you sculpt away sections of the different sounds that overlap. Continue Reading »

Recently, I was tasked with giving a presentation on our web development process. What started as a presentation on the methodology of properly project managing a website, quickly morphed into a much more philosophical discussion about design, user centered design and experience design. I’ll talk a bit more about the rest of the presentation in another post, but for now, I wanted to talk about beer.

When I give presentations to clients, I always try to give an analogy or a story from personal experience that makes understanding complex or technical issues easily digestible. One of the challenges with this specific presentation was how do I explain the differences in design, user centered design and experience design to an audience that doesn’t know, or think about the differences in the three. Continue Reading »

This is an oldie, but god damn this guy is a genius. Check out the video if you haven’t seen it yet. My favorite part is when low pass filter kicks in at 1:25 and the scene changes from day to night as the filter sweeps. Brilliant!

The MD4Haiti campaign that I worked on was featured on MedicalTourismMag.com as a good example of using social media. Check out the full article here.

Last week I was fortunate to have an extra $220 burning a hole in my pocket so I ordered a Rocktron Banshee 2 Talkbox. If you don’t know what a talkbox is, think Daft Punk, Peter Frampton and Stevie Wonder. Here’s an example of someone using one on YouTube. Please excuse the song selection, for the record Soulja Boy is a douchebag.

Basically, the way it works is pretty simple. You connect your sound source (keyboard, guitar, whatever) into one end of the Talkbox, it’s amplified and output through a vinyl tube. That vinyl tube is placed in your mouth, and you use the shape of your mouth to create an envelope for the sound. So if you were ever wondering how the killargh guitar lick from Living on a Prayer was created, now you know. And knowing is half the battle. GI JOE!

Anyway, the Banshee Rocktron is great. It was a breeze to set up, and within minutes, I had connected it to my Access Virus, and was screaming like a robot with a bad attitude. My only complain being that the vinyl tube had to be trimmed down so that it fit properly into the talkbox.

I highly recommend picking one up. Even if only to call your friends and pretend you are a robot looking for a late night booty call.

My copywriting partner, Craig Strydom, came up with an idea for a direct mail.  In short, it would show a logo rendered in 3d, but printed as an anaglyph and mailed with a pair of 3d glasses. I’ll show an example of the final concept in a few weeks, after we’ve deployed it.

It seemed like a really good idea, but printing an anaglyph has proven to be much more difficult than originally anticipated. If someone else has a solution, I’d love to hear.

Anyway, the problem lies in the color conversion from RGB to CMYK. Standard cyan/red 3d glasses are keyed for on-screen (RGB) 3d imagery, so when you covert to CMYK, there is a color shift that makes them not function. Specifically, blues tend to be really hard to reproduce, and out of gamut for the printer we had chosen.

I found a few articles and specialty shops that had come across this in the past, but the cost of a proper calibration and conversion proved to be too high for such a short run. Also, from my research, the green / red glasses work better with print, but it’s still a bit of a crapshoot.

Our solution is to keep the direct mail ‘generic’ with a call to action to visit a website, were we’d show the 3d image on screen. Which in the long run, proves to be more cost effective since we don’t have to pay for print, and will allow us to track which of our targets actually convert.

To satiate my own curiosity, if someone has a proper solution, please let me know.

A great article was just posted on Smashing Magazine about the beauty of typography. I love the feature on Arabic, as I feel it’s one of the most beautiful forms of writing out there.

Check it out.