Simple Design Parts

XperienCentral includes various out of the box components. This chapter provides an overview of the components that are used most often. When a design is ordered, the GX project team involved will determine which components the design should contain. The examples shown are taken from the demonstration edition of XperienCentral. This design consists entirely of XHTML with CSS. Because all XHTML in XperienCentral semantically renders the enclosed text, it is recommended that you maintain the same XHTML as the one documented here and use style sheets for all styling. In the overview below, each element in XperienCentral is described and the XHTML that generates it is shown.

In This Topic

Content Management — Website parts

Path

Shows the path beginning with the home page:

<div class="block-xxxxxx">
   <div class="path-yyyyyy">
      <div class="top">
         <!-- -->
      </div>
      <div class="wrapper">
         <ul>
            <li class="odd first">
               <span class="title">
                  <a href="#" title="home page">home page</a>
               </span>
            </li>
            <li class="even">
               <span class="title">
                  <a href="#" title="second page">second page</a>
               </span>
            </li>
            <li class="last">
               <span class="title">
                  <a href="#" title="last page">last page</a>
               </span>
            </li>
         </ul>
         <div class="clearer">
            <!-- -->
         </div>
      </div>
      <div class="bottom">
         <!--  -->
      </div>
   </div>
</div>

Sitewide Navigation

<div class="block-xxxxxx">
   <div class="sitewide-yyyyyy">
      <div class="h2-wrapper hide-header-zzzzzz displaynone">
         <h2><span><!-- left blank in this case --></span></h2>
      </div>
      <ul>
         <li>
            <a class="navigation" title="&copy; 2013 Skylith" href="#">&copy; 2013 Skylith</a>
         </li>
         <li>
            <a class="navigation" title="Disclaimer" href="#">Disclaimer</a>
         </li>
         <li>
            <a class="navigation" title="Privacy policy" href="#">Privacy policy</a>
         </li>
      </ul>
   </div>
</div>

the result:

Navigation Level 1 and Farther

The following is a path navigation that allows access to the children of the home page and deeper down in the tree:

<div class="block-xxxxxx">
   <div class="navigation-yyyyyy">
      <div class="top"><!--  --></div>
         <div class="h2-wrapper displaynone">
            <h2><span><-- left blank in this case --></span></h2>
         </div>
         <div class="wrapper">
         <!--
            className can be:
               - active
               - activehasChild
               - hasChild
               - <empty>
         --> 
      <ul>
         <li id="item1" class="${className}">
            <a href="#"><span>Home</span></a>
         </li>
         <li id="item1" class="item odd first active">
            <a href="#"><span>About us</span></a>
            <ul>
               <li class="item odd first ${className}">
                  <a href="#"><span>Sub of About us</span></a>
                  <ul>
                     <li class="item odd first ${className}">
                        <a href="#"><span>Sub of sub of About us</span></a>
                     </li>
                  </ul>
               </li>
            </ul>
         </li>
         <li id="item1" class="item even ${className}">
            <a href="#"><span>Consulting</span></a>
         </li>
         <li id="item1" class="item odd ${className}">
            <a href="#"><span>Events</span></a>
         </li>
      </ul>
      <div class="clearer"><!--  --></div>
   </div>
   <div class="bottom"><!--  --></div>
   </div>
</div>

The result:

Page Title

The page title is usually placed at the top of the content frame. The <h1> tag used for page titles in XperienCentral. The following is the semantic rendition of the page title in XHTML:

<div class="h1-wrapper">
   <h1>
      <span>About us</span>
   </h1>
</div>

The result:

Back to top

Content Management — Content Elements

XperienCentral offers the editor a large number of content elements which they can freely place on a page. Each of these elements has several options as described below. Examples of existing design implementations are used for clarification. A key aspect of XperienCentral is that each content element can be represented in one or more different designs, which means that the same content could render a different output based on the chosen design.

Another key aspect is that these content elements can be placed in different parts of the website. Do not assume, for example, that an element will only be shown on page template X and be embedded within content area Y. An editor is not limited by the CMS to placing an element in a particular part of the website; they can add elements in multiple page templates, therefore be sure that elements are styled within every content area and every page template in your design. The following diagram illustrates the point:

The element “Content element 1” is placed in the “primary content area” and it also appears in both the “left” and “right” blocks. This example shows only one page template, but the same “content element 1” could also be placed in a completely different design. The same applies for “content element 2”, therefore make sure the that HTML for such content elements does not completely define its styling class itself but instead inherits it from the container into which it is placed, for example “primary content area” or “left”.

