Kentico CMS 5 Website Development: Managing Site Structure

Exclusive offer: get 50% off this eBook here
Kentico CMS 5 Website Development: Beginner's Guide

Kentico CMS 5 Website Development: Beginner's Guide — Save 50%

Building professional and feature-rich websites with Kentico CMS 5

$26.99    $13.50
by Thom Robbins | October 2010 | Beginner's Guides Microsoft Content Management Web Development

In this article, by Thom Robbins, author of Kentico CMS 5 Website Development, we will learn about managing the site structure.

Site organization is essential for any site. Site structure is the organization and navigation of a website for users and content managers. Websites are designed in a visual hierarchy. This visual hierarchy is the cues of content based on importance to help visitors process information, very similar to what is used in cartography. In a way, a site is just a map of information you need to help site visitor view and process the information they are presented based on importance.

Human visual perception is what we use in our everyday life to take cues and create a mental model or map to process information more efficiently. This is why visual hierarchy is so important in Web design, especially as people tend to have short attention spans. Some visual cues in life and web design that you may be familiar with.

  • Size
  • Color
  • Contrast
  • Shape
  • Position
  • Whitespace

 

Kentico CMS 5 Website Development: Beginner's Guide

Kentico CMS 5 Website Development: Beginner's Guide

A clear, hands-on guide to build websites that get the most out of Kentico CMS 5's many powerful features

  • Create websites that meet real-life requirements using example sites built with easy-to-follow steps
  • Learn from easy-to-use examples to build a dynamic website
  • Learn best practices to make your site more discoverable
  • Practice your Kentico CMS skills from organizing your content to changing the site's look and feel
  • Get going with example starter sites such as a corporate site, an e-commerce site, and a community-driven website to jumpstart your web development
  • Written by Thom Robbins, the Web Evangelist for Kentico Software LLC

Read more about this book

(For more resources on CMS, see here.)

A great example of visual hierarchy that is used on every website is headings (h1, h2, h3) which indicate the importance of information and are usually styled in such a way that they guide a visitor from h1 (most important) down to least important. Without cues to the relative importance of different elements, the user has to work harder to understand the information provided by the website. A potential buyer or even someone looking for general information will quickly disregard a design with poor visual hierarchy.

Z flow is a design principle that is important to keep in mind as you create layouts. The eye naturally moves across the page in a Z formation. The eye starts in the upper left, crosses over to the right, and then moves back down to the left and over to the right, similar to how the eye moves when reading text. You always want to make sure your design helps the Z-Flow.

It’s important to think of your web site as a story, and organize the material in a way that enhances the telling of your story. Here are a couple of things to keep in mind.

  • Home pages should be short and quick to loads. The home page should contain key information. This includes website introduction and links to other pages that contain additional details.
  • Detail pages allow the website to be created in several pieces instead of one or two larger pieces.

Time for action – page organization

The content tree represents the site map of the website and allows you to organize the structure of documents and choose documents that appear on the right side of the screen. The content tree is where we will spend the most of our time managing content and site hierarchy. It provides the central location to see all site content (both published and unpublished). It also provides some basic drag and drop methods that will make it easier to change the location of items within your site. In this example we will look at how we can reorganize our site.

  1. Log into CMS Desk select the Content tab, select the Partners page and then the Gold partners page
  2. Drag the Gold partners page up to Services folder, as shown in the following screenshot:
  3. Release the mouse button and you will see that your page hierarchy has changed, as shown in the following screenshot:
  4. Select the Gold partners page, select the CTRL key on the keyboard and copy it to the Services hierarchy, as shown in the following screenshot:
  5. Link the Gold partners page while selecting the Control + Shift keys, as shown in the following screenshot:

What just happened?

Managing content within the Content tree is an essential part of maintaining your site. We have seen that there are three ways that you can maintain pages:

  • A move takes the entire page and copies it another location in the site
  • A copy takes a snapshot of the current deployed page and places it in the new location
  • A link creates a copy of the page in the current location

Time for action – viewing the Google sitemap file

There are many different ways to provide Search Engine Optimization(SEO) for your website. The most basic is the sitemap. As the name implies it’s a map of you site. On a single page it shows the structure of your site, its sections, and the links between them. Sitemaps make navigating the site easier and having an updated sitemap is important for search engines. Sitemaps are an important way to communicate with search engines. In robots.txt you tell search engines which part of your site to exclude from indexing, in your site map you tell search engines where you you’d like them to go.

