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.
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.
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.
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
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+.
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.