The Best Practices and Style Guide document that is located within our website provides a detailed rundown of the website's various features and how they should be implemented. However, for those simply interested in the new features it doesn't provide a summary, which is the purpose of this document. A general explanation of the project itself is available in our Overview document.
The older Trojan website template does not provide a complete, mobile-compatible website. Instead, it used an older approach of providing a small, mobile-specific site that offered a very limitied number of pages and resources.
This new design uses a responsive framework (specifically, Bootstrap 3 for those that are interested). A responsive design simply means that a webpage will adjust and change to better match the display that it is view in. You can test this on a desktop simply by reducing the size of the browser window to see how content reflows.
In some cases certain elements appear, disappear or function differently when viewed on a mobile or tablet device. Every single page that uses this template will be responsive.
Instead of having a search box that is always visible we have a search bar that only appears when one clicks on a "Search" link in the website. Why have we chosen to hide these elements by default? This is where responsive design comes into play. On a mobile device having a search box (or boxes) always visible takes up a lot of screen space. By hiding these elements, yet making them easily accessible, we have provided functionality that works well for both mobile and desktop. We also added a new feature simply referred to as "#hashtags", which are described in a later section.
Website search is a frequently used feature that visitors will go to when they cannot quickly find something in the navigation menus. However, while the search does work well it often includes many results that are not necessarily what a visitor is looking for. One method that we've implemented to assist with this, and to also serve a function similar to that of QR codes, is something that we're currently referring to as "#hashtags".
These are specific words or phrases, without spaces or capitalization, that are preceeded with the hashtag symbol. By entering a hashtag into the standard website search a visitor will be directly to a specific location. One would provide a defined hashtag in advance to a visitor. For example, hashtags for specific events could be created. Hashtags are site-agnostic, meaning that they can forward visitors to resources outside of the Trojan website.
Enter #hashtags into the search box to view the complete list of active hashtags.
In the new design our goal was to simplify the menu systems rather then provide all-inclusive menus, which are sometimes referred to as mega-menus. There are only two types of navigation menus in this design. The first is the top-level menu that is shared across common pages that do not belong to a specific division, college, department or other categorization. The menu is exactly the same in all pages that share this menu.
The second type of menu is a custom menu that is specific to a division, college or department. All categories and links may be customized though every menu will have a Home link that returns to the homepage for that area and also an IT-managed "Trojan" menu that is always the first item in any menu, which contains common resources as well as a link to the new Trojan homepage.
Despite this simplified approach visitors should be able to quickly navigate the website itself just from the navigation menus. The simplified approach is also more mobile-friendly; multi-level mega-menus can be come difficulty to use on mobile devices.
We've also added breadcrumbs, which provide for single-click access to the Trojan homepage, and area's homepage and they can also be useful for understanding where a visitor is in the website.
In an effort to ensure a greater degree of consistency we have established a Best Practices & Style Guide document. This document will primarily be of use to web developers. It clearly demonstrates how specific types of comments should be defined.
The current Trojan site still uses older HTML elements and structures. The new design is built using HTML5 standards.