From start to finish: How I design my websites (a technical guide)

It always starts with a simple idea or theme. I may do a physical sketch, but nothing fancy; just basic layout of content, menus, and whatnot. I do this sketch on anything available, from notebooks to napkins. Now that I have a decent laptop, however, I'll usually skip this step and start directly in Photoshop (version 6) for the mockup. On rare occasions I'll use Illustrator (CS2), but I typically reserve it for print design work, since it is much easier to take a photoshop mockup to web than an Illustrator mockup (fewer steps in the process). My reasoning behind this is because once I create my mockup in Photoshop, all I have to do is copy/paste images from the layers I use to manage sections into a new image and save it for web. Another important note is that I usually do my web designs at 144 dpi, in case I need a larger version of any artwork I did after the fact. I'll scale it down to 72 dpi in the final version for chopping up for the web. Plus, I'm used to older versions of photoshop screwing the antialiasing up, so designing at 144 dpi and scaling down creates a much more attractive end result regarding antialiasing.

I have a standard structure for my directory tree for basic websites. For sites with multiple style sheets, I'll have a css dir, otherwise, it'll sit in the root of the site. Images are stored in a directory called "imgsrc", with a "prom" folder for any promotional images (ads and whatnot). Menu items are typically stored in a subdirectory within imgsrc as well (mnu).

I keep a few quick templates to speed up coding - One HTML Strict template, and one XHTML Strict template (both contain all the standard doctype/meta tag declarations, headings, title, body, etc), and a css template (with common tweaks such as link color/decoration, paragraph/heading tag tweaks, etc). IDE wise I'm usually working in Geany under Linux, but will use HTMLKit when I'm stuck in Windows (Geany's integrated terminal is my friend). I turn off autocompletion in both; I despise the feature, but love code highlighting and the autowrap feature in both.

Once I've got my index and content page templates finished, I'll chop em' up into headings/sub heads/menu/etc include files and start in on any PHP work or CMS integration necessary. Here is the key reason I use Linux: I prefer to keep a dev environment similar to my web server. I match versions of PHP, MySQL, Apache (actually, I'm on an H-Sphere host now), Perl, etc on my dev environment. I put all my code/web content into the directory structure and start testing on the local machine. I'd rather test locally than test live on the public web server, to save bandwidth and not end up hurting my CPU quota for any scripting boo-boos.

Once I'm done with the dev/testing, I tar up my directory structure, upload it via SFTP, and then SSH in to untar the directory tree. I rarely need to do browser testing aside from FF, but if I do, I open up access on my dev machine to other machines on the home network and test it that way.