The settings here are derived from versions posted on The Session.

Bootstrap

The LibGuides 2 platform provides Bootstrap-syntax classes for various elements on the page. This includes the overarching grid layout system that allows you to place content boxes in columns within the page container, as well as navigation, header and footer elements, various buttons, tabs, labels, badges, thumbnails, and more. But if you want your site to follow the style guidelines of your organization, you are going to have to modify the the generic styles that come with Bootstrap out-of-the-box.

When you download the Bootstrap framework, you have the choice of either downloading a compiled version or getting the sourcecode for the stylesheets. While the compiled version gives you a very straightforward directory structure for your stylesheets and JavaScript files, it is much more difficult to make changes. For instance, if I want to change the color and typography of navigation elements such as breadcrumbs, buttons, and links, I have to identify and change each occurrence where they appear in my stylesheets. It’s an easy matter to miss one or more instances or change something you didn’t intend to.

Less

That’s where the sourcecode version of Bootstrap comes in. Bootstrap’s stylesheet is actually compiled from a folder of about 40 stylesheet components written in Less, a CSS preprocessor language. The big win for CSS preprocessing languages is that they extend CSS by providing additional functionality like variables, mixins, and functions that make it possible to modularize and reuse your code, but compile a single stylesheet as the final product.

In an earlier post, I noted that the design comps for the LMC College website identified 7 colors of green and 2 colors of gold.

See the Pen LMC Color Palette by Tom Keays (@tomkeays) on CodePen

Rather than trying to remember that “#009161” is the primary color of green used for links and the background color of certain boxes, I instead assigned it to a Less variable of “@lmc-green-3”. Down the road, if I need to change that color, I just need to change the value assigned to the variable.

Here’s the color palette that the LMC website will be using.

@lmc-green-1: #00c483; // #00c483: lightest: background, links
@lmc-green-2: darken(@lmc-green-1, 5%); // #00ab72: background, text
@lmc-green-3: darken(@lmc-green-1, 10%); // #009161: background, primary green link
@lmc-green-4: darken(@lmc-green-1, 15%); // #007850: background, gift box, dolphin
@lmc-green-5: darken(@lmc-green-1, 19.9%); // #005f3f: background, bars, primary green link hover
@lmc-green-6: darken(@lmc-green-1, 25%); // #00452e: background, super navbar
@lmc-green-7: darken(@lmc-green-1, 27.5%); // #003825: darkest: background, search field
@lmc-gold-primary: #cfb57e; // #cfb57e: primary gold, buttons, links
@lmc-gold-secondary: #ddb253; // #ddb253: secondary gold, small arrows

There are other CSS preprocessor language choices besides Less. SASS is the most popular of these (and the language I actually prefer) and, while it is now possible to use SASS with Bootstrap, all of the documentation still references Less. Less is not terribly complicated and Bootstrap doesn’t use many of its trickier features, so I figured sticking with Less was the best path to follow. Hopefully, I won’t regret that decision down the road.

I mentioned that Bootstrap’s Less source code is broken apart into 40 or so smaller files. These have names like “buttons.less”, “dropdowns.less”, “forms.less”, “navbar.less”, and “tables.less” which define the appearance of various page elements. There are also files such as “mixins.less” and “variables.less” which define functions and variables that will be reused by the other modules. Changes you make in the appropriate Less modules are compiled by the Less framework and reflected in the final CSS stylesheet.

However, the recommended best practice is to avoid directly editing the Less files that come with Bootstrap.and, instead, create a separate Less file with your changes that will be applied on top of the default Bootstrap files. In this new file, you can reassign variables, create new mixins and functionality, and assign different style attributes to page elements and Bootstrap classes, without the risk of seeing your work wiped out the next time you download the newest version of Bootstrap.

For instance, I would not change the value of the primary brand color assigned in the “variables.less” Bootstrap file. By default, this variable is defined:

@brand-primary:  #428bca;

