skip to content

Web Services

Responsive Template

Example Site

We have set up an example site for you to use when building your own. You can mount the share and copy the example files to your own folder, but be sure to run a global search/replace to change all occurrences of _template-example to your folder name.

A Few Things You Should Know

  • You do not have access to edit the template files. You don't have to worry about breaking anyone else's work. However, you should have access to view them if needed.
  • The main navigation supports up to three tiers. If a primary link has a subnav, it will display a small gray arrow on the left.
  • Google Analytics is included by default in the header, you don't need to do anything special. If you want to track links to external sites, you can do so using the asynchronous version of GA requests.
  • jQuery is included in the footer. If you intend to include your own custom JavaScript that requires jQuery, you'll need to do it AFTER the footer include.
  • HTML5 is not required.
    • We are not using HTML5 at this time, due to compatibility issues with the IE implementation on campus.
    • If you intend to use HTML5 elements, you will need to include a javascript shim yourself. If you don't know what this means, you might want to reconsider using HTML5.
  • The template includes IE overrides to get on-campus computers to render using the IE8 engine, we recommend testing for IE7 compatibility as well using the Developer Tools (F12) in IE8+.
  • This is a responsive design, but it is not a mobile-first responsive design.
    • We were adapting a pre-existing screen-size template design and adding on responsive support.
    • Many of the widths in the full-size template are still fixed px settings, however we still recommend you try using %s for your new code.
    • Once you get down to smaller sizes it does switch to % based widths.
    • Our CSS adjusts things as needed when the screen gets smaller (a mobile-first design adjusts as things get larger).

Features Coming Soon

  • Alternate option for the index page that offers a slideshow
  • Slideshow control you can include elsewhere in the template that offers the flexibility of the responsive design, and controls appropriate for touch-screen devices.
  • Photo gallery
  • Any requests?

Requirements

Include the main template files, do not duplicate them

Do not copy the /_template/ files to your own folders, please reference them directly from their location. If you think there's something you absolutely need changed in one of the main template files to make it work with your site, let us know and we'll assist.

All items with subnav must be in a folder and include an index.asp file

Due to limitations with the CMS that we will incur going forward, the navigation must reflect a hierarchical structure in the folder/file layout of the site. Subnav items need to be in folders, and all folders must include an index page. The primary navigation item needs to link to the index page in the folder.

Repeat all primary navigation items in the footer

Since the main navigation disappears when viewing on a mobile device, all primary navigation items should be repeated in the footer section. You do this using the footerLinks variable in your template/data.asp file.

Looking to include a feed?

If you're looking to include a feed in your site, please reference /includes/parse-feeds.asp rather than dropping feed parsing code directly in your files. To date, we've had hundreds of copies of code that is effectively the same all around the site for parsing RSS feeds. We're trying to clean this up and standardize on one library.

UTF-8 Support

Due to the way ASP works, you'll need to include a special line at the top of all your main files in order to enable support for UTF-8 processing. While this is generally only needed when you're using ASP to process strings that may include UTF-8 characters (such as parsing RSS feeds), we're recommending you include it on all your pages to make things easier.

<%@ CODEPAGE=65001 %>

Note that this needs to be the FIRST line in your document to be effective.

Recommendations

Use % Widths

Use % widths, it should make your design easier to use with the template.

Know the Breaking Points

Know the breaking points where our default design rearranges itself and test your design accordingly. Being able to test the design on a mobile device can be helpful, but simply resizing your browser down to narrower widths is helpful as well.

Include links to subnav items on index page for section

As the primary navigation disappears on mobile devices, we strongly recommend including links to all pages within the subsite somewhere on the index page for the folder.

Remember Mobile

Be mindful of mobile devices when deciding to add functionality, default jQuery effects you may download might not work well on the smaller devices. If you need to add styles that are specific to a single page on your site, include them in a header style section.

<style type="text/css" media="screen">
	/* this will apply to all screen devices */
</style>
<style type="text/css" media="only screen and (min-width: 640px) and (max-width: 974px)">
	/* this will apply to tablet-sized devices in portrait mode */
</style>
<style type="text/css" media="only screen and (max-width: 639px)">
	/* this will apply to mobile devices */
</style>
<style type="text/css" media="only screen and (-webkit-min-device-pixel-ratio: 1.5)">
	/* this will apply to high pixel density devices */
