• Books & Non-Book Material: 249.256
• E-Books: 50.300
• Loans: 186.665
• Journal Article Downloads: 119.629
• E-Book Chapter Downloads: 90.031
• Active Internal Users: 3.886
• Active External Users: 2.254

Alma

• Part of Alma Early Adopter Program Europe
• Live with Alma since 01/2013

Primo

• Live with Primo since 11/2011 (ver. 3)
• Current Primo Version in Production: ver. 4.7
• Our current and future Primo

• Default stylesheet left untouched
• New custom stylesheet created which overrides default CSS

• … custom stylesheet became difficult to debug/maintain
• … custom stylesheet grew bigger and bigger (~40 KB minified) and we were not even half way through

Studies* in the context of e-commerce found that:

• 2006: "28 percent of online shoppers will not wait longer than four seconds for a Web site page to load before leaving."
• 2009: "40 percent of consumers will wait no more than three seconds for a web page to render before abandoning the site."
• 2014: ???

* Sources: Akamai (2006) Retail Web Site Performance - Consumer Reaction to a Poor Online Shopping Experience and Akamai (2009) Press Release - Akamai Reveals 2 Seconds as the New Threshold of Acceptability for eCommerce Web Page Response Times

Primo home page (top) and Primo search results page (bottom)

Subsequent requests are much lighter ⇒ JS/CSS assets are cached

• Download time ≠ Page load time: Other factors influencing overall page load times such as network latency or time for the browser to render the page have not been taken into consideration.

• Impatient users
• Broadband internet still far from reality

Certain changes to GUI are induced via Javascript when two conditions are met:

• Horizontal/vertical resolution smaller than 500px
• Primo is accessed from a mobile device

• One single breakpoint (500px). What if you need more flexibility (e.g. hide or modify an element already at 768px)?
• When rotating device from portrait (< 500 px) to landscape mode (> 500 px) previously induced changes to GUI are not removed.

Image assets

• We didn't use a lot of CSS background images to simulate gradients etc. (comes with the design).
• For our images (except the big footer images) we used a CSS image sprite
• For our icons we used a custom icon font

• Using a dynamic stylesheet language
• Using Media Queries
• Using Object Oriented CSS (OOCSS)
• Establishing CSS Baselines & Vertical Rhythm (not covered here)
• Applying Single direction margin declarations (not covered here)

• An own stylesheet language (very similar to CSS syntax) providing mechanisms such as: variables, nesting, mixins, operators, functions and partials (splitting up stylesheet files)
• In our case LESS (Other options exist, e.g. Sass)

Split CSS/LESS declarations to different files using LESS partials

• More manageable than one big file with 1000+ lines of code.
• Meaningful naming of files and folders create an additional layer of metadata helping to understand the stylesheet.

Metaphor for the division of style declarations (Thanks to Robin Rendle)

• Quarks (elementary particle and a fundamental constituent of matter): basic building blocks such as paragraphs, headings, form elements, images etc.
• Atoms: more complex objects incorporating one ore more quarks (e.g. data tables, buttons, drop downs etc.)
• Molecules: Structural elements such as header, footer, menus, facets etc. including one ore more atoms
• Additional folders for utilites and vendor specific declarations

Creation of a central configuration file

• Contains variables with values for important parameters of the GUI (colors, font sizes, margin sizes, responsive breakpoints, etc.)
• These variables are referenced in the CSS/LESS declarations instead of hard coding the values

Creation of a central configuration file

// Excerpt from config.less

@base-font-size   : 16px;
@base-line-height : 24px; 
@base-font-family : Tahoma, sans-serif;
@secondary-font-family: Trebuchet MS, sans-serif;
@line-height-ratio: (@base-line-height / @base-font-size) * 1em;

// Excerpt from /molecules/page-skeleton.less

html {
    background-color: @brand-color-1;
}

body {
    font-family: @base-font-family; 
    font-size  : @base-font-size;
    line-height: @line-height-ratio;
    color      : @brand-color-5;
}
            

• A CSS3 module allowing content rendering to adapt to conditions such as screen resolution ⇒ Cornerstone for Responsive Web Design
• Very good browser support (except IE8 and below)
• Example: Hiding facets using media queries

• Note to change Browser for users that access Primo with older Browsers (e.g. IE8 and below)
• Improve the conditional loading of the (large) footer images:
  • To date: images are not loaded on mobile phones assuming that the bandwith is slow
  • Our goal: Images lazy loaded if user is 200-300 px away from images and if connection speed is high enough
• Final Testing and Bugfixing

• DRY = Don't repeat yourself
• DRY principle states that "Every piece of knowledge must have a single, unambiguous, authoritative representation within a system."

Structure = the elementary properties that constitute an object

Skin = visual features of an object (colors, font sizes, shapes, border styles, etc.)

• Only load portions of the JS code if the feature it should power is enabled.
• Example: An institution doesn't use Virtual Browsing/Find Database functionality ⇒ don't load its corresponding JS

• In our case (Alma) used to pull in availability information/access options for items and in e-Shelf to show details of saved item
• No control over assets (CSS, Images etc.) of loaded page ⇒ Layout/Design breakers

• Great tool. It gives you some control over the markup of Primo without having to alter the template files.
• However, the markup changes are not applied to the e-Shelf, Queries and myAccount views.

/* Skeleton Html Markup of Home Page, Brief Display, Full Display */

<html>
...
    <body class="EXLCurrentLang_en_US">
        /* An overall wrapper is present here */
        <div id="contentEXL" class="EXLCustomLayoutContainer EXLContent EXLBriefDisplay">
            <div id="exlidSkipToContent" class="EXLCustomLayoutTile EXLSkipToContent">...</div>
            <div id="exlidHeaderContainer" class="EXLCustomLayoutContainer EXLHeader">...</div>
            <div id="exlidHomeContainer" class="EXLCustomLayoutContainer EXLHomeContainer">...</div>
            <div id="footerEXL" class="EXLCustomLayoutTile EXLFooter EXLClearBoth EXLFooterTile">...</div>
        </div>
        ...
    </body>
</html>

/* Skeleton Html Markup of Home Page, Brief Display, Full Display */

<html lang="en-US" xml:lang="en-US" xmlns="http://www.w3.org/1999/xhtml">
    ...
    <body class="MyAccount EXLCurrentLang_en_US">
        <div id="exlidSkipToContent" class="EXLSkipToContent">...</div>
        <div id="exlidHeaderContainer" class="EXLHeader EXLClearFix">...</div>
        <div id="exlidHeaderSystemFeedback" class="EXLCustomLayoutTile EXLSystemFeedback">...</div>
        <div class="EXLMyAccountTabsRibbon">...</div>
        <div id="exlidMyAccountContainer" class="EXLMyAccountContainer">...</div>
        <div class="EXLFooterTile">...</div>
    </body>
</html<

            

• When overall width of the page is 100% there is no problem.
• Other layout options (e.g. overall page width of 960px and page centered) require different styling for these two different skeleton markups ⇒ Bloats the CSS and makes it more difficult to maintain.

• Northeastern University – One Search
• SLUB Dresden
• REX
• Wissensportal ETH Zürich
• BYU Harold B. Lee Library
• ...