In celebration of personal website number #1264, I figured I’d walk through a high-level overview of my web development process, from start to finish. After all, this latest site was built in just 2.5 days (a new personal record!), and I wanted to highlight the tools, techniques, and workflow I bring to a project.
Step 1: Planning
Like every good project, it starts with planning. Over the years, working alongside designers, project managers, and fellow developers has helped me develop a simple but effective tracking system using Google Sheets.
Typically, when I first receive a design, I break it down into individual page types and account for the often-overlooked details, such as the 404 error page. This ensures nothing slips through the cracks and everyone involved has a clear view of the project’s development progress.
Step 2: Proper Foundation
Some may think that setting up a WordPress environment is enough to establish a solid foundation, but there are plenty of nuances that can be overlooked. Over the years, I’ve put together my own WordPress starter package of light-weight themes, optimal plugins, and a few extra tricks to help ensure every site starts on the right foot and runs smoothly.
Step 3: Global Elements
Now we get into the fun stuff! Setting up global elements correctly makes life much easier for both the developer and anyone who maintains the site down the road. It helps keep everything consistent across pages, posts, and everything in between.
This step includes colours, fonts, spacing, container widths, and even the header and footer, since these elements appear throughout the site. Keeping these settings organized in familiar, easy-to-access locations creates a reliable reference point when building out pages and maintaining consistency across the entire site.
Step 4: Home Page
Now, you may ask why the Home page gets its own step, but it is for good reason. Typically, the Home page is the star of the show. It’s often the first page visitors see, and it helps establish the narrative and visual direction for the rest of the site.
When building this page, you may find that some of your global elements aren’t quite how you envisioned them. Perhaps the font size needs to be smaller on mobile, or the content container needs to be narrower. These details become much more apparent once you see your designs rendered in the browser. The Home page plays a critical role in identifying and refining these details before building out the remaining pages.
Once the Home page is complete, I recommend some initial AODA accessibility checks, along with performance and error testing. This helps ensure that your foundational elements meet the necessary standards and work as expected before you begin reusing them throughout the site.
Step 5: The Rest of the Build
Now that you’ve established your foundation with global elements and a completed homepage, building out the remaining pages and posts becomes much more straightforward. You can reference the homepage as a guide, reusing the design patterns and elements you’ve already established. Sometimes, it’s as simple as copying and pasting existing elements into additional pages.
ONE IMPORTANT TIP: If you have sections that remain consistent across multiple pages, consider creating a global template instead. This makes future updates much easier. If you need to change something as simple as a line of text, you only need to update the template rather than track down and edit each individual page.
Step 6: Polish and Quality Assurance (QA)
Once the tracker is filled out and all items are marked ‘Ready for QA’, it’s time for a more thorough round of testing. This includes ensuring all elements are fully responsive across a range of screen sizes (typically 320–1920px); checking AODA accessibility considerations, such as alt text and descriptive link text; and verifying that all buttons, links, and menu items point to the correct pages and posts throughout the site.
When working in an agency or directly with a client, this step also benefits from an extra set of eyes to help spot errors or inconsistencies. Tools like Feedbucket or Userback can help facilitate feedback and streamline the review process. Alternatively in the past, I’ve also used additional tabs in my existing tracker to collect and organize feedback in one place.
Step 7: Launch
Once everything is ready, all that’s left is to launch the site! Depending on whether you’re launching a brand-new site or replacing an existing one, the deployment process will vary depending on your hosting setup and the needs of the project.
Thankfully, downtime is often minimal with proper planning, but I always recommend avoiding Friday deployments. If something goes wrong, you don’t want a website issue ruining your weekend plans! :)
Closing Notes
I hope this has given you a little insight into my development process and the tools and techniques I use to bring a website from concept to launch. Every project comes with its own challenges, but having a solid workflow in place helps keep things organized, efficient, and running smoothly.