</style>

High Pixel Density Displays / Retina Displays

We are now offering preliminary support for high dpi devices in our template. We've reworked the header area to use double-resolution graphics. As a result, the university logo and search loupe should now appear razor sharp on the iPhone 4/4S as well as selected Android devices. Rollover the image below to see the difference.

Retina Off Retina On

You can add support for this to your sites using the media query shown in the previous section. You'll want to save images that are twice the pixel dimensions of the image in your normal design. In your CSS, you'll need to redefine the background image for the element you're making high-res, as well as set a new property, background-size to the original width of your image.

Example of University Logo

#logo a {
	/* Original image: 210x37
	   High-res image: 420x74
	   Set background-size to original width, 210px
	*/
	background: url('../images/uwgb-logo-2x.png') no-repeat left top;
	background-size: 210px;
}

Media Query Notes

We are currently recommending you target minimum pixel ratios of 1.5 for your high resolution images. The iPhone 4/4S displays have a ratio of 2.0, but high-density Android devices currently report 1.5 based on our research and testing. Even though the high-density Android devices may not be as high-res as the iPhone, the units we were able to test on looked markedly better with the high resolution version, thus we are targeting 1.5 in our templates.

Breaking Points

We currently have two major breaking points in the template design where default items rearrange themselves.

  • 974px - Tablets in Portrait Mode

    Our main full-size design starts to not fit at this point. When the browser width drops below this size, we start rearranging things to fit better.
  • 640px - Mobile

    Once the width drops below 640px, the site switches to the mobile design. This design switches the header and footer to a 100% width design, and the main content area is set up as 93.75% width and 3.125% left/right padding. Below this threshold, everything should be specified in %-based widths, including images.

Supported Styles

We currently support a few special styles you may find useful in your designs. Where some of these use CSS3 effects, we have worked in IE support to still display in a friendly manner.

Buttons

Gray Button Green Button Red Button

<a href="#" class="button graybutton">Gray Button</a>
<a href="#" class="button greenbutton">Green Button</a>
<a href="#" class="button redbutton">Red Button</a>

Two equal columns

  • Headline

    extra content

  • Headline

    extra content

<ul class="twocol">
	<li>
		<img src="../images/phlash-headshot.jpg">
		<h3>Headline</h3>
		<p>
			extra content
		</p>
	</li>
	<li>
		<img src="../images/phlash-headshot.jpg">
		<h3>Headline</h3>
		<p>
			extra content
		</p>
	</li>
</ul>

Captioned Photo

The captioned class will give you our captioned photo styling. You can also add the classes alignleft and alignright if you want the image to float.

Short description of the photo
Photo Caption Here
<dl class="captioned">
	<dt><img src="your-photo.jpg" alt="Short description of the photo" /></dt>
	<dd>
		Photo Caption Here
	</dd>
</dl>

This template supports breadcrumbs in the footer. The breadcrumbs are set up in two separate locations. If the first location is not set, the breadcrumb bar will be eliminated from the footer. We strongly recommend you make use of this UI device to make your site friendly for visitors.

template/data.asp

The first place you'll need to set up breadcrumbs is in the data file for your site. These crumbs should include everything up to, and including, your department. They will be included on every page in your site. These are set using the staticBreadCrumb variable.

Each individual page

Inside each page you'll include the last crumbs for the trail. These are set using the breadcrumb variable generally included at the beginning of the file for the page.

Social Media Icons

You can add social media icons to the header (on certain sizes) and footer using the social media settings in the data.asp file for your site. If you don't see them in there, please check for the latest version of the data.asp file, available at //example$/template/data.asp.

Screen Sizes Quick Reference

The sizes below are the general widths in pixels of the screens.

320px
phones / portrait
480px
phones / landscape
600px
tablets, small (Kindle Fire) / portrait
768px
tablets, large (iPad) / portrait
1024px
tablets (both Kindle Fire & iPad) / landscape, smaller PC monitors, netbooks
1200px
widescreen displays

API Requests

We now offer a very remedial JSON API you can use to get at the data settings for a site using this responsive template. The API is read-only, but can come in handy if you need to do something on the PHP server and want to include the address / phone number / etc from the main site. We use this to pre-fill the data settings on the WordPress blog when applicable.

If you think you may have a use for this, email web services and we'll help you get this running.