Template Information

UMD Web Page Templates

Thank you for your interest in the templates and the new UMD home page design. You may use and customize all of the files as much or as little as you like for your site. The photoshop files have several image layers in them to choose from. If you have any questions, feel free to call or email Andrew Manteuffel (726-6927, amanteuf@d.umn.edu).

Coming Soon - Dreamweaver Templates incorporating Fall 2014 branding and design elements

The wireframes for these templates have been determined and coding has been started for the Drupal templates with Dreamweaver coding to follow soon. (10/13/14)

We have been working over the summer with External Affairs and SFA to finalize a wireframe and design for a unit/department home page and secondary pages. The page designs will incorporate the branding and design elements from the UMD home page and the Admissions prospective student site, but are streamlined for wider use.

These are examples of page types that wireframes have been provided. The Dreamweaver templates will most closely resemble the General Page wireframe below and code snippets will be available to add some of the optional elements.

Submit this Dreamweaver template request form if you'd like to be informed when the new Drupal themed Dreamweaver template is ready for use.

Mockup of a general page.

General page

Mockup of a College landing page.

College Landing Page

Mockup of a Department landing page.

Department Landing Page

Mockup of a Department detail page.

Departmant Detail Page

 


Get the older files

These interim Dreamweaver templates are using HTML 5 structure with css for layout and presentation (table layout is gone). The responsive page design has been enhanced beyond the previous mobile friendly version as well. The latest UMD header and footer are present using virtual includes.

Older Dreamweaver templates, PhotoShop files, and Stylesheets are still available for download if you still need them.

Changes from previous templates

There are a few significant changes that you might need to know if you are planning on just making modifications to your existing templates vs replacing them with the new ones.

  • These templates use HTML 5 which has more strict validation. Most presentation attributes for tags shoul be controlled with CSS instead.
  • The table structure for layout is fully removed.

Header and Footer

The header and footer (required by the University Branding Policy) are available as a set of virtual includes for use in your own templates or plain HTML/PHP pages. The benefit of using these includes, which are being used in the template files below as well, is that you don't have to worry about changing your pages if the look or content of the header/footer is modified in the future. The changes, if any, will be made to the includes and your pages will immediately have the revised header/footer without any effort on your part.

If you are using HTML 5 or are making the switch, use the interim header and footer includes.

If you are using XHTML or HTML 4 you'll need to use the older header/footer includes to avoid validation issues.

About the Templates

  • The templates satisfy all of the requirements found in the U of MN Brand Web Requirements and Guidelines.
  • The templates meet U.S. Section 508 Guidelines for accessibility.
  • The templates use a responsive design. This allows the page to expand and contract to take full advantage of the width of the browser window and avoid having to side-scroll in narrow windows.
  • The template files are HTML 5. UMD is encouraging the use of standards compliant web browsers and as such, will be using HTML 5 and CSS for future pages.
  • There are 8 template files since not all content will have room for the photo or the navigation links column or both. The templates are named in three parts, "nav", "1col/2col", and "pic" separated by an underscore. Names that contain "nav" have the navigation links column, names with "1col" or "2col" have 1 or 2 columns of content respectively, and names with "pic" have the photo column. This will make it easier to keep pages in templates since you will not have to detach a page from a template in order to get rid of an extra column.
  • There is a breadcrumb class in the stylesheet. Using breadcrumbs will help users find their way around your site especially if they come to your site from a search engine. You can see how these are done by looking at this page with breadcrumbs. The one column template "1col" has a sample breadcrumb in it.
  • The stylesheet has comments in the file to help understand what each section of code affects on the web page.
  • All of the images and stylesheets that are referenced by the templates are in their final destinations on the web server and will not be moving.

Read more benefits of using the UMD templates.

For more information about putting web pages on the UMD server, see Creating, Storing, and Linking Pages to the UMD Web Site.


Did you find what you were looking for? YES NO

Choose appearance:
[ Desktop | Mobile friendly ]