The Evolution of My Web Design Process

I’ve made a lot of changes to my web development workflow recently, and doing so made me reflect on how much my process has changed in the last 12 years. I have written these changes down for you here.

2002: Microsoft Word and Tripod.com

I remember building websites using Microsoft Word.

What?!

Yes — it is as awful as it sounds. I didn’t bother learning HTML; most websites back then were built using tables and spacer GIFs. So using Microsoft Word to drag-and-drop things into place seemed the most logical.

In fact, my pride and joy was the BSA Troop 511 website, hosted on Tripod.com. You want to see it? OK: Here it is: http://troop511wc.tripod.com/.

Yikes.

Thankfully, I gave things up for a while until I got to college.

2007: Notepad, IIS, and the Iowa State IT Department

It was college. I got adventurous.

I wanted to apply for a job at ISU Financial Aid as a student web developer. But, I needed a personal website. I chose my moniker: JPLHomer (JPL are my initials, and Homer is the area of Iowa from which I hail).

One night, I went out and bought a cheap desktop computer from Walmart. I also bought a cheap monitor and set it up in my dorm room.

Luckily, Iowa State offers free versions of some of the Microsoft software through a discount program, and – as a computer science minor (at the time) – I downloaded Windows Server 2003.

Up and running with IIS (Microsoft’s web server solution), I set up a static PHP website. I also had to contact ISU’s IT department in order to get a static IP setup for my dorm room. Crazy, right? They were pretty cool about it, and before I knew it, I had set up the DNS to point archive.jplhomer.org to my dorm room server.

[caption id=“attachment_1638” align=“alignnone” width=“1024”] One of the first versions of my website[/caption]

2009: Dreamweaver, Fireworks, MediaWiki

This is when my main Dreamweaver kick started. Generally, I would work locally (or straight off of the department’s file server) and push files through Dreamweaver’s FTP function to a remote server.

I often used Fireworks for image editing and [crappy] mockups. While it’s a good product, it’s no longer being actively developed.

This is also where I learned the troubles of a lack of a version control system. We usually had two student web developers at Financial Aid, so we would sometimes overwrite one another’s work if we weren’t careful.

As I look back upon this experience, I can tell you this: This part-time job was single-handedly the most beneficial job experience I’ve had in my life. The skills I learned here have gotten me all of my subsequent jobs. Take note, college students!

2011: Dreamweaver, Photoshop, Bootstrap

Time to be a big boy!

I graduated Iowa State with my degrees in journalism and Spanish and headed straight for a marketing job at the Iowa State Center. At the time of writing, the redesign I did is still being used.

The folks at ISC were still using static HTML documents, and – for a site of that size and that dynamic – a content management system with an events calendar was definitely needed.

I plopped in a Wordpress installation and started building the site using Bootstrap 2.0. It was the first version of Bootstrap which supported responsive design, so I was forced to learn about that.

I also began experimenting with LESS, since Bootstrap used that for its core styles.

For deployment, I edited the files right on the live server (double yikes!). I also discovered how incredibly frustrating it can be to try to set up the latest technologies (Node, LESS, Git) on Windows using a command line interface when you have no idea what you’re doing.

I also had to deal with a server migration (from a hardware server sitting in the basement of Stephens Auditorium to a virtual server sitting in Durham Hall). That brought its share of bumps, but I learned about the process nonetheless.

Now: Sublime Text, Git, More...

You guys. I use so many tools now.

1. Apple products. I've moved to the Dark Side and I will never go back. It's so ridiculously easy to get everything going on a fresh install of OSX. The Mac workflow is incredibly efficient, and everything just works. I use a 27" iMac at Happy Medium, and I bought a 15" Macbook Pro Retina last year for my personal use.
2. Sublime Text. This is the best IDE I've found for all of my projects. One of the best parts (besides the multi-line editing tool – seriously, check it out) is the plugin ecosystem. You can download a number of new language files and helpers which make your workflow even more efficient.
3. Git for version control. I buckled down and starting learning it a couple years ago, but Git has changed my workflow completely. I version control every project. It's simple to do, and there is no reason you shouldn't be doing it for your website.
4. BitBucket. While I use Github for a lot of public repositories, BitBucket comes in handy for the projects I want to keep private (like for work). They have unlimited private repositories, so it's definitely a great deal if you're looking to move toward a Git workflow.
5. Grunt. Grunt is a Javascript task runner which does pretty much everything. Do you ever get tired of doing tedious, repetitive tasks for every project (like minifying your JS files, compiling your CSS, or creating a distribution of your project)? Those are good tasks for grunt. All I have to do for most of my recent projects is navigate to the folder in the command line and run grunt watch. Instantaneously, I have a script that will watch for any changes to my files, recompile everything, and refresh my browser window. How neat is that?
6. Capistrano. As much as possible, I try to deploy everything through SSH on the command line. Why? Because in a Git-controlled workflow, you can keep track of which changes you make, upload only those changes, and roll them back to a previous commit if needed. It just makes sense.

Future: Vagrant, ?

I’m interested in switching to Vagrant to test my projects, as it seems to be the next logical step in keeping project settings in sync between cloned repositories (like Grunt already does).

I’ve begun playing with it, but I’m not quite there yet with how to integrate it into my workflow.

My process has changed so much already in the last six months. I’m not afraid to make frequent changes to my workflow as long as each change makes my job easier.