My Web Development Workflow Process

UPDATE: This post is slightly out-of-date for me now. It’s a good read, but keep in mind this is from back when I used to work full-time as an on-site web developer at a local advertising agency.

I always find it interesting when other web designers and web developers talk about how they go about their business. So, I thought I’d share my basic workflow process for putting together a website. This isn’t any kind of fancy how-to, but simply an explanation of some of my methods. Now I’m not going to tell you I follow the same, rigorous workflow with every project because that would just be a lie; I’m totally not organized enough for that!

By day, I’m a web developer at a fancy-schmancy advertising company, but by night I’m a web developer for the people! With my personal projects and templates that I make from home, I follow a much less structured workflow. With no budget or deadlines, I’m free to spend as much time as I want adjusting my drop shadows and gradients until they look just right. Unfortunately, for now I’m stuck in the real world and my day-time job calls for me to be much more organized and productive with my time. Some times it feels like I’m “cookie cutting” out websites day after day at work, but it is what it is.

Now keep in mind that when I make a website at my agency, I don’t deal with clients, I don’t budget finances or hours, I don’t write any content; there are different departments that handle all of these things. I simply design and develop. So when I get a new docket on my desk this is the basic process of how I bust out a website over the course of a few days. I’m going to skip all the boring pre-meetings, planning, and approvals throughout the process and just share the good stuff.

1. Design

I do all my designing in Photoshop. Sorry, I’m not much of a Fireworks guy. I’m in love with the 960 grid system. I start most of my designs with the 12-column Photoshop file you can download from their site. With that said, I’m way too anal about my CSS to use their CSS framework, so I’m only down with the 960 grid system for the initial design.

This web layout was originally designed by MSI's ultimate art guru, Scott Mlynarczyk, for Carlile Transportation Systems.

I can honestly say that I do not consider myself much of a “graphic designer.” Sure, I can make clean, minimalist designs with good typography and proper spacing, blah blah, but when it comes to actually adding hardcore graphical elements I head to Graphic River and drop $3 here or there. If you’re ever at a loss for design ideas, don’t hesitate to search the web for inspiration or even buy a few graphics from a site like Graphic River. You find a stock image or another website design you like, you start off copying a few things, and before you know it, you have a completely different masterpiece that you can call your own. By the end, you won’t even see a resemblance between your final product and whatever things you originally got inspiration from.

I’m very meticulous with my measurements. I use round numbers whenever I can. For example, I wouldn’t ever make a header section that is 88px in height; it would be 85px or 90px. I’ve found that the more you measure out in Photoshop, the more symmetry you plan into your design, and the more round numbers you use, the easier things are when you take it into development. I’ve worked with many artists who think my OCD for pixel measurement is overkill, but I think I just have more going on in my mind when I’m laying it out aside from simply how it will look.

Even in a time crunch, I still attempt to be at least somewhat organized with my layers and layer groups within my Photoshop file. A lot of the times I’m rushed by my agency due to a low budget or a time crunch, however the client, the account managers, the creative director, and the “higher ups” will always want several edits. So keeping an organized Photoshop file that I’m familiar with always keeps making edits a breeze.

Also, many times a site is designed for me by one of the other graphic designers, in which case it’s often done in Adobe InDesign. If you know anything about web development, I’m sure I don’t even need to voice my frustration with this. Designing something for a world of pixels in a software that creates for a world of print is a definite sin in my bible. Either way, it is what it is. You gotta to roll with the punches. So, a lot of times, my “design” phase consists of taking an InDesign file and creating an actual workable psd file that I can develop from.

2. Development

If you haven’t figured out by now from the screenshots, yes, “I am a Mac.” I’m not exactly proud that I jumped on the band wagon of locking myself in for a lifetime of addicting, overpriced computers and gadgets, but none the less, I couldn’t help but get sucked in.

I have to say my absolute favorite thing about being a Mac user is the software, Coda. I’m really obsessed with Coda. I finally got my ad agency to dig deep into their pockets and find me the $99 for a Coda license about 2 months ago. Right away, I setup all my current projects in Coda and told Dreamweaver to step off.

