View reading-notes on GitHub

This section discusses a process that you can use when you are creating a new website.

Who is the Site For?

Every website should be designed for the target audience—not just for yourself or the site owner. It is therefore very important to understand who your target audience is.

Why People Visit YOUR Website

Now that you know who your visitors are, you need to consider why they are coming. While some people will simply chance across your website, most will visit for a specific reason.

What Your Visitors are Trying to Achieve

It is unlikely that you will be able to list every reason why someone visits your site but you are looking for key tasks and motivations. This information can help guide your site designs.

What Information Your Visitors Need

You know who is coming to your site and why they are coming, so now you need to work out what information they need in order to achieve their goals quickly and effectively.

How Often People Will Visit Your Site

Some sites benefit from being updated more frequently than others. Some information (such as news) may be constantly changing, while other content remains relatively static.

Site Maps

Now that you know what needs to appear on your site, you can start to organize the information into sections or pages.

WireFrames :

A wireframe is a simple sketch of the key information that needs to go on each page of a site. It shows the hierarchy of the information and how much space it might require.

HTML5 is introducing a new set of elements that help define the structure of a page.

Traditional HTML Layouts

For a long time, web page authors used <div> elements to group together related elements on the page (such as the elements that form a header, an article, footer or sidebar). Authors used class or id attributes to indicate the role of the <div> element in the structure of the page.

New Html5 Layout Elements

HTML5 introduces a new set of elements that allow you to divide up the parts of a page. The names of these elements indicate the kind of content you will find in them. They are still subject to change, but that has not stopped many web page authors using them already.

  • Headers & Footers
  • Navigation
  • Articles
  • asides
  • Sections

Extra Markup :

At this point, we have covered the main tags that fit nicely into groups and sections.

  • DOCTYPEs
  • Comments in HTML
  • ID Attribute
  • CLASS Attribute
  • Block Elements
  • Inline Elements
  • IFrames
  • Information About Your Pages
    • meta