5 Must-Know Website Development Steps

Search Options
Blog Search
Sign up for our monthly marketing trends enewsletter
  • 10/8/2020
    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.
     
     
    5 website development steps
     

    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.
     
    basic coding terms for website design
     
    • 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?
     
    quality assurance requirements for website design
     

    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.
    About the author::Jerome Sen is the Director of Development at thunder::tech. He's responsible for the strategic vision and oversight of User Experience Design, Front-end Development, Application Development, and Digital Support teams. Currently the undefeated cornhole champion for 4+ years.
  • 5 Ways to Boost Your E-Commerce Efforts and Finish 2020 Strong
  • 1171
  • thunder::tech's Recent and Upcoming Xperience by Kentico Project Successes
Sign up for our monthly marketing newsletters