Instead, I would create a new folder next to the default bootstrap folder which contains a new “variables.less” file that redefines the variable the way I want it: E.G.,

@brand-primary:  #325d88;

Then, by importing my “variable.less” file after the original, my definition of the brand color will overwrite and replace the original. My compiled CSS will reference the color as I defined it.

CodeKit / Prepros

I’ve sort of glossed over exactly how Less files are combined and compiled into a final stylesheet. Originally, Less files were compiled using a command line program running under Node.js and, while many developers prefer to do  it this way, it does require a commitment to work a little closer to the metal than many people are comfortable with. Less is also somewhat unique, because it grew out of a JavaScript development environment, in offering a means to interpret it directly in the browser. This is not intended for production websites, but can simplify your design work.

However, many web developers now use desktop web development applications to compile their CSS preprocessor code. For Mac users (which encompasses most professional web developers), the obvious choice is the commercial application CodeKit. Besides Less, the CodeKit framework offers the CSS preprocessors SASS and Stylus, the JavaScript preprocessing language CoffeeScript, HTML preprocessors such as Jade, HAML, Slim, Kit, and Markdown, and a variety of SASS-based frameworks such as Compass, Zurb Foundation, Susy grid, and more. When I work at home, I use CodeKit.

However, at work, I use a Windows machine where CodeKit is not an option. Fortunately, in the past year a viable alternative came along. Propros, originally for Windows but now running on Mac OS and Linux, is not quite as versatile as the industry standard CodeKit, but it handles Less preprocessing just fine.

When you start a project, Propros makes an inventory of all the files. If it sees a folder of Less files, it analyzes them to see if one of them is the master file for the project — i.e., if it sees that Less file imports another file or set of files, then it won’t compile the subordinate files to CSS, but will only compile the master file. It is also possible to manually determine which files Propros with compile and which it will ignore. Prepros watches for changes to the project files and automatically compiles changes as you go. Prepros can also provide a web server environment that will refresh the page to display the style changes you have made.

GitHub

Coding is an iterative process. As you try things out to see what works and doesn’t work, it is nice to have a way to document the changes you have made and to rollback to an earlier version when things don’t quite pan out. Git is the latest in a long line of version (or revision) control programs. It gained acceptance with programmers and coders because of its distributed way of sharing the coding work among members of project teams and solidified its dominance because of the popularity of the social coding repository, GitHub, which gives every coder in the world a place to save, share, and showcase their work.

I’m saving the code for this redesign project at https://github.com/tomkeays/prototype. I have installed Git on my work computer so I can commit incremental changes back to the GitHub repository. While the public repository, strictly speaking, is not necessary (I could use Git entirely locally on my work machine), by committing changes to the GitHub repo, I am able to pull those changes down to my home computer and continue my work there (in effect, collaborating with myself).

The public repository also makes it possible to communicate my work to others, should anybody be interested. For example, over the weekend, I experimented with LibGuide 2’s templates. I liked the sidebar template that LibGuides provided better than the typical tabbed template that is a carryover from LibGuides 1. However, I did not like the clunky look of the “pill” buttons and I was disappointed that there was no way for there to be more than one content column. I realized that while I couldn’t override LIbGuides and enable the sidebar template to specify 2 columns to display content, there was a way to explicitly place the guide owner’s profile box in a second column. Because the profile box is not optimized for wide columns, I made its containing column narrower and improved the overall look of the page for both desktop and tablet screen resolutions. If anybody were to ask how I set up this template, it is a now simple matter to refer them back to this repo.

Deployment

I don’t have a staging server for my work. But, until such point that we go live with LibGuides 2, I can fairly safely do my design prototyping on this server. LibGuides 2 comes with a full installation of Bootstrap, including generic Bootstrap 3 CSS and JavaScript files, as well as nice extras such as the Font Awesome icon font. I could easily get a site up and running without needing to make any changes other than to provide some sort of branding and basic navigation. However, since my goal is to a create a unique new Bootstrap theme, I need a way to push out a new stylesheet to the LibGuides 2 server so I can how my redesign effort is shaping up.

