Content First
Reading
Starting with a blank page
When starting any page design, or any creative effort, one of the largest challenges is what our first step should be. This is often called the "blank page problem." In web design, we are sometimes given a mock-up we are trying to implement, or we have a visual design in mind but we are unsure how to get started.
One way to combat this problem is to simply get all of the content onto the page before we start deciding how to organize or style it.
In the case of our Safari website, we might look at the site and start to get the content in our HTML file.
First, the text
Looking at the content, we might get something like the following:
We collect our text in a
markdown file as a
way to gather our content. Next, let's organize this into some simple HTML.
Next, the HTML
As a first pass of our HTML, we might generate the content with a minimal amount of elements:
Refactoring and making the markup more semantic
Let's look at each section of this markup and see if we can improve it.
Header
The very first section of content:
Appears to be the header of the page. So let's surround this with an <header>
element. This element has no specific styling but does have a semantic meaning
that indicates that this part of the page is an important heading.
Next, we notice that we might want to make all of the elements in the header a
kind of page navigation. That is clicking, on each of those elements would take
us to various pages, or even just part of this page. So we will wrap the content
again inside a <nav> element.
Again, this element applies no formatting of its own but does start to give this part of the document more semantic meaning.
Our New Friends
The Our New Friends section could be improved by noticing that the animals could be interpreted as a list of animals. We will leave the "Featured Creatures" portion alone for now since it is only two images. This may change in the future as we begin to style the page.
We will turn this into a list:
Articles
Next, we see that we have two elements that appear to be blog posts. Let's use
the <article> element to encompass those.
We will be refactoring this portion of the document.
We will wrap each of the blog posts in an <article> element to give them a
grouping. This will come in useful when we start to apply styles.
Footer
As we organized the top of the page, we can organize the elements at the bottom
of the page. We will first surround the content in a footer element. This
element, like the header element, provides a semantic clue that this
information is subordinate information found at the bottom.
Wrapping this in a <footer> element looks like this:
Next, we will see that the <input/> elements are part of a larger structure
called a <form> and that the plain text Name and Email Address elements
are <label> elements that correspond to their input:
Applying some semantic structure to our application
As every developer knows, the first attempt we make to structure our code, or in this case a web page, may not be our sole attempt. We may find that as we need to style the page, that this structure will change. By giving ourselves some structure, we can start to see the areas where we can apply styles.
We need to strike a balance here. Applying too much structure will make our design rigid and difficult to change and style. At the same time, applying too little structure prevents us from easily styling the content.
Knowing just how much structure to apply to our content is a skill that comes with practice.
Our final page structure
Here is what our page looks like so far, and below that is the HTML we are starting with.
