Design Workflow Part 1

This is the first in a series describing a possible workflow to develop websites on a PC. I have an OSx boot available on my PC, but I am so comfortable on a PC that I find myself not using the Mac most of the time. A developer has also made a program available recently that is really great for website development on a PC. But we will get to that later- this first part is about the general workflow.

When I began to develop sites I used Adobe Dreamweaver, and set this up to sync to a webserver via FTP. All of my work was live, because that is the only way I knew how to do it. I continued to develop on live sites for a while, until one day I messed up the live site. Not only did I have to take the site down, but I also had to restore from a backup, which was outdated. I lost tons of time and content, and learned my lesson. This is not the only lesson to be learned, and goes hand in hand with version control, security, speed, etc. We will discuss all of that later as well.

Once I realized that I needed to develop locally, I began to look into the how and why and what. First let me say that you do not need to develop on a Mac. You can still make beautiful websites and graphics on a PC. If you are a developer looking into a Mac because you think it will revolutionize your design flow, I suggest you first revolutionize your design flow and then switch to a Mac.

At this point I was still using Adobe Dreamweaver, and sometimes using Notepad or Notepad++ to generate my code on. My first site was pure HTML, CSS, Images and Dreamweaver- and well, it looked bad. As I narrowed down my design tools, my sites began to take shape and look nicer. My workflow also became faster. In the early stages of my designing, taking a site from nothing to the first stages of designing took hours if not days. Now I can take nothing and put a functional if blank site up in a few minutes. I eventually got off of Adobe Dreamweaver, and moved to a code editor named Sublime Text 2. I still use this program today, and I will blog about this and how to set this up later in this series.

IF YOU ARE A DEVELOPER LOOKING INTO A MAC BECAUSE YOU THINK IT WILL REVOLUTIONIZE YOUR DESIGN FLOW, I SUGGEST YOU FIRST REVOLUTIONIZE YOUR DESIGN FLOW AND THEN SWITCH TO A MAC.”

The next hurdle to overcome in my workflow was the vehicle on which I developed. I am pretty impressionable when someone experienced tells me that their tool is the “best”. I flip flopped between Drupal, WordPress, and Joomla! For my first few sites, depending on which friend told me the product was better. After developing on all three, I can honestly say that no platform is better. Each has its strengths and weaknesses, depending on what you are looking for. The best decision I made was to pick one vehicle and truly learn it. Not just skim the surface and write HTML, CSS, PHP, and JS- but to actually learn how the product works and what it can do.

My vehicle of choice was Drupal- don’t ask me why, it is just what I chose. After I learned Drupal enough to be considered an intermediate level developer is when I began to look outside and pick different CMS’ based on need. But I am much better off for being really good at one product, than for being just ok at 3 products.

Later in this blog, I will take from setting up a personal webserver, through installing Drupal and creating a theme. I’ll talk about adding content, editing CSS, and changing layouts. We will talk heavily about media queries and responsive web, as well as preprocessing, modules, and everything else involved with bringing a site to production. I will tell you how to use Compass, Rails, Burbon, Prepos, Git and a multitude of other tools (mostly free) and combine everything into one tight package that will allow you to develop websites not only easily but perhaps quicker than you would have before.

I am fairly new to the design game, so my workflow is not necessarily the best. I don’t call myself an expert, guru or authority. What I do have is a fair level of understanding for what I do, and a desire to share it with you on the hope of improving your design work. If at any point you think I am just plain wrong, feel free to comment on the post or send me an email- I will make sure your alternative methods make it in to the blog to balance out my own opinions.

Chris