The practices of web production, part 2

We go through the individual practices involved in the making of a website. This post is the second of a two-part series on the practices of web production.

Now that we’ve looked at our process of web production, it’s time to go through the individual pieces that make up the whole. Regardless of which industry we belong to, we’re all aware of our job title, or titles, and what that job means we’re expected to do. However, thinking about distinctions based on jobs ends up being unhelpful.

People, by virtue of not being circular, do not fit inside Venn diagrams, and any such classification comes with a conga line of asterisks. However, if we were to look at only the individual practices of web production, we can come up with a series of diagrams.

The web application

A small mountain of PHP, HTML, CSS and JavaScript makes up the web application. Most modern websites employ all four and each of them provide a different facet of feel or functionality.

• HTML Hypertext Markup Language
  Often referred to as “the markup,” HTML is static code that serves as instructions for how the browser should render the website, what information it contains and what other resources to download from the server. It is the basic framework of the website.
• CSS Cascading Stylesheet
  Known as the “stylesheet” to most, it is a separate document that contains style declarations to be used by the markup. For example, the markup may give an element the class name “blue” and the CSS contains a declaration stating that all such classed elements are to have a blue background. In the same fashion, the CSS declares what fonts to use, how large headings should be and the width and size of the content area.
• PHP PHP Hypertext Preprocessor
  This one we often call “the code.” PHP is a server-side scripting language, indicating that it is processed by the server, which is used to generate markup and then deliver it to the browser. As PHP is not static like HTML, it can make connections to a database and retrieve data, as in the case of a WordPress blog which stores its posts and settings in the database. One could say that HTML is the language that PHP uses to communicate to the user what is in the database.
• JS JavaScript
  This one is known by its name, “the JavaScript,” or simply “the script.” Unlike PHP, JavaScript is processed by the web browser instead of the server. meaning it affects only the viewer’s instance of the website. This type of script is typically used to create user interfaces and other interactive components. For example, the status update boxes on G+ and Facebook use JavaScript for their functionality and the same is true of some drop-down menus.

There is a prevailing sense of overlap between web design and development, likely due to how a person rarely ever does only one of them. Any web designer will be able to code up their work using HTML and CSS, and they will have basic knowledge of both server-side and client-side scripting, PHP and JavaScript respectively, and a web developer will understand how their framework interacts with the front-end, especially in the case of user interface elements.

I would suggest that instead of overlap, the two belong to a dichotomy of which both parts are equally important to create the final product.

The web copy

Written content, put simply. For many websites, this is the intended purpose; delivering content. Depending on the aim and type of website, the style of writing changes dramatically.

• Informational
  Any kind of writing whose primary purpose is to inform the reader of events, ideas, research, products or services. This style has emphasis on flow structure, especially in the case of a news website.
• Commercial
  More commonly known as copywriting, it is using the written word to advertise and sell a product or service, and is less concerned with the order of information (not to mention the accuracy of information) and more so with enticing and attractive quality.
• Educational
  Has the explicit purpose of being easily understood by a reader unfamiliar with the topic. Flow structure is ordered logically and by complexity.
• Technical
  Serves the purpose of uncompromising accuracy. A subtype of technical writing, legal writing, is one whose verbose and redundant language which with we’re all familiar, leaving no room open for interpretation. This style of writing has the strongest emphasis on which words to use and the flow structure is often ordered by external logic (such as in the case of a manual for a piece of software or machinery).

The web imagery

If the web application is a house, then the imagery makes up the pictures on the walls, the wallpaper and the giant sculpture of Matt Mullenweg in the front yard. When imagery is part of the web production process, it is typically separated into two distinct types.

Although an illustration is by definition a graphic, language has evolved to separate the two. A graphic is something abstract, such as the diagram above. If you were to draw a picture of me making the diagram, that would be an illustration.

In closing

Once the individual parts of the website have all been delivered, it’s up to the QA team to make sure everything is as ordered and continues to run until it’s time for another cycle.

This covers the most common practices involved in web production. As it is an industry that is evolving quickly, more practices are being adopted all the time. For example, video might one day be considered part of the web designer’s job as HTML and JavaScript applications become more sophisticated, at which point there’ll be another circle in the diagram, and another statue of a well-known figure on the front lawn.