These, by far, have to be some of the most common money-related questions or comments we hear from our clients:
- Why does my new website cost so much? Can’t we just buy a template?
- Can you do it for a fraction of the cost?
- Another agency can do it for half of your price!
- If we re-skin our site, will it be cheaper?
- Why does it take so long? Can you have it ready quicker?
- We need a great website that brings us a lot of leads, but we can’t pay much money for it.
- We want something that looks like the Apple website. Our budget is $5K.
- I developed websites in college, 20 years ago. I know how much websites should cost.
- We want to be #1 on Google search results. How much would that cost?
- We're not used to spending that much money on our website.
So we’re here to reveal some of our secret sauce when it comes to developing (and costing) websites. But most importantly, we want our clients to understand our value-conscious approach and rest assured that they are getting the best bang for their buck!
Right off the bat, to have quality at the right price, we put together an A-team that has experience in our customer’s field. Our web wizards are extremely knowledgeable and experienced when it comes to web development.
Secondly, every single website we develop, no matter how big or small, goes through the following process or includes the following deliverables:
- STRATEGIC PLANNING
This is one of the most important phases of the web development process. Without it, the chances of things going south increase tremendously.
→ Tech stack planning
We carefully review and select the technologies that your website requires to perform seamlessly and meet your business objectives as well as the needs of your visitors. Depending on the project’s requirements, we use third-party tools, but more often than not, we build custom software that’s crafted to your specific situation. Together, these technologies are often referred to as the
tech stack.
→ IT Check-in
As part of the process, we also review your current IT setup, including any cybersecurity practices that might be in place, general licensing needs, domain, hosting, and email server situation, and we make sure that we have everything we need to launch your website successfully when the time comes.
→ Scalability planning
Something that’s top-of-mind when we’re developing your website is how it must become a flexible platform that will have to grow and adapt to meet your ever-evolving content needs. With that as our north star, we build your fully scalable website. - CMS
If you’re reading this post, you’ve probably heard the term “CMS”, which stands for
Content Management System, and as its name says, it is the tool that we carefully custom-craft for you so that you can quickly and easily edit your website’s content. We spend lots of time making sure that your CMS is as simple as possible to navigate so that almost anyone at your organization can keep your site’s content evergreen. We even add tips and recommendations on there to make your life extra easy – nobody wants to be guessing what dimensions or file size an image or a video must be uploaded at so they look nice and sharp on your site, right?
By the way, there are many CMSs out there, but the most popular two in our opinion are Craft CMS and WordPress. We’re big fans of Craft, so you’ll probably hear us bringing up Craft a thousand times during our techie conversations. - SEO OPTIMIZATION
9 out of 10 clients ask us if we offer SEO services, and the simple answer is YES and NO, depending on what they mean by SEO. If they are looking for someone to run their paid ad campaigns or create keyword-heavy content for their blogs, then no, we don’t do that at Black Magic. But if they’re looking for a site that’s SEO-optimized, we surely do that, and we do it very well. When we launch a site, it always scores 8/8 on our Black Magic SEO Checklist™, which includes the following:
→ Schema markup
Schema refers to a standardized format for organizing and annotating data on a website. It provides a way for developers to explicitly label elements on web pages, making it easier for search engines to
understand their content and provide more accurate and relevant search results. Schema can be used to add rich information on the page, such as your type of business, your contact details, the author of your blog post, the date of an event, and more. Put simply, schema is the language that search engines use to read and understand the content on your web pages which can improve its visibility and ranking in search results.
→ SEO plugin
We always install a tool in your CMS so that you can manually manage your website’s metadata, like page titles, descriptions, and social sharing images. This customization can be done on individual pages or globally on the entire website, depending on your SEO goals.
→ Metadata
Metadata is information that’s not visible to the end user but that we embed on your website to directly communicate and clarify information to search engines. The most common metadata are page titles, page descriptions, and social sharing images, also known as OpenGraph images.
→ Image alt tags
Alt text provides better image context or descriptions to search engines, helping them index and rank an image properly in image search. But that’s not the only reason why alt tags are extremely important, they are also readable text for screen readers and verbal descriptors in case an image does not load properly.
Example: <img src="pupdanceparty.gif"
alt="Puppies dancing">
→ Social sharing images (OpenGraph)
If you’ve ever shared a link on Facebook, Instagram, or LinkedIn, you’ve probably seen a thumbnail accompanied by the page’s meta description. That thumbnail is often referred to as the OpenGraph image, which also serves the purpose of showcasing your brand visually.
→ Google Analytics
Google Analytics is free a tool that helps website owners understand how visitors use their websites. It does this by collecting behavioral information about visitors, and then organizing, analyzing, and presenting that information in an easy-to-consume manner. This helps you and us figure out what's working well your website and what can be done to improve it.
→ XML Sitemap
This is a file that contains a list of all the pages on your website. Its purpose is to help search engines understand the structure of your website and index it more efficiently to improve its search results. XML sitemaps can be generated dynamically as pages are created or deleted from your website so that you don’t have to do them manually every single time something changes.
→ Redirects
Website redirects are a way of automatically sending a visitor from one web page to another. This can be useful, for example, if you have changed the URL of a page on your site, you can use a redirect to automatically send users who try to visit the old URL to the new one. This ensures that visitors can still access the page even if they have an old bookmark or link for it. - ANIMATIONS & MICROINTERACTIONS
If you hired us, you’re probably looking for a website that looks and works like magic, right? Well, one of the ways we accomplish that is by always adding elegant presentation animations and microinteractions on your site. Microinteractions are small events on your website that involve some kind of animation or visual feedback and are designed to let users know that their action has been acknowledged and/or completed. Examples of microinteractions include a button that changes color when clicked, a progress bar that shows the completion of a task, or a notification that appears when a new message is received. We also refer to microinteractions as
“moments of delight”. - HOSTING
We don’t offer hosting services ourselves, but we make sure that the hosting provider you select is the best option for your site. Additionally, for security reasons, we always make sure that your site is protected with an SSL Certificate.
→ SSL Certificate
An SSL (Secure Sockets Layer) certificate encrypts information sent between your website and a visitor's web browser. This helps ensure that sensitive information, such as credit card numbers and login credentials, is transmitted securely and cannot be intercepted by third parties. If your website shows a lock icon in your browser’s URL bar, that means it has an SSL certificate installed. - ACCESSIBILITY COMPLIANCE
There are several different levels of accessibility compliance that a website can strive for as defined by international standards and guidelines. The most commonly used levels of compliance are A, AA, and AAA, and those are dictated and extensively documented by the Web Content Accessibility Guidelines (WCAG 2.0 and WCAG 2.1).
All of the sites we develop are at least Level A compliant, but if your website requires a higher level of conformance, we can confidently make it happen.
→ Conformance levels
There are three levels of accessibility conformance: Level A, AA, and AAA. Each level requires a higher success criterion. Generally, the higher the level of compliance, the more accessible the website is. This means that a website that conforms to level AAA will have fewer barriers to access than a website that only conforms to level A. Usually, websites with AAA conformance are owned by government entities or universities. Here’s a project we did that conforms to AAA accessibility standards, if you’d like to check it out.
It is important to note that achieving any level of compliance is a complex process that involves a thorough review of the website's content and design, as well as regular testing to ensure that it continues to meet the relevant standards and guidelines.
→ Screen reader compatibility
Screen readers are a form of assistive technology that render text and image content as speech and are useful to people with vision impairments or learning disabilities. Your site goes through an extensive testing process to make sure that screen readers can swiftly go through the content of your website making it easy to discern by those who rely on these tools.
There are several popular screen readers that we test your website on, including:
1. NVDA (NonVisual Desktop Access)
2. JAWS (Job Access With Speech)
3. VoiceOver (built into Apple's macOS and iOS operating systems)
4. Orca (for Linux and other Unix-like operating systems)
Keep in mind that different screen readers may vary in functionality and performance depending on the specific needs and preferences of the user.
→ Keyboard navigation
Keyboard navigation is a web accessibility feature that allows visitors to navigate and interact with your website using only their keyboard. It is important because it enables those with mobility or visual impairments that prevent them from using a mouse to access and use your website.
Keyboard navigation typically involves using the
tab key to move the focus to different elements on the page, and then using other keys, such as the enter key or the arrow keys, to interact with those elements. For example, a user might use the tab key to move the focus to a button on the page, and then press the enter key to activate the button.
Implementing keyboard navigation on a website involves ensuring that all interactive elements on the page can be reached and interacted with using only the keyboard and that the keyboard focus is always visible so that the user can see where they are on the page.
→ ARIA labels
ARIA (Accessible Rich Internet Applications) labels are attributes that can be added to HTML elements on your website to provide additional information about the element and improve its accessibility. They are particularly useful for helping screen reader users understand the purpose and function of elements on the page.
For example, if there’s a button on your page that says "Submit," you could add an ARIA label to the button like this: <button aria-label="Submit your form"> Submit </button>. When a screen reader encounters this button, it will read out the ARIA label, so the user will hear "Submit your form" rather than just "Submit." This provides additional context and makes it easier for the user to understand the function of the button. - COOKIES CONSENT BANNER
Cookies banners are messages that appear on websites to inform users that the website they’re navigating uses technology to track and collect information about their browsing habits and activity, and to obtain their consent for using them. These consent banners are required by law in many countries. - RESPONSIVENESS
Responsiveness is the ability of your website to adjust its layout and functionality in a way that is optimized for the device that it is being accessed. This means that whether a visitor is accessing your website on a desktop computer, a tablet, or a smartphone, your website will be able to adapt its layout and features in order to provide the best possible user experience. - TESTING
QA, or Quality Assurance, in web development, refers to the process of testing and verifying that your website is functioning properly and is free of any bugs or other issues that could affect its performance or usability. We take this process extremely seriously because our goal is always to impress your visitors when they navigate your site.
→ Browser compatibility
Browser compatibility refers to the ability of your website to function properly on different web browsers like Chrome, Safari, Firefox, or Edge. Because there are many different web browsers available, it's important for your website to be compatible with as many of them as possible in order to ensure that all users can access and use the site. Keep in mind that
Internet Explorer is obsolete now and your site will not work on it.
→ Google Lighthouse and PageSpeed
These two free tools by Google analyze the performance of your website on four key metrics: Performance, Accessibility, Best Practices, and SEO. Although not always possible, we strive to always score above 90-95% on each one of these indicators
→ Contact form submission testing
Contact forms require extensive testing because there is a lot that goes on behind the scenes for an email to reach your inbox when a visitor hits the “submit” button. For a contact form to be sent, we have to make sure that your SMTP (Simple Mail Transfer Protocol) configuration is working properly, otherwise, visitors’ submissions might never reach your inbox, or they might get caught in your spam folder. Sometimes, email providers don’t cooperate with this process, so we have to integrate third-party email relay services to accomplish the task.
→ Google Captcha
When implementing forms on your site, Google CAPTCHA, a challenge-response test used to ensure that a user is a human and not a machine or automated software, is always installed. This practice is commonly used on websites to prevent spam or other forms of abuse by bots. - UTILITY PAGES
Utility pages are pages that not a lot of visitors access on your website, but that are legally very important to have. These pages provide helpful information to visitors, but are not necessarily directly related to the main content or purpose of your website. Examples of utility pages might include 404, privacy policy, terms and conditions, or accessibility statement pages, and they’re often linked to from your site's footer that appears on every page of the site. - CMS TRAINING
Every time we launch a website we do a 1-2 hour training session with the team in charge of managing the website to walk them through their new content management system. It’s a hands-on session where we open the floor to any questions and we provide answers with examples on how to perform any action on the backend of your website. - LAUNCH
The website
launch process typically involves a number of different steps and activities, and when it comes to deployment, the stakes are high.
→ IT support
Whether you have an internal IT team or not, we become part of your team to understand your existing IT infrastructure and strategize deployment. We’re responsible for making sure that all of the pieces of the puzzle (aka technologies) are perfectly in place for a successful deployment. A successful launch requires perfect coordination between all of the parties involved in the process, and we’re experts at doing so seamlessly.
→ Site backups
Before any launch, we back up and keep a copy of your existing website’s development files just in case things don’t go as planned during deployment and we have to quickly roll back to a previous version of your site. Better to be safe than sorry!
→ Staging and Production environments
Did you know that you don’t own one, but two websites? Actually, every website we develop exists in two standalone instances - one in a staging or testing environment, and another one in a production or public environment. The reason we develop and maintain two websites is that the staging version of the site is a playground for us as developers and for you as administrators to test or soft-launch new features or content. - MAINTENANCE & SUPPORT
And last, but definitely not least, is the process of keeping your website up-to-date and functional over time. Our monthly maintenance plans can involve a range of activities, including regularly updating and backing up the website's content, fixing any technical issues that arise, improving the website's performance, and updating any plugins or the CMS to their latest versions.
And that is it! There are actually many other things we go through when developing your website, but we’ll leave those for another post. Hopefully, by now you have a clearer understanding of what goes into creating an eye-catching and functional website. In any case, you should feel confident that you’re getting the best of the best out there. Cheers on your new website!