One very simple deployment options comes from the fact that I have a network drive attached to my work account that doubles as my personal work website. Any file placed in a specific directory on that drive is immediately served to the web. I keep the entire project folder on this network drive, so not only is the compiled “main.css” stylesheet being served from there, so are all the Less files, the JavaScript files, and LibGuides 2 templates. It is a simple matter to have LibGuides use my custom version of the Bootstrap stylesheet rather than the default version supplied on the platform. As Prepros renders my changes, LibGuides sees those changes in real time.

However, when I work from home, I don’t have direct access to files on my work website. To keep everything in sync, I pull files to my home computer from my GitHub repository, so I don’t want to simply FTP changes back to my work website. That would cause the repository on my work machine to differ from both the home machine repo and the GitHub repo. Instead, I take advantage of the fact that LibGuides has its own document store in its Assets library and upload “main.css” there. I then just have to point LibGuides to that file in the docstore. It doesn’t have immediate gratification aspect of the other solution, but it has more versatility.

When the concept of responsive web design was first proposed by Ethan Marcotte in 2010, web designers were still making the assumption that you designed first for the desktop and then stripped away things to accommodate smaller devices. However, the fact that mobile devices generally have less bandwidth (I think we can assume this is generally still true and will remain true for a number of years) means that transmitting large resources required by desktop viewers is detrimental to the mobile user’s experience. The idea behind “mobile first” is that you send all viewers the less resource heavy mobile stylesheets and then send additional style information for more complex layouts.

That’s the idea anyway. In reality it is more complicated. You can’t make bandwidth assumptions solely on device screen size. By default, my laptop receives the desktop layout for responsive sites, but those sites have no way to assess that I actually have good bandwidth. Maybe I’m using a cellular hotspot out in the field and my connectivity is poor. In such cases, I probably would prefer a “mobile first” layout along with smaller sized images, but my browser can’t relay that information to the server up front so I get everything. Conversely, I might be using a phablet in a fast wifi network and so my receiving a more rich desktop experience might be completely appropriate and desirable.

Secondly, the reality of most sites is that they send the same stylesheets and images to all devices without regard to actual device screen size. Bootstrap, out of the box, falls into this category. When Bootstrap says it is “mobile first”, what it means is that it applies a cascade of media queries that provide typographic and color choices which comprise the base layout. These are then reused (with some modification) by all layouts, including higher resolution layouts. In addition, at higher resolutions, more styling information about how to place page elements and modules into columns and rows is passed to the browser’s layout engine. But, since all devices ultimately receive the same stylesheets — using media queries to determine and render additional layout options — no bandwidth savings are actually achieved. You also have to consider the trade-off between sending one stylesheet (ideally optimized and compressed) or sending a base stylesheet and using media queries to send supplemental stylesheets appropriate to the device’s screen size. Each file you send impacts page load time, so you have to weigh the benefits of sending fewer files for small devices against the hit that desktop machines might incur.

Never-the-less, web designers agree that composing “mobile first” CSS has other benefits, including giving the designer a better top-down conceptualization of how pages will be delivered to different users. Using a framework like Bootstrap also means that you start with a good structure for abstracting your site’s layout, thus increasing the reusability of your code (reducing duplication) and providing better semantic names to your class names. At least that’s the sales pitch.

A legitimate complaint about Bootstrap sites is that they tend to look a lot alike. Coming into the Library website redesign project, I already had a pretty good handle on the various structural “furniture” available in Bootstrap — i.e., various buttons, tabs, list items, navigation elements, sidebars, etc. — but I less knowledgeable about how to apply custom styles on top of that. Over the summer and beginning of this semester, I looked at a variety different Bootstrap designs in the wild, some of them very creative and individual, giving me inspiration and hope about the possibilities for transforming generic Bootstrap design into something more.

