Business Website Development: The Basics
What exactly is “web development”? Simply put, it’s the act of developing a website for online use on the Internet and/or Intranet (a private network). Web development varies in production style and methodology. Variations include developing simple static pages that hold text, to complex projects such as web-based internet applications (web apps), online/electronic businesses, and social network services or platforms.
The standard hierarchy of a web development project consists of roughly 6 parts, which are outlined below:
- Prototyping the website or web page
- Developing content
- Creating the design
- The coding phase: this is the very core of the project. Coding will ultimately determine the functionality and success of the project. It is divided into two distinct but connected parts:
- Front-end development (creating what is known as the “markup”, typically done with CSS, JS, and HTML)
- Back-end development (attaching said markup to a CMS)
- QA, also known as quality assurance. This contains a set of protocols that are followed to ensure that the website is functioning and appearing as expected.
- Staging, where the website is “deployed” onto a web server
- Lastly is the actual release of the website, or “going live” for public use
There is much more to it than that. A common misconception is that modern technology allows for a rapid turnaround. While technology and applications have their place in streamlining the delivery of a website, it is a thorough and complex project that deserves time, patience, and technical skill for proper execution.
So, what role do each of these parts play in your project’s success? Let’s briefly break each of them down:
1. Website Wireframing/Prototyping
Creating a prototype of your site is very much like creating an outline or framework. It’s something visual that can be referred to at every step of the website development process. This product is called a wireframe. Alternatively known as a blueprint or page schematic, the wireframe allows developers to see the core of your website’s functionality purpose. It’s a visual guide for them during the building process.
Wireframes visually represent the general layout of a website, including the arrangement of content, interface elements, visuals, and navigational systems. The wireframe itself is rather bare. It is void of the visuals one expects when on a webpage, including typography, color, and graphics. This allows developers to focus on the functionality aspect, which is ultimately far less flexible than the visual/art components of a website which are produced later on.
Wireframes can be created by hand or digitally. This task is usually given to UX specialists (user-experience), designers, business analysts, or developers. Often times, the finalization of a wireframe is overseen by several members of a company across different teams.
Developing content is a process that can be undertaken through various mediums. It helps express an idea or goal of a website. This can take the form of writing, visual design, video, or other forms of media. These can be commonly seen as web pages with text, blogs, social media integrations, typography, and photography. Websites commonly utilize more than one to attract users and successfully communicate a message.
3. Website Design
This phase is often interchangeable with the content phase as far as which is expected to be completed first. It is also common for both to be worked on simultaneously. The design phase is centered on the overall look and aesthetics of the website and is commonly referred to as “front-end design”. This as a whole includes graphic design, search engine optimization, and user experience, though not every project dives into each of these areas.
Website design can sometimes overlap into the development side as the designer or team of designers must keep in mind the technical abilities of their development team in bringing the overall design to life. Web designers should ideally possesses general knowledge regarding user experience and accessibility as well as the possibilities and limitations of their coders.
4. Front-End Development
- Hyper Text Markup Language (HTML) is a markup language for the creation of web pages and web applications.
- Cascading Style Sheets (CSS) controls the presentation aspect of the site and allows your site to have its own unique look. It is responsible for the design of your site.
5. Back-End Development
Back-end development serves as the set of processes that occur “behind-the-scenes” on a website. The coding that occurs here is what allows for the functionality: database interactions, user connections, calculations, and overall performance.
Within a collaborative environment where multiple users will update your website, there will be what is known as a content management system, or CMS for short. A CMS will allow users to manage and modify content within the website. These systems offer dashboards and interfaces that allow authorized individuals access to your website in order to change or update content without the need for technical skill or knowledge. These systems also allow for users to undo their changes while maintaining the overall integrity of your website.
6. Quality Assurance (QA)
Quality assurance is a process in which developers, business management, and test users follow a specific set of protocols to ensure that the website is functioning as it should on all levels of usage. This process also makes way for improvements and adjustments in regards to website components and infrastructure. Additionally, quality assurance oversees content as well. The goal is for testers to ensure that the website is functioning and stable, performing as expected for the end-user in mind.
7. Creating a Staging Environment
The staging environment serves as version of your site that most accurately represents the final version and allows users to perform quality assurance and make adjustments. This version of your site can be viewed by several parties, even those not involved with any technical adjustments. Upon agreeing with the way the staging environment performs and looks, you can move forward with launching your site.
8. Launching the Web Project
After all is said and done, you will finally be able to go live with your website. Before doing so, there are a few things that need to be addressed prior to going public:
- You will need to select and register a relevant domain name
- Next, you will need to choose a platform for web hosting
- For existing websites, you will need to backup your web files
- Consider adding Google Analytics to monitor your web traffic and interactions
As a final step, you will transfer your new website’s files to your hosting. You will also point your new domain name to the hosting server. Once this is done, you are officially live and ready to go public with your new website!