9.1: An Introduction

Planning Cycle

Web development is best achieved as a linear process but is usually completed asynchronously. The planning process described is intended to build upon itself to refine project requirements, look and feel, and development plans. However, limitations in timelines, mid-project revisions, and the extensive time that can be invested in the early stages of design lead many programmers to begin development while a project is still in design.

The website development life cycle (WDLC), is a structured approach to building and maintaining a website.

It typically involves seven key phases:

1. Planning.
2. Analysis.
3. Design.
4. Development.
5. Testing.
6. Implementation.
7. Maintenance.

Starting early with programming during design planning can accelerate a project when the elements created early on are unlikely to be affected by later changes in the scope. When done carefully, early programming also allows an opportunity to test concepts before investing time into an idea that may not work. It is important to avoid aspects that are assumed to change, like the visual layout or particular pieces of content, instead focusing on the data structure, frameworks, and other components that are easily adapted to design changes.

While you are planning, keep an eye out for indicators that things are going off-track.

Some of the more important flags that should be resolved include:

1. Vaguely defined use cases and inadequate project requirements
2. Overly broad or undefined scope of features
3. Unresolved disputes between stakeholders about project features
4. Unrealistic timetable, budget, or inadequate resources

When considering your milestones, tasks, objectives, or whatever label you or your team place on objectives, a handy acronym to reference is SMART.

The idea is to check all of your objectives against these criteria to determine if they are appropriate and well-developed. By ensuring all of your objectives meet the SMART criteria, you will have a better chance of keeping your project on time and well planned.

The Fold

As we begin to develop our pages, we need to begin to consider where we want to place pieces of our content.

If you look at newspapers, you will find that the most attractive story of the day (as decided, at least, by the publisher) is emblazoned in large letters near the middle or top of the front page, surrounded by the name of the paper, the date, and other pieces of information that quickly lend to your decision of whether or not to purchase a given paper.

This is done intentionally, to make the paper attract your attention and get you to buy their edition over their competitors. In the printed news industry, the prime retail space in the paper is the top half of the front page, or what you see when the newspaper is folded normally at a newsstand. This is referred to as “above the fold,” and is crucial to get their audience’s attention. This also applies to websites, except in our case, our “above the fold” is what the user sees on the landing page for our site, without having to scroll down or use any links.

Newspapers folded in a Newstand. Image by Feyza Yıldırım from Pexels	Boston Globe front page (Nov 5th 1947), with "the fold" framed. The Boston Globe, Public domain, from Wikimedia Commons

What you typically find here is the name and or logo of the company, and what they feel is most important for you to see first. As you begin to analyze web pages in this light, you will find it very easy to determine what kind of site they are, or what they want or expect from you as their guest. News sites will typically follow a similar setting to a printed paper, leading with headlines and links to other sections.

Companies will lead with a featured product or sale to attract your attention, and search engines will make the search bar prominent, usually with ad space close by to increase their revenue streams. The concept of “The Fold” is another of the many highly argued concepts in web development.

Proponents are quick to point out the same example we used about traditional print media methods, while detractors will argue that if it were true, scrolling would never have been created, or users would lose interest in following links.

Typography

While an important topic in media arts, it has until recently received little attention in web development. Utilizing unusual fonts used to be a complicated process that required the end user to have your font(s) installed in order to see the site as you intended. Now, advances in CSS allow us to use unusual fonts by connecting to them through our styling.

This allows us to use a tremendous variety of fonts in our sites to add to our look and feel, adding an aspect that has unlocked new approaches to design. Some of the elements of typography include the study of features like readability, conveying meaning or emotion through impression, and the artistic effect of mixing styles. For ease of reading and to avoid a cluttered appearance, most sites keep to two or three fonts when creating their design.

This allows us to use a tremendous variety of fonts in our sites to add to our look and feel, adding an aspect that has unlocked new approaches to design. Some of the elements of typography include the study of features like readability, conveying meaning or emotion through impression, and the artistic effect of mixing styles. For ease of reading and to avoid a cluttered appearance, most sites keep to two or three fonts when creating their design.

One for text, and one or two for headings, titles, and distinguishing marks. All of these should be kept in the same family for a more congruous experience, and each unusual font defined in your site should include fallback definitions in case there are problems loading your primary style. You may want to set your regular text as one of the standards supported by all browsers as users are most familiar and usually comfortable with that set.

Difference between Serif and Sans Serif font.  By GJo, GNU FDL, from Wikimedia Commons	Ubuntu font family. By Monaneko, Public domain, from Wikimedia Commons

Web Fonts

To tap into this aspect of design, a great place to start is with the Google Fonts website. This site is a repository of character sets for a great variety of fonts that you can link to or download and include in your own site’s files. We will look at connecting to these later, but browsing the site now will give you an initial look at the amount of variety that is available for design.