However, to get going, I needed to work with a more basic starting theme. I spent a bit of time looking at what’s offered by the Bootswatch theme site. I also found the book, Extending Bootstrap by Christoffer Niska (Packt Publishing, 2014) which uses Bootswatch in its examples, so I thought I’d give it a go. The book recommends starting with one of the free themes and then modifying it to achieve a customized design.

I am currently using the Bootswatch Sandstone theme as my starting point. I selected it at a time prior to having access to the LMC design comps, but I did know what the College’s current design looked like and Sandstone, except for color choices, was closest to my guess about the direction the College redesign would take. I’m not a graphic designer, so having the design comps for the College website design will facilitate my work going forward. As I iterate more and more changes to my prototype template, it will cease to have a recognizable Sandstone foundation and will become it’s own theme.

I’ll end this post here and pick up next time with some examples of what I think my workflow is going to look like.

It’s a nice touch but, surprisingly, it is not something you can do natively using CSS. Setting color on lists is an all or nothing proposition and there’s no way to directly style the color of the list markers differently than the list text.

One widely used work-around is to color the entire list (list markers and text) one color and then wrap the text in a span so it can be colored differently. But, besides introducing unsemantic markup, the extra span is an annoyance to implement and probably impossible to enforce in a CMS environment with multiple content creators.

A more elegant CSS-based solution involves removing the existing list markers and then reinserting new replacement markers. Using this technique, you have full control over all aspects of how the list markers are styled, including coloring, padding, and positioning. The drawback is that the code, although logical, is a bit complex.

For unordered lists, you set “list-style-type” property to “none” to remove the list markers and then use the “:before” pseudo-element to replace the marker using the “content” property. The HTML entity “•” (unicode “\2212”) somewhat non-intuitively turns out to be too small to make a good replacement bullet, but the black circle character (unicode “\25CF”) does just fine. The rest of the code is to position the new list marker where it belongs.

ul li {
  list-style-type: none;
  position: relative;
}
ul li:before {
  content: "\25CF";
  position: absolute;
  left: -1.9em;
  width: 1.5em;
  text-align: center;
  color: @lmc-green-3;
}

You use a similar technique for swapping out the numbered list markers in ordered lists. It’s a little more complicated because you also have to reset the list counters and specify that “li” is the counter increment trigger.

ol {
  counter-reset: li;
}
ol li {
  list-style-type: none;
  counter-increment: li;
  position: relative;
}
ol li:before {
  content: counter(li) ".";
  position: absolute;
  left: -2.6em;
  width: 2em;
  text-align: right;
  font-weight: bold;
  color: @lmc-green-3;
}

In the LMC design comp, list items had their indents adjusted so they were aligned with the paragraph’s left margin. Once set, it cascades nicely so that nested list items have the same amount of indent.

ol, ul { 
  padding: 0 1.5em; 
}

Here’s what ordered and unordered list items look like rendered in a CodePen. Since I am aware that I’ll be coding within the environment of Bootstrap 3, the Pen incorporates the Bootstrap stylesheet to help my example work when I start coding for real.

See the Pen LMC List Item Styling by Tom Keays (@tomkeays) on CodePen

Typography

I started off by coding up the typographic choices described on the LMC design comp.

Roboto Slab, a friendly and readable serif font was chosen for all of the heading tags, except for H5, which used Roboto, a sans-serif counterpart. Source Sans Pro, a light sans serif font, was used for blockquotes. Geneva, a common sans serif system font, appears to be used for all other typography. So far, so good.

I went through the proposed style guide (which was delivered, at this point, as a Photoshop comp, rather than HTML and CSS) to pick out the recommended font weights and styles and came up with this list.

1. Roboto Slab: Light 300, Normal 400, and Bold 700
2. Roboto: Medium 500 and Bold 700
3. Source Sans Pro: Light 300, Light 300 Italic, and Normal 400

Delivered as a Google Font package, it is a wee bit heavier than you would probably want, but probably not so weighty as to drastically impact page load times.