Also, I now use PHP for every project even if it’s a static site. In my opinion, there’s just no reason not to have simple header/footer includes on even the most simple websites. We have a web server in our offices that all of the web developers work off in order to have all the websites in a place where any of us can access them. But, at home, I’m 100% MAMP…. Once again, this is another treat of being a Mac user. For those of you that don’t know, MAMP is a free software that allows you to run PHP/MySQL locally on your mac for development purposes.

Now getting into it, the development process is my favorite. After all, that’s why I’m writing more about it than any other of the other steps! I am an absolute CSS dork. I’m always looking for tips, tricks, and ways to improve my CSS and make my HTML markup as minimal as possible. The development process is the one time at work that I can really put my headphones on, jack up the Pandora, and crank it out. With other web developers assigned to their own projects, there’s absolutely no one else that can stand over my should and critique. Believe me – the day an account manager looks over my should and says, “Um, you’re definitely gonna want to hide the overflow on that div,” is the day I will quit. No worries on that one, though. When I’m in a sea of code, no one bugs me. It rocks.

I make so many small, low budgets websites at work, that it’s really important for me to bust these things out as time efficiently as possible. I start my sites with a little starter template I keep on my desktop. It includes the basic folder structure and some initial files I use for almost every website. This is the case whether I’m making a static site or WordPress theme because I always make WordPress themes completely from scratch. Sure, I’ll copy and paste snippets in later on, but the initial process always starts with a single static HTML page.

I almost always have already planned out the HTML markup in my head while I was laying out the design in Photoshop. This is another reason I’m so meticulous with my measurements in Photoshop. Besides, most sites I do are not mind blowing Internet phenomena; they pretty much all have your standard elements, and that’s another reason why it’s easy for me to sort of formulate a plan of attack in my mind.

So, I continue by saving out the images I need from my Photoshop file in the images folder I already have made in my starter template. This is a random tidbit, but I do not “slice” in Photoshop. I think it’s silly. You can do it if you want, but don’t insist that I do it. Then I write out all of my HTML markup. Next I write out all of my CSS.

I’ve gone through this process so many times that I pretty much have a good idea of how what I’m coding is going to appear in all the browsers I plan to support (generally IE6+, FF2+, Chrome, Opera, Safari). So, with following a few simple rules I’ve made for myself, I go forth coding and only viewing what I’m doing in Firefox.

I think I’m actually going to write a blog post later on about my simple rules I’ve made up for myself to stick to while coding in order to avoid conflicts with different browsers… And by different browsers, I mean all browsers versus the IE browsers!

3. W3C Compatibility

This is usually very painless for me and a quick task. There’s not much to say here. I open up the website I’m working on in all the standard browsers and check to make sure they look passable. They generally do.

4. Internet Explorer Compatibility

It always used to be a pain in the ass checking my sites in Internet Explorer, but I’ve slowly began to make my life easier and easier over the last few years. I have a few simple rules that I follow while coding my sites, and usually when I open it up in Internet Explorer, it looks how I intended it to. If I ever have Internet Explorer issues, it’s due to some javascript error that I can usually find and fix pretty quickly. I know I make this sound very easy, but keep in mind that none of the sites I’m creating at work are very “out of the box.”

You also may be wondering if I code for IE6? I did say it earlier, but yes I do. Even though every web developer thinks IE6 is the Satan’s spawn of a browser, I still support it. Why? Click here for my IE6 rant.

To accomplish this dirty deed, I use VMware Fusion, which allows me to run Windows 7 on my Mac. Then I open up the handy IETester and give whatever website I’m working on a quick spin in IE6+.

UPDATE: Those last two paragraphs are a little out of date. Now that I don’t work in the ad agency business anymore, I no longer even think twice about IE6!

5. Post it for review

After I’ve cycled through the same songs on my Pandora channel a crap ton of times because I’m too picky with adding variety and thumbing songs up, it’s time to post the website live on the Internet at a top secret location now that I’ve finished it.

Keep in mind that most sites that I “finish” are far from finished. It’s rare that I was given everything I needed when I was tasked with actually developing a website. Generally more copy and content is still to come. The sitemap is in for a big change from it’s original mockup. Images are to be replaced. Decisions that were made before will inevitably change.

So, I email that top secret web address off to my creative director, and I assume it travels through about 20 different people and the client inevitability? I’m not really sure. But low and behold, a month or so later I get back edits. But it’s good that I write consistent, neat code because I can always pick up a project right where I left off no matter how many other sites were in between!

