We Are Communication Architects

Building brand awareness through content creation and community engagement.

September 9th, 2010

Tools of the Trade: Front-End Developer

Here’s a quick rundown of some of the tools I use to turn a new project’s design into a shiny, new website. The goal in every case is to have the final product (website) mirror the original design… for every user. ← That’s the tricky part.

I like to think of my role as the Beginning of the End of the project. We’ve met with the client. We’ve discussed what their goals and desires are for the website. We’ve come up with the wireframes and discussed how the colors of the site should match the colors of their favorite team and their dog’s favorite chew toy. The designer has taken all of this into account and turned their dream into a layered Photoshop Document (.psd). With all of that out of the way, it’s time to make this site happen.

Getting Started (Before)

There are a few options for working with the .psd file but Adobe Photoshop is what I have used for the past 7 years. I briefly dabbled with Gimp but it just wasn’t quite as smooth for me. It’s like most free software, it could get the job done, but it lacks some of the power and feel of the big company products. So I’ve got the .psd file open and now I open up TextMate as my text editor. Touted as ‘the missing editor for the Mac OS X, it’s full of helpful features that lead to a more efficient process. Let the XHTML coding begin!

The Flow (During)

The process that has turned out to be best/most efficient for me goes like this:

  1. Build out all XHTML based on the design
  2. Cut out images from .psd file
  3. Cut out background images from .psd file
  4. Build out all CSS now that I have all of the images
  5. Test → fine tune → fix it in IE → rejoice

As I’m building out the site’s CSS, I regularly check it in Firefox. I eventually make sure the site looks good in all browsers but I use Firefox while I build because of on handy, indispensable, changed-my-life tool, Firebug. Safari and Chrome have a Web Inspector tool and IE has their Developer Toolbars but not of them are as… well, fantastic… as Firebug. Firebug allows me to diagnose style issues by showing me any element and all of that element’s inherited styles. It allows me to adjust those styles inline so I don’t have to do trial and error with updating and saving my stylesheet every time. Maybe my next post will be titled ‘Why Firebug Rocks’ but for now, just trust me that it’s a life saver.

Final Touches (After)

Now that I’ve built out the site in Firefox, I need to check it in all major browsers. Next up are Safari and Google Chrome. Since both of these browsers, along with Firefox, are the most advanced browsers, there usually aren’t many rendering issues with them. All 3 of these browsers have Mac and PC versions so I test out the site in all of them. Once I’ve made sure the site looks the same in the ‘real browsers,’ it’s time to check it out in Internet Explorer.

My next post would have been ‘Why I hate IE and why it’s so bad’ but a few thousand people have already written it. Since I work on a Mac but need to test out native instance of Internet Explorer, I use a program called VirtualBox. I have the luxury of working with other smart developers and one of them showed me how to use VirtualBox to set up 3 different virtual environments, one for IE6, one for IE7 and one for IE8. Each virtual environment also has a native Firefox, Safari and Chrome install on them so I can test out those browsers on a PC. The VirtualBox environments have proven to be almost perfectly accurate so I don’t even need to find real PCs to test on… but I do anyway. I’ve got my old PC at my workstation that I still use to test out a native IE6 version, along with Firefox, Safari and Chrome. We have another PC in the office that I can use to test out IE8.

Browser compatibility is the toughest party of my job, with 90% of the angst resulting from some version of IE. Between IE developer toolbars and Firebug in Firefox, I debug the differences and do the best I can to account for IE’s shortcomings. Most of this is IE6, some is IE7 and just a little bit is IE8. So if you want to be a friend, upgrade your Internet Explorer or even better, just stop using it.

About the Author
Pete Schiebel is the lead front-end developer for the Platforms team, described by some here as the "front end MacGyver" for how he works to make sure client projects look and function as advertised. Follow him on Twitter @sneakepete.

Filed in Development, Voce Platform Services

Add Your Comment1 Response to “Tools of the Trade: Front-End Developer”

AskApache on September 9th, 2010 at 7:44 pm

For some reason, I really identify with your company. First i’ve ever heard of Voce, gotta say that I am impressed with this site and branding/marketing. Keep sharing what you are doing, it’s good stuff.