I’ve been writing a multi part series on how I work with clients:
Today, is all about programming.
Coding
I get a certain amount of pleasure when I’m coding a site and one of my friends walk in the room, looks at my screen and says, “What’s that gibberish?”
“What? You don’t understand what that says?”
“And you write that?”
“Sure! Why not?”
While, this post is about process, I realize some of you may be asking, “Where do I even start?” I’ve written a couple of posts on my personal blog that you may find helpful:
Slicing and Dicing
Once I’ve received approval from the client on the design, I’ll “slice and dice.” Essentially, I’m taking the design that I created in Photoshop and putting code to it: HTML and CSS.
As I mentioned in the design phase, I start with Google’s Blueprint Framework. There are plenty of options out there, if Blueprint doesn’t suit your fancy.
NOTE: If you’re interested in learning more,
Speckyboy.com and
Divito Design both have some excellent tutorials on getting started with Blueprint.
When you download Blueprint, you’ll get 3 CSS files: screen.css that contains a browser reset, a print.css file that generates a more printer friendly version of your site, and an ie.css that corrects some of Internet Explorer’s “features”.
Instead of having to set up my file structure and link CSS files and jQuery scripts each time I create a site, I have a template folder set up. You can actually download it here. I keep my folder stored on my Dropbox account that way I can access it at work and home. Plus, changes are automatically synced.
My files are really quite simple, but again, it’s one less step. I end up doing it for each site I create, so why not save myself some time?
The other thing it does is create standards within my projects. There are certain classes and naming conventions I’ll use in all my projects. If you’re collaborating with other programmers on projects, this makes a world of difference. When you open a project, it doesn’t matter if you worked on it or not, site structure is similar and so it doesn’t take long to familiarize yourself with how the site was built.
Connecting to a CMS
Once a site has the HTML and CSS written out, I can start connecting it to a CMS, or content management system. The benefit to using a CMS is that it allows the client to make changes on the fly (which can be both a blessing and a curse).
I’ve used several different CMSes: Tumblr, Movable Type, Expression Engine, WordPress, Mojo Motor, SquareSpace and Shopify. Of course, there are plenty of other options out there. (The 10 Best Blogging Platforms in 2011 , as named by Practical eCommerce)
The benefit to having experience with all these platforms is that it allows me to determine which option best suits the client’s needs. I know that they can be overwhelming at first, so just pick one, become an expert in one. Then, if it’s not meeting your needs, add another to your toolkit. My suggestion: start with Tumblr. It’s probably the easiest to start templating. However, if you find yourself limited in functionality, look at WordPress. It will definitely get you the furthest. In fact, I’ve found WordPress solves 95% of my client’s needs.
NOTE: If you’re looking at getting started with WordPress, check out Chris Coyier’s book,
Digging into WordPress. It is by far the best resource I’ve found. Plus,
Chris is a super nice guy. I know because I’ve emailed him (once).
Again, when I’m working with WordPress, I have a starting point. I use Chris Coyier’s Blank Wordpess theme. I can copy and paste a lot of his code into my HTML and CSS.
As I mentioned in my 25 Tools I Use to do My Job post, I use Textmate to code, Navicat to manage my databases, MAMP to develop locally, and Transit to FTP.
SO, I turn the table. What tricks do you use when you’re coding out a site?