It’s been a while since we’ve gotten our hands dirty, so throughout this next series of tutorials, we will be creating an entire webpage based on what we’ve learned so far; and then using various CSS3 techniques to achieve the look and feel that we want.

First things first, though. It’s requisite to create a hypothetical need that we will be meeting through the creation of a web page. This will only be a single page, so we won’t be concerning ourselves with site structure, and the scope of the problem must be somewhat limited in so much that it can be meted from a single page. So while we probably shouldn’t tackle world hunger quite yet; everybody does enjoy a snack.

Or a cake. Let’s create a page that deals with an event that most of us are likely to experience at least a few times in our lives – a birthday – or more specifically, a party celebrating that birthday.

Obviously, there are a few things that we should probably include in our birthday page. As you’ll recall, we earlier posed the question “what kind of content should my site have”, and while this should be rather easy to establish for a birthday party, the methodology here shouldn’t be lost on the simplicity of the example. You should always be asking yourself “what is this website trying to accomplish?”; not just “here the stuff I want on my page.” So use the birthday example as a microcosm of a larger task.

The Birthday Party

So we’re throwing a party. Or at the very least, making someone think we’re throwing them a party. So before we being, some questions should be answered:
  1. Who is the party for?
  2. How old are they?
  3. When is the party?
  4. Where is the party?
  5. What’s happening at the party?
  6. Should I bring anything?
And the answers to those questions are how we arrive at our page elements. Since we’ll be using the 960 grid system, they also give us a good starting place for what we’re going to need to place on our page, and how many divisions we will need to make. We don’t’ need to worry about alignment at this point, however. Just get down the most skeletal of concepts.

We stand behind Server Intellect and their support team. They offer dedicated servers , and they are now offering cloud servers!

As was discussed before, something as simple as a pen and a piece of graph paper will suffice just fine. Others tend to prefer prototyping in an image editor, such a Photoshop. Find what works for you best ; again, it’s not what it looks like, it’s making sure you understand what your intentions were when it comes to implementation later. Taking into consideration the inquiries above, here’s the wireframe for our birthday party page:


Take a moment for yourself (and the sight-possessing public as a whole) to mock my freehand artistic abilities; and once you’ve stopped hyperventilating from laugher, let’s examine each of our page elements:

1. The Header


There are two things we should immediately draw the viewers’ attention to: the birthday itself, and the date. If the viewer isn’t interested in the event (they don’t like joey and/or cake) or won’t be available on that date; none of the additional information on the page will be relevant to them. They are able to quickly glance at the information, and make an immediate judgment call as to if they should inquire further.

This is a good example of what a header should generally accomplish for a most websites. It should be very clear as to where the user has arrived (a site name and logo), and what type of information is provided (from primary navigation elements.) The more effectively this is accomplished, the increased likelihood that the user will delve deeper into your site. The header, as its name more than implies, serves as a headline the entire page or site. It’s selling the related content.

Since we won’t require any additional navigational elements from our header, ant not much text content is needed, it will probably be best served by creating an image. That way, we’ll have more have control over our design, and will be able to create something more visually appealing than we could using CSS alone. CSS is great, but when you want absolute visual control, and not dealing with a large deal of text content, you’re still probably better off relying on images.

2. The Section


The “Deli Tray” of the page, if you will, will contain the bulk of the information relating to the party. It will contain most of the text content, and also a photo of the birthday boy himself. We’ll be breaking out the text into two sections: the description of the event, and then the when/where/what details. For most websites, the majority of your information will be contained within <section> tags; of which there may be several.

Generally speaking, while your other page elements will remain somewhat static, the <section> elements will change in correspondence to what section of the website you have selected. Since our example has only a single page instance, this won’t be applicable.

We already have an idea that the user is interested, so it’s crucial here that we relay all relevant information in an expedited and effective manner. This is a party announcement – not a biography – so only fundamental event-related information will be mentioned. A brief 50-100 word summary of the event, accompanied by some info points, is all we really need to present.

3. The Footer

We’re working in sort of a vertical drill-down for our content, so the further the eye works its way down the page, the more specific the content becomes. Our footer contains two elements that really own find utility for those individuals who are at least somewhat interested in attending the party.

Our first footer element will provide general directions to the party location. This has been broken out of the general announcement in the <section> because it is really only of interest to those individuals who will need to find the location; and could potentially clutter the overview. Then, we have included a button that will submit an e-mail to the party’s host. This won’t involve a separate page, but rather, just open the user’s default e-mail client and append a subject heading.

And there’s our introductory wireframe. It’s just a sketch – but it’s also a framework that has some ideology behind it – and hopefully sets a frame of mind for the development to follow. Now that you’ve got your reference point, let’s bake a cake!

CSS3 Design Fundamentals 1 Wireframing a Page Layout.zip

We chose Server Intellect for its cloud servers, for our web hosting. They have managed to handle virtually everything for us, from start to finish. And their customer service is stellar.