I remember the first time we had a “Happy Hour” after I came to work at Davidson Belluso. After sitting a while, I asked my new co-workers, “Hey, you wanna hear an ad agency joke?”

The table immediately fell absolutely quiet. In a youthful, petite voice, a young woman says, “Before you tell that joke, I think it is only fair — given that you are new here — you should know five things, that… (pointing to each person in turn):”

1. He is a Copywriter.
2. She is an Account Executive.
3. I am a Graphic Designer.
4. The woman sitting next to you is in charge of Human Resources.
5. The woman to your right is in charge of Business Development.

“Now think about it seriously, Scott. Do you still wanna tell that joke?” So, I think about it for a second, shake my head, and declare: “Nah, not if I’m gonna have to explain it five times.”

Sometimes, however, you can’t escape examining and explaining something through multiple steps and in multiple ways.

Building a website or web app, for example, requires a step-by-step process in order to get it completed. As the lead developer and Interactive Director at Davidson Belluso, I am very well versed in this process and have an understanding of what it takes to get a website completed from start to finish. For a client or business owner, understanding the process is key to their sanity (and mine) during the project’s development.

Outlined here are the basic steps to help make the whole process easier to understand.

Plan Your Website

Planning the project is the most important step, and can be more critical than the actual development.

Having a good plan makes development so much easier for designers, developers, managers, content editors, clients, etc. A plan will help to catch minor changes along the way, but it’s important to keep the core strategy intact as you progress through the planning steps below:

• Requirements Analysis – In this step, a general understanding about the site’s direction is developed with a clear direction for its end users.
• Information Architecture – This step includes the wireframe diagrams, the structure of sections, pages, navigation flow, user interaction elements, and basic content.
• Technology and Resources – This step includes the hosting and software requirements, security considerations, maintenance plans (post launch), stock photography purchases or any required fonts, etc. All of these requests impact the project success over its lifetime.

Design Your Website

After the planning step is complete, and all the information from the client has been organized and additional resources are gathered, it’s now time to focus on the visual aspects of the project. The designer breaks down the planning and requirements for the website and starts the creation process for a website design that is unique to your brand. This process is broken out as follows:

1. Wireframes – A design element used to give a functional example of navigation and page layouts. These show the basic design layout with a rough view of how the content will appear on the page.
2. Mockups – Polished layouts with design elements that, ultimately, determine what the users will see and interact with when they visit your site. Taking the time and effort to ensure a solid foundation for the visual identity of your website is very important.
3. Proofs – Though review should take place throughout a project, this particular phase is an important milestone as it includes finalizing the design and tweaking the layout. When this step is complete, the real development and construction of your new website begins.

Develop Your Website

Now that the visual aspects of the project are approved, it’s time to slice up the mockups, break out the design elements and start coding.

Many core tasks are involved here such as building the site structure, constructing the page templates, importing data, publishing content to the defined page templates, creating news, blog posts, testimonials, events, etc.

During this phase, the entire site is continually tested for functionality and performance, and several key concepts are addressed:

• Bootstrap – Ensure that the custom CMS or development framework is in place and implement the source-controlled repository to enable full access to the code.
• Chrome & Skeleton – Slice up the final creative design images for optimal use in the code; a critical step that affects the web browser, the site’s brand, navigational elements, header and footer, and any other site-wide elements, as well as the complete site structure.
• Build Templates – Each unique page or section is laid out and built in a template through use of PHP/HTML/CSS, JavaScript, and the tools within the CMS structure (if applicable).
• Special Features – The unique elements of the website that require special attention when building, and are usually custom built according to project requirements. Any number of features could fall into this category such as advanced search, map/GPS based searching, data exporting, reporting, on demand PDF creation to name just a few.
• Content Population – The typical project will have a considerable amount of copy and images, as well as news stories, blog posts or events that need to be populated on the site.
• Testing – Everything in the project is under review. Even though developers, especially at Davidson Belluso, are constantly testing the website throughout the project, this additional, focused testing makes the project go smoother and always reveals a few minor issues.

Launch Your Website

The website is developed, tested, and completed! Now, we are ready to make it live.

At this stage, we’ve done a great deal of work but there’s still much to do. By this time, we’ve had the website in a development environment, and transferring from a development site to a live site is not as simple as flipping a switch, and requires some critical steps:

• Quality Assurance – Take the time to ensure that the site is performing well and running perfectly. These tasks cannot be done until the site is live.
• Testing the Functionality and Responsiveness – The website is live and visible to the world! Time for yet another round of testing. This includes going back through the site for final testing in the development environment to ensure that the website works across all modern browsers and devices. Even though the site has been thoroughly tested numerous times before, there is still the possibility that something in the live environment needs to be addressed.

Post-Launch Your Website

Even though the site is launched and the project has been completed, ensuring that the newly launched website continues to yield positive results will require ongoing care and maintenance.

Consider a maintenance plan to optimize your site to its best ability, and utilize some of the steps below:

• Internal and External Training – Employees, clients, anyone with administrative access to the website will understand their software and can work within it. Simple edits like changing text, images, publishing posts to news/events or creating, editing, removing pages are things more easily learned.
• Documentation Handoff – This could include documentation for releases, testing, products, user interface, screenshots, wireframes, Photoshop documents, images, etc. Anything that might be needed to host and maintain the website usually requires all source files and databases to be packaged up and delivered to them.
• Follow Up – This is very important to help identify any additional needs, training and any lingering issues that may need to be addressed.

Understanding the basics necessary to take a project from beginning to end will help to better take on everything that goes into the development of a website. No two projects are the same, no two websites are the same. Each client has their own unique set of needs.

At Davidson Belluso, we sit down with each client to identify their exact needs to make the process seamless and enjoyable for everyone involved.