To Print or Not to Print URLs in the Twitter Bootstrap Framework

by Jonathan Jacobsen Tuesday, October 11, 2016 11:32 AM

Andornot uses the Twitter Bootstrap framework for almost all our web application development these days. This framework saves considerable development time, with so much pre-built, and allows a single site to adapt to the viewing device, meaning a search engine such as the Andornot Discovery Interface, works just as well on a tablet or phone as in a desktop browser.

One of the "features" of this framework is the display of URLs in print views. By default, the print stylesheet appends the URL of a hyperlink to the hyperlink text in print view. For example, a link to the Andornot website with the text “Learn more about Andornot” would appear in a printout as

Learn more about Andornot. http://www.andornot.com

This is a very helpful automatic feature, as without it, you’d have a print view without the URLs needed to get to the sites mentioned. It's great when the URLs are short, but when they are long, such as a pre-created search for a set of results, or anything with lots of parameters in it, they tend to make for a print view cluttered with not very useful HTML.

For example, a link whose text is “View information about Fish and Fisheries” might have a URL such as http://www.someserver.org/Search/Results?lookfor=Fishes+OR+Fisheries+OR+Fishing+OR+%22Juvenile+fish%22+OR+%22Resident+fish%22+
OR+%22Sport+fish%22+OR+Sportfish+OR+Eulachon+OR+Anadromous+OR+Trout+
OR+Salmon+OR+Coho+OR+Chinook+OR+Sockeye+OR+Fishway*&type=AllFields
&limit=20&sort=relevance

This is too long a URL for anyone to retype, so it’s not useful to have in the print view. It just makes the plain text hard to read.

(As an aside, see our recent blog post about URL shortening for tips on using short URLs in blog posts, Tweets, Facebook posts, etc.).

A very simple adjustment you can make to Bootstrap is to add this bit of CSS to your stylesheet, overriding the Bootstrap default:

@media print {

  a[href]:after {

    content: none;

  }

}

This will suppress the display of URLs after links in all cases. You might want to be more sophisticated and only suppress them for certain types of links, ones you know will be long, while leaving the behaviour as-is for shorter ones. Easily done by adding a class to certain links and adjusting the above style addition to reflect that class.

Contact Andornot for assistance with this and any similar web development tweaks.

It’s not about you! Designing for your end users.

by Kathy Bryce Wednesday, October 21, 2015 4:54 PM

When we are working with clients to design new search interfaces, we always stress the importance of defining who will be using the system, and then trying to meet the specific needs and expectations of these end users.

It’s Not About You
We often have to remind clients that “It’s not about you!” Archivists and librarians in particular often ask us for search pages with lots of options as they personally are used to constructing complex queries. However the trend with most search interfaces is to keep these simple with a single Google style search box. 

We suggest that you think about other websites your end users search, whether that be a university or public library catalog, or Amazon or other shopping sites.  Nearly all of these now use a discovery style interface that is geared to letting users put words or terms into a search box, and then narrowing their searches down from the search results page through facets or filters.

Like most other search interfaces, we do usually include some Advanced Search options but the website usage statistics we’ve collected for our hosted client sites over the years indicate that most are rarely accessed.  Pre-selecting search limiters removes the possibility of serendipitous discovery of unexpected resources, and the expectation now is that the results will be displayed by relevance so that the closest matches appear first.  We therefore discourage clients from specifying a traditional title sort, as if the user is looking for a known item and searches on words in the title, it will appear at or near the top of a relevance ranked display.

Use Cases and Personas
One of the ways we suggest you try to relate to your end user needs is through the creation of personas or user profiles.   For each of these personas we then suggest you think about factors that might impact their searching behaviour.   First and foremost - what are they looking for and why?  What will they want to do next when they’ve found something of interest?   So for a publicly accessible archives site, you might create personas for the following types of users.

billionphotos-1207379

Carol is looking for pictures of her grandparents and the house where they lived

billionphotos-1207383

Lucy wants a picture of an old farm implement for a school project

billionphotos-1207381

George is compiling a history of a local church.

billionphotos-949934

John works at City Hall & wants to find maps or plans of an area slated for redevelopment.

billionphotos-933914

Kevin is interested in a local railway line that runs through the area.

billionphotos-949941

