7 Steps for Systematizing The Design & Build Process
Systemization is basically what it says on the tin, i.e creating a series of processes or a pre-defined set of steps to speed up and quicken a laborious and or repetitive task. So how can you systemize the design & build of websites? The day to day nuts and bolts of your business? Below are 7 steps you will need to create systems to fulfill repetitive and dull tasks so you can automate your busywork and save time for creativity to flow.
Snippet RepositoryAbsolutely everybody should have a code / design repository. You can use a dedicated program, like code collector pro: http://www.mcubedsw.com/software/codecollectorpro or just build a folder filled with text / html & photoshop files containing your code or design elements. Here's a few ideas as to what you could store to save you countless hours in re-writing, re-designing and wasting time:
- Contact forms (create one which allows you to quickly customize for different projects
- User Management / login scripts e.t.c (create one that is not heavily integrated into your design with loads of inline code for even more time saving)
- Payment handlers and online store scripts (if you've built one before, why not re-use it?)
- Commonly used design elements (buttons, headers, layout's, footers e.t.c)
- Anything else you've built bespoke before that could be of use, store a stripped down, non specific version for a later date
- Designers will find it handy storing away a ready to roll HTML template, complete with doctype and link to stylesheet already inserted. This will save time when starting new projects as opposed to starting from the ground up.
Code of conductIf you work in a team of any size, you'll know that once a piece of code or script is passed around, things can start to get messy. Everyone has different styles, and will implement their own unique quirks into code. Because of that, if you come along afterwards, it can be quite hard to get to grips with the way something's built or why that div was floated to the left - so develop a template or guideline as to how everyone in the team should work. It might be as simple as saying that CSS properties should be defined in order of:
Pre-made templatesIf you find yourself with a spare hour or so, you might decide to create some designs that you can code, and have ready to ship when needed. This will reduce time spent creating sites from scratch. Simply design the template, either with a generic style or target it at a specific industry, such as a landscaping company- whatever suits your business. You might also build out skeleton sites, that is a site with features you commonly integrate into a site. That might be a wordpress install with a newsletter plugin, contact form & SEO plugin. Systemizing this process can save hours in unneeded extra work!
Canned Email Responses & pre written scriptsAlthough not technically part of the systemization of developing and building sites, you may as well optimize the way you communicate with clients while your at it. It would be wise to consider frequently asked questions by first time clients, and then write out an answer ahead of time. Then the next time they ask "I want a website, how much will it cost" - instead of writing out a complex long answer, its pre-written. That can save anywhere between 5 and 20 minutes per emails sometimes. To save even more time, pop these FAQ's on your site, and you'll cut down on these emails in the first place!
Coding FrameworksUsing a coding framework will save you masses of time. Once installed, you have a library of pre-written, validated elements to use. The great thing is, there are loads of frameworks, to suit developers & designers.
Frameworks for DesignersDesigners will benefit from checking out CSS frameworks and Grid / Typography systems. In short, design frameworks will save you time, give you cleaner more structure code and achieve an optimal browser compatability. Here's a few worthy of note: Blueprint CSS - http://www.blueprintcss.org/ Blueprint is a CSS Framework which aims to cut down your development time by giving you a grid system, typographical guidance and even a print stylesheet. Plugins are available for buttons, tabs and sprites. YAML - Yet Another Multicolumn Layout - http://www.yaml.de/en/home.html Another HTML / CSS framework designed to be lightweight and based on web standards. Features include modular construction and design for accessibility. Eric Meyer CSS reset - http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/ Reset browser default CSS properties so you start with a clean slate every-time. Stops bizarre bugs and quirks where your CSS conflicts with the browsers. YUI Grids CSS - http://developer.yahoo.com/yui/grids/ Yahoo is another major player in the framework sector. YUI offers four preset page widths, preset templates, ability to stack regions and is only 4KB. 960 Grid - http://960.gs/ A css grid system for developing professional, solidly laid out designs.
Coding FrameworksUsing a framework for development work will also great benefit you and your team. You can integrate MVC (Model, View, Controller) architecture into your coding. Basically, that means that the data (model) is separate from the Controller (which grabs data from the model) and combines that with the view (what the user sees.) Quite often, you'll see components and tools included to help you build complex applications faster. Using a framework will also mean you can scale your app, lower costs and developers need to write less code. CodeIgniter - http://codeigniter.com/ CodeIgniter is an open source web application framework. There's very little configuration required when implementing, you don't need to use the command line and you don't need to stick to restrictive coding rules. You save time, because the framework provides you a rich set of libraries for commonly needed features. CakePHP - http://cakephp.org/ CakePHP aims to achieve a similar "rapid development framework" to CodeIgnitor. It has an active community meaning there's lot of opportunity to get support if you need it. Zend Framework - http://framework.zend.com Extending the art & spirit of PHP, Zend Framework is based on simplicity, object-oriented best practices, corporate friendly licensing, and a rigorously tested agile codebase. Zend Framework is focused on building more secure, reliable, and modern Web 2.0 applications & web services, and consuming widely available APIs from leading vendors like Google, Amazon, Yahoo!, Flickr, as well as API providers and cataloguers like StrikeIron and ProgrammableWeb. Zend supports -
- AJAX support through JSON – meet the ease-of-use requirements your users have come to expect
- Search – a native PHP edition of the industry-standard Lucene search engine
- Syndication – the data formats & easy access to them your Web 2.0 applications need
- Web Services – Zend Framework aims to be the premier place to consume & publish web services
- High-quality, object-oriented PHP 5 class library – attention to best practices like design patterns, unit testing, & loose coupling