CSM Trailhead Design Guide



Colorado School of Mines
Trailhead Design Guidelines

The following guidelines have been developed to help maintain an integrated and
professional design for the portal. Please adhere to these guidelines; deviations
from the guidelines should be approved by the Tab Administrator and/or the Portal
Content Committee or others.

For additional information see also the Channel Development Policy document
[http://ccit.mines.edu/policies/trailhead/channeldevpolicy.pdf] and the Tab
Administrators Policy document
[http://ccit.mines.edu/policies/tabadminpolicy.pdf].

1. Portal content should be designed to be viewed at a minimal monitor
resolution of 1024 x 768 pixels.

2. Portal content should be tested with the major web browsers: Internet
Explorer and Firefox/Mozilla/Netscape at the minimum. Channels that are
more complex than straight forward HTML should be tested in a broader
range of browsers. If you are developing a more complex channel, please
discuss testing with the Portal Management Staff.

3. The following should be taken into consideration when designing or
modifying Channels:
A. Hyperlinks within channels should open a new window when clicked.
B. Channels should never automatically “popup” a new window. New windows
should only open upon a user’s action. In addition, new windows should not
open larger than the current portal window.
C. Within the portal, individual users are able to customize the height of
some channels and the width of each column. Developers should
consider this when designing and create channels that scale gracefully
down to 200px wide. Designers should note that channels that need
significant width pose viewing problems when added to tabs with
narrow columns. When a channel is initially placed into the portal, the
channel developer will suggest a default height and specify whether or
not the channel needs to be in a wider column.
D. The use of images should be limited as much as possible. To keep a
5 May 2009
1

CSM Trailhead Design Guide


consistent look throughout the portal, images should be sized no larger
than 100 x 100 pixels.
E. Permission must be obtained for the use of any copyrighted materials.
F. Photos of people, including Colorado School of Mines faculty, staff, and
students, should not be used without express written permission from
the subject or a parent or guardian.
G. The default portal style sheet
[http://ccit.mines.edu/trailhead/styles/stylesheet-portal.css]
should be utilized.
H. Allowed user customizations:
• Number of Columns, Width & Location: For the most part users can
customize the width and location of columns and the number of
columns within a portal tab. If a channel is configured so that users
cannot move or delete it, users will also not be able to move or
delete the column. For personalized tabs, users have full control of
the number of columns, widths and locations.
• Channel Width: Channel width is customizable via customizable
column widths. Users cannot set a specific width for a channel
without affecting the width of other channels in the same column.
• Channel Height: The portal software allows in-line frame channels to
be configured so that users can modify height. For these channels,
the developer can set a suggested height. An example of an “in-line
frame” channel is the Trailhead News channel on the Trailhead tab.
The content of the channel is an HTML page on the campus web
server. Channel height is not customizable for the other channel
types such as an RSS feed channel. For these non-customizable
channels, the channel height is dynamically adjusted to display the
content without vertical scroll bars. For any specific in-line frame
channel, the height can be locked, but because of great differences
in users' monitor and web browser settings we encourage that users
be allowed to change in-line frame channel heights.
• Channel Location: Channel location is customizable by users for
most channels. With the current portal structure, there are only a
few channels which users cannot delete from their portal layout and
whose locations are locked. For example, the Personal and Campus
Announcements channels are locked on the Trailhead tab, but users
can also add these channels in other locations within their own
portal layout. (See General Lock-down/Customization Guide below.)
• Other user customizable features may be available, but are
dependent on the channel type.

4. The following should be taken into consideration when designing or
modifying Tabs:
A. Changes to Tabs that are associated with specific roles are propagated
to users who have that role if they have not made any customizations
5 May 2009
2

CSM Trailhead Design Guide


to their Tab layout or if they have not made major customizations. For
example, if you add a channel to the right hand column of your Tab, a
user who had deleted the right hand column would not see the new
channel, but a user who only added or deleted a channel in the right
hand column would see the new channel. If a user asked for their portal
view to be reset, they would loose any layout/view customizations and
their portal view would be set to the current defaults for that user's
specific roles.
B. A good analogy for a portal Tab is a newspaper section. Think of the
portal channels as newspaper features or columns. The features tend
to stay in the same location within the newspaper and within the
newspaper section, but the content is updated regularly. Periodically
the newspaper will undergo some design changes. Readers are usually
notified well in advance when a major change is to take place -- for
example if a feature is going to be moved or discontinued. For major
changes to a Tab, Tab Administrators should coordinate the changes
with the Portal Management Staff and the Portal Content Committee so
that user can be notified. Notices about major Tab changes will include
information for users who may want to request that their portal
view/layout be reset to the new defaults for their role(s).
C. No more than three direct-load Single Sign-On (SSO) or CPIP (Campus
Pipeline Integration Protocol) connector channels. A “direct-load”
SSO/CPIP channel is one that makes an authenticated connection to an
external system without prompting or input from the users (other than
logging into Trailhead). These channels tend to take longer to load
than basic informational channels like the Current Headlines channel.
Some examples of direct-load SSO/CPIP channels are: the Personal
Announcements, Campus Announcements and Portal Calendar channels
on the Trailhead tab. More CPIP connector channels on the default tab
(the Trailhead tab) would cause login/startup delays, especially if many
users were to login simultaneously. Other examples of direct-load
SSO/CPIP channels are the Vacation/Sick Leave, ePrint, and Find a
Chemical channels.
D. Consider the likely width of channels/channel content when deciding on
number and width of columns. Some content, like images or tables,
may force/require the channel and column in which it is placed to be
wide. In some cases a channel may only “look right” if it is placed in a
tab with only one or two columns.
E. Also see the Allowed User Customization in the Channel section above.

5. General Lock-down/Customization guide: The general idea of the
portal is to allow users to customize their portal layouts so that it is a
useful tool. To this end, we have limited “lock-downs” (channels that
cannot be deleted and/or moved):
A. The Trailhead tab is set as the default tab for all users, is set as the
5 May 2009
3

CSM Trailhead Design Guide


first tab on the left and is the tab that is displayed when user login to
Trailhead. Users cannot change their default tab. This tab cannot be
moved or deleted.
B. On the Trailhead tab, we have defined a number of channels that
cannot be moved or deleted by users – Personal Announcements and
Campus Announcements. The Trailhead News, Campus Events
Calendar, CSM/Google Search and Quick Links channels can be moved
but cannot be deleted.
C. On other tabs far fewer channels are locked down.
• On the Teach/Advise tab currently the Blackboard Support, Office of
Academic Affairs, Writing Program and Related Links Teach/Advise
channels are locked down (can be moved, but cannot be deleted).
Currently this tab may be moved (to any position other than the far
left), but may not be deleted.
• On the Employee Resources tab currently the Directory channel and
the Finance & Operations channel are locked down (can be moved,
but cannot be deleted). Currently this tab can be moved (to any
position other than the far left), but cannot be deleted.
• On the Student Resources tab currently the Directory, Student
Services, and Selected Department Hours channels can be moved,
but cannot deleted. Currently this tab can be moved (to any position
other than the far left), but cannot be deleted.
• On the Campus Life tab (another student role tab), only the Public
Safety channel is locked down (can be moved, but cannot be
deleted). Currently this tab can be moved (to any position other
than the far left), but cannot be deleted.
• The Research tab and all of its channels can currently be deleted.
• The “My Tab” tab and all of its channels can currently be deleted.
D. Lock-downs on new channels that are added to any of the existing Tabs
(e.g., Trailhead tab) must be approved by the Portal Management Staff
or the Portal Content Committee.


5 May 2009
4