For any business, having a well-crafted website isn't just a nice-to-have – it's a necessity. For businesses without a website, or businesses that don't know how to upgrade their website, deploying a new website can feel daunting and unclear. This guide aims to unravel that complexity. By walking through the web development journey step-by-step, you'll gain the insights needed to articulate your vision effectively, pose informed questions, and ultimately, find the ideal developer to realize your online goals.
Your website will only be as good as your web developer, so finding a developer who can bring your vision to life is a crucial first step.
Our overall goal is to help you understand the web developer/designer workflow from start to finish, and not only the bare minimum work that goes into deploying a website, but the industry best practices that a good developer adheres to.
So, let's get started by pretending you are a local business hoping to hire a web developer.
This article makes a few assumptions:
- You are a small business with regional, possibly national reach
- You reached out to a local web developer or designer for help creating a website
- You currently don't have a website, and want one created and deployed
- Your website is a brochure website (i.e. primary purpose is providing information to customers), or your website is a simple web application (i.e. doesn't require a dedicated team of developers to constantly work on it)
- You are hiring someone who specializes in web development, not marketing or graphic design
- Your website is NOT built with Wordpress or another website builder. These are different processes, but we'll discuss where overlap occurs
Warning
These assumptions are important, because to be frank, there are hundreds of different ways to make a website. This guide focuses on standard "brochure" websites for small businesses, similar to the site you are on, mesmerdesign.ca. Also note - our process may differ from other developers, but the process we describe is the one that works for us.
Designers vs. Developers
Let's get something out of the way first - what is a web developer, and what is a web designer? While there is a lot of overlap, there are a few key differences.
Note
Although there are differences, we may use developer and designer interchangeably in this article, for simplicity.
Web Designers
Designers typically use low-code or no-code tools to create websites, like Wordpress or Squarespace, called drag-and-drop builders. It's like playing with digital blocks. You can grab pictures, text, and buttons and move them around on a page to create a website. While it's easy to use, easy to create a website with, and to be honest, can be fun, there are downsides. These builders often have limited options, and have a few important issues that can be hard to get past:
- your website might look similar to others using the same tool
- your website is almost guaranteed to load slower than a hand-coded website. Slow websites have been shown to lead to customer loss.
- your website is considered a dynamic website, when in reality, it probably doesn't need to be. Dynamic means your webpages are generated on-the-fly by the backend. For example, Wordpress stores your data in a database and builds the pages upon request. In short, using a dynamic website for a small website is typically overkill.
- Since your website is dynamic, it will likely have an admin dashboard with a username and password, exposing it to cyberattacks. This is a real threat, especially with Wordpress, which is a common cyberattack target.
Developers
Web developers are like the architects of the internet. They build websites from scratch using code and code frameworks. This can take longer (but not always) but gives you complete control.
Creating a website from scratch offers several advantages. You have complete control over every aspect of your site, allowing for a truly unique design and user experience. Plus, developers have complete control over search engine optimization (SEO), making it easier for people to find you online.
Another benefit is speed. Websites built with code almost always load faster, which improves user experience and can boost your search engine ranking. And let's not forget security. Static websites built from scratch have fewer vulnerabilities, making them less attractive to hackers. In fact, completely static websites are completely secure since there is no backend to hack.
Developer vs. Designer: Who Should You Hire?
Deciding whether to hire a web developer or designer can be overwhelming. Let's break it down.
Web Designers focus on the look and feel of a website. They create the visual appeal, making sure it’s user-friendly and aligns with your brand. Often, they use tools called drag-and-drop builders to quickly assemble a website. While these tools are convenient, they have limitations in terms of customization and performance. Generally speaking, web designers use website building tools that don't require technical knowledge.
Web Developers are the architects of the digital world. They build websites from scratch using code, offering unparalleled flexibility and control. Developers can create highly customized websites tailored to your specific needs. They also prioritize website speed, security, and search engine optimization (SEO). Generally speaking, web developers have more technical knowledge.
While a designer can create a visually appealing site quickly, a developer builds a foundation for long-term growth and success. A developer's expertise ensures your website is not just beautiful but also functional, secure, and optimized for search engines.
Ultimately, the best choice depends on your specific needs and budget. If you require a simple website with basic features, a designer might suffice. However, for a website that represents your brand effectively and drives business growth, a developer is the ideal choice.
Tip
The cost of building a website can vary greatly depending on its complexity, the experience of the developer or designer, and your location. Overall, your small business website should cost a similar amount whether you hire a developer or a designer. Do not hesitate to ask for a price breakdown or ways to reduce cost - any reputable company will provide options.
What is a Website and How Does it Work?
Think of a website as your digital storefront. It's a collection of online pages where people can learn about your business, products, or services. When someone types your website address (URL) into a web browser, they're asking to see those pages.
Behind the scenes, your website is stored on a computer called a server. When someone visits, their computer talks to the server, asking for the specific pages they want to see. First, the computer sends the website URL to a DNS server, which is like a digital phonebook. It translates the easy-to-remember website address (like example.com) into a numerical address (IP address) that computers understand. The computer then uses the IP address to find the correct server and request the website pages. The server sends those pages back, and your website appears on their screen.
Don't worry if the technical details seem overwhelming. The good news is that you, the website owner, primarily need to focus on one key step: registering a domain name (which we'll cover in a bit). The complex behind-the-scenes work, like connecting the domain to a server and configuring settings, is handled by web developers. This part of the process is usually straightforward for them.
The Importance of a Website for Small Businesses
A website is almost essential for any small business. It’s your online presence, your digital storefront open 24/7. A website helps you reach a wider audience, build credibility, and establish your brand identity.
Customers expect businesses to have a website. It's where they go to find information, learn about your products or services, and get in touch with you. A well-designed website can help you attract new customers, retain existing ones, and grow your business.
Defining Your Website's Purpose and Goals
Before a developer can start building your website, it's crucial to know what you want it to achieve. What is the primary purpose of your website? Are you aiming to sell products, generate leads, provide information, or build a community? Having clear goals will help you focus your website's design, content, and functionality.
Clearly defining your website's purpose will guide the development process and ensure that it aligns with your business goals. Identify the essential features your website must have, such as product showcases, contact forms, or a blog. Setting clear and measurable goals, like increasing sales or generating leads, will help you track your website's performance. Prioritize the content that is most crucial to your audience and consider their needs when planning your website's structure.
This phase involves understanding your needs and setting clear expectations for the project, and can be broken down into a few parts:
Requirement Analysis
- Identify Business Goals: What do you want to achieve with your website? This could be increasing sales, generating leads, providing information, or building a community.
- Target Audience: Define who your website is for. Understanding your audience helps tailor the website to meet their needs.
- Functionality: List the features your website needs. For example, contact forms, e-commerce capabilities, blogs, galleries, etc.
- Content Strategy: Decide what content you will include and how it will be organized. This includes text, images, videos, and any other multimedia.
- Competitor analysis: Is there a lot of competition in your area? Do you offer the same services as your competitors? If yes, what will set your website apart from the competition?
Project Scope
- Define Boundaries: Clearly outline what is included in the project to avoid adding extra features later (scope creep). Focus on the necessities first, and consider saving the nice-to-haves for later if you have a tight budget.
- Deliverables: Specify what you expect to be delivered at each stage of the project.
- Milestones: Set key points in the project timeline to review progress and make necessary adjustments.
Timeline and Budget
- Timeline: Develop a realistic timeline for the project. Consider factors such as the complexity of the website, availability of resources, and any critical deadlines. Your web developer may also set their own timeline that is based on project size, so be sure that both parties understand and agree on expectations.
- Budget: Establish a budget that covers all aspects of the project. This includes design, development, testing, deployment, and potential ongoing maintenance. Be sure to ask your developer for a budget breakdown, what services are mandatory, what services are optional, and the importance of optional services. Be wary of inflated prices. Compare estimates from several web design agencies to ensure you're getting a fair deal.
- Long-term Costs: Be sure to discuss long-term / operational costs with your developer. How much will hosting costs? How much is a domain name? Does the developer require you to sign up for a costly "maintenance package" to keep your website online? A good developer should help you keep long-term costs low.
Warning
Some developers require you to sign up for ongoing maintenance packages, but be VERY skeptical of this. Ask questions. Determine if you really need it. Monthly costs if a small business website should not exceed $50 per month, except in specific circumstances like e-commerce.
Legal Considerations
Danger
Disclaimer: This information is intended as a general overview and does not constitute legal advice. It is essential to consult with a legal professional to ensure compliance with all applicable laws.
Operating a website can involve a complex legal landscape. While we at Mesmer Design are experts in crafting exceptional websites, we are not legal professionals. To ensure your website fully complies with relevant laws, we strongly recommend consulting with an attorney.
That said, there are several legal considerations that commonly arise in website development. This overview is intended to highlight potential areas of concern rather than providing specific legal advice. Some aspects of these considerations may be addressed by web developers, but others will require direct legal counsel.
To safeguard your business, we recommend maintaining open communication between yourself, your website developer, and your lawyer. This collaborative approach will help ensure that all legal bases are covered.
There are a few key areas to consider:
- Personal Information Protection and Electronic Documents Act (PIPEDA): This federal law governs the collection, use, and disclosure of personal information by organizations in the course of commercial activities. Websites handling personal data must comply with PIPEDA's stringent requirements.
- Provincial Privacy Laws: Some provinces have additional privacy laws that may apply to websites operating within their jurisdictions.
- Copyright: Protecting original content, including text, images, and code, is essential. Proper copyright notices should be displayed.
- Domain Names: Registering and protecting domain names is crucial to maintaining online presence and preventing cybersquatting.
- Accurate Information: All product or service information on your website must be truthful and not misleading.
- Terms and Conditions: Clear terms and conditions should outline the terms of use, disclaimers, and limitations of liability.
- E-commerce Regulations: If you sell products or services online, comply with consumer protection laws related to pricing, returns, and warranties.
- Accessibility Standards: Websites must comply with accessibility standards to ensure they are usable by people with disabilities. The Accessible Canada Act outlines specific requirements.
- Libel and Slander: Avoid making false or defamatory statements about individuals or businesses on your website.
- Professional Licensing: If your business requires professional licensing, ensure your website complies with relevant regulations, and ensure your customers can verify this information.
Danger
Disclaimer: Again, this information is intended as a general overview and does not constitute legal advice. It is essential to consult with a legal professional to ensure compliance with all applicable laws.
Choosing Your Domain Name
Your domain name is your website's address on the internet. It's crucial to pick a name that's easy to remember and relevant to your business.
- Keep it simple: Avoid complex or long domain names.
- Use keywords: Incorporate relevant keywords if possible. If your business name is available, we highly recommend using it (e.g. mesmerdesign.ca)
- Check availability: Ensure your desired domain is available. Important: Some domain registrars "buy" domains as you search for them, to sell it back to you at a higher price. It's a poorly regulated shady practice, so we highly recommend checking domain availability using ICANN Lookup, a non-profit with no ties to any specific registrar. Then, once you're ready to buy, use a reputable registrar. Check out our FAQ for a list of reputable registrars.
- Consider extensions: While .com is popular, other options like .net or .co can be effective. We don't recommend uncommon or irrelevant TLDs, like .biz or .online. If your business only operates within your country, consider registering your country's top level domain (TLD). For example, mesmerdesign.ca operates in Canada, so that TLD was suitable for us. Ensure you read relevant regulations surrounding this, as your country might have conditions to use it's TLD.
- Protect your brand (optional): Register variations of your domain name to prevent domain squatting or spoofing. For small businesses, this typically isn't necessary, but growing businesses may want to consider this.
Designing Your Website
A well-crafted website is essential for making a strong first impression and engaging your target audience. Your website's design should reflect your brand identity and provide a seamless user experience.
Professional Design: To bring your website vision to life, most developers/designers utilize design tools like Figma to create visually stunning and user-friendly designs. This process involves carefully considering factors such as layout, color schemes, typography, and overall user experience (UX). These tools build websites using images and vectors only, so your website design can easily be exported as an image. Often, this is so that you can review a design and authorize the development work to begin. A developer will likely provide mockups of how your website will look on both desktop/laptop screens, and on mobile.
Cost-Effective Options: If you're working with a limited budget, pre-designed website templates can be a valuable starting point. Platforms like ThemeForest offer a wide range of professionally designed templates that can be customized to match your brand. While these templates provide a solid foundation, it's important to select a design that aligns with your business goals and can be tailored to meet your specific needs. One major issue is that your website may end up looking more generic, but a good web developer will make some modifications to the template in order to build a website that better suits you.
This is an important step. Without it, your developer may build a website with a design that you hate. Before any actual work begins on your website, it's important to agree on a design that works for your industry, your business, and also works for you.
Building Your Website
Have you and your developer agreed upon a website design? Great! Let's start building it.
There are a few different ways to create a website. Let's break down your options.
- Static Websites: Think of these as pre-built web pages that are served directly to your customers, with no extra server-side processing. They are extremely secure, so you don't have to worry about cyberattacks against your website. Most static websites also optimize their assets, such as reducing image sizes, and your website is 100% cacheable, meaning it can be served efficiently and quickly. Modern tools called static site generators make building them easier and quicker, and have allowed developers to use superior tools to build websites almost as quickly as drag-and-drop builders.
- Website Builders / Drag-and-drop Builders: These are like online tools that let you drag and drop parts of a website together, and you can typically edit text content directly. They're easy to use but might limit what you can do. These are typically suitable if you need a complex but ready-made backend, like a Shopify or WooCommerce store.
- Dynamic Websites / Web Applications: These websites are often more complex but offer the most flexibility. Popular tools include React.js for the frontend, and any RESTful API backend, like .NET, Django, or Node.js. This is almost never the best option for small business websites, and are typically used for large businesses with a large customer base. For example, if you wanted to build a new-and-improved Facebook, your only real option is a web application.
For many small businesses, a static website is the perfect choice because it's fast, secure, and easy to manage with the right tools.
Creating Content People Love
Your website's content is what people come to see. It's important to make it interesting and helpful.
Generally speaking, you are expected to write the content for your website, and your developer is responsible for putting this content in the correct places with the correct design choices.
At Mesmer Design, we find it easiest to first plan what pages will be on a website (Home, About, Contact, etc.), which makes it easier to create structured content. Then, write out the content in any text editor and send it to your developer, who will bring your content to life, so to speak. Your developer will decide which content might be suitable for a Services/Features icon block, split layouts, long text areas, or another design block. if you have any specific ideas at this stage, communicate them with your developer, but if you don't have any specific ideas, a good developer will know how to plan design and content.
There are a few important things to keep in mind when writing content:
- Know Your Customers: Understand what your customers want to know.
- Quality Matters: Write content that is informative and engaging. If you write something that seems like filler text, it may not be necessary. All of your content should bring quality and help with SEO.
- Use Pictures: Images and videos make your content more interesting. Bonus if you have pictures of your business and employees, but many businesses simply use stock images.
- Keep it Simple: Write content in a clear and easy-to-understand way.
- Help Search Engines Find You: Use words that people search for to help them find your website. A good web developer knows SEO best practices and pitfalls to avoid. A good developer will also integrate good SEO without you having to ask. Standard SEO work shouldn't come at an extra cost, but some SEO optimizations may be a little more time consuming, and your developer may charge premiums for this. Speak to your developer to discuss options, and what degree of SEO is most suitable for you.
- Use ChatGPT and other LLMs (AI tools) to help you write content: There is no harm in this. At Mesmer Design, we often write out our "rough draft" first and use LLMs to help us word certain things better. Just don't write your entire website with AI, and always review AI-generated text to ensure it's what you actually want.
Design Choices
The possibilities for website design are endless. It's like choosing an outfit; you want something that reflects your style and makes you feel confident. But just like fashion, there are certain styles that work better for different occasions.
A website for a law firm, for example, should look professional and trustworthy. A website for a trendy fashion brand, on the other hand, might be bold and eye-catching. The key is to find a design that matches your industry while also aligning with your personal taste. Remember, your website is a reflection of your business, so make sure it makes a good impression.
Your developer will work with you to find a balance between a design that works for your industry, and one that you like. A good developer will also communicate with you - if you request something that is not typical for your industry, your developer may suggest an alternate design choice. Don't take this as a personal attack, since your developer's primary goal should be building you an awesome website, and a good developer knows what is considered good design and bad design.
Other design tips that a good developer will consider:
- Use call-to-actions (CTA) on your website, but use them modestly. Customers don't like when you shove a "buy our product immediately" message down their throat, but 1 CTA per standard page is typical. For longer webpages, 2-3 CTAs is generally acceptable. Ensure that your website still has enough quality content surrounding the CTAs, or else your website will look like it was built by a marketing student.
- If one of your main goals is helping customers contact you and you aren't in a specialized field, your contact information and/or a contact form should be immediately visible when loading your website. This isn't suitable for all websites. For example, if you are in a specialized area of landscaping, your website should focus on content so that your customer understands your specialty, while still making links to your Contact page easy to find. If you are a plumber with a broad range of services, your customer will already assume your services when they first see your website, so a contact form at the top of your homepage is acceptable.
- Your content (and design) should be viewable on all screen sizes, from small smartphones to large monitors. This is one of those "bare minimum" things that a good developer should be doing since it's essentially an expectation nowadays. Making websites responsive is time consuming,, but it's a necessity. This should be included in a developer's price, but you shouldn't have to pay a premium. So, if your developer is trying to charge extra for this and won't include responsive design in their core package, avoid them at all costs.
Bringing Your Website to Life
With a clear vision, a developer, and with content and design ready, it's time to transform your ideas into a digital reality.
Transforming your vision into a digital reality requires a collaborative effort between you and your web developer. The development phase is where your website takes shape. Your developer will construct the website's foundation, ensuring it aligns with your approved design. They handle the technical intricacies, from coding to functionality, to create a seamless user experience.
Content is the heart of your website. Include compelling text, images, and videos that resonate with your target audience. Optimize your content with relevant keywords to improve search engine visibility. If you decide on any content changes during the development process, it's best to inform your developer early on.
Before launching, thorough testing is essential. Verify that all website features function correctly and seamlessly across different devices. Optimize performance for speed and responsiveness. Your developer is responsible for testing, but at this stage, they should send you a link to view your website. You can review it, and if you'd like, help them test it.
Once satisfied with the results, your website is ready to go live! Your developer will help you connect your website code with your domain name, so that you can easily share a link to your website online, set up Google My Business, and any other steps that will help you build your online presence.
Remember, your website is a living entity that requires ongoing attention. Depending on the technologies used to build your website, you may have to apply regular patches and update plugins. Site builders like Wordpress typically require more maintenance than static websites. Keep content fresh and relevant to engage your audience. By closely monitoring website metrics, you can identify areas for improvement and make necessary adjustments. Through consistent effort and collaboration with your developer, you can create a dynamic online presence that drives business growth.
Before you and your developer agree on a final deliverable, you should address any concerns with your developer. Typically, if the planning phase was thorough, the final deliverable should be exactly what you want. Developers often include a term in their contract, "X number of adjustments included, any more will cost extra". This ensures that complete website rewrites aren't brought up right at the end, as design and content was already agreed upon.
Remember, the website development process is unique to each project. While we've outlined general steps, your specific needs and the developer's approach will influence the exact process. Open communication with your developer is essential to ensure your vision is realized and that they're the right fit for your project.
A good developer is both skilled and flexible. Websites can be a large investment, so it's important to set the stage so that you get a website that you are 100% happy with.