General Guidelines For Design Of Portal Page

THL Toolbox > Developers’ Zone > Web Development > General Guidelines for Portal Page Design

General Guidelines for Design of THL Portal Page

Contributor(s): David Germano, Steven Weinberger

Feb 25 2008 Immediate issues

  • MMS for images used in spotlight boxes, etc. Thus batch processing of images needs to take into account for specs for such images.
  • Issue of how much HTML code we want to use in Wikis.
  • Issue of using double tab secondary nav that Mark designed for Geotourism.
  • Discuss issue of use of Wordpress.
  • New Wiki-use Mark working on, which requires Than at some point to make it possible for the links in the wiki pages when clicked need to target(stay) in the blue frame, AND secondly the links from the right column must target anchors - so the text scrolls upward in a scrollable window. I"m not creating the scrollable window until the anchors work. Also need the secondary nav here dynamically constructed from the headers in the wiki page.
  • it would make most sense if the images in the wikis which are being displayed in the various portal home page spotlight boxes etc. were being drawn from the Media Management System. Can someone give Andres clear specs about what these images are supposed to be in terms of size, format, etc.? doesn't it make sense to have the MMS make and store such images as a standard part of its storage so that this way editiors can just take any image they want and its ready to go?

Introduction

Home pages for portals and projects should be designed so that they strike a balance between dense content and attractive, easy-to-understand presentations.

We also want home pages to provide good promotion and highlighting of central resources, while at the same time also having dynamic, constantly updated content that makes people feel it is an alive site, as well as giving them something new of interest each time they come to the site. In terms of dynamic content, we want to have content that is automatically changing by virtue of automated systems, as well as things that require manual intervention by editors, but which they can easily do through Wikis and simple Web interfaces without requiring the intervention of High Priests of Technology. The rest of this page provides various ideas and design principles we are exploring. It provides principles on how to make a portal from a more content perspective – the various possible ideas, resources and designs to draw upon.

Central Top Section of Portal or Sectional Home Page

Every portal's top central section has two headers - "Introduction to XXX" (this is an introduction to the content of the site; it is not an introduction to the project itself), and "Project Overview" (this is an overview of the project; it is not an introduction to the content of the project) - with each having opening lines from respective wiki pages and "read more" links. The opening lines are automatically extracted from the Wiki pages, and the read more opens up the full wiki page. PLEASE NOTE THIS IS ONLY FOR THE PORTAL HOME PAGE - SECTION HOME PAGES WITHIN THE PORTAL ONLY HAVE A TOP CENTRAL INTRODUCTION; SECTION HOMEPAGES DO NOT HAVE BOTH AN INTRODUCTION AND AN OVERVIEW.

The central top area of the web page should NOT have another header saying "Sera Monastery Project" and so forth. Instead it should have a left hand side image, and then a small header inline that says "Introduction to Sera Monastery", and a second small header inline that says "Sera Monastery Project Overview". Both have sucked in a few lines from the appropriate wiki and then READ MORE links. For the Tibetan Literary Encyclopedia, it would say "Introduction to Tibetan Literature" and "Tibetan Literary Encyclopedia Project Overview". That way people are directed to an introduction to the subject matter, and an introduction to the project. Underneath that is a standard button that says "ABOUT US" which links directly to the Participants wiki.

Project Overview: The opening sentence should name the project and its subject matter and approach to it. The second sentence should refer to the general participants. The rest of the opening paragraph then should detail the nature and significance of the subject matter. The second paragraph then details the actual scope of the project. It does NOT deal with status issues or how to use the project (those are separate info-pages), but links to both of them. The third paragraph then deals with the actual components and resources of the project, organized by the actual sections of the web site. A fourth paragraph might talk about the value of this approach the project is taking to document such a subject matter. It then concludes with a brief mention of the participants (and link to the Participants Page) and gives clear indication of whether any additional collaborators or help is being sought. This should throughout have links to all the other info-links for the project – status, participants.