Sitemaps

A sitemap is a file that contains a master list of links to the pages on your site and can provide information about those pages like how often they are updated, how pages connect to each other, and how important it is relative to the other pages. It can be a reference tool to both Bots that index your site for search engines, as well as your visitors trying to find particular content.

Sitemap files are XML documents arranged in the hierarchical format that bots read to gain an understanding of your site layout, page relevance, and organization. The file may also be a human-readable page that diagrams how pages relate to one another and serve as a master list of the pages in your site. Sitemaps are best kept in the root of your website, at the same level as your initial index page.

While a complete sitemap cannot be finished until after your site is ready to be published, we can include sitemaps under development methods because laying out your site’s organization on paper will help with developing your menu system, logically organizing content, and in defining the scope and purpose of your site. The more content or pages you can define at the beginning of the process will reveal information that will help during your design phase.

To create a sitemap, you can start by creating a running list of all the content you wish to have on your site. Anyone involved in the production or validation of content should be in the room! In each of these steps, it is important to identify your stakeholders. As you are creating your running list, it is often helpful to use index cards so you can determine by card color or pile where a particular piece of content should be.

This will help you discover your menu system, as you create names for piles of cards as your menu title. After, as you diagram what cards are with what pile and where that pile is relative to others, your sitemap will begin to take shape.

Robots.txt

Robots are automated scripts typically used to index or take inventory, of the content in a website for use in things like web searching sites or collecting statistics. A robots file is a basic text file kept in the root folder of your website that instructs these robots on what sections or types of content in your site you do or do not want them to index. Legitimate robots will read this file when they first arrive on your site to honor your request.

Keep in mind this is an enforceable act, and malicious or less-than-reputable robots are still perfectly capable of reading through all non-privileged (i.e. no login required) content on your site.

Wireframes

Wireframes in the web development world are not exactly their literal three-dimensional counterparts in the real world, but they bear a similar purpose. A wireframe may include things like location and size of elements such as a login button, where banners and content sections will sit, and provide an overall idea of how a site will operate. When wireframing a website, the idea is to create a mockup of one or more designs that portray how the interface might appear to the user.

By the end of your wireframing process, you should have an idea of how the site will operate, and have resolved questions over where users will find particular features and elements. Wireframes typically do not include color, actual content, or advanced design decisions like typography. Some of these considerations will have been at least partly addressed when creating your sitemap, and the rest will come once we begin storyboarding.

Storyboarding

Storyboarding a website is quite similar to storyboarding a TV show, comic, or other forms of media. Using our wireframes, we can begin to add color, font, and rough images to our documents. Keep in mind at this point we are probably still in a graphics editor or document style program like PowerPoint, Photoshop, etc. Real code is coming soon, but we can do more mock-ups faster without taking the time to make it function.

As you storyboard, you will create separate pages, or panels, for the screen a user would see as they complete the most important processes on your site. If you are selling something, for example, your storyboard may include examples of product pages, adding items to their cart, logging in, and completing their purchase.

By paging through these panels, you can see how the user experience will progress and identify potential problems like a confusing check out process, or you may discover that your shopping cart block from wireframing may be better off in a different, more predominant location. This process may be repeated several times until a final version is accepted by everyone in the decision process.

Color Schemes

The process of determining the color(s) involved in your site could fill a book. 

In fact, it does.

Regardless of the varying opinions of what emotions colors instill, or represent, the quickest way to alienate a user is to give them a visual experience that is unappealing. The layout, appearance, and cohesiveness of your site are something that is immediately judged when a user first visits.

These elements influence everything from their impression of what the site represents, its reputability, and even its trustworthiness as an ecommerce option. If your site appears to be disorganized, dated and out of style, or seems too “busy” or complicated, you can lose users in less than ten seconds.

You can address this issue (even without an artistic eye) by following the techniques we discussed earlier to plan out a simple, intuitive interface, and by using tools to help you select and compare color schemes like “Paletton” or “Colors on the Web”. 

Whether you choose to study other books on the subject or not, a great way to keep current is to get ideas from what others are doing by following sites that list or rate sites by appearances such as the annual “Times” review and “The Best Designs” (web page not updated anymore).

File Organization

As more and more files are created to complete the website, keeping everything in one folder will quickly grow cluttered. To address this, sub- folders can be created just like when files are sorted in "My Documents".

Traditionally folders can be created for images, scripts, pages or files, or for different sections of content or tasks. How and why these folders are created varies to personal taste or group determinations, and in some cases it may be done to maintain a particular method of writing code, such as model-view-controller.

Pseudo-Code First!

