Once the prototype has been approved, the developers have all they need to begin building the actual website. The development process consists of constructing a database integrated with a content management system (we use our own NewfangledCMS), creating the site's structure and unique page templates, which we call the "whitescreen," and then applying the final visual design to the site.
Programming with PHP
Our developers program in PHP, an open-source language created especially for web development. What it basically does is process the raw data that sits in a website's database and matches it with the correct HTML for the page template it belongs on, producing the web page as we know it. As the diagram below indicates, the PHP exists within the CMS, executing scripts that are written to produce specific results.
An example of how this works is just one click away. The page you are viewing right now displays only some of the content associated with this article. Our CMS defines this page as only a portion of a type of content called "newsletter" and serves up the rest of the content as you navigate the various parts by clicking the "In this Newsletter" menu at the top of this page. But, if you click on the link that reads, "View on single page," a script will execute to reconfigure the data associated with this content type and spit it back out so that all five sections display on one page. This kind of communication between the CMS and the database happens on every page of a website, which underscores how important the prototype is in describing to the developer how each page is intended to function.
Building the Whitescreen
Just as we separate prototyping and design as distinct processes, we isolate the programming of the website from the application of the visual design. This allows the developer to focus on the logic of how a site operates before worrying about how the site actually looks.
As a new site is being built, it looks just like the image to the left. We call this the "whitescreen." While similar to the prototype--in that no visual design has been applied yet--the whitescreen actually works. Remember the simple diagram above? Well, the developer defines every type of content (i.e. products, articles, blogs, whitepapers, etc.) as unique records in the database. Each content type's record will be defined by various variables, like its title, abstract, main content, images, etc. Then, the developer configures the main templates to retrieve that content as needed.
The whitescreen homepage at the left is a good example of how retrieval works. At the top of the page, a "test slide" is displaying. In this site's database, a "slide" is particular type of content that, in addition to having a main image, has a title, a description, and links to another page on the site. However, the homepage has been designed to display an interactive slideshow that allows the user to browse through all the slides. This is achieved by the CMS, which runs a script to retrieve each "slide" record in the database and place it in the page. Now, the user can use the arrow buttons to view multiple slides without having to refresh the page.
When I said that the whitescreen actually works, I meant that literally. Because the site is so thoroughly integrated with the CMS, we can actually train our clients in how to use their site before the visual design is applied. In fact, that test content you see in the example above was entered by the developer using the CMS in the same way the client would. Giving the client access to the site once the whitescreen is complete can sometimes be a great way to maximize the amount of time they have available for content entry--something we'll discuss in next month's article.
Applying the Design
As Dave's quote above says so well, excitement really does build as the website takes shape--particularly when the visual design is applied. Because the client has already been working with their site, they've been well trained to see it as an interactive vehicle for content, not a slick, two-dimensional presentation. But that doesn't mean that applying the design is simply decoration.
The design is a critical component of the website's ability to properly communicate its content. It sets the tone and gives voice to a brand speaking to a wide audience across the web. Because the structure and logic of the site has already been worked out during the whitescreen stage, the developer can focus solely on the visual detail and interactive effects that enable the website's voice during design application.
The developer refers to the Photoshop document (PSD) created by the designer, which contains every image, color, and typeface used in the design. The designer also provides a stylesheet which specifies the specific colors, sizes, and weights of various text styles that will be used repeatedly throughout the site (i.e. headlines, subheadlines, link styles, etc.). With all this information, the developer can create cascading style sheets (CSS) that the site templates are matched with in order to display according to the design. With one master CSS and others related to unique templates, any future changes to the style of the site only need to be made in one place.
For a more in-depth look at how design impacts website functionality, read our newsletter on Designing for the Web Today.
Once the design and development work is complete, it needs to be checked out thoroughly to make sure everything works properly and looks as it was intended to...