All Digital Commons repositories, journals, and events make use of common templates, which can be customized with unique design elements. These templates provide a design framework, facilitate a quick setup process, and come with many configurable elements. The commonalities in our templates allow our developers to roll out new features and improvements to all Digital Commons sites regularly. However, these improvements also require that site designs adhere to some specifications. Following these specifications helps ensure your site will avoid potential issues with display and maintain functionality with future versions of the Digital Commons software.
The Digital Commons basic template
All Digital Commons sites are composed of the elements highlighted below. The basic template sections and dimensions are identical for each publication type. Content in the sidebar and main content area will differ.
Note: Sample images are not to scale. Please refer to the dimensions listed below or ask your consultant for a Photoshop template.
1. Site background: A simple background is ideal for a design that will not distract from your content. White or flat colors are excellent choices. Repeatable images or patterns also work well as they load quickly.
2. Header banner: Our design team can use a banner you provide (a layered Photoshop file is best) or we can work with art assets that you include with your setup form to create an original banner. If there aren’t any images or other assets available, we can create a simple and professional text-based banner for your site.
DC banners have a fixed width of 980 pixels. The background area on either side can be utilized to achieve a full-width look (on most monitors). Banner height is variable, but we recommend moderation since banners appear on all pages of the site and tall banners can push content down the page where it’s less likely to be noticed. Also, if you’re creating your own banner, please keep in mind that small text in a banner can be difficult to read on mobile devices. Here are a couple of examples of banner layouts.
Note: Sample images are not to scale.
3. Navigation tabs: The standard global navigation links (Home, About, FAQ, and My Account) appear in the horizontal navigation bar. These tabs can appear above or below the site banner based on your setup form selection.
4. Sidebar: The sidebar is 240 pixels wide and extends vertically to match the length of the page. Depending on your selection on the setup form, it can appear on the left or right side of the page. By default, the sidebar contains search, browse, and author links sections. Many institutions include a logo or social media icons below these links.
5. Main content area: This section contains most of the site’s content and is very flexible, though the maximum width for content contained here is 740 pixels. The design mock-ups you receive will include placeholder text containing a list of links and a bit of introductory text, and cover art for journals if requested. Many sites also use this area to hold a slideshow, content carousel, or image.
As a site grows, the main content area can be adjusted to include a readership map and, on the repository homepage, a Discipline Wheel reflecting your site’s scholarship. New sites launch without these features enabled, so they’re not included in most design mock-ups.
6. Footer: The standard footer links, including the accessibility statement, appear here. The DC logo is also in the footer and always appears under the sidebar. Many institutions decide to include a secondary logo in the footer, but we recommend not adding critical links because they won’t be visible when browsing on a mobile device. As an alternative, we support adding extra links to the sidebar.