You know that classic scene in Pinocchio where the Blue Fairy turns the puppet into a real boy? Take away the animated frames and cheesy dialogue, but keep the magic and that’s essentially what web development looks like.
Once our development team starts to work their magic on a site, you know you’re well into the process! All of these steps come after the
planning, content, UX design and visual design teams have outlined what the website should say, look like and function. Sticking with our metaphor here, you have the moving pieces parts of the puppet on strings without the whole “real boy” thing.
Development breathes some life (AKA functionality) into the site, taking it from a nice design to a real functioning website that you can use to serve and interact with your audience. Today, we’re pulling back the curtain on the Development team and giving you a little taste of what goes into their magic.
1. Front End Development
This first step is where we bring in our fearless Front End Development (FED) team to take a look at our collection of UX wireframes, site visuals and project direction and convert it into an actual interface that lives on your screen. The FED team essentially creates a template for your website, using code to turn those wireframes and visuals into a nice-looking site that appears in your browser. Nothing is clickable or particularly functional, but things are starting to take shape into your final product!
There are three types of code the FED team uses to create this site presentation or template.
-
HTML: Stands for hypertext markup language. This is the basic code your internet browser interprets to display your site.
-
CSS: Stands for cascading style sheet. The style sheet defines how things in the HTML code will be displayed visually, like colors, heading fonts and font sizes. The CSS is where things start to get granular with your site design.
-
Javascript: Scripting code that takes your static, basic HTML code and makes it dynamic. For example, if you’re going to have a blog section on your site, using only HTML code to display it means you would have to copy and paste the same block of code every time you post a new blog. Adding specific Javascript will automatically generate the same block of code each time for a uniform blog. Javascript can also be used to add an extra layer of functionality to the site like interactive controls or paths for moving around the site.
After the FED team gets its hands on the project, their finished product is pretty much a site with no data. That means you’ll see lorem ipsum text and placeholder photos, no links will work and the site may only have basic functionality. That’s when we pass things to Application Development.
2. CMS + Systems Configuration
CMS + Systems Configuration encompasses all back end development, or the
server side of an application and everything that communicates between the database and the front end. The team builds and maintains the technology that powers your server, application and database which, together, enable the user-facing side of the website to exist. This is when your site really comes to life!
The Systems Configuration team takes the FED team’s site template and makes it clickable, functional and live. This is where the site’s content, imagery and links are installed by loading them into the backend. This is also where more complex functionality like e-commerce stores or site account portals are created. After we’ve married the back end and front end, you’ve got yourself a fully functional website!
3. Beta testing
This is the stage where we bring client stakeholders into the process to take a first look at their site. In a presentation, the Dev team walks through the website template by template, page by page and provides a beta testing link so the company can review the site internally and provide feedback.
After the first beta, you should be trained on your new content management system (CMS) that will allow you to update your site going forward. Take this part seriously,
finding a great CMS platform and training all relevant personnel until they are comfortable navigating it.
During beta testing, thunder::tech will also develop a site Success Manual. A Success Manual is a personalized guide to your new website that your team can reference any time they have a question on updating the site.
After beta testing and site edits are complete, we still aren’t ready to launch, but we’re almost there! At this point, the site moves to staging, its final resting place. After reviewing the site one last time, we require a code and content freeze, effectively putting a moratorium on site updates until after launch. This makes it easier to work out any kinks or bugs prior to launch.
4. QA process
At this point, it’s time to begin the Quality Assurance (QA) process. This process involves SEO setup as well as the five things we’ll need for quality assurance on your site. What are those five things, you ask?
Domain/DNS
Acquire your domain name (the website address people will type in to visit your site) and make sure it’s legally registered to you. thunder::tech will test it out to make sure it actually goes to your website.
Secure Socket Layer (SSL)
We will check that your SSL certificate is installed on your site and up to date. This is used for identity verification to let users know it’s your website they’re interacting with, but it also provides reassurance to your audience that your site is secure.
Simple Mail Transfer Protocol (STMP)
Setting up your STMP ensures you can create email addresses using your domain name.
301 Redirects
When you transfer from your old site over to your new site, some pages may not be included in the handoff. Using 301 redirects ensures that your pages don’t go missing and instead lead to a similar or relevant page on your new site
Google Analytics
Integrate your site with Google Analytics to track your site traffic and marketing efforts for future reporting.
5. Blast off!
Once everything is in place, we are ready to launch! Press that big red button and show your site to the world!
Though you are now live, your website development still isn’t done. We suggest planning for a code and content freeze for two weeks following launch so that any bug fixes related to UI functionality and business logic can be handled quickly. After this freeze is lifted, your site is all yours to love, cherish and, mostly importantly,
continue to support, even after launch.
See what we mean? Without our trusty Development Team, your site would remain a series of words and photos in a PDF file, a puppet in a world of real boys. The development stage of your site is truly where the magic happens.
Our skilled developers launch dozens of new sites each year and provide support for countless existing sites. Schedule a time to talk to our website development and planning team here.