How I Designed My Website
Coding Phase
Duration: 15 hours
My coding happens in three stages: PSD to HTML, javascript and application development.
PSD to HTML
This stage where I convert my Photoshop design into clickable HTML. For me, this is also the easiest part of the entire process.
I code using Dreamweaver as my text-editor. I've tried other text editors but Dreamweaver is still my favorite and I like coding my designs into Dreamweaver templates. That way any changes I make to the templates will occur globally. Also, using Dreamweaver templates I can assign an editor who can access my site through Contribute to edit my typos.
When I code, I start with the HTML and stub out all the div blocks that I'll be using. I try to ID them in generic terms. After that I start coding the CSS to place and size all the blocks relative to each other. Then I start the CSS for the content inside the blocks. Most of the time I code the CSS from top down (ie header block first and the footer block last), but sometimes it's easier to code other content blocks first.
As I'm coding, I view my site in IE6, IE7, Firefox and Safari as I go along fixing spacing and alignment issues. I cut up the images from Photoshop as I need them.
After the GUI has been coded, I start working on the javascript. With this version of the site, I moved from my custom javascript to using jQuery and Mootools. I use Mootools for the accordion menu because I don't think the jquery accordion is as smooth. However, I like jQuery for my general javascript coding like the tab slide and the mouseovers. Moving to jQuery cut my javascript code in half.
The last part of the coding is the application coding which isn't done yet. Application coding is writing any function that stores or manipulates information. HTML can only display information. The simplest application for this site is sending the contact form.
When coding is done, I end up with a clickable site with the menus linking to blank pages that need content.
Case Studies
Attic Box Stories
How do you increase sales with an already profitable company?
Answer: Expand your client-base to a market segment with more disposable income.
World Short Track
How do you make your favorite hobby even better?
Answer: By getting someone else to pay for it.
X