The following elements are standard in XperienCentral.

Paragraph

The Paragraph content element is the element used most often for text and it includes a title. Important considerations for the design of a paragraph element are:

Title (might have a clickable variant)
Text

If a paragraph has various designs, the editor will see a Design Template dropdown selection that allows him or her to select a specific design template. The following shows the semantic rendition of a Paragraph in XHTML:

<h1>What do you need to know about us</h1>
<p>Skylith delivers products to the national and international market. Skylith offers a wide range, reasonable 
prices and good service.Skylith is  <a href="http://www.cnn.com" class="" title="http://www.cnn.com">headquartered</a> 
in the Netherlands and hasregional offices across Europe and North America. Hundreds of global and national
enterprises in different industries like financial services, media and publishing, alreadyrely on Skylith.</p>
<p></p>
<p>Skylith supplies products to the national and international market. Skylith offers a varied range of products and 
services, competitive prices and good service. Skylith is headquartered in the Netherlands, and has
regional offices in Europe and North America. Hundreds of global and national companies in
the financial, media and publishing industry now rely on Skylith.
</p>
<p></p>
<p>Skylith consultants stem from a huge variety of backgrounds. As we recognize that each 
of our clients is unique in his needs and inquiries, so is each of our consultants’ 
expertise. Skylith has always long been very successful in linking the right customers to 
the right consultants to create game-changing solutions to our customers.</p>
<p></p>
<p>We have been present in Europe since the second half of the last century and are growing
the <a href="http://www.whitehouse.gov" class="" title="http://www.whitehouse.gov">United States</a> 
offices together with clients. Customer-driven! Our success is characterized by precisely this, the
customer first, the result is a logical consequence.
</p>

The result:

Image

An Image content element consists of the image itself, alignment settings and an optional caption. If there are requirements for the size of the image, these can be included in the style guide. For example: Images in the center column cannot exceed a width of 350 pixels, images in the right column should be exactly 140 pixels wide, and so forth. Important considerations for the design of an image are:

The image itself
The alignment to use for the image
The caption for the image (alternate text)

The following is an example of a page containing an image. The image contains a clickable caption that meets the standard dimension requirements. The following shows the semantic rendition of an Image in XHTML:

<div class="block-xxxxxx">
   <div class="image-yyyyyy">
      <div class="top"><!--  --></div>
      <div class="wrapper">
         <!--
            alignStyle can be:
               - center
               - right
               - left
               - clear
         -->
         <div class="left">
            <a href="#">
               <img src="#" width="390" height="220" alt="alt text"/>
               <em>Subscript text when link around image</em>
            </a>
            <em>Subscript text when no link around image</em>
         </div>
         <div class="clearer"><!--  --></div>
      </div>
      <div class="bottom"><!--  --></div>
   </div>
</div>

<div class="clearall"></div>

The result:

Download

A Download content element makes it possible for a website visitor to download a file. The file can be downloaded by clicking a hyperlink (text or an image). Besides the actual file to be downloaded, the settings include fields that can be filled in by the editor including name, version, author, and the date it was published. Besides the standard Download content element, downloads can also be offered as links in the content’s text without any other specific information. This does not require a separate design.

The following shows the semantic rendition of a Download in XHTML:

<div class="block-xxxxxx">
   <div class="download-yyyyyy">
    <div class="top"><!--  --></div>
    <div class="h2-wrapper displaynone">
       <h2>
          <span><a href="#">This download</a></span>
       </h2>
    </div>
    <div class="wrapper">
       <div class="download">
          <!-- Classname equals the extension of the file (doc/docx/pdf/zip) -->
          <a class="pdf" href="">filename</a>
       </div>
       <div class="filesize">999999 bytes</div>
       <div class="name">some download</div>
       <div class="version">1.0.0</div>
       <div class="author">Me, myself and I</div>
       <div class="date">01/01/2013</div>
       <div class="clearer"><!--  --></div>
    </div>
    <div class="bottom"><!--  --></div>
   </div>
</div>

<div class="clearall"></div>

List

An HTML-based ordered or unordered list of items can be added to a page using a List content element. A design template for the title of the List and its items can be created although usually that is defined by the default site font settings. If the design of the standard list is not sufficient due to margin indentations or the spacing between the title and the items, other solutions are available.