The thing I struck me as odd, however, were the sizes and line heights chosen for some of the critical page design elements. Headings ranged from 20pt to 80pt with 10-20pt line height buffers except the smallest two. Blockquotes were set at 26pt except when overlayed on hero element images where they were bumped up to 36pt. Paragraphs and list items were also bigger than browser standard at 16pt and with double-space line heights. (The browser standard for 1em is 12pt or 16px, whereas 16pt is 1.313em or 21px.)

• H1. ‘Roboto Slab’ Regular 80pt/100pt #000000
• H2. ‘Roboto Slab’ Regular 50pt/60pt #000000
• H3. ‘Roboto Slab’ Regular 40pt/60pt #000000
• H4. ‘Roboto Slab’ Regular 30pt/40pt #000000
• H5. ‘Roboto’ Medium 26pt/36pt #000000
• H6. ‘Roboto Slab’ Regular 24pt/26pt #000000
• “H7” (really a .h7 class). ‘Roboto Bold’ 20pt/24pt #009161
• BLOCKQUOTE. Source Sans Pro’ Light Italic 26pt/36pt (or 36pt/46pt) #000000 centered
• P and LI. ‘Geneva’ Regular 16pt/32pt #000000

Here’s what these elements look like rendered as a CodePen.

See the Pen Simple Mockup of LMC Design Comp by Tom Keays (@tomkeays) on CodePen

The overall effect is that all the page elements are really large. I guess this is the design trend du jour. Although I suspect nobody on campus besides myself has mocked up the style guide comps yet and realized exactly how big everything is, thinking back on what the design firm was told was the main purpose of the LMC website — recruitment and marketing — this is probably exactly what the marketing folk were looking for and when they see it live, they will like it. For one thing, the design will be good for presenting short blocks of information with good readability.

However, this typography schema is just too outsized for presenting more in-depth information that is required by the Library website. My next steps will be to figure out what font sizes and line heights I want to use (I probably won’t deviate far from the choices Bootstrap offers) and what font weights I actually need in order to make a smaller Google Font package.

Colors

Bootstrap gives you a limited palette of color choices out ot the box: 6 button and alert box colors (what they call “brand” colors) and 5 shades of gray. However, using the Less CSS pre-processor, it is fairly easy to add more. The design comp defined 7 shades of green and 2 shades of “gold” (although they look more tan to my eyes).

After staring at the CSS hex codes for the sequence of greens, I guessed they were based on the same hue but darkened to different degrees. Using the “darken” function in Less, I was able to work out that they were darkened approximately in increments of 5%. Here’s my finished LMC color palette, including the descriptions from the comp for how they should be applied.

@lmc-green-1:                     #00c483;  // #00c483: lightest: background, links
@lmc-green-2: darken(@lmc-green-1,    5%);  // #00ab72: background, text
@lmc-green-3: darken(@lmc-green-1,   10%);  // #009161: background, primary green link
@lmc-green-4: darken(@lmc-green-1,   15%);  // #007850: background, gift box, dolphin
@lmc-green-5: darken(@lmc-green-1, 19.9%);  // #005f3f: background, bars, primary green link hover
@lmc-green-6: darken(@lmc-green-1,   25%);  // #00452e: background, super navbar
@lmc-green-7: darken(@lmc-green-1, 27.5%);  // #003825: darkest: background, search field
@lmc-gold-primary:                #cfb57e;  // #cfb57e: primary gold, buttons, links
@lmc-gold-secondary:              #ddb253;  // #ddb253: secondary gold, small arrows

@lmc-green-3 appears to be the primary green link color (with @lmc-green-5 used for the hover state) and what I’ve called @lmc-gold-primary is used for gold links and all call to action buttons. The other shades of green are used as the background colors of different marketing information boxes (that I’m probably not going to need). I will need to pay attention to @lmc-green-6, which is used for the site navigation bar, but I’ll explore that in a later post.

Here’s another CodePen showing the color palette rendered as HTML.

See the Pen LMC Color Palette by Tom Keays (@tomkeays) on CodePen

