Planning for Speed
October 8th, 2008When in business for your self you are always looking for ways to save time. You may try to save time in the little tasks throughout the week, but what if you could save significant time on processes you use everyday? Through proper planing that is exactly what I try to do.
Since I spend most of my time during the day designing and coding web pages, I looked at that time objectively to see how I could speed it up. The results were phenomenal.
Disclaimer: I don’t necessarily think that my techniques are the best for everyone, but I hope you can gain ideas from this, or at least start looking at your workflow in a similar way.
The Features.
- Planning for code while designing.
- Blueprint CSS Framework
- WordPress
- Code Templates
The Benefits.
- Better integration between design, coding, and implementation
- Faster development from start to finish (without sacrificing any quality)
- Improved look through grid-based design
- Less time spent in browser testing
Let’s Get Started.
Step One: Photoshop. Everything begins with Photoshop. All designs that are sent to the client are JPG files, and that way all revisions (colors, spacing, sizes, etc) are all very quick and only take a couple of clicks, instead of rewriting lines of code.
The most important part of planning in this stage is making sure that your visual design will properly match up with your code. You will be surprised at how minor changes in your design workflow can save you hours of writing CSS. I use the Blueprint CSS Framework (more on that later), which employs a total width of 950 PX divided into 24 columns (we can get into the merits of grid-based design in another post). If all my design elements are lined up on this grid then it makes the CSS very simple, instead of playing with specific pixel positioning, I can just count the columns in Photoshop and know exactly what CSS to write.
The key to doing this well is using guides in Photoshop. Now it is very time consuming to manually create 24 consistently spaced guides in Photoshop, so that is why we employ actions. Here [Link to Action] is the action I created to make 24 perfectly spaced guides on a 1024px wide Photoshop canvas. Once this is in place just line your visual elements to those guides, and your design will start to look a lot cleaner and more consistent; not to mention the coding time it will save later.
Step Two: Blueprint. Blueprint is a CSS framework that provides useful code such as default typography styles, an awesome browser reset, as well as a 24 column grid (as we talked about before. There are plenty of other articles about the merits of Blueprint and for helping you implement it better. The most important thing is that it is a well documented code base (in case someone else has to edit your files later, or worse you have to edit someone else’s code), and it significantly increases productivity.
The official Blueprint site: http://code.google.com/p/blueprintcss/
An excellent introduction by Jeff Croft: http://blueflavor.com/blog/2007/oct/24/blueprint-css-101/
Step Three: WordPress. These days almost every site needs a content management system (CMS). And if it didn’t really add any time to your development, why not implement it? WordPress is an open source blogging platform that also doubles beautifully as a CMS. The advantages include an intuitive interface, excellent documentation, an amazing community (it is used on literally hundreds of thousands of sites, and seen by tens of millions of users every day), quick installation, and jaw-dropping functionality.
Take a look at: http://wordpress.org
Here at Unattended most of our clients use WordPress for content management and publishing, and we think you should use it too. Take a look at Our Work to see the range of sites it can manage. In the future we will be posting more tips on using WordPress (stay tuned!).
Step Four: Code Templates. There is no better way to save time than to template the things you use everyday. When designing for WordPress I obviously use their theming system and Blueprint, so I have created my own default theme that already has blueprint integrated. If there is a change or bit of code you catch yourself using over and over again, then build it into your template. These little things will save tons of time!
By using code templates you can spend more time perfecting a piece of code because it will be used over and over again on future sites, instead of your current client having to bear all the cost of that discovery time.
That’s all folks!
Those four concepts should speed your production time considerably. If a client now approaches me with a low budget I am now able to get them something quite functional and suitable for their needs in a cost effective manner. Before I would have to turn them away because I couldn’t build what they needed for that budget.
Final Note: Like I said in the beginning, this post is not meant for you to adopt my process verbatim (though you are more than welcome to), but instead to get you thinking about how your own process can be streamlined and improved. I would love to hear how you have used proper planning to speed up your own workflow.