From Concept to Launch: The Web Development Process Explained
Author: Nick Christensen - Senior Developer
If you’ve ever wanted to know what goes into building a website, you’ve come to the right place. In my time as a web developer, I’ve seen many similarities between building a website and building a home. Being a sucker for metaphors, I thought a fun exercise would be walking through the steps of a web build and showcasing how alike it is to building a new home. So put on your hard hat, order that hauling service truck, and grab your color swatches as we walk through the web development process.
Drawing up the Blueprints (Scope and kickoff)
No home build can start without a blueprint. Equally, no web development project can kick off without a design. During this scoping and kickoff phase, the client shares their wants and needs with the project management and design teams. The design team then takes that information and mocks up design templates for what the final result will look like.
The Handoff
The web development process involves overlapping and communicating between different teams. During the handoff stage, the design and dev teams review the website mockups to determine how elements will transfer from a static image to an actual live, working website. Once both teams have covered all necessary items, the design team shares the final mockups with the dev team so they can start the actual build process.
Laying the Foundation (initial site setup)
This is when the tool belts come out, and the actual web build starts. Before the frames and walls come up, we must first pour the cement and lay the foundation. In a web build, this involves spinning up the initial instance of the website in its blank slate form. The site now exists on our server platform and is ready for development.
Building the frame (content types, taxonomies, pages/posts, plugins)
It’s time to put up the skeletal framework of our build. Rather than wooden beams, we use page and post types, taxonomies and tags, modules, and plugins to house the fields that will store future content. Just like builders outline rooms and their usages, the dev team outlines pages and content types, drawing lines to determine their usages, such as whether a page can be used as an Article, an Event, or an Overview Page.
Adding essential elements and appliances (adding fields)
Now that the rooms are in place, it’s time to add the essentials: windows, outlets, closets, and shelving. These would be the fields for a web build. Fields are added to each page type to house future web content, such as page title, date and time, author, location, page images, description text, etc. During this step, a developer would also likely add some example pages and content to test everything up to this point. Visiting the website, you would see an unstyled mass of text, links, images, and other content.
Paint and Decor (CSS styling)
With the rooms and infrastructure ready, it’s time to make the place look good! Just like a home, the dev team needs to add some splashes of paint, hang some pictures, and put out the decor. During the web build process, you’ll hear the abbreviation CSS thrown around. CSS (Cascading Style Sheets) is the web language used to add styling to the already-built web content. Things like font families and sizes, brand colors, layouts, and spacing are all handled during this step. This is how the dev team takes a mess of unstyled content and turns it into a beautiful web display.
Inspection (QA)
After the dev team gets the site looking like the design mockups, it’s time for QA (quality assurance). Like a home inspection, the site gets tested by the dev team and other department team members to make sure that it functions and looks as intended. During this step, the desktop display, the website on mobile, other devices and browsers, and ADA compliance are also checked.
The showing and walkthrough (website training)
After the site has been inspected and any needed repairs and fixes have been made, it’s time to give the new owners the tour! During the website walkthrough, our team will put together comprehensive training to help you learn the ins and outs of your website and its editor dashboard. By the end of the walkthrough, your team will be ready to start adding and editing content on the site.
Unpacking day (migrating existing content or loading new content)
Sometimes, homeowners want to move their old furniture, appliances, and belongings into their new homes. Sometimes, they want to start over. The same goes for a web build. Our team will help you migrate content from an existing site or create brand new content for your new site.
House Party (Launch)
The couches have been moved, the closets filled, the bowls filled with potpourri. It’s time to invite the guests! And what new home build process wouldn’t be complete without having people over for the housewarming party? For a web project, launch day is that exciting moment when you get to share your new creation with the world. It’s a time to celebrate a long process and a job well done. (Champagne, optional)
Are you tired of your old digs and ready to move into something new? Contact the Hark, and we’ll help you find a beautiful new (web) space!
Want to learn more about how Hark can help?