Sitemaps are part of good web design practice and something you want to make sure that you are aware of. Using sitemaps offer the opportunity to inform search engines immediately about any changes in your site. Of course, you cannot expect that search engines will rush right away to index your changed pages, but certainly the changes will be indexed faster, compared to when you don’t have a sitemap. Also when you have a sitemap you can rely less on external links that will bring traffic to your site. Sitemaps also help to classify your site content.

In this example, we will look at the default googlesitemap.xml file that can then be used to submit to Google.

  1. Log into Site Manager and select the Settings tab.
  2. From the Sites drop-down select (Global), select the URLs and SEO menu option, and validate the name googlesitemap.xml appears, as shown in the following screenshot:
  3. Open a new browser and use the url http://&ltdomain>/CMSPages/googlesitemap.aspx to view the current site map, as shown in the following screenshot:

What just happened?

The system provides automatic support for the Google Sitemap protocol. This is a protocol designed to help search engines in indexing your site. Now that we have set up the system defaults the sitemap is created automatically based on any changes that occur with the content tree and site structure. Physically, as you can see here the sitemap is located at http:///CMSPages/Googlesitemap.aspx. When you enter your sitemap into Google you would use this URL name.

XML Extension Display
By default IIS is configured to not display XML files for security purposed. In order to make the sitemap accessible using an XML extension you need to configure the XML extension within IIS.

Kentico CMS 5 Website Development: Beginner's Guide Building professional and feature-rich websites with Kentico CMS 5
Published: September 2010
eBook Price: $26.99
Book Price: $44.99
See more
Select your format and quantity:

Read more about this book

(For more resources on CMS, see here.)

Managing visual elements

Cascading Stylesheets (CSS) is a style based language used to describe the look and formatting of a mark-up based document. Within the context of the Web, CSS allows developers to separate content from design. This enables HTML to control the mark-up of content and CSS to control the presentation. When properly implemented a CSS global stylesheet can be used to change style of site-wide elements. When any presentation changes are needed, they can be done by editing the rules within the global stylesheet.

The idea of using a stylesheet as the technical specification for the layout of a document design isn’t new. Stylesheets have been used in document design for years. CSS is a style language that defines mark-up based documents like HTML and XML. CSS is used for formatting structure content and HTML. CSS covers fonts, colors, margins, lines, heights and many other presentation aspects. Print designers use stylesheets to insure that their designs were printed exactly to their specifications. A stylesheet for a web page serves the same purpose, but includes added functionality of telling the web browser how to render the document being viewed. CSS can also be used to style XHTML and even XML mark-up. This means that anywhere you have XML or HTML you can use CSS to define how it will look. CSS can also be used to define how a web page will look when viewed in other media.

Time for action – Creating a CSS sheet

As you can imagine CSS and HTML have a lot of similarities. For example the following HTML can be used to display a blue background on a web page.

<body bgcolor="#0000A0">

Using CSS the same result can be achieved with the following:

body {background-color: #0000A0;}

The design of CSS statements or rules contain the following syntax:

 

The flexibility of using CSS makes it easy to create consistency in your site. While CSS can be used for within HTML editing it quickly becomes hard to manage. Especially when any changes are needed and they don't offer the ability to cover site-wide options. When working with Kentico CMS the preferred method is to use a link to an external stylesheet. An external stylesheet is simply a text file with the extension of .css. Like any other project files they can be placed on the web server. When a web page is requested, the web server combines the CSS stylesheet with the HTML to render the page. For a simple example to understand the basics of CSS let's create an external stylesheet that references and HTML sheet.

  1. Start Visual Studio and create a new ASP.NET Web Site named introcss and select OK, as shown in the following screenshot:
  2. Within the Solution Explorer right click and Add New Item, as shown in the following screenshot:
  3. Add a new HTML Page to the solution and select Add, as shown in the following screenshot:
  4. Right click the Solutions Explorer again and add a new Style Sheet
  5. Within the HTML document link the CSS Style Sheet. This is done by inserting the link element into the HTML code between the head and /head tags. The final code snippet looks like the following:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <link rel="stylesheet" type="text/css" href="stylesheet.css" />
    <title>A Blue Page</title>
    </head>
    <body>
    <p>Check out the blue page I made with an external CSS</p>
    </body>
    </html>

  6. Switch back to the stylesheet and enter the blue background color within the body element, as shown in the following screenshot:
  7. In the solution explorer select the HTMLPage.htm
  8. Press F5 to start the application and view the web page we just created
Kentico CMS 5 Website Development: Beginner's Guide Building professional and feature-rich websites with Kentico CMS 5
Published: September 2010
eBook Price: $26.99
Book Price: $44.99
See more
Select your format and quantity:

Read more about this book

(For more resources on CMS, see here.)

What just happened?

Of course this is a simple example that doesn’t affect the look and feel of our website. It was meant to demonstrate an example of how CSS works.

Time for action – Changing your site CSS

The design of the website within Kentico relies on CSS styles. Each website has its global CSS stylesheet. This stylesheet can be overwritten from the local stylesheet defined by individual sites. In this example we will change the Global Stylesheet for our website.

  1. Log in into Site Manager, select the Development tab and CSS stylesheets, as shown in the following screenshot:
  2. Select the edit icon for the Corporate Site, as shown in the following screenshot:
  3. Locate the .LTR, .RTL style section, as shown in the following screenshot:
  4. Within the background-color of the .LTR, .RTL style we found previously, change it to the style #fef3b8 and select Save, as shown in the following screenshot:
  5. Switch to CMS Desk, select the Content tab, select Corporate Site to see the updated live site changes to the style that we just made.

What just happened?

The BODY element CSS class consists of the combination of LTR and RTL styles and the browser version. It looks like the following:

This feature allows you to create styles that depend on the browser version. The class names for the different browsers are:

  • IE: IE&ltmajor version>
  • Opera: Opera
  • Firefox: Gecko
  • Safari: Safari

Within CSS the .LTR and .RTL classes are assigned to the BODY element for the left to right and right to left text direction. They can be used to set the style of the BODY element used on the live site without setting the BODY element in the WYSIWYG editor. It's useful if you need to set a dark background to the website, but use a white background in the WYSIWYG editor text.

Summary

In the above article we have covered:

  • Size
  • Color
  • Contrast
  • Shape
  • Position
  • Whitespace

Further resources on this subject:


About the Author :


Thom Robbins

Thom Robbins is the Web Evangelist for Kentico Software LLC. He is responsible for evangelizing Kentico CMS for ASP.NET with web developers, web designers and interactive agencies.

Prior to Kentico, Mr. Robbins joined Microsoft Corporation in 2000 and served in a number of executive positions. Most recently, Mr. Robbins led the Developer Audience Marketing group that was responsible for increasing developer satisfaction with the Microsoft platform. Mr. Robbins also led the .NET Platform Product Management group responsible for customer adoption and implementation of the .NET Framework and Visual Studio. Mr. Robbins was also a Principal Developer Evangelist working with developers across the world on implementing .NET-based solutions.

Thom currently lives in Seattle where he enjoys the great weather and spending time with his family. Thom can be reached at Thomasr@kentico.com.

Books From Packt


Choosing an Open Source CMS: Beginner's Guide
Choosing an Open Source CMS: Beginner's Guide

Drupal 7
Drupal 7

PHP 5 CMS Framewoak Development - 2nd Edition
PHP 5 CMS Framewoak Development - 2nd Edition

Alfresco 3 Web Content Management
Alfresco 3 Web Content Management

CMS Made Simple 1.6: Beginner's Guide
CMS Made Simple 1.6: Beginner's Guide

ASP.NET 3.5 CMS Development
ASP.NET 3.5 CMS Development

OpenCms 7 Development
OpenCms 7 Development

Joomla! 1.5: Beginner's Guide
Joomla! 1.5: Beginner's Guide


No votes yet

Post new comment

CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.
H
v
Z
Z
M
N
Enter the code without spaces and pay attention to upper/lower case.
Code Download and Errata
Packt Anytime, Anywhere
Register Books
Print Upgrades
eBook Downloads
Video Support
Contact Us
Awards Voting Nominations Previous Winners
Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
Resources
Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software