This tune is from The Bothy Band’s 1977 recording, “Out of the Wind into the Sun.” Kevin Burke seems to have made one of the earliest recordings, and he plays it here as well but, for me, it is Matt Molloy’s flute that makes the tune. Molloy plays a nice harmony (almost a different tune) as well.
The settings here are derived from versions posted on The Session.
Setting up a workflow seems to be a fragile process. It typically starts off orderly, but then becomes more chaotic as the ideal meets the real — deadlines, choices about the wireframing and prototyping environment, limitations of deployment methodology, etc. all contributing to the urge/need to cut a corner and just get it done. I can’t claim this won’t happen again, but I hope by documenting it up front, it might increase my commitment to this particular workflow.
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.
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
3
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.
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.
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.
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.
One of the givens in moving the Library site to LibGuides 2 is the fact that the platform uses Bootstrap 3. With this version, Bootstrap is natively responsive and, in particular, describes itself as “mobile first”. “Mobile first”, a refinement of responsive web design, has been getting a lot of buy-in from web developers. A good place to learn a lot more about this approach is by reading the book and blog by mobile expert, Luke Wroblewski.
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.
One thing I noticed in the design comp for the LMC website was that bullet items for ordered and unordered lists had been styled using the @lmc-green-3 (#009161) color. Here’s a screenshot from the design comp showing the proposed list layouts.
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
3
Although I’m jumping ahead a bit, I’m going to start off my series by showing a simple HTML rendering of the LMC Photoshop design comp that was created for the redesign of the College website. I realized that, before I could do much more work on my own design, I needed to have a good picture of what was being proposed for the main College website.
I’m going to be designing a new site for the library I work for over the next few months. We currently host almost all of our library pages on LibGuides. I’ve gotten around the lack of native site navigation in LibGuides by creating a home-brewed tabbed navigation system in the header area. It’s worked very nicely for about 2 years, but the times they are a changing. Two factors are coming together that are driving this change.
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.
… Video, anyway …
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
Continue reading More on Scopus RSS talk : Part 3. 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
Continue reading More on Scopus RSS talk : Part 2. Yahoo Pipes
Edit: The widgets seemed to be interfering with each other so I split the original post up so that each widget displayed on its own page.
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.