Subject Introduction: Every portal should have an introduction of between one and five pages that introduces the subject matter of the portal and attempts to give a general, synoptic introduction, along the lines of what you might find in an encyclopedia. This essay will be highlighted in the top center of the portal page – the first few lines will be shown, and then a “read more” link goes to the rest of the essay. PLEASE NOTE THAT THIS "READ MORE" LINK MAY GO TO A WIKI OR TO A XML ESSAY - BUT IT WILL ALWAYS SAY "READ MORE" AND NOT "EXPLORE". The portal page will not say “Introduction” or have any header – but when you read the whole essay, it will be headed by “Introduction to Sera Monastery” or whatever. The opening sentence should name the project, refer to the general participants, and name the subject matter since that is what must appear on the portal page in this central area. However, NOTHING else about the Introduction should concern the project or portal – it should be entirely devoted to the subject matter.

Section Homepage The homepage of a section of a project (such as the Activities section of the Sera Monastery Project) only has one box, and it is titled "Introduction".

Determining the Type of Portal: Section or Project?

If the resource is a stand-alone project, such as Drepung Monastery, then it is a project portal. However, if the resource is not a clear-cut project like Drepung but can stand alone but is on a topic that can be introduced separately from THL, then it also should be a project portal. An example of this is the Transliteration-Transcription portal within the Reference domain. While not a large-scale project like Drepung or Sera, the transliteration and transcription of Tibetan and other Himalayan languages can stand by itself as a topic, unlike Research Finding Aids, which are a tool but not a stand-alone topic.

Domain homepages do not have the two headered sections in the top center. They have a single section that contains the overview of the domain. The eight domains are:
Projects
Collections
Places
Encyclopedias
Reference
Education
Community
Tools

Individual Encyclopedia: these have both the "Introduction to XXX" and "XXX Encyclopedia Overview". Example: the Tibetan Medicine Encyclopedia has both the "Introduction to Tibetan Medicine" and the "Tibetan Medicine Encyclopedia Overview" in the top center of the page.

You do not have the two sections when there is not a clear subject distinguishable from the work being done on that subject (that is, the "project"). So for the Domain homepages, these do not have a clear subject distinguishable from the work being done on that subject. The individual encyclopedias, however, do have a clear subject distinguishable from the work being done on that subject, so they have the two sections in the top center.

Global Features - Outline for Portal Pages

A summary of the 'global' features and design elements.

*PHP and Javascript features noted

Navigation:

  1. Primary Navigation (masthead-horizontal)
  2. *Secondary Navigation (side column accordian)
  3. *THL Global Directory Navigation (masthead popup link)
  4. Footer Navigation
  5. *Navigation Related Utilities: Javascript/php files related to various cookies and other things assigned to track languages, user preferences, and navigation persistence, etc.

Search - Advanced Search

  1. *Simple Search, may or may not include a dropdown.
  2. *Advanced Search: tabbed interface with forms and browse links/images
  3. *Programming for XML synchronization across THL to optimize search results page

