This is Part 5 of our How to Be a Web Developer Series. If you’re just joining us, here’s what you’ve missed so far:
- Part 0 – Series Introduction
- Part 1 – What you’ll need to know
- Part 2 – Non-coding, technical skills
- Part 3 – Kinds of jobs
- Part 4 – Choosing Your Path
One of the biggest questions I had starting out was what exactly does the web development process look like? I understood bits and pieces of the process, but I wasn’t sure how they all fit together.
In this article, I’m going to give you rough outline of how my web development projects come together. Please keep in mind that this is just an example of the workflow that works for me and the designers I work with. Different projects will require a different order and other developers or shops might have a different workflow.
1) Initial inquiry
This is usually just an email from a client or designer explaining their web development needs and asking if I’m interested and what I charge. After getting the information that I need to make an estimate (a topic for another post), I move on to:
2) Project proposal
I write up the specifics of the project and include a detailed overview of the web development fees as well as the time estimate for the project. Clients can request changes to the proposal, and sometimes this requires a second estimate. Most of the time, though, I can simply note minor changes in the:
If the proposal is accepted, I send over my contract. Again, the client may request changes to the contract if there is something they would like to add, and once it’s settled, the client signs it and returns it to me.
4) Deposit paid
Along with the contract, I email an invoice for the deposit, which the client needs to pay before web development begins.
5) Project Management System
Some clients already have a project management system, but if they don’t, I add them to my Redbooth account so we can manage the project in there. Sometimes this takes a little training to get the client comfortable, but it’s worth the extra time to keep everything in one place.
6) File Handoff
When the client is ready to start, they hand off a number of files to me. Sometimes these are submitted at different times (like wireframes first and then PSD’s a week or two later) or not at all. Most projects include the following:
A PDF of the wireframes allows me to get started on the layout of the site and any additional functionality that it requires (slideshows, rotators, e-Commerce, etc).
Final design files
These usually come in the form of Photoshop (PSD) files, though I do accept Adobe Illustrator files as well. Often they are accompanied with a style guide that lays out the color palette, fonts, logos, etc. Also, as my websites are responsive, the designer will often include mobile or tablet versions of the site.
Sometimes the designer will also send me images for background tiles, logos, or headers as separate files. These can typically be sliced out of a PSD file, though.
Final content (if available)
The sooner I can get final content, the better. I try to use as much final content in my development process as possible, because then I know exactly what the final page will look like. Also, adding content is a good thing to work on if it’s ready before the design files are.
Web Development process
7) Set up local development environment
I typically develop websites in a local environment, so the first step is opening up MAMP, setting up the database, and installing a new instance of WordPress on my local server. Depending on the project, I might also install a theme and set up a child theme to work on.
8) Add pages, menus, and content
These items will not change with the theme, so I get them set up first.
9) Code basic layout
Once I’m ready to start on the actual theme, I usually start with the basic layout. This might include adding widgetable areas and widgets, creating page templates, moving menus, etc.
10) Code or find plugins for specialized functionality
Then I turn my attention to specific things this website needs to do. I find plugins for more complex functionality and test it to make sure it does what I need it to do. Or, I add some additional PHP or jQuery to knock out simpler items.
11) Go back and add styling from the final design files
Once all of the moving pieces are in order, it’s time to make it pretty! This is where I add the CSS, the design elements and images, fonts, etc.
12) Install WP on new website (in a directory if site is live)
Depending on the project, I might do this step before setting up the local environment. Either way, though, the first step to getting the site live is installing WordPress on the URL. If there is already a site there, I install WordPress in a directory of the URL (http://theurl.com/directoryname).
13 ) Add maintenance mode
I use a plugin to put the site in maintenance mode. That way if anyone stumbles across the site, they won’t see a half-finished project.
14) Add all the content
If there is any additional content to add, I put it in there at this point. Also, if my client is tech-savvy, she might add content herself once WordPress is live and accessible to her.
15) Upload the custom theme
At this point, I compress all of the theme files I’ve been working on to create a zip file. This is easily uploaded via the Upload Theme option in the WordPress Dashboard, but it can also be added via FTP.
16) Tweak theme to match local version if necessary
Sometimes the theme needs a little tweaking or reconfiguring to get it to match the local version. I take care of that here plus checking the styling of any new content that wasn’t a part of the local site.
17) Browser testing/etc.
I can do minimal browser testing when the site is local, but I do another round when the site is live. That makes it easier to check on multiple browsers and devices.
18) Show client/designer and get feedback for tweaks and bugs
At this point, I’m ready to show the new website to the client. I try to leave an absolute minimum of 7 days before the preferred launch date to get feedback and fix any little items I might have overlooked or code that is misbehaving. If I can build in more time for tweaks, I do!
19) Create training videos
If the client is happy with the site, and I’m not going to have to make any other changes, I will whip up a couple training videos to show the client how to use some of the more specific or custom aspects of their site (how to navigate custom post types, for example).
20) Launch the site!
This involves switching off maintenance mode and, if WordPress was set up in a directory, updating the base URL. I try to block off some time for the launch so I’m immediately available if any issues pop up (though they rarely do).
That’s my process! Now for another question: How long does it take? Again, this varies by project, but for me, a child theme for Genesis, for example, is about three weeks from development start to launch. A more custom site with e-Commerce or membership might be closer to six.
With this time frame, also keep in mind that most of the sites that I build are for online entrepreneurs (not typically huge, complex websites) and that the design project is usually done or very close to completion.