The following shows the semantic rendition of a standard list in XHTML:

<ol>
   <li>item 1</li>
   <ol>
      <li>item 1.1</li>
      <ol>
         <li>item 1.1.1</li>
         <li>item 1.1.2</li>
      </ol>
   </ol>
</ol>

The following shows the semantic rendition of a non-standard list in XHTML:

<div class="block-xxxxxx">
   <div class="listordered-yyyyyy">
      <div class="top"><!--  --></div>
      <div class="h2-wrapper displaynone">
         <h2>
         <span>List title</span>
         </h2>
      </div>
      <div class="wrapper">
         <ol>
            <li class="normal">item 1]</li>
            <li class="normal">item 2</li>
            <ol>
               <li class="normal">item 2.1</li>
               <li class="normal">item 2.2</li>
            </ol>
            <li class="normal">item 3</li>
            <li class="normal">item 4</li>
         </ol>
         <div class="clearer"><!--  --></div>
      </div>
      <div class="bottom"><!--  --></div>
   </div>
</div>

<div class="clearall"></div>

Links

XperienCentral allows an editor to create various types of links: internal links (links to pages on your own website), internal links to database content, links to external URLs and so forth. The editor has a lot of flexibility concerning what they link to and in principle, everything can be linked. Within the design, the link color for these variants (links that have not been clicked, visited links, and active links) has to be presented completely through the use of a style sheet and, when necessary, described in the style guide.

The links in XperienCentral require that the name of the content the user is accessing be included in the title attribute of the various links. For example:

Download links — The name of the download in the title
Internal links — The name of the page being accessed
Content Repository — The name of the Content Repository article
Resource — The name of the resource (product/employee directory)
External links — The name of the external link

The usability guidelines recommend the following rules:

Show only the real link in the status bar
Always underline links
Define a distinct color for links

How links can be styled in the XHTML depends on where the link is shown. For example:

Any link that occurs within a paragraph or other piece of text is by default styled with class=”normal”.
Any other link can be styled in any way desired.

The following shows the semantic rendition of links in XHTML:

<a href="#" class="normal">headquartered</a>

The following is an example of a link:

Table

In XperienCentral, the editor can chose the table layout he or she wants to use provided there is more than one design template available. Often there are multiple design templates because different table applications require different layouts. These design templates should be available in the design. The variables of the design of tables in XperienCentral are the same as the ones for a normal HTML table:

Number of rows and columns
Alignment
Width
Border (width and color)
Background color/image
Cell spacing and cell padding
Visibility and location of a header (left, right, top, or bottom)
Font, color, and background color (might be set differently for the first column/row and for even and uneven columns/rows)
Horizontal content alignment in the table fields (can be set differently for the header and for the columns/rows)

The following shows the semantic rendition of a table in XHTML:

<div class="block-xxxxxx">
   <div class="table-yyyyyy">
      <div class="top">
         <!-- -->
      </div>
      <div class="wrapper">
         <!-- Width can be in px or % -->
         <!-- 4 possible table classes -->
         <table width="70%" class="[left / right / center / clear]">
            <caption>Products</caption>
            <thead>
               <tr class="odd first">
                  <th class="odd first" width="30%" scope="row">Product</th>
                  <th class="even" width="20%" scope="row">Color</th>
                  <th class="last" width="20%" scope="row">Price</th>
               </tr>
            </thead>
            <tbody>
               <tr class="odd first">
                  <td class="odd first" width="30%">Product A</td>
                  <td class="even" width="20%">Green</td>
                  <td class="odd last" width="20%">&#36; 100,00</td>
               </tr>
               <tr class="even">
                  <td class="odd first" width="30%">Product B</td>
                  <td class="even" width="20%">Blue</td>
                  <td class="odd last" width="20%">&#36; 210,00</td>
               </tr>
               <tr class="even last">
                  <td class="odd first" width="30%">Product C</td>
                  <td class="even" width="20%">Yellow</td>
                  <td class="odd last" width="20%">&#36; 321,00</td>
               </tr>
            </tbody>
         </table>
         <span><a href="#">Link to something more</a></span>
         <div class="clearer">
            <!--  -->
         </div>
      </div>
      <div class="bottom">
         <!-- -->
      </div>
   </div>
</div>

<div class="clearall"></div>

The result:

Back to top