Presentation of Content

  1. XHTML for separation of content and presentation
  2. *XHTML for Search Engines Optimization (some scripting for #content-H1 to meta tags still to do…)
  3. Accessibility: This addresses numerous css and markup considerations. (could use more attention)

User preferences:

  1. *Languages
  2. *Font Sizes
  3. *Tooltips
  4. *Cookies noted above

Advanced Content Features

  1. *Slideshow: Feed images from database with title text, linked to Gaz?
  2. *Show / Hide / Dynamic text fields

Banners

Portal sites published by THL should have their own distinctive banners. This means a background image that is distinctive to the site in terms of contents, as well as a potentially unique font and location for the title of the site printed on the banner. The design of the banner should be relevant to the site's content. For example, a site on Cultural Geography might have faded out maps; a site on Tibetan language learning might be a combination of faded out letters and images of people in conversation; or a site on a monastery might have a montage of temples and debating monks. Other ideas are to use Tibetan line drawings as a faded background on a solid color background. In general, the background should either be faded out or of a solid color where the title occurs, so that the title of the website is prominent.

Images must be chosen very carefully. Use small images unless the content of the image is important information, and depending on the size of the image vary your jpg compression from 50-75 in general.

Automated Dynamic Content "Of the Day".

This provides automated content that is constantly changing so that even when editors are busy, people will each day find new content on the site and thus see it as dynamic and a site of learning without effort. This goes through a given repository, and randomly chooses an item, or several items, at midnight each day to present under a header which says “XX of the Day”. We need to now explore technical solutions for how that random generation happens, as well as decide precisely what content is exposed and how it is visually formatted. Each item will have a link to “View more” which will then bring up the resource in question with all of its detail from whatever application is providing that content. For example, "term of the day" will provide into the box a term, and the initial definition, while the "View more" link will then open the full study of that term from the Dictionary application. Likewise "Video of the day" will show a thumbnail of the video, its title, and the first words of its description; clicking on the "view more" will then open up the full video and its transcript if available.

The following are our current plans:

  • Tibetan Term of the Day
  • Himalayan Term of the Day
  • Place of the Day
  • Image of the Day
  • Audio-Video of the Day
  • Community Project of the Day
  • THL Participant of the Day
  • Monastery of the Day
  • Others??

“Recently Updated Content”: this goes through a given repository, and presents the last X number of items that have been recently modified. It shows a specified amount of data from them, and provides links with the words “More details” to see the full entry.

“Recently Added New Content”: this goes through a given repository, and presents the last X number of items that have been recently added – i.e. not updated but added from scratch. It shows a specified amount of data from them, and provides links with the words “More details” to see the full entry.

Manually Changed Dynamic Content

These items require an editor to actually change the content, but provide easy to use interfaces for that change to be done. Some of these simply involve the use of Wikis in Collab worksites. If others require more than that, then we need to figure out a simple Web interface that Editors can do with no help or assistant from staff.

Please note that all use of Wikis on Portal home pages draw from Wikis in the "About THL" worksite. For example, all "features and spotlights" should be registered under the "Features & Spotlights" wiki page following the models you will find there, including a final link to an "archive" of past postings. Same for "Read more" from blurbs (INTRODUCTIONS), and so forth.

Features & Spotlights go in the framed boxes with scroll work colored headers. We do not want the portal pages, or portal section home pages, to start to resemble a laundry list of items. These are NOT intended to be comprehensive indexes of everything in the portal or section. That is what the primary and secondary navigation menus are for. Thus six is the absolute upper limit for numbers of distinct content areas you can put on a home page – i.e. the distinctly headed boxes or open areas. “Features” & “Spotlights” are strictly separate in function. A “Feature” has only the text you see in the box, and concludes with the hyperlinked word “Explore!” which directly links you to the resource in question. A “Spotlight”, in contrast, is descriptive and has the initial textual content from the corresponding Wiki, and then links to the rest of the text with a concluding hyperlinked “Read More”. Nomenclature:

  • Featured Website: such as the Sera home page
  • Featured Resource: when we are at a higher level such as the THL home page, etc. we might use this nomenclature of “resource” more often. As you get down to more specific areas of our web sites, better to try to use specific names of types of resources (below) instead.
  • Featured SPECIFIC TYPE OF RESOURCE (titles: “Featured Dictionary”, “Featured Catalog”, “Featured Text”, “Featured Encyclopedia”, “Featured Oral Commentary”, “Featured Image” etc.):

Spotlights can be on Staff (title: Staff Spotlight), Contributors (title: Contributor Spotlight), Organizations (title: Organization Spotlight), Projects (title: Project Spotlight). A given thing might be subject to a Feature or a Spotlight, if it is something like Sera Monastery which also has its own Website published by THL. But the Feature would link directly to the website, while the Spotlight would go to a descriptive page ABOUT the project. In the latter case, make sure to prominently give the relative link(s) at the top of the page so that users looking for it don’t get frustrated!

In the open areas with solid blue headers with no scroll work, we generally want to have items that are either “news” oriented or “…of the Day” Items which feature randomly changing content each time a user comes to the page.

“News”: this can be used to call attention to new developments in the project/web site, including things like getting a grant, a new project being planned, etc. I think we should use the “status” pages for these, and just have as a convention putting the top section of the status pages “New Developments”, when is kept fairly short.

“…of the Day”: these should be titled “Image of the Day”, “Oral Commentary of Day”, and so forth. They are feature randomly changing content each time a user comes to the page as automatically generated. The content of these boxes then is completely supplied by the program in question. No wiki page is involved.

If in some cases we want to have more “….of the Day” features and less features/spotlights, we could use the headed boxes for “… of the Day features. Likewise, if we have an extra “solid blue headed open area” space for use, we could put a “Featured” or “Spotlight” item in there – but we should use the words “Featured” and “Spotlight” just like above.

Naming Conventions for Titles of Content on Portal Pages (such as boxes)

This section specifies how to name boxes and other areas in a THL Portal home and section home pages.

The main point is that the titles should be short and should not reduplicate the name of the portal in question. Side boxes with blue or gold headers generally have the word "Spotlight" at the end of their title, whereas the centrally place content areas with light blue headed titles usually do not. However, use your intelligence! Please note that these titles are always drawn in directly from the Wiki page in question.

Examples:

  • "Image of the Day", and not "Sera Image of the Day"; see above for full naming conventions for such automated dynamic content
  • "Sera Panaromas Spotlight" , and not "Sera Spaces: Sera Panaromas"
  • "Sera Monastery Interative Map", and not "Sera Spaces: Monastery Interactive Map"
  • "Featured Project", and not "Featured Project in Encyclopedias".
  • "Featured Encyclopedia" and not "Featured Encyclopedia in Encyclopedias"
  • "Project Spotlight"
  • "Featured Essay" and not "Featured Essay in Encyclopedias"
  • "Featured Scholarship", "Featured Project", and "Featured Tibetan Text" in the Literary Encyclopedia portal home page
  • Etc.

New examples should be posted here so that eventually the examples are robust enough to provide adequate guidance.

Search boxes

All pages should have search boxes if this is relevant. No one should have to go to a separate page to do a search. If relevant, the searching may have advanced controls right on the page, or there may be a separate link that says “Advanced Search”.

Browsing

For some resources, browsing may be a central feature. If so, it needs to be highlighted on the home page, and possibly incorporated in some fashion so that users can go directly to the browsing as they want. For example, the Place Dictionary home page begins with a browsing view of the Gazetteer.

Proper Titles for Project Information Wiki Pages

This is the paradigm to follow for wiki page names as well as the proper title for each, with Sera Monastery as an example:

(wiki page name - "page title")

  • Sera Monastery Project Overview - "Sera Monastery Project Overview"
  • Sera Monastery Intro - "Introduction to Sera Monastery"
  • Sera Monastery Status Report - "Status Report on the Sera Monastery Project"
  • Sera Monastery Help - "Help in Using the Sera Monastery Project Website"
  • Sera Monastery About Us - "About Us: Participants in the Sera Monastery Project"
  • Sera Monastery How to Participate - "How to Participate in the Sera Monastery Project"
  • Sera Monastery Sponsors - "The Sponsors of the Sera Monastery Project"
  • Sera Monastery How to Cite - "How to Cite Resources in the Sera Monastery Project"

Right Hand Accordion Menu

From top on down, put all the options and suboptions that are going to be used regularly for navigating this portal and its various contents. The right-hand secondary navigation menu is divided into two parts – an upper part that has menu options specific to the portal in question, and a lower part headed with “General Links” that lists out general THL links that are not specifically part of the Portal.

Upper Part of Right Hand Menu

The topmost option in the upper part should be the set of links which are the core components to which this portal page is giving access. This set of links is by default open when a user first comes to the portal, so that the user clearly sees these resources to which they can navigate. The label for the top set of links in the right-hand secondary nav is the homepage for the portal section in question.

Examples: A Project: for the Tibetan Canons Project, which is a section of the Literary Encyclopedia, the secondary nav has "Tibetan Canons Project" as the name of the top set of links.
For the Sera Monastery Project homepage, the secondary nav has "Sera Monastery Project" as the name of the top set of links. Note: if the name runs over the right side border of the right-hand nav column, then shorten the name. For example, shorten "Drepung Monastery Project" to "Drepung Project"

A Section of a Project: do not include "Project" in the name of the top set of links. For the Activities section of the Sera Monastery Project, the name of the top set of links is "Sera Activities"; it is NOT "Sera Monastery Activities"

An Encyclopedia: do not include "Project" in the name of the top set of links. For the Literary Encyclopedia homepage, the name of the top set of links is "Literary Encyclopedia".

Individual Links in the Top Set of Links

  • Project Overview: The name of the link in the right-hand navigation is always "Project Overview". Example: for the Sera Monastery Project, this link is named "Project Overview"; for the Tibetan Canons Project, this link is named "Project Overview".
    This links to a wiki page in About THL Worksite > Wiki > [project name or domain name] Resources > [Project name or Domain name] and then on that wiki page, under the "Sidenav Links" section, "XXX Project Overview" or "[Domain name] Overview".
  • Subject Intro: The name of this link is a short name that refers to the subject. The name of the link in the right-hand navigation has the format "XXX Intro". Examples: "Sera Intro", "Meru Intro", "Geotourism Intro", "Literature Intro", etc. Do NOT include the word "Project" in the name of this link. Do not use as the name of the link "Subject Introduction" or "Introduction".
    For the right-hand navigation of a section of a project, the format of the name of the link is "section intro." For example, the name of the link to the Introduction of the Sera Activities section is "Activities Intro". Do not include the name of the project in the name of the link for a section homepage. For example: do not name the link "Sera Activities Intro." If the name is too long and runs over the border, then shorten it.
    This links to a wiki page in About THL Worksite > Wiki > [project name or domain name] Resources > [Project name or Domain name] and then on that wiki page, under the "Sidenav Links" section, "[project name or domain name] Introduction". Example: Sera Monastery Introduction.
    Section Homepage: the name of the link on the wiki page is, for example, "Sera Spaces: Intro".
  • Status: the name of this link is always "Status". This links to a wiki page in About THL Worksite > Wiki > [project name or domain name] Resources > [Project name or Domain name] and then on that wiki page, under the "Sidenav Links" section, the [Project Name] Status Report" wiki. The internal structure of the wiki page is headed sections: What’s New, Available Resources, Releases on the Horizon, Projects in Progress
  • Help: the name of this link is always "Help". This links to a wiki page in About THL Worksite > Wiki > [project name or domain name] Resources > [Project name or Domain name] and then on that wiki page, under the "Sidenav Links" section, "[Project name or Domain name] Help". Example: the name of the link to the wiki page for Sera Monastery Project is "Sera Monastery Help". The internal structure of the wiki page is headed sections: General Navigation, The Sections of the XX, Preparation of Your Computer.
  • About Us: the name of this link is always "About Us". Need to pull content from THL Participants Database; be sure to include the Editorial Board.
  • Projects: the name of this link is always "Projects". This is only used for large projects – the THL homepage, an Encyclopedia – that have multiple projects headed by different people. For other portals "Proejcts" link is not used. It documents distinct content projects involved in a given initiative, and thus is distinct from the "About Us" page which relates more to the overall group of people guiding an initiative. Need to draw content from THL Participants Database.
  • How to Participate: the name of this link is always "How to Participate". This links to a wiki page in About THL Worksite > Wiki > [project name or domain name] Resources > [Project name or Domain name] and then on that wiki page, under the "Sidenav Links" section, "[Project name or Domain name] Help". Example: the name of the link to the wiki page for Sera Monastery Project is "Sera Monastery How to Participate".
  • Sponsors:
  • How to Cite:
  • Contact Us:

If the portal is a section of a project, there is a second set of links in the upper section of the right-hand navigation above the "General Links" header. This is the set of links with the name "XXX Project" – the same set of links that appear at the top of the right-hand navigation on the homepage of the project. These links provide access to information pages about the project – Project Overview, Intro, Status, Help, and so forth. Example: for, the Sera Monastery Project, the homepage of the "Activities" section has at the top of the right-hand navigation the set of links with the name "Sera Activities". Below this but still above the "General Links" header is a second set of links, named "Sera Monastery Project"; the individual links are "Project Overview"; "Sera Intro"; "Status"; "Help"; and so forth.

For a THL Domain homepage, the name of the first set of links in the top section of the right-hand navigation is "THDL [Domain Name]" and the links are the content of that domain.

Example: the Places domain homepage, the name of the first set of links is "THDL Places" and the links are:
Places Dictionary
Maps and Models
Geotourism
The City of Lhasa
Sera Monastery
Drepung Monastery
Meru Nyingpa Monastery

The second set of links are named "About [Domain name]" and the links are: "Overview"; "Status"; "Help"; and so forth. Example: "About Places" is the name of the second set of links on the Places domain homepage right-hand navigation; "About Encyclopedias" is the name of the second set of links on the Encyclopedias domain homepage.

Lower Part of Right Hand Menu

In the lower part of the right-hand navigation, under the header "General Links," the first set of links is for the Domain in which the portal in question is included. The links in this section are the links found at the top of the right-hand navigation on the domain homepage, with the addition of "[Domain name] Home" as the first link.

Examples: the Sera Monastery Project is included in the Places domain. Therefore, under the "General Links" header, the first set of links is named "Places" and the individual links are "Places Home", "Place Dictionary", "Maps and Models", and so forth (this is the top set of links – with the addition of "Places Home" – in the right-hand navigation of the Places homepage).

Below the set of links for the THL domain of which the portal in question is a part is a second set of links. This set of links occurs on every page. The name of the set of links is "THL Global" and the individual links are "THL Home"; "Projects"; "Collections"; "Places"; "Encyclopedias"; "Reference"; "Education"; "Community"; and "Tools" (the top set of links from the right-hand navigation of the THL homepage with the addition of "THL Home" as the first link).

Domain Pages

The second group of right-hand nav links should be named "About X"

Example: for the Encyclopedias homepage, the header for the first group of links is "THL Encyclopedias"; the header for the second group of links is "About Encyclopedias"

Featured Links

This is a simple list of items that you want to call attention to in a perfunctory way with no further descriptions or images.

"About Us" - Addressing Issues of Institutional and Individual Branding and Credit

Right now this is addressed in terms of the Geotourism site. Once that is implemented, we will change the particulars to abstract descriptions of each component of these types of pages, and point to the Geotourism URL as an example of its specific implementation for a given portal.

The right hand side is the persistent navigation of that site.

Header that says “About Us” in large decorative font.

Hosting Institutions Machik, University of Virginia. Put logo in for each, and hyperlink name to participant entry form.

UVa - mark I got the logo off the www.virginia.edu web site - namely the picture of Rotunda and uva written in decorate font. I don't know how to save that as an image file that can be uploaded into the resources folder on this worksite and then embedded here. Please do it for me.

machik མ་གཅིག་. They don't have a logo, so put name in large centaur font, and Tibetan script in similar size after it as a substitute logo for the moment.

Editorial Board: David Germano, Losang Rabgey, Tashi Rabgey, Wang Songping.

History: The founding partners of the Tibetan Geotourism portal are the University of Virginia and Machik (HYPERLINK BOTH TO RESPECTIVE HOME PAGES AS SECOND WINDOW LINKS – WWW.VIRGINIA.EDU AND WWW. MACHIK.ORG). We are currently in discussion with several other institutional partners to help with the co-hosting of the site overall. The Tibetan and Himalayan Library is the site’s publisher. The portal is intended as a collaborative space in which many individuals, institutions, offices, and communities can publish and distribute resources on Tibetan tourism, especially with the motivation of supporting tourism which is beneficial to local Tibetan communities.

Participating Institutions: Kham Cultural Library, Rabsel, Thanglha Tsewang. As this and the next one get longer will eventually make so you click to expand list out. These should eventually have their logos associated with each, and make their names hyperlinked to participant entries in THL.

Participating Individuals: Angluo, Tsering Gyurme, Tsewang Gyurme, Khenpo Puntsok Namgyal, Tsering Perlo, Lodro Phuntsok, Dorje Tashi. All names should be linked to THL participant forms when they exist

Provided for unrestricted use by the external link: Tibetan and Himalayan Library