Indiana Wesleyan University ⊕ Off Campus Library Services ⊕ Web Page Planning Document

Goal and Assumptions

Goals

1. Develop a page which responds with appropriate content depending on device screen width.
2. Add features which were not available on the prior page:
   1. Searchbox(es) for databases, catalog, site;
   2. Contacts bar/list with frequently requested tools, and,
   3. Language translation option.

Assumptions About Usage and Content

1. Phones will be used primarily for communication and ready reference, therefore:
   1. some content will not be displayed to narrow screens, and,
   2. the OCLS email link will be provided, along with a warning the a myemail.indwes.edu address must be provided.
2. Large screen formats will be used for research and extended reading, and will display the full range of resources.
3. The responsive site will be designed to work with modern browsers (IE 10+, etc.). These browsers can interpret HTML5/CSS3, which will be employed for some features. (Learning Studio seems to have similar requirements, so eschewing hacks for old browsers and conforming to current web standards should meet the needs of most students.) The new site will degrade gracefully with older browser (IE9 and earlier, etc.).
4. Initial content will be ported from the existing OCLS site. Because the OCLS site is essential support for online students, the existing site will remain available in parallel for at least a month after initial responsive deployment. Reports of incompatibilities and errors will sought during that time.
5. Menu links will be spaced for accurate touch selection. Unaccessed links will be IWU red, visited links will be underlined without coloring.
6. To improve site responsiveness, client scripting will be minimized, image size will be limited to 50kb, and the total page weight should not exceed a megabyte.
7. Navigation will be through a menu that is vertical on narrow devices (phones), and horizontal in wider environments (tablets and desktops). Besides having each page title clearly visible, each page will have a unique icon.
8. To foster consistent staff and user training and support:
   1. Maintain consistency in the behavior of the header, navigation and footer.   A single page may have multiple horizontal content elements or columns on a desktop display, but a single column in a mobile display: therefore, list elements on a page will be organized vertically to provide a common layout for users and the support team.   However, some pages may require the article area not to be in column format.
   2. Dyson (2004) recommends that a line of text should consist of 50-70 characters (p.391), so as screen width increases the page displays multiple columns.   Essential content to the right and less important content in left columns.  
   3. A translation option will translate a page to the default language set by the user's browser; however,
   4. document titles and proper names will be fixed in English despite the browser's language setting.

Sections

Contact Bar (div)

Horizontal contact information at the top of the page appears responsively when the the NAV becomes horizontal at "Very Small" (767px) resolution. Phone and "Contact Us" always appears - other high-interest elements are added as the screen widens. When the contact bar is visible, it displays the "Page Icon" floating on its extreme right. This unique icon expands to 60px at "Small Screen" (1023px) resolution and expands to its full 120px at "VeryLarge" (1599px).

Header

Masthead , a responsive (possibly breadcrumb) H1 header that provides the page title.

Contactlist (div), a vertically formatted display of contact information on mobile screens too small for the contact bar. This disappears when NAV becomes horizontal. While the contactlist is visible, a reduced instance of the "Page Icon" appears on its right.

Nav

Four main navigation links are presented. Menu presentation is vertical until screen width reaches "Very Small" (ie. 767px). The four menu options link to subsidiary pages for touch users. When the horizontal menu appears, mouse users may use dropdown menus to major sub-pages.

A search box (currently for EBSCOhost using QuickLink code) may be expanded into some varient of the QuickLinks search. Ideally the searchbox could be toggled to search database(s), the library catalog, and the OCLS subdomain.

ICONTEXT appears on the extreme right when screen reaches "VeryLarge" (1599px), and discusses the purpose of the page and describes the page icon. This text-block drops into the article area.

Article

Main content area.

Content enclosed in the (div) Columnsetting (/div) will form in responsive columns at breakpoints, ie. "Very Small" (767px), "Medium" (1259px), and "Huge" (1979px).

Aside

Optional content area.

Callout appearing to the extreme right on screens with "Very Large" (1599px) resolution.

Footer

Responsively provides OCLS logo, contact info, and, should screen be large enough, OCLS mission statement and video welcome.

Mission statement and video link appear when at "Medium" (1259px) and expand at "Huge" (1979px) resolution.

Screen Width Breakpoints

tinyscreen

min-width: 479px - Contact information transitions from vertical to horizontal. OCLS logo appears as a background image in the space to the right of the vertical main navigation menu.

tinysmallscreen

min-width:599px - Navigation menu background image moves right.

verysmallscreen

min-width: 767px - Navigation becomes horizontal. Columnsetting, if employed, moves to two column.

smallscreen

min-width: 1023px - Page icon doubles in size to 60px. Footer address information floats right.

mediumscreen

min-width: 1259px - Page title is x-large. Footer expands to provide mission. Columnsetting, if employed, becomes three column. Main navigation item menu width expands to 200px per menu option.

largescreen

min-width: 1350px - Awaiting functionality.

verylargescreen

min-width: 1599px - Aside appears. Page icon reaches full 120px size. .icontext explains icon.

hugescreen

min-width: 1979px - Footer image expands to 120px. Columnsetting reaches 4.

Print

Black text, with links indicated by underlining. Contact areas, the header, page icon and navigation menues are not displayed.

Colors

background-color: #980826;

IWU dark red is the background color of header, navigation, and footer areas. Text is white, normally italic; links are sans-serif white.

background-color:#005480;

IWU dark blue is the color of contact list or contact bar at top of page. Text is white, normally italic; links are sans-serif white.

color:#626466;

IWU grey is the color of muted header text. Font variant is small caps.

color:#c59603;

IWU gold is the color of the large header page title. Font variant is small caps.