First, we will need to move our content to a brand new platform called LibGuides 2. This has a bunch of new CMS functionality that I’m looking forward to but, from a design point of view, the biggest change is that the public-facing side will be using the responsive Bootstrap 3 framework. I’ve wanted to have our site be responsive for a long time (LibGuides 1 is fixed width, with a kind of funky mobile view alternative), but this change will cause our existing tabbed navigation (which relies on the fixed layout) to break. So, I’m getting up to speed with Bootstrap and Less (which is the CSS pre-processor that Bootstrap uses) and beginning to sketch out some rough design ideas.

Second, the College hired a designer to redesign the main campus web site. Last week, I attended a meeting (along with a roomful of other campus web stakeholders) hosted by the design company and the VP of marketing for the campus where they unveiled Photoshop design comps that will inform the coding design. Just a couple of days ago, the design company pushed out a style guide (again using Photoshop comps) showing color and font choices. This was very good timing for me since now I have a sense of how I can make the library redesign work mirror that of the College redesign effort.

So, my intention is to share details about what aspects of the Library redesign will be informed by the campus work and what will necessarily have to be done differently. The purpose of the two sites is different (I may touch on why we no longer host the Library site on the College server as I go forward), but the nutshell is the College sees the main purpose of its site to be Recruitment and Marketing, whereas the Library site is all about Instruction and Research. The two sites have completely different (and conflicting) functional requirements regarding branding, typographic choices, site navigation, and wayfinding, just to name a few.

Enough for now. I hope to post a couple of times a week as I get rolling.

On January 7, 2009 I took a revamped version of my “Introduction to RefWorks” presentation to a group of doctoral students in the iSchool. This is similar to the classes that I give each semester as a RefWorks instructor for Syracuse University Library.

Since many of them are distance students (and, additionally, the weather was truly vile that day), the class was only attended in person by one student. The intention of the instructor, Angela Ramnarine-Rieks, was that we make a video of the instruction session that would be distributed via the university’s Ensemble video server and that the students could review it at any time as they began their research.

(WMV 01:13:27)

Although I targeted my selection of search examples to my intended audience of iSchool doctoral candidates, I think the video does a pretty good job covering all the basics of getting started in using RefWorks. Because I knew I was doing a video, that could be paused and rewound, I gave the presentation at a brisk pace, although I tried to pause at obvious stopping points where the viewer might try out what I had been demonstrating.

My PowerPoint slide pack is published on SlideShare. In addition, I formatted the slides, together with my speaking notes, as 77 page PDF handout and reformatted for printing double-sided as a 40 page (20 physical sheets) PDF booklet.

In the class, I handed out the library’s “Introducing RefWorks” short guide as well as a list of tips for exporting citations to RefWorks from some select information science databases and Google Scholar, and the library’s OPAC. I provided links to the more in-depth “Quick Start Guide” that RefWorks publishes and the library’s RefWork Help page.

Feedburner is a tool to optimize feeds so it is a perfect tool to use to make our Pipes feed more robust. It does this by letting you assign your own name to the feed, but also by styling the feed for display in web browsers, making it easily consumed by just about any feed reader, and providing an array of subscription management and monitoring options.

http://feeds.feedburner.com/sul/chempubs

Display Using SpringWidget

SpringWidget is a partner with Feedburner, so it is a simple matter to generate a display widget. You have options of embedding the widget in your site directly as a Flash widget or you can do it via javascript. There’s no difference in how it displays but, if you use the latter method, it won’t display if javascript is disabled in your browser (nor with the other two widgets we’ve already seen). As such, it is the most robust solution of the three options and it is probably the aesthetically most interesting one as well.

Format of the items is pretty similar to how Pipes was handling them, the only addition being the inclusion of each item’s pubDate (basically the date it was indexed in Scopus).

A version of this last widget, formatted a little differently, can be found on my Chemistry Resources page. That widget is further enhanced in that it also includes subscription by email and an RSS subscription chicklet, both from FeedBurner.

Yahoo Pipes is, as the site says, “a powerful composition tool to aggregate, manipulate, and mashup content from around the web.” It uses the idea from Unix of “piping” a series of commands together in a sequence — passing the results from one command to use as the input for the next — but does so using an intuitive graphical user interface. I’ve used Pipes to reformat the feed and remove a few unnecessary branding elements from Scopus. My main objectives were to make the description look more like a citation (albeit incomplete) and to edit the links to Scopus so that they send the user through EZproxy for off-campus access.

The links are no longer IP address dependent, but they are specific to the institution hosting EZproxy. The first link below goes to the Pipes page for the feed I created where I can preview the results of my changes. The second link is to the feed itself.

http://pipes.yahoo.com/pipes/pipe.info?_id=gket7SkL3RGuUHXSy6ky6g

http://pipes.yahoo.com/pipes/pipe.run?_id=gket7SkL3RGuUHXSy6ky6g&_render=rss

Display Using Pipes Badge

Pipes has something called a “badge” which lets you embed your feed into a webpage using javascript. It is just a matter of copying the script into your own webpage. The display presents items as a striped list. Titles are linked to the proxied url for the corresponding complete record in Scopus and the item description below that is presented in the citation-like format we applied to it in Pipes.

However, I have to say that my experience with Pipes is that they can be a little fragile in display mode and not all RSS feed readers do a good job with them. Plus, the url that Pipes uses is no improvement over the one generated directly by Scopus.

Scopus

As I mentioned in my UNYSL talk last week, I am repurposing a search that I ran in Scopus, Elsevier’s science citation database, to generate a list of newly published articles by chemistry researchers at Syracuse University. Scopus offers a custom RSS alert option for every search you perform. I won’t repeat the steps I had to make to get it to work well — see the slides for that.

Here is the url for the RSS feed from Scopus for the faculty publication search. The url is ugly but functional and it reliably brings in the results I designed it for. As is, it can be sent to just about any RSS feed reader without any problem.

http://syndic8.scopus.com/getMessage?registrationId=EAHEFDPEFCHMMBLJGAHMFAHHFAIFIEKMGSJSTEHLIT

However, what I want to do is figure out a way to display it directly on my web site. It really isn’t difficult to display RSS feeds directly on a webpage. However, unless you are running your own server-side program, you will probably use some sort of third-party widget that you can embed on your page. Widgets of this sort use javascript or Flash or some combination of the two. You embed code stating the location of the widget and then tell the widget which RSS feed it should use, and it does the rest.

Display Using Grazr

Grazr is one of the first widgets that I used when I was first playing around with embedding RSS feeds on web pages. It is quite easy to use and configure. It is embedded using javascript and pulls a page generated by Grazr into an iframe on your own web page. It has been stable and reliable over the past several years.

Shown below, the Grazr widget displays the titles of articles from the Scopus field in a list. Clicking the title expands it to show the description for each article: author, journal title, year, and date the record was indexed in Scopus. Clicking the icon to the right of the article title takes you to the corresponding record in Scopus. Links are not proxied, so access to Scopus (a subscription database) is IP address dependent.

• Yahoo Pipes – to modify the presentation of items in the feed so that they look more like article citations; to remove some administrative links that Scopus includes by default; and to add an EZproxy prefix to the link urls.
• FeedBurner – to create a more human-readable feed url than either of the hash-based urls that both Scopus and Pipes generate; to add in click-through tracking and feed subscription options; and to optimize the feed for presentation in a browser and for consumption by feed reader software.

My example in the presentation is, more-or-less, the “New Faculty Publications” widget that I’m using on my Chemistry Resources page. That widget is further enhanced from what I’ll be showing in this afternoon’s talk in that it also includes subscription by email and an RSS subscription chicklet, both from FeedBurner.

I’m making my presentation slides and notes available at SlideShare (download or see below) and I’m also sharing the 2-page PDF of my talk overview handout.