It’s really peculiar when I compare the amount of websites I work on with the amount of sites that have actually gone live… Anyway, that’s my workflow process. I know that kind of turned into more of a “Confessions an Agency Web Developer” post, but I hope you found it interesting!

Feel free to comment below on your own personal experiences and methods.

19 comments on “My Web Development Workflow Process

  1. great post. i bought complexity for a client and he’s loving it. if you’re interested to see what he’s done with it.

    I have one question though regarding your workflow (I am also a designer/programmer – all programming is self taught but i got me degree in design) anyway, my question is why you choose to use CODA? i’ve been using dreamweaver for several years and have gotten pretty used to it. is there really a good reason to switch? what are your top reasons?

    thanks for sharing your workflow!

  2. @Entropic Studio

    All the reasons I love coda I don’t think would fit in this comment ! I think I might do a blog post here in teh near future showing screenshots on why I like to use coda over dreamweaver. One of the biggest reasons is just the simplicity and cleanness of the interface. I don’t like how Dreamweaver has all your windows sitting everywhere on the screen and they can be moved all around (like a lot of programs on a mac, I know). But in coda, you have your files on the left side and your code on the right side. It’s one window, and coda is way less demanding on your machine while you’re running it. I often have 10 windows open up in Firefox and some giantic Photoshop file open. Trying to do my work in Dreamweaver also seems to cause problems.

  3. Jason,
    Great post. I am purchasing your FlipBlog template to start my streetsmart school of business (sob) web site. It is obvious you put a tremendous amount of thought and effort into your work. I have previewed hundreds of templates and builders. I am choosing yours for the following reasons. (1) Excellent and well documented preview – really helps me see the possibilities. (2) Excellent Video Tutorials – shows both the power of the product and your attention to detail. (3) Your standards – ever hear of Howard Roark and The Fountainhead? I am a big fan of works of integrity and I am trusting in your design because you’ve sold me you have the best look in mind for your sites. (4) This post. Again – your thought process, design process and adherence to your own standards inspires confidence. I will comment on the template once I use it, but for now, thanks for a job well done. You have a tremendous career ahead of you.

  4. Great post! Always good to see what happens when you start from scratch (I typically start with a theme and customize it since I’m more of a designer than developer).

    One question, I do most of my graphic design work in Illustrator and if necessary, just export the design to a PSD file. I just find Photoshop difficult to use for graphic layout compared to Illustrator. Photoshop was designed for image retouching, etc. and I’ve always been perplexed why so many developers use it for graphics. Can the 960 Grid be used in Illustrator?

    • If you download the package from the website, they actually don’t even provide an illustrator template. See illustrator is generally used more for print layout type of stuff. Generally when people are designing specifically in pixels for a computer screen, they need a program that is meant for this. 960 gs templates only come in a Photoshop file and a Fireworks file, as these are the programs most web designers would be using.

  5. Wow…awesome post!!! I didn’t know about Coda before…I checked some reviews and mostly they agree with you that it is better than Dreamweaver. I will definitely definitely try it now…Coda is one of many excellent information you posted here. And I admire your attention to details…I hope I had the same level!! Thanks again and keep posting please!

  6. Hi Jason – great article ! I’m forwarding a link to my designer so she gets a feel for what a full web dev workflow looks like.

    Came on here initially looking for insight on developing using a Swagger child theme, but this was a nice diversion 🙂

  7. Hi Jason,
    I just found your blog and it is quickly becoming one of my favorites.
    It looks like I’m making the switch to coda.
    Keep up the great work!

    • This article is a bit old now, but no when I was working at the Ad agency (as discussed in this article), we definitely weren’t progressive enough to be doing any kind of version control. Honestly my only experience with version control is with uploading plugins to the WordPress repository. Most of what I do is a solo act, so I never really get the chance to collaborate with others or make use of some of the cool version control services out there.

  8. I have thought of switching to mac for a long time, but I’m on a low budget at the moment, and I totally agree with you – Dreamweaver is too messy!

    Question: Is there a Windows alternative for Coda?

    Great post!

    • There are tons of code editors out there, but I don’t think you could say there is any “alternative” to Coda as it’s really a pretty special application, which they only make specifically for Mac.

Leave a Reply

Your email address will not be published. Required fields are marked *