development
6 SEO Considerations for Web Developers
SEO is an essential part of developing any website. Without proper implementation of SEO practices the website and its content will not be findable on search engines. Without showing in in search engines or in search queries – what was the point in developing the website?
If you want the website to be seen and used by the target audience, then you should be considering SEO from the very start of the project. Web developers often view SEO as an item that the digital marketing team will work on after development has been completed – but there are a few key SEO considerations web developers should keep in mind as they develop the website.
Here are the top six SEO considerations for web developers and web development teams to keep in mind DURING the website development process.
1. Mobile First Web Development
This should come as no surprise, Google prioritizes Mobile First Indexing. This means that the Googlebot scans the mobile version of a website before it scans the desktop version for search engine indexing. Furthermore, the mobile version of a website is used in Google’s search ranking calculation rather than the desktop version of a website. Prioritizing mobile first development best practices will help the website rank once it has gone live.
Mobile First Web Development Best Practices
- Make sure Google can access and render your content
- Use the same meta tags on mobile and desktop.
- Don’t lazy-load primary content on user-interaction.
- Google can not see lazy loaded content.
- Make sure content is the same on mobile and desktop
- If the mobile site has less content than your desktop site, consider updating your mobile site so that the primary content is the same as your desktop content.
- Use the same headings, make them meaningful & clear.
- Use the same meta titles & descriptions on mobile and desktop.
- Structured data
- Make sure your mobile and desktop sites have the same structured data.
- Use correct URLs in structured data.
- If the URL’s change from desktop to mobile use your mobile URLs.
- Check visual content
- Use high quality images but in small file sizes.
- Use supported image formats.
- Mobile sites should have the same alt tags and titles tags on images as they do on desktop.
- Place videos high up on the page.
2. Website Speed and Page Speeds
Site speed and page speed are two top Google ranking factors. Google especially prioritizes mobile site speed, as Google indexes mobile websites first.
Page speed is not only crucial for user experience but impacts a crawler’s ability to navigate your site. Slow page speed means that search engines can crawl fewer pages. Resulting in a negative effect on website page indexing.
Page speed has a large impact on user experience. The longer pages take to load the higher the bounce rate and the lower the average time on page will be. Long load times have also been shown to negatively affect conversions. Conversion rates drop about 4% for each additional second of page load time over 5 seconds. 70% of users polled said that slow page load times affect their willingness to complete a purchase on a website.
Site/Page Speed Key Metrics
- First Contentful Paint ( FCP ):
- When the browser rendered the first bit of content.
- Goal: 1.2 seconds or less
- Font load time is particularly important for FCP
- Ensure text remains visible during webfont loads
- Time To Interactive ( TTI ):
- The amount of time it takes for the pages to become fully interactive.
- Goal: 2.2 seconds or less
- Deferring or removing unnecessary Javascript can help with TTI.
- Speed Index:
- How quickly the content of the page is visibly populated.
- Goal: 3.4 seconds or less
- Largest Contentful Paint ( LCP ):
- Measures perceived load speeds
- It marks the point in the page load time when the page’s main content has loaded ( usually the largest image or text block ).
- Goal: 2.5 seconds or less
- Contributing factors :
- Server Response Time
- Render Blocking Javascript & CSS
- Resource Load Times
- Client Side Rendering
- Total Blocking Time ( TBT ):
- The total amount of time that a page is blocked from responding to user input. Such as mouse clicks, keyboard presses, etc.
- Goal: 200 milliseconds or less
- Reducing Javascript payloads, removing unused code and efficiently loading third party scripts can help improve TBT.
- Cumulative Layout Shift ( CLS ):
- Measures the visual stability of a page, quantifies how often things move around the layout unexpectedly
- Goal: 0.01 seconds or less.
- ou can improve CLS by including size attributes on image/video elements, animate transitions in a way that provides continuity.
Site/Page Speed Best Practices
- File Compression
- A configuration of files on the website that allows the website to serve smaller files via gzip compression and improve page load times.
- Minify CSS, Javascript & HTML
- Removing any unnecessary characters from the source code to reduce the file size.
- Reduce Redirects
- Redirects create an extra step while loading a page more so redirect chains create several extra steps while loading a page which increase page load times.
- Remove Render Block Javascript
- Prioritize scripts that are necessary for the initial page render, after critical elements are rendered other elements will begin to render.
- Optimize Images
- Keeping image sizes small, and ensuring they are the right format and compressed for the web.
- Leverage Browser Caching
- Specify how long web browsers should keep images, CSS and JavaScript stored locally so a user’s browser will download less data while they navigate through the pages on your website.
3. Website Structure
Website structure is an important area to consider when optimizing for SEO. Website structure is how both users and crawlers will understand your website and its content. In the sense of its categorization, hierarchy and logical flow of information – these items are crucial to plan out in the development process of the website in order to avoid major structural problems post site-launch.
Page URLs
Page URLs are more than just the address you use to reach a page. It establishes your website structure. A clear site structure helps both search engines & crawlers understand your website from a high level.
In particular, it identifies how users travel around the website and the content hierarchy. Because Google is moving towards automation a well crafted URL should provide both humans and search engines with an easy to understand indication of what to expect at the page destination. Additionally, URLs carry some weight as a ranking factor. Google uses URLs to determine a page’s relevance to a search query.
Planning out URL structure during the development process creates clarity to the website structure, and helps to avoid URL changes after website launch which may create 404 errors or require additional 301 redirects.
Website Navigation
Website navigation should be a clear path of links to access the website pages. From how URLs are broken out into categories to how you link those URLs into pages and menus. This should be intuitive. Neither users nor crawlers should not have to work very hard to find out what they are looking for.
Common Website Navigation Mistakes
- Having a mobile navigation that shows different results than your desktop.
- Any type of navigation where the menu items are not in the HTML, such as JavaScript-enabled navigation.
- Personalization, or showing unique navigation to a specific type of visitor versus others, could appear to be cloaking to a search engine crawler.
- Forgetting to link to a primary page on your website through your navigation.
- This is called orphaning your pages.
4. Crawling, Indexing & Robots.txt File
A search bots’ ability to crawl a website is the first step to being indexed and subsequently ranking – bots get their crawling rules from the Robots.txt file.
If you are not seeing a website show up in search results this could be due to several crawler related issues:
- Your site is brand new and hasn’t been crawled yet
- Your site isn’t linked to from any external sites
- Your site’s navigation makes it hard for a robot to crawl it effectively
- Your site contains some basic code called crawler directives ( found in the robots.txt ) that is blocking search engines
- Your site has been penalized by Google for spammy tactics ( looking at you keyword stuffers )
- Your site content is hidden behind a login
Crawling vs. Indexing
Crawling and indexing are the fundamental steps that take place while a robot is processing a website. It is important to know what these two processes are and what the difference is between them.
Crawling is when search engines scour the Internet for content. They are looking over the code/content for each URL they find. Indexing is when search engines store and organize the content found during the crawling process. Once a page is in the index, it’s in the running to be displayed as a result to relevant queries.
Robots.txt
Robots.txt files are located in the root directory of websites ( ex. yourdomain.com/robots.txt ). It tells crawlers which part of your site search engines should and shouldn’t crawl. As well as, the speed at which they crawl your site.
Robot.txt Must Knows
- In order to be found, a robot.txt file must be placed in a website’s top-level directory. Robots.txt is case sensitive. The file must be named “robots.txt” not “Robots.txt” or “robots.TXT or any other iteration.
- The /robots.txt file is publicly available. You can add “/robots.txt” to the end of any root domain to see a website’s directives.
- Each subdomain on a root domain uses separate robots.txt files. This means that both blog.example.com and example.com should have their own robots.txt files.
- It’s best practice to indicate the location of any sitemaps associated with the domain at the bottom of the robots.txt file.
Crawl Errors
Web development teams should be aware of different crawl errors and how to resolve them. These errors are either 400 or 500 level http status errors. These are errors that make pages entirely inaccessible to site visitors.
- 400-level errors mean that the content cannot be found or it is gone altogether.
- 500-level errors indicate an issue with the server.
5. Website Redirects
Redirects include permanent ( 301 redirects ), temporary (302 redirects & 307 redirects ) and redirect chains. Setting up proper and appropriate redirects is essential. They impact user experience and crawlability.
Types Of Redirects
There are 3 main types of redirects, permanent, temporary and redirect chains. They all have different uses.
- Permanent Redirects: Or 301 redirects are a way to tell both searchers and search engines that your page has moved permanently. This option is best for SEO.
- Temporary Redirects: Or 302/307 redirects divert users from one URL to another temporarily. These types of redirects do not pass much “link equity” between pages.
- Redirect Chains: a redirect from one page to another that redirects to another page and so on. The problem with this is that it takes a few seconds for every redirect to load on the user side. As a result Google decreases the “link equity” each redirect. When a chain is too long, Google won’t even attempt to reach the final page.
Using 301’s Redirects To Avoid 404 Errors
301 redirects are the optimal choice in SEO. Without the redirect, the authority from the previous URL is not passed on to the new page. Which helps Google find and index the new version of the page. Additionally, this redirect ensures users find the page they’re looking for or something similar to it.
The presence of 404 errors on your site do not harm search performance. However it does impact the user experience. Allowing your visitors to click on “dead” links will take them to error pages instead of a page with what they were looking for or something similar, which can be frustrating.
6. On-Page SEO
On-page or on-site SEO is the practice of optimizing web page content for both search engines & users. These are the types of things that can improve search volume and rankings.
On-page SEO is key to gaining and improving SERP rankings and visibility. On-page SEO tells search engines about the content on your page and the value it provides to visitors.
Creating and publishing content is not enough. You must add value by optimizing for search engines and human experience. On-page SEO helps search engines find the most relevant search results for a query.
- On-page SEO includes items such as:
- Including page meta descriptions and titles
- Proper title tag markup on links
- Proper alt and title tag markup of images
- Use of H structure
- Use of internal links
- Clear URL structure
- Length and quality of content
So … Why Should Web Developers Care About SEO?
Simply put, just because you built a website does not mean people will see it. Nor does it mean it will just show up in relevant search results. Take the time to work with an SEO early on in a website development process. Working with an SEO or with the guidelines we worked through will ensure each page on your site has proper SEO structure and markup.
If you are responsible for building a website you are also responsible for making sure it has the ability to rank. Many site ranking factors come into play early on in the development process. Such as site navigation, mobile development, url structure, etc. If you are in the habit of circling in an SEO at the end of the project or solely assigning SEO tasks after the site is built, you are creating problems that do not need to exist.
Furthermore, site maintenance involves ongoing SEO practices. Things such as crawl errors, redirects, etc. Understanding the best practices and how to accurately address them without harming site visibility is an essential part of working with SEO as a website developer.
Looking for SEO savvy developers? We have those. Looking for development savvy SEOs? We have those too. Connect with us today to get started.
Want to stay up to date on all things Solution? Join our newsletter.
5 Ways To Improve Accessibility On Your Website
Accessibility elements are easy to overlook on your website. Most of the changes that make a website more accessible won’t appear to do much visually, but rather help improve the usability of your website to people using assistive technology. By optimizing your website to be more accessible, you make a significant amount of people have a better experience, and you also protect your website from being sued for lack of compliance with accessibility standards and legislative requirements.
We have gathered five tips on how to get started with improving accessibility on any website.
#1 Use Alt and Title Tags On Images
What are alt and title tags for images?
Alt tags are a text description of what an image looks like that gets shown if an image fails to load. Screen readers can read the alt tags, helping people with visual impairments understand what is being shown on the screen. Alt tags should be a description of what exactly an image looks like.
Why are alt and title tags on images important?
Visual impairments are very common. According to the WHO, at least 2.2 billion people have a near or distance vision impairment.
How do I implement image alt and title tags?
If you’re using a CMS like WordPress, just make sure you’re filling out the alt option when uploading media. To check if an image has an alt tag in the code, right click it and look for alt=”The alt text” in the <img> element.
#2 Use Descriptive Hyperlink Text
What is descriptive hyperlink text?
Descriptive hyperlink text means that the text you apply your hyperlinks to should describe where the link is going. Avoid the classic “click here” pitfall, and instead write your sentence first, then go back and choose a logical place to put the link. If done properly, linked text should make sense when read out of context.
Why is descriptive hyperlink text important?
Screen readers can be used to skip around every link on the webpage and if one of them was “click here” the user, presumably vision impaired would have no idea where the link may lead to. In addition to benefiting accessibility, descriptive hyperlinks are good for SEO.
#3 Ensure Sufficient Color Contrast Ratios
What is color contrast?
Color contrast ratios refer to how visible two colors are in relation to each other.
Why is color contrast important?
Color blindness affects a large amount of the population, it’s important to make sure everyone can see elements of the page well. This is especially important with text, if the user can’t see it they could miss key information on the web page. The WCAG requires that most text, or images of text have a contrast ratio of at least 4.5:1 to meet the second level of compliance, except in the case of large text (3:1 ratio), incidental or decorative only, or brand logos.
How can I fix my color contrast?
There are tools available to check your colors when picking out your palette. Several can be found online including the WebAIM Contrast Checker and contrast-ratio.com. If you already have a website, and want to check all the pages for color contrast issues, theres an excellent tool available on www.experte.com. There’s also a built in way to scan your website in Chrome based browsers. To use this, go to developer tools, hit the settings button, then go to experiments and enable CSS Overview. This tool checks the color contrast ratio across an entire page and automatically finds compliance issues. For example, this is what the results of a page’s contrast issue scan might look like:
#4 Ensure Your Page Structure Follows a Logical Order
What page structure?
A logical page order is when the elements of the page are presented in the order that they’re laid out in the markup code.
Why is logical page structure important?
Screen readers are expected to read things in the order they’re presented visually, but they just parse the markup code. So if the page elements are out of order it causes issues when using a screen reader . This also affects people using the tab key for navigation.
How can I improve my page structure?
When initially creating a website, try to avoid using CSS to move things out of their natural flow. A search element that is at the top of the page should be towards the top of the page in the markup. This isn’t quite as common but you can sometimes find it by tabbing through elements where you will run into issues.
#5 Use Descriptive Headings
What does it mean to have descriptive headings?
Descriptive headings means that you are using headings that are clear as to what information you can expect to follow the heading. Being clear and concise is important here. Headings should not be too long but should not be too short that it becomes too general. The headings should be descriptive enough that anyone reading themselves or with a screen reader will have a good idea of the information to follow.
Why are descriptive headings important?
Many people that use screen readers jump between paragraphs of text without reading the content in between. This makes it important to have descriptive text, but we often avoid that because it doesn’t look as clean. This is more important than visuals, it affects usability, it should be prioritized.
Get Started With Website Accessibility Improvements
Looking for a team of developers who have experience in making websites more accessible? We have a Solution for that. Connect with our team today to get started.
Want to stay up to date on all things Solution? Join our newsletter.
How The Domain Name System (DNS) Works & Common DNS Records
Here at Solution Agency we have launched hundreds of websites during our 25-year existence. One of the most misunderstood tasks of a website launch is making DNS changes. DNS is one of the most critical parts of any company’s website uptime and unfortunately, most people don’t even know that it exists. So we here at Solution we thought it would be beneficial to take a moment and explain DNS and how it works.
What is DNS?
DNS stands for Domain Name System. Think of your DNS as a traffic cop of the internet. DNS handles pointing web traffic in the direction it needs to be going in order to keep things streamlined.
Think of it this way, the DNS has two hands. One is pointing emails to your email IP address and the other hand is pointing website viewers to your website IP address. Now, there is a lot more to it than this, but these two principles are a good starting place when you are new to working with DNS.
Most people only care that their website and email are working. Typically, when it’s not working, they call their web or IT person and have them fix it. However, it is still good to know some basics about your DNS regardless of if you are the CEO or the IT person. I have included some terms as well as some brief explanations below to help you get a basic understanding of DNS .
A Visual Overview of How DNS Works
Where is Your DNS Located and How is it Managed?
DNS is a series of records that are most commonly hosted on your website registrar’s(like GoDaddy or Network Solutions) nameservers. Nameservers are servers intertwined with the Word Wide Web that store DNS records. Every single domain name is linked to nameservers. Often nameservers are thought of as phone books containing the IP addresses associated with domain names. Nameservers connect your domain to your hosting provider. They let the internet know what specific server hosts a particular website.
The Most Common DNS Records and What They Do
A Records
The A records are used to point a domain or subdomain to a certain IP address. The A record is the most common type of DNS record used – and the one you are most likely to encounter. Its main function is to point a domain or a subdomain to a particular IP address. In other words, thanks to the A records you are capable of reaching a website on the internet.
Why is it called an A record? The “A” actually stands for Address, because this kind of record helps your computer find the correct server when you try to access a website.
For example, if you have a site called “mywebsite.com” and its A record points to 1.2.2.1.1, it means that when someone makes a request to mywebsite.com it will be directed to the server which has assigned the IP address 1.2.2.1.1.
Here is an example of an A record:
If you have not correctly set your A record for your domain to the server your website is actually hosted on, your domain (website URL) will not be linked to your website and people will not be able to travel to your website when our domain name.
MX Records
MX records stand for Mail Exchanger. This record is vital to the proper functioning of your email system. MX records tell the internet which mail server is responsible for managing and hosting your emails.
Most MX records have more than one record and are ranked in priority order. The reason for this is that if the first priority MX server is unavailable then the next priority server will be used to ensure that your email is working properly.
A very commonly used mail service is Google’s G Suite. See below for an example of Google’s MX records:
CNAME Records
CNAME stands for canonical name and this kind of record is used to create an alias between two different domains.
For example, you can point mywebsite.com and www.mywebsite.com to the same website hosted on the same server by using a CNAME record. Here is how this would be implemented:
An A record would be created for mywebsite.com and pointed to the server IP address. You would then create a CNAME record called www.mywebsite.com and point that to mywebsite.com. The advantage of doing this is that if you needed to change the website IP address you would only have to make that change to one record instead of two.
A couple of important notes about the CNAME DNS record:
- If there’s no A record, then the CNAME record won’t display anything when you try to access the record.
- You must always put a period at the end of the CNAME record. The period at the end of the domain name is very important because if you don’t use it, then the DNS server will assume the domain is a subdomain. So instead of subdomain.domain.com you will get subdomain.domain.com.domain.com Some systems include the dot automatically, but if you are not sure about it is always better to type the dot on your own.
Here is a sample CNAME DNS record with corresponding A records:
TXT Records
The TXT, or text records, have different functions, but all of them are used to display certain kinds of information or data for sources outside of your domain. The TXT records are used to manage important records such as SPF and DKIM records discussed below.
SPF Records
The SPF record, also known as Sender Policy Framework record, is one of the most important records in regards to email. SPF records are important because they will tell which hosts are authorized to send emails from a particular domain.
If an SPF record is not created in your DNS records, chances are that your emails will be rejected or blocked by email recipients. To create an SPF record you will need to use a TXT record. One of the most common SPF records is for Google mail.
Here is an example record:
If creating a record like this seems daunting, don’t worry! Many third-party email services providers like Google will provide you with their SPF record. All you have to do is add the TXT record to your DNS. Keep in mind that there shouldn’t be more than one SPF record per domain. If you try to create more than one it could lead to an error in the DNS zone or it will create a conflict for other servers where they are unable to detect which is the correct record.
There are some nice tools available to check and see if your domain has a valid SPF record. MX toolbox has a great tool specifically for this purpose.
DKIM Records
DKIM records, which stands for Domain Keys Identified Mail, is an authentication mechanism for email. DKIM records were created as a way to fight SPAM emails.
When a company utilizes this type of TXT record it is making itself responsible for the emails that are sent from its domain. The DKIM record provides an encryption key and digital signature that verifies that an email message was not forged or altered in any way. This will improve the security of your email and increase deliverability.
Here is an example of a DKIM record:
As you can see, a DKIM record is a long encrypted TXT record that is unique for each domain. Fortunately, email service providers such as Google have instructions on how to easily create DKIM records.
Managing Your Web Presence Doesn’t Have to Be Daunting
Though this article only scratches the surface of the power, and various aspects of DNS, hopefully, it provided you with a little more information on the basics of what DNS is and how it works.
Have DNS questions? Need help on your next web development, design or digital marketing project? Contact Solution Agency, we are your partner solution for all things digital. Our expert team of web developers, designers, and marketers is standing by to help you with any project that you have in mind.
Want to stay up to date on all things Solution? Join our newsletter.
Surviving Your First 90 Days as a New Developer: Top 5 Tips
Landing your first job as a developer is exciting, but it can also be scary diving into a new career. You’ve been through months, sometimes even years, of learning and practicing all to land your first job. Your first day of work is finally here, you are feeling nervous, your confidence is low, and imposter syndrome kicks in. It’s completely normal to feel nervous – I know I was for my first day. As a new developer working at a digital agency, here are the top 5 tips I have learned in my first 90 days that have helped me.
5 Tips To Help New Developers
1. Communication
I used to think that being a developer was sitting at a desk all day just coding. I couldn’t have been more wrong in that assumption. Communication is a big part of being a developer. You have to be able to communicate effectively with your clients and with your team.
As a new (and even as a veteran!) developer it is very important to communicate if, and when, you need help. Don’t pretend to know everything – everyone was new once and even your senior developers don’t know everything!. Communicate with your senior developer(s) and ask a lot of questions! Don’t be afraid to be the newbie – be confident to ask the right questions to get the information you need to succeed at your tasks
2. Keep Learning
No matter how much you think you know, how many certificates you’ve acquired, and courses you’ve completed – you will never be done learning. Thinking that you have nothing left to learn is a dangerous mentality for any developer, especially a new developer.
There is so much to learn in the world of web development and technology as a whole. In the world of tech, things are constantly changing and improving. As new technologies and frameworks are released, you’ll have to keep yourself informed to remain competitive and able to provide solutions for your clients that meet current industry standards.
Jump into Stack Overflow and GitHub to find the answers to questions you have, or just to scan through the questions other developers are asking. Develop a reading list of industry blogs and magazines. Take a course on new technology. Most importantly – code every day!
Here are some resources I like to keep my knowledge up to date:
3. Tools You Need (And Should Get Good At!)
Every agency will have different tools and processes that they prefer – but there are a couple of tools that I wish I had a better grasp on before starting my first development job.
Code editors –
As a developer, you’ll be writing a lot of code, so a proper code editor is a must. The code editor can make a big difference when you’re writing code. It will ease your life as a developer by helping easily navigate and edit code, especially if you learn the keyboard shortcuts to make coding a project just a bit faster. I love to use VS Code, here are some Keyboard shortcuts for VS Code.
Command line/Terminal –
Command-line experience is a must for a developer.
A lot of your work will be dependent on the command line (git), as well as some technologies requiring you to have command-line knowledge. There will be only a few commands that you’ll have to memorize and as much as you will end up using them, you won’t have a problem memorizing them. For everything else, there’s always our best friend – Google.
Browser Dev Tool –
You should be proficient with different browser’s Dev Tool or Developer Tools. Being a web developer is not only about writing code or working with the command line. But also debugging!
My favorite browser to work with is Chrome. Here is the complete documentation on Dev Tools for Google Chrome.
4. Stay Organized (Good Planning)
Organizational skills and good planning can help you save a lot of time, reduce stress when the deadline is approaching, and help you finish on time every day. Making a simple project-based to-do list will allow you to: stay organized, keep your head clear and focus on the task at hand, highlight any roadblocks early, and easily keep your senior developers, managers, and clients in the loop. As the old saying goes – proper planning and preparation prevent poor performance!
Here are a couple of tools I like to help keep me organized:
5. Be Confident
It’s sometimes easier said than done to remain confident as a new developer – but being confident in the skills/knowledge you do have, and confident in asking questions about the ones you don’t is key to success.
Stay open to all the new things and be willing to make an effort to explore and understand them. Being a great developer takes time and consistent effort. Be confident in knowing you will reach that senior developer level if you keep practicing, learning, and asking questions.
Come Code With Us!
Are you a developer looking for your next opportunity? Check out our job openings – we’d love to have you on our growing development team.
Are you a client looking for a rockstar development team to provide you with the solutions that will help take your website to new heights? Connect with our sales and strategy team today.
Want to stay up to date on all things Solution? Join our newsletter.
What to Expect When Working with the Solution Agency Development Team
Getting started working with a new development team at a digital agency that your team has never worked with before can seem daunting. You want to make sure that you are getting a development team that is going to take the right approach to ultimately meet your development goals. A team that is agile, and able to work easily with your internal teams is key for most clients.
Our goal at Solution Agency is to constantly be learning, adapting, and fine-tuning our approach to both our development process and our project management process. Not to mention – making sure we are staying up to date with the latest development trends and technologies to provide you with solutions that are relevant and meet industry standards.
Curious about what it might be like if you choose Solution Agency as your development partner? Read on…we are going to break down our core development services, how we manage those internally, and how the development team interfaces with our other in-house teams to deliver successful results for every client.
What Types of Development Projects Does Solution Agency Work On? And HOW Do We Work On Them….
Full Development Projects
A full development project encompasses anything from new site builds website site redesigns, implementation of new site functionality, and more. Basically – anything that is not an emergency support request or ongoing site maintenance. These projects are our bread and butter – we love to help our clients build (or rebuild!) their websites into something functional and beautiful that will help them reach their digital goals.
Managing Full Development Projects
Full development projects are typically the hardest type to manage. There are a lot of moving parts to full development projects, and depending on the project timelines can be lengthy. Full development projects require a consistent approach from the very start of the project to ensure that our development team, and the client’s internal team (your team!), stay aligned in terms of goals and expectations.
Don’t worry though – with over 15 years of web development experience, we make sure our process is easy to follow and clearly outlines the expectations every step of the way. Here is how we breakdown the phases of our full development projects:
Phase 1: Strategy, Technical Discovery and Sitemap/Content Mapping
The first phase in any full development project is the discovery phase. The discovery phase allows our team to accomplish a couple of key things before we actually begin development including:
- Understanding your brand’s goals and industry positioning.
- Collecting your brand’s assets and guidelines – think colors, logos, font styles, and more.
- Understanding the technical needs (and constraints) of the website. Defining the technologies, frameworks and third party integrations that will be used. For example, does your site need a booking plugin integration? How will that work from a technical standpoint and a user experience perspective?
- Outlining any specific WordPress backend customizations needed for ease of updating the website longterm.
- Reviewing any previous website analytics to determine visitor device usage, traffic sources, etc. that may influence end design and responsiveness.
- Working with the client to determine key content pages, keywords, CTA and messaging used throughout the website. This helps us begin building our initial user flow/sitemaps and content maps.
We devote a considerable amount of time to this strategy and discovery phase as this phase is crucial to the success of every team that will be working on the project and informs the design and development decisions we make moving forward.
The bigger the project – the more time is needed to devote to the management of discovery and strategy. You can expect this to be a highly collaborative phase, between not only our internal teams but with you – the client – to make sure that all of the information we are collecting is correct and aligns with your end goals.
The end goal of this phase is to gather and record all of the information needed to actually begin the execution of your project. This phase sets every team – not just our development team – up for the successful completion of your project.
Phase 2: Design
Most – if not all – full development projects include some sort of design phase. During this phase, our in-house design team will begin to leverage the materials gathered in phase one to start designing your website look and feel concepts.
While we won’t dive into all the nuts and bolts of the design phase – this article is mainly focused on development team processes – during this phase you can expect our design team to build out a series of page templates, and mobile templates that our developers will use as the basis to begin building your website.
Our development team likes to be a part of the design conversation and review all designs prior to client review, to confirm that the designs can be executed as expected.
Phase 3: Development
After completion and sign-off of the design phase, we start phase three – the development phase. This is where we begin actually building your website – and where the process really starts to get exciting, as things become functional and you see your vision come to life.
The Solution Agency development team primarily focuses on custom WordPress development. No two sites are the same – and you won’t see any premade or out-of-the-box themes used here. As such, each development phase is going to look a little different depending on the client’s needs and build goals.
Once we are in phase three, we’ve got our technical strategy, sitemaps, content maps, and site design hammered out. The development process begins with setting up our development environment on our servers. This development environment is our testing grounds and is completely password protected and non-indexable so that our team (and your team!) can work on, and review the site before it goes live for the world to see.
Once the development environment is set up – we always start with the basics. Building out the core UI of the site (items like headers and footers). From there we start developing the global styles (items like typography, vertical spacing, button styles, etc) and page templates – providing us with a consistent base to load content and specific functionality components into.
A typical full development timeline might look something like this:
- Set up the development environment.
- Build base UI and global styles.
- Build page templates.
- Input website content.
- Build any custom functionality and integrate third party plugins or eCommerce functionality.
- Present to the client for review and revise as needed.
- Client approval to head into QA testing and launch preparations.
Phase 4: QA Testing & Launch Preparation
Once the client has approved the website development in phase three, we move on to phase four: QA testing and launch preparations. In this phase, the Solution Agency development team will do a thorough review of all the website pages and functionality. Looking specifically for UI/UX issues that need to be addressed before the website launches.
QA testing involves a manual process of clicking around every single page of the website, testing all contact forms, search functionality, plugins, and other third-party integrations. Anything an actual viewer on your website might do – we test it to make sure it works correctly. We also test the website on a variety of popular modern devices, browsers, and screen sizes to ensure that the experience remains consistent for every type of user.
During phase four we review site performance, utilizing Google developer performance and speed testing tools to assure that our websites meet current performance standards.
At the end of phase four, we work with our digital marketing team to ensure that the SEO basics (as listed in your SOW) are met before the site launches. This might include items like:
- Connecting Google Analytics
- Connecting Google Search Console
- Basic on-page SEO optimizations:
- Meta titles
- Meta descriptions
- Alt tags on images
- H structure
- Set up any 301 redirects as needed
- Configuration of Yoast SEO plugin
Once our development team has completed the QA phase, we then pass the website on to the client for a final review before we take the website live.
Phase 5: Launch
The launch is the most exciting phase for most clients – this is when our development team takes your website live on the internet for the world to see.
A lot can go into a launch process – and each site is different – so we won’t be detailing all of the launch steps in this article. However, you can expect a couple of things after we have launched your new website including:
- Immediate installation of SSL certificate
- Submission of final sitemap to Google Search Console
- Final review of website functionality and 301 redirects, immediate fix of any post-launch issues.
- A 2-hour virtual WordPress training for your team to make website content updates (if requested)
Okay…but what if I don’t need a full development project? What other development services does your team offer?
We’re happy you asked – our development team also handles support requests and ongoing website support services.
Support Requests & On-Going Support Services
What is website support?
Anything from an existing client regarding a site we made for them (or one we inherited). This could be a report of an issue, a request for a new page, a request for a menu change, content changes, etc.
What is the most crucial aspect to successful support services?
Communication. We always aim to let a client know an estimate, target start/end date, and any potential challenges we anticipate. Communication is key to a successful support relationship.
How does our development team manage support services?
We have a quick 30-min huddle every morning to make sure that our team is always aligned on support request timelines, and to review new support requests that come in. We use project management software to track the hourly progress, from estimate to confirmation, and that the request is completed as expected.
Every new approved task (or set of tasks) is entered into our project management software as a new support project. This allows budgets, due dates, and notifications to be set on a granular project level. This provides a system for making sure that nothing gets lost in the shuffle and allows for easy billing transparency (something our clients enjoy!).
Support requests are a shared responsibility that our entire development team takes on. Our goal is to get tasks in and out efficiently and correctly. With clearly defined estimates, start and stop dates – our clients always know what to expect from our development support services so they can plan accordingly.
The Development Solution You’ve Been Waiting For
We believe in our processes, and tools – but what makes our development team a success is the people on it. Our combined experience and ability to work in unison as a cohesive team is what sets our web development services apart from the rest.
Ready to get started on your next development project? Need some development support? We’ve got the solution you need – from big to small our developers can tackle it all – connect with our team today.