Whiteboards, notepads, and napkins can be used to write down some pseudo-code, before the real coding begins. Writing out the plan to tackle a particular problem will help to identify logic problems before the coding begins, and will help to keep track of what is needed to work on as the project progresses. 

Creating pseudo-code is the process of writing out in loosely structured sentences what needs to be done.

Brackets

Some languages require the programmer to use a combination of parenthesis and brackets to identify what pieces of code belong together. This allows the engine or compiler to delineate between the code that should be tested as a logic statement, code that gets executed if that statement is true, and code that belongs to functions or classes.

HTML tags come in pairs consisting of an opening tag and a closing tag to wrap around text or other elements.

• Opening Tag: Uses a less-than sign (<) and a greater-than sign (>) to enclose the tag name, like <body>.
• Closing Tag: Includes a forward slash (/) right after the opening angle bracket to tell the browser the element has ended, like </body>.

As the code is written, it is a good practice to immediately enter both the starting and ending marker first, then create space between them to enter the code. This will help ensure that the opening bracket will have its closing bracket when nesting the code.

Depending on the text editor, it may assist in the coding by automatically adding closing brackets and helping identify which opening and closing brackets go together.

Comments

In HTML, comments are used to add explanatory notes, reminders, and organization to the source code while keeping those notes invisible to the people visiting the website. When a web browser reads the HTML file, it completely ignores anything placed inside a comment tag.

It is natural to feel that we will remember the programming logic as they are so obvious when the code is been created. The need for good commenting becomes immediately apparent when reviewing someone else’s work, and we may be wallowing in frustration trying to figure out what the other person was trying to do.

Any code of your own that you haven’t looked at for six or more months, might as well have been written by someone else.

— Peter S Eagleson, MIT

This is not meant to endorse comments that are obvious to the reader from the line, like:

Rather, comments are best suited to explaining why agreed upon methods were not used or what difficult to understand code might be doing, like:

Spacing

Just as spacing is used in documents to convey that a topic change is occurring, it can break up a longer string of commands by putting spaces around lines that are grouped together to complete a particular task, signifying that the next set of lines is for another task.

Indentation

To make the code easier to read,  indentation can be used to give the reader an idea of what lines of code belong to different sections. This is typically done inside functions, classes, and control structures. When  the code is nested, extra indentations are added for each layer within, moving those blocks of text further right to visually distinguish.

As the contents of a loop or function ends, the closing bracket is lined up with the function definition or logic statement to show that the section of code belonging to it, is complete.

While the program will run just fine without indentation (and without spacing), it makes it easier for humans to read and understand the program and its logic.

Meaningful Variable Names

When variables and functions are created, their assigned names should have meaning, not only for the coder, but also to others who may read the code. While it can be tempting to use a lot of short variable names while writing the code, it will be more difficult later to follow what the variable is supposed to represent. 

Short names, like queryResult or query_result can be used, or something longer like numberOfResumesReceived.

While the latter takes longer to type while coding, the name is very clear on what it represents. As spaces are generally prohibited in variable names, these examples show us a few ways to approach longer names. 

The method used depends on the coder, but it should be used consistently throughout all the code to reduce confusion. Differences in how and where capitalization or underscores are used, can represent different types of variables, like classes or groups of variables.

Short variable names like a simple x or generic name like temp may have their places in the code, but are best reserved for when they identify a small variable or one which will have a very short shelf life in the code.

It has been one of the best practices in coding, to use camel case when naming variables and functions. 

Versioning

This is the process of creating multiple versions of the software, instead of continuously overwriting the sole edition of the code. By creating different copies of the program as new features are added or created, can preserve working copies or even create different versions of the program.

This allows to “roll back” or restore previous versions if unforeseen errors are created in the new code, or to allow different features to be tried and discarded over time.

Naming conventions for different versions of the code might involve numbers, letters, release stages (i.e. alpha, beta, release candidate, and release), a combination of all of these, or just “development” and “live.”

Templates

Similar to the idea behind frameworks, templates are sets of files that dictate the basic structure that provides a layout to the web page. Templates typically create a grid format that can be selected from, like two or three columns, fixed or relative width and height, etc. 

Templates are useful for getting the look and feel of a site up and running fast and there is little concern about the particulars of appearance, or whenever the template meets the needs well. When inserting the content dynamically, multiple templates can be used for one site to change the look and feel quickly based on which one is applied. This might be determined by what type of device the visitor is using, or what type of authentication they are using. Templates can be both freestanding or can be an extension of a content management system or framework.

IDEs for HTML

While pure HTML doesn't require a heavy IDE (since it's a markup language rather than a compiled programming language), developers typically use feature-rich code editors or specialized web IDEs that support HTML along with CSS and JavaScript.