Daphne is writing her thesis on a local political movement.

Make the process a fun exercise by incorporating graphical representations using images from a stock photo site such as billionphotos.com– search for avatar to find these examples, or contact us to help you. We find images make it easier to visualize how a person might behave, rather than just assigning an abstract name. The usability.govwebsite has an excellent overview article.

Avoid Jargon and Acronyms
You will also need to consider your personas familiarity with the subject area. Again “It’s not about you”, unless you are designing for a very limited audience, jargon and acronyms should be avoided.  Most government websites have guidelines on writing in “plain language” to convey information easily and unambiguously.  However we still see archival sites that include references to the GMD or to the General Material Designation.  Think about walking up to someone in the street and asking them if they understand what this term means! 

Spelling Matters
Spelling is a huge issue.  Too many times we’ve looked through search logs and seen searches that result in zero hits as the search terms were spelt incorrectly.  Think for example about medical terms and how to cater to the public that might be looking for Lou Gehrig’s disease.  Lots of potential to spell this wrong, but worse, you might have indexed relevant items under the medical term of Amyotrophic Lateral Sclerosis or the abbreviation ALS or A.L.S.!   Many modern search interfaces now feature Did You Mean spell checking, but maybe you also need to seed the indexes with lists of synonyms or common misspellings of proper names found in the collection. 

It’s all too easy to make assumptions about your end users abilities and their knowledge of web searching techniques. Let us guide you through the process of designing your new search interface based on our knowledge of best practices. We’ll try to tactfully remind you that “it’s not about you”! Contact us to discuss the possibilities today.

McGill Universities Health Centre Libraries Catalogue Now Using Responsive Layout

by Jonathan Jacobsen Thursday, November 14, 2013 1:22 PM

Earlier this year, the McGill Universities Health Centre Libraries launched a new website with a fresh, modern design. At the time, Andornot updated the library catalogue we host with a matching design.

As is often the case with a new website launch, after 6 months of real-world usage and feedback from users, a modest tune-up is often needed. With changes occurring to the main MUHC Libraries website often, rather than recreate them each time in the hosted catalogue, we took this opportunity to rebrand it with a simpler design, but to use a responsive web framework. With this, the site is as accessible on a smartphone or tablet as on a full-size desktop web browser. 

The library’s book catalogue is available directly at http://muhclibraries.andornot.com/Books/Default.aspx or though the MUCH Libraries website at http://www.muhclibraries.ca  As before, it’s available in both English and French, shows Google Book covers when available, and offers users a selection list to save or email records as they search. The site now also includes up-to-date loan information, pulled directly from the underlying Inmagic Genie system. The entire interface is built from the Andornot Starter Kit.

Contact us to update your search interface to a responsive one, accessible from any device.

Responsive Web Design and Accessibility

by Jonathan Jacobsen Tuesday, September 10, 2013 1:16 PM

In our web development work, two concepts have become increasingly important to our clients and to us over the past year or two: responsive web design and accessibility. If you're not familiar with these ideas, or your own web sites and applications don't meet current standards for both, read on!

Responsive Web Design

Responsive web design is the practice of designing and developing a website that works as well in a desktop browser as on a tablet, smart phone or other size of screen. No matter how the user accesses the site, site elements and features rearrange themselves for best presentation at that size. This might involve hiding some elements or removing functionality that doesn't work well in one environment (such as removing pop-up windows on a phone view).

The screenshot below shows our new website as it appears on a phone or other small device. As you can see, the several columns of information are rearranged vertically for easier scrolling, the logo image is smaller, and the menu has collapsed, but is available with a click or touch.

Andornot Website in a Phone Browser

To reduce cost and speed up development time, we often use all or part of a framework such as Twitter Bootstrap or Zurb Foundation. Both are excellent, customizable, responsive web frameworks with all the CSS and javascript needed to quickly spin up a site or apply to a web application.

Examples

You can experience responsive web design for yourself at any of these sites. If you don't have a tablet or phone handy to access them, just resize your desktop web browser to simulate one. As you make your browser narrower, watch how the site responds.

Accessibility

Accessibility refers to making web sites and applications usable by people of all different abilities. This includes people with visual impairments who rely on high contrast or screen reading software to access content, or who use only a keyboard or spoken commands for navigation.

