What Goes on Behind the Scenes of Your New Website?

You may have seen your quote or invoice itemized out into design tasks and development tasks.  "What's the difference?," you might ask.  And, "By the way," you add, "What kind of background research are you doing?  And why is launching a website so much work after you've already completed the design and development?  Oh and what the heck is all this stuff you're talking about?"
Because in our business it's all too easy to overlook some of the 'lingo' we toss around so nonchalantly, I thought I'd write up a brief description of what actually goes on behind the scenes of your new website.
Discovery
Seafoam's process all starts with a 'discovery phase' where we spend a good deal of time researching your industry and your closest competitors.  We analyze their websites and marketing strategies and then begin to formulate an approach for you that will surpass that of your competition's.  We take these initial concepts and build on them as we learn more about your business, your industry, and what sets you apart.
Design
Next, we move into the design phase of your project.  You may refer to us as web designers, but this is actually just a small part of what goes into your new website.  First, we create a wireframe of what the new site will look like.  This might be on paper or in a program like OmniGraffle.  The wireframe is a series of boxes, short descriptions, and place-markers for where certain content and images will go on your website.  When the wireframe is complete, it looks like a colorless blueprint of what the end product will be.
We then take this wireframe and create something based off of it in Adobe Photoshop.  We add to the wireframe until we've created an image of what your website will actually look like after it's developed (coded).  We call this the mockup - though it takes quite a bit of time and thought to create, it acts as a roadmap for the site's development by giving us a near-perfect image of what it is we're coding.
Development
When you've signed off on the design mockup (however many revisions it takes), we go into the development phase.  We start with a blank screen and hand code the layout of the website using HTML5 and XHTML.  If we stopped our development here, you'd end up with just a plain, black and white, Times New Roman website.  Because we can't have that, we open up a new blank document and write the CSS (Cascading Style Sheet).  Just like what it stands for, the CSS controls the style of the website.  We 'style' certain elements of the HTML5 and XHTML by referencing them in the CSS.  In the end, nearly every single element on your website will have both HTML and CSS telling it what to look like, where to go, and what to do.
Next, we add some JavaScript (usually in the form of jQuery, our preferred JavaScript framework) to add some flavor to the website.  If you're on a site that has a great image slideshow, animated transitions when you click on a box, or instant form validation, this is, in all likelihood, JavaScript.
To compare it to something we're all familiar with:  the HTML5 and XHTML are like drawing scattered body parts on a piece of paper, the CSS is like putting those body parts together and then adding clothes to the person, and the JavaScript is like the necklace, purse, bracelets, and makeup you add at the end to pull the outfit together.
Pre-Launch
So, we've got our website now.  We could launch it as-is, but it would still be missing some essential information.  Before we make your new website live, we add code to each page that gathers statistics and analytics on your visitors, we submit your site to the major search engines and directories, we create files that act as 'maps' for those search engines to 'crawl' through and discover the different pages of your website, we give your website a favicon (the little icon that shows up near the URL in your browser), we test the site in every modern browser to make sure it's showing up properly, we check for broken links and valid code as well as a list of other tasks that should (but unfortunately aren't by many companies) be completed before your site's official launch.
Launch and Post-Launch
After all of this, we finally launch your website, re-check that everything is working properly, setup any new email addresses or other new server configurations, and monitor non-stop to insure it's success.
I hope this post has deciphered some of the language we use when we're proposing new ideas, giving you status updates, and becoming overly excited while talking about computer languages 🙂