Brand Identity Program

Web development

Building Web sites

This page provides general coding tips for the development of pages.

Naming your files

When naming your Web pages, the following rules are recommended:

• Use lower case.
• Avoid the use of underscores and hyphens.
• When possible, name the file identical to title of page.
• Do not include spaces.
• Do not use special characters.

Using the <title> tag

The title tag should start with NMSU: followed by the name of the site, followed by the page title. For example:

<title>NMSU: Identity Program | Creating Websites | Building Websites </title>

Working with metadata

Metadata is information that describes the content deployed on your Web page. The code is located at the top of your file. The template asks for three sets of information. Refer to the example below:

• Author - Department or organization owner.
• Keywords - A series of descriptive words.
• Description - One descriptive statement.

<meta name="author" content="{{ Author }}" />
<meta name="Keywords" content="{{ Keywords, comma-delimited }}" />
<meta name="Description" content="{{ Description }}" />

<meta name="author" content="Marketing Services" />
<meta name="Keywords" content="web, XHTML, branding, print, web, photography" />
<meta name="Description" content="Information on how to publish hard copy and electronic documents using the NMSU brand elements " />

Content author: {{ author }}

The content author replacement area is where you insert the document author's name, department, and in the case of online publications written by others, the name of the person who wrote the content.

In the example below {{ author }} was replaced with University Communications and Marketing Services .

<meta name="author" content="NMSU" /> <meta name="University Communications and Marketing Services" content="NMSU" />

Document keywords: {{ keywords }}

Use this replacement area to insert a comma-delimited list of keywords that describe the page content. Keep the list short and meaningful. Too many keywords will flag your document as spam to search engines.

In the example below {{ Keywords, comma-delimited }} was replaced with web, XHTML, branding, print, web, photography

<meta name="Keywords" content="{{ Keywords, comma-delimited }}" /> <meta name="Keywords" content="web, XHTML, branding, print, web, photography" />

Document description: {{ description }}

Use this replacement area to describe the content of the page. This is often used by search engines to describe your page to potential visitors as it deploys in the search engine. The description should be no more than 140 characters.

In the example below {{ Description }} was replaced with Information on how to publish hard copy and electronic documents using the NMSU brand elements

<meta name="Description" content="{{ Description }}"/>

<meta name="Description" content="Information on how to publish hard copy and electronic documents using the NMSU brand elements" />

Working with breadcrumb trails

• Breadcrumb trails are hyperlinks that depict all levels of the Web site hierarchy above the current location and show the navigation path a visitor has taken.
• Breadcrumb trails show the Web page location within the Web site as it exists within the Web site and allows vistors to backtrack and move up the hierarchy.

<div id="breadcrumb-link-list">
<ul>
<li><a href="http://www.nmsu.edu">NMSU</a></li>
<li><a href="../index.php">Brand Identity Program</a></li>
<li><a href="index.php">Creating Web sites</a></li>
<li>Using Web templates</li>
</ul>
</div>

In the example displayed above "Using Web templates" would be the final page in the breadcrumb trail.

• If you view all of NMSU's Web sites collectively as a single Web site, the breadcrumb trail is the path of Web sites (not necessarily pages) that you would take from NMSU site down to the current page.
• Once the breadcrumb trail gets to your site, you can include the individual subdirectories within your site used to get to the given page.
• For instance, the Web site for an academic department's class descriptions might have a breadcrumb trail that starts at NMSU, then the College, then the department, then the class descriptions directory.

• The breadcrumb trail for your site can contain links to subdirectories, but it is not required to do so for the sites "above" your site (although if there's a strong case for it, you are free to do so).
• Link names for departments and colleges should replicate the title of Web page.

Breadcrumb trail: local directory to external server

If your Web site structure does not mimic your directory structure (for instance, you link over to another server for a Web application), your breadcrumb trail should mimic the site structure, as shown below .

<li> <a href="http://www.nmsu.edu">NMSU</a> </li>
<li> <a href="http://cahe.nmsu.edu">College of Agriculture and Home Economics</a> </li>
<li> <a href="http://cahe.nmsu.edu/ces">Extension</a> </li>
<li> <a href="http://cahe.nmsu.edu/ces/animal">Extension Animal Resources</a> </li>
<li> <a href="http://bqt.nmsu.edu">Beef Quality Training</a> </li>
<li> <a href="http://bqt.nmsu.edu/test1">Test One</a> </li>


Working with main navigation links

The main navigation links are located in the left-hand column and are considered "global." In other words they exist, in the same configuration on every single Web page of your Web site and should target the first and second level Web pages of your site.

It is important that they remain constant as they establish the navigation structure for the whole Web site and keep the end user oriented within the environment.

• nav-header - A header for minor links.
• nav-header-link - A header for minor links that can also act as a major link.
• nav-link-list - An unordered list of links.
• nav-nb - Any other content you need in the sidebar.

<div class="nav-header-link"><a href="#">Big Link</a></div>
<div class="nav-header-link"><a href="#">Another Big Link</a></div>
<div class="nav-header">Some Options</div>
<div class="nav-link-list">
  <ul>
    <li><a href="#">A link</a></li>
    <li><a href="#">Another link</a></li>
  </ul>
</div>
<div class="nav-nb">
  You are currently logged in as John Doe.
</div>


Local navigation links: {{ nav }}

This replacement area is where you insert the local navigation options.

• It should be tailored mainly for the local directory, but you are free to add links to places higher up your document hierarchy (say, to your department home page from a subdirectory).
• It takes the form of a series of <div>'s of different classes that produce different types of navigation content:

• nav-header - A header for minor links.
• nav-header-link - A header for minor links that can also act as a major link.
• nav-link-list - An unordered list of links.
• nav-nb - Any other content you need in the sidebar.

<div class="nav-header-link"><a href="#">Big Link</a></div>
<div class="nav-header-link"><a href="#">Another Big Link</a></div>
<div class="nav-header">Some Options</div>
<div class="nav-link-list">
  <ul>
    <li><a href="#">A link</a></li>
    <li><a href="#">Another link</a></li>
  </ul>
</div>
<div class="nav-nb">
  You are currently logged in as John Doe.
</div>


Working with the <h1> and <h2> tags

The header is the first piece of text your user will read. It is the title of the site. When deployed through a browser the <h1> will render the text in crimson with a horizontal rule beneath it.

<h1> Brand Identity Program </h1>

Follow the header with a secondary header. The secondary header should expand upon the header, providing the end user more details. For example: <h2>Brand Identity Program</h2>
<h2> Web development </h2>

Working with the <p> tag

Begin every block of text with a <p> tag and terminate it with a closing </p> tag. For example:

<p> This is the text that you will enter. Notice how it is surrounded by the paragraph tags. </p>

RSS alternate: {{ RSS XML file }}

For documents that are dynamically generated and can be syndicated or aggregated, you can set up an RSS feed to publish the information in a way that RSS readers and news syndicators can reference.

• You can point to that feed from this replacement tag, which will allow many browsers to easily subscribe to the feed.

• Alternately, if you use an ATOM feed or some other means of syndication, you can modify the <link> tag's MIME type accordingly. This replacement is optional; if you do not want to point to a feed, do not uncomment the replacement's tag.

<link rel="alternate" type="application/rss+xml" title="RSS" href="my_rss.xml" />

Contact Us

For more information, contact Marketing Services between 8 a.m. and 5 p.m. at 505-646-3221, or bip@nmsu.edu.