In all our web projects, we aim to meet Web Content Accessibility Guideliness (WCAG) 2.0, Level AA standards. Using tools such as the WAVE Toolbar, and careful use of CSS and HTML, it's not too hard to meet these standards, or to get very, very close. It's more challenging when integrating a web application, such as a library catalogue, with an existing website that doesn't meet these standards. Often, though, this is an opportunity to help upgrade the entire site to be accessible to all users.

You can read more about a recent accessibility project in this blog post about the Canadian Conservation Institute library, and try out a fully accessible site here: http://library-bibliotheque.cci-icc.gc.ca/en/cci-icc/lib-bib/search-recherche/.

Making your website accessible to people where, when and how they want to access it is no longer a luxury or "nice to do if there's time" part of a project. With the tools available, it's often less effort to make a responsive website than a non-responsive one, and with ever more users not sitting at desktop PCs, it's imperative!

Andornot would be pleased to evaluate your current website, library catalogue or other web application and advise on how well it meets standards for accessibility and mobile access; just drop us a note and we'll set up a time.

Hurrah! Andornot Launches New Website… for Andornot!

by Jonathan Jacobsen Tuesday, September 03, 2013 7:46 AM

Hip, hip hooray! Break out the bubbly! Andornot has launched a new website for… ourselves!

If you’re reading this blog post on our new site, you can see the fruits of our labour for yourself, and perhaps nothing more need be said. However, since this was long overdue, and a long process, perhaps you’ll indulge us and let us tell you the full story.

Why We Did This

All year long we work with you, our clients, to update your websites and applications. We’re usually very pleased with the results and love to talk about our work. Alas, we don’t always have time to practice what we preach and somehow never quite got around to updating our own website. We’ve always been good about blogging, tweeting and emailing about topics and projects we think you’ll be interested in, but a website re-fresh was somehow put off for another day. Does this ever happen to you? 

Finally we reached the breaking point: our somewhat older eyes could no longer read the text on our site, with its rather small font size! It had to go, and along with it, an aging design. It was time for something new.

How We Did This

We spent some long sessions discussing the look we wanted and came up with a list of other websites that we liked.  We all have very strong opinions, but fortunately we all agreed that we wanted a simpler, minimalist style.  Ted hand-crafted the layout and design based on our overall design goals, and using the Zurb Foundation responsive web framework. This ensures the website is as usable and readable in a desktop web browser as on a tablet or iPhone, as this is part of our standard approach to web design now.

We continue to use the Umbraco Content Management System and blogengine.net to manage our site and blog, both hosted in our data centre. Ted built up the new site in each of these web applications.

After seeing our old content in our new design, Jonathan revised the site architecture and rewrote much of the content. He tried to provide clear and concise descriptions of the key solutions, products and services we provide, as well as incorporate details of projects from our blog that will be of interest to you.  

Peter re-jigged the popular Andornot Search Cannery Wizard for the new site, so it continues to help you created canned queries into Inmagic WebPublisher PRO databases and the Genie integrated library system.

Kathy reviewed, critiqued and niggled over formatting and content changes just as with all the designs since the very first Andornot website 18 years ago.

And together, many months later, we pushed the big red button and pulled the large silver lever to launch the site. Hence the champagne.

What Came Before

Thanks to the Internet Archive Way Back Machine, we have a collection of previous versions of our site.

Remember that the design of these older sites are the product of their times, much like your high school yearbook photo. They’re embarrassing, but nostalgic.

Andornot Website 1997 Andornot Website 1998-1999 Andornot Website 2000-2004 Andornot Website 2005-2009 Andornot Website 2010-2013

How you Can Do This Too

Hire Andornot and relax.

or

  • Get yourself a content management system; it really does make website management easier. 
  • Make a short list of sites you like, for both their design and their content. 
  • Find a designer to create a look unique for you (or purchase and tweak one of the many excellent pre-created design templates). 
  • Find a developer to craft the HTML and CSS, and integrate it into your content management system or build up static web pages.
  • Review, revise and rewrite your content to be sure it speaks to visitors/users/staff.
  • Launch!

Let us know what you think of the new site, and please feel free to comment on any of our blog posts and subscribe to our newsletter. If you need assistance updating your own website, we’d be happy to help!

Month List