The key to obtaining clients is being able to offer packages and deals that they can afford. Majority of agencies and freelancers have an established hourly rate. To keep a constant flow of clients, you should strive to keep the amount of billable hours as low as possible. Affordable quality work will increase your reputation and credibility, thus increasing your rate of client conversions. Networking is everything!

In this article we will discuss various methods for quick website development using a combination of free popular tools. There is necessary setup time, so you won't go from rags to riches in an hour. Some of the things discussed in this article may require further research if you are unfamiliar with them (i.e.: Version Control, CSS Preprocessors, etc...). But we promise it is all worth it in the end.

The typical workflow for website development is creating sitemaps and wireframes then proceeding to mockups and design and then finally to development. Our focus in this article is on the development cycle. Quickly turn a custom website design into a live production version in under 3-hours.


Tools and Setup

The following toolset arsenal will be your weapon against billable hours.

Local Environment

Laragon - Seemlessly setup a local server environment using Laragon. Quick installation and configurable options. You can setup Apache or Nginx in a few clicks of a button.

With a click of a button you can quickly launch a WordPress, Drupal, Joomla, Laravel, Lumen, CakePHP or Symfony instance. Laragon will modify your virtual host and local host files automatically. Allowing you to dive right into development. Another feature of Laragon is the ability to push to Ngrok instantly.

Ngrok basically sets up a secure tunnel into your local host. You can rapidly build the website on your machine and then generate a link to allow your client to preview the website. The client needs to see the product and Ngrok eliminates time wasted pushing the website to an online development server for preview.


Version Control + CSS Preprocessor + Base Theme

Develop a base, skeleton WordPress theme and keep it within a version control system such as Git. This will allow you to quickly clone the repository into the new project you're starting and you can begin development. Keeping the theme in version control allows you to easily enhance or add new features to your base theme.

A good example for a base theme would be a theme that includes a Theme Options panel, for quick styling and other features. You can easily add this functionality by building the Redux Framework into your WordPress theme. We would also suggest adding commonly used custom post types such as Testimonials and Staff or Team Members. We would also suggest pushing it further by creating commonly used page templates such as a staff page template. You can easily add or remove custom post types or page templates on a per project basis.

We strongly suggest using a CSS Preprocessor like Sass: Syntactically Awesome Style Sheets or LESS for rapid development of your base theme. Using task/build runners like Gulp or GruntJS - you can speed up development even further by automatically compiling and minifying the CSS.


Workflow

Once you have everything setup, rapid development begins. Assuming you are working with WordPress:

  1. Launch WordPress instance through Laragon
  2. Install & Configure WordPress
  3. Clone pre-structured theme from version control repository
  4. Configure Theme Options (if applicable) and make minor style changes to reflect current project
  5. Add content and copy
  6. Get client approval and push into production

More Conversions, More Money

After you've spent the time getting everything setup, you will now be able to swiftly pump out multiple custom designed websites daily. You now have the potential to increase customer acquisitions, increase your amount of projects, enhance your portfolio and reputation and exponentially increase your profits and revenue stream!

Advanced users can even further streamline the process by taking advantage of the WordPress Command Line Interface. You can build a batch or shell script that completely automates setup and migration into production.

We are always looking for ways to even further streamline the web development cycle. If you have any suggestions, drop them in the comments below!