Moving the University website to HTML9 Responsive Boilerstrap JS

H9RBS.js (v0.0001) is a flexible, dependency-free, lightweight, device-agnostic, modular, baked-in, component framework MVC library shoelacestrap to help you kickstart your responsive CSS-based app architecture backbone kitchensink tweetybirds.

H9RBS.js (v0.0001) is a flexible, dependency-free, lightweight, device-agnostic, modular, baked-in, component framework MVC library shoelacestrap to help you kickstart your responsive CSS-based app architecture backbone kitchensink tweetybirds.

When we redesigned the University website in 2008 we adopted the Blueprint CSS framework which greatly cut down our CSS development time. It offered us a solid, cross-browser compatible foundation on which to build our site.

With the advent of HTML5 and responsive web design we started using the Bootstrap framework which offered not only a mobile-friendly grid but also at least 12 JavaScript plugins to provide design patterns such as modal windows, carousels, tabs and accordions.

As you are probably aware the web is now developing at an astonishing rate. Browsers are updated now on a six-weekly basis, HTML5 is nearing completion, and CSS4 is already being discussed. So we are looking to the future for a new framework that will support our needs and the requirements of our ever more mobile-friendly users for the next few years to come.

In consultation with Prof. Ailol from the University’s School of Computer Science we will be planning a migration to the HTML9 Responsive Boilerstrap JS starting today.

The framework describes itself as

a flexible, dependency-free, lightweight, device-agnostic, modular, baked-in, component framework MVC library shoelacestrap to help you kickstart your responsive CSS-based app architecture backbone […]

In other words: it meets our needs perfectly. Or as the developer of the infamous “All your base are belong to us” might say: All proof I.

A few of the many reasons we’ve selected this framework:

  1. It is entirely suited to today’s web.
  2. Unlike many other frameworks this uses a poor fill rather than a polyfil.
  3. It supports the new JavaScript flair loop.
  4. It is compatible with the forthcoming Commodore 64, Spectrum 48 and BBC B platforms, as well as popular browsers such as IE 6, Netscape Navigator 4 and Mosaic.
  5. No polar bears were harmed in its creation; in other words it is in keeping with our IT strategy for green computing.
  6. It is 100% compatible with JaxelScrobd 8.1.π.

From a usability point of view the only difference you may experience is a mild sense of foolishness.

Advertisements

New framework for responsive HTML emails

Quickly create responsive HTML emails that work on any device & client. Even Outlook.

Quickly create responsive HTML emails that work on any device & client. Even Outlook.

Ink is a fairly new framework from Zurb, who brought us the Foundation CSS framework, for creating responsive HTML emails.

It’s been a while since I’ve been asked to help put together an HTML email but as news of this new HTML email framework dropped into my inbox this morning I thought it would be useful to share it.

As anyone who has been charged with creating HTML emails, and told that they must look equally good in Google Mail, Outlook and any other client, will attest it’s not entirely straight-forward. Not least because, well, who wants to go back to using tables for layout?!

Newer versions of Outlook (2007 and 2010, I’m looking at you) don’t help either as they use… wait for it… Microsoft Word to render the HTML!?

I don’t have any need for creating HTML email at the moment, but this really looks interesting. I may just have a play with it one lunchtime.

Download Ink from Zurb

jQuery cycle plugin

Examples of jQuery cycle plugin options

Examples of jQuery cycle plugin options

Where would we be without jQuery, the JavaScript library that speeds up development no end?

I’ve recently been using the Bootstrap 2.3.2 CSS framework within our content management system, TerminalFour Site Manager and I ran into a number of issues with its built-in carousel.

The requirement we had was that the user should be allowed to choose however many carousel slides as she wanted: 1, 2, 5… 10? Which was fine, except that if we were to use the built-in Bootstrap carousel it uses very specific code which requires HTML5 data-* attributes and I didn’t fancy a) relying on the user to have to fill this in, or b) having to write some JavaScript or PHP to generate the code dynamically. Because I’m lazy like that!

So, I moved the carousel over to use a jQuery plugin that we’ve been using for a few years now: jQuery Cycle Plugin by malsup.

One of the things that I really like about this plugin is that it will create a carousel/cycle out of just about anything. For example, to create a simple carousel all you need is something as simple as:

<div class="slideshow">
  <img src="image-1.png" />
  <img src="image-2.png" />
  <img src="image-3.png" />
</div>

and then you call it from within your JavaScript like this:

$('.slideshow').cycle();

Brilliant!

If you want to add pagers, arrows or a variety of effects then jQuery Cycle Plugin will handle all of those to, dynamically creating the additional HTML to inject into your page much of which you have control of, such as class names which you can then use CSS to style.

We’ve found this to be a particularly useful plugin when using T4 Site Manager.

The plugin author has recently released a new version Cycle2 which I’ve still to check out, but if it’s anywhere as good as the first version then I imagine we’ll be moving to that in the not too distant future.

If you’re looking for a good, versatile carousel plugin then you can’t go far wrong adding this to your jQuery toolbox.

A scalable and modular approach to writing CSS

Scalable and Modular Architecture for CSS

Something that I’ve been keen to introduce to the web team for quite a while is a coding standard: a style guide, a consistent way for the whole team to write and format their code (whether HTML, CSS, JavaScript or PHP) and name their assets (documents, images, videos, etc.) so we spend less time trying to figure out what the last person did and more time being productive.

I actually started work on one after a meeting we had with a few developers and project managers back in October 2010 but I kept getting interrupted. I kept getting taken off ‘just writing documentation’ and put on other projects because they were seen as more important.

The importance of code conventions

Interestingly the last JavaScript Jabber podcast (#075) features a long conversation with Nicholas Zakas, author of Maintainable JavaScript, who talks about the importance of writing code that others can immediately understand and work with without needing to reformat or rewrite it.

The idea behind maintainable JavaScript. Or really maintainable anything is that somebody other than you has a fighting chance at maintaining it later on. […]

There are a few things that go along with that: […] When you look at the code it’s laid out nicely; you’re playing by the rules that have been set down at your company or on your team.

One of the biggest things that annoyed me in my career is that you go some place and you’d have five people on the team and they are all writing code slightly different. How many times have you ever opened up a file and before you did anything you’ve reset all of the formatting?

The discussion then moves on to the importance of code formatting issues. One of the co-hosts confesses that he has often become more incensed by co-workers using inconsistent formatting than by anything else because it adds needless extra mental effort.

Zakas agrees and refers to the work of Daniel Kahneman’s book Thinking, Fast and Slow explaining that our brains get used to particular patterns, and when you detect an anomaly in that patterns that you’re used to you switch into a different mode in your brain and that upsets you.

Zakas explains that when he worked as a consultant he used to go into companies to help them sort out their coding conventions:

I’m a very big believer in the broken windows theory where you need to do the small things right if you have any chance to get the big things right.

Jonathan Snook: SMACSS

One approach to organising CSS code that I’ve been investigating and trying out is SMACSS (scalable and modular architecture for CSS) which has been developed by Canadian developer Jonathan Snook.

In his book he talks about structuring your CSS not only in terms of how to organise the code but also the naming convention that he uses for classes and IDs.

What I’ve found immediately helpful, however, is the way that he categorises CSS rules into five groups:

  1. Base
    These are the defaults, usually single element selectors such as a, input or li.
  2. Layout
    These rules divide the page into sections.
  3. Modules
    These rules introduce reusable blocks, such as sidebar sections, product lists, carousels, tabs.
  4. State
    This was a new way of thinking for me, which I find particularly useful: how do things look in a particular state, e.g. when something is hidden or expanded, active or inactive. I especially like his class naming conventions for state which makes them readable, for example: .is-pressed, .is-disabled.
  5. Themes
    Themes are something that we use already on the University website: we often have a common core of page styles and elements but which are themed or skinned differently, for example compare Current Staff with Current Students.

I’ve used this approach in a few stylesheets now and the clarity it brings to organising my code has been very welcome. I’ve found myself asking “what is this to do with?” This is layout so the code needs to go in this section, that is a module so it needs to go into this other section. It has allowed me to offer a generic theme within the module itself, and over-rule it with a particular theme, if required. Very useful.

My next task is to explore Snook’s naming rules (he uses prefixes such as l- for layouts, is- for states) and compare it against the BEM (block-element-modifier) approach advocated by Yandex.

No doubt I will report back.

Check accessibility with HTML_CodeSniffer from Squiz

University homepage showing results of HTML Code Sniffer.

University homepage showing results of HTML Code Sniffer.

Last month we had a visit from web content management system company Squiz. The primary reason for their visit was to demo their CMS Matrix but one of the really cool and practical things they left us with was simply making us aware of HTML_CodeSniffer.

Written entirely in JavaScript HTML_CodeSniffer checks the source code of a web page and shows you where your code doesn’t meet a particular accessibility standard: it supports

(These pages give a very clear summary of the different standards.)

Install and use

It’s rather simple to install, simply visit the HTML_CodeSniffer website, then drag the bookmarklet to your bookmarks bar. (A bookmarklet is essentially a bookmark that contains JavaScript code rather than a web address.)

To use HTML_CodeSniffer visit the web page you want to test (it can be a local page as well as a standard, hosted page, which is useful) and click on your new bookmarklet.

Results

By default it appears to evaluate your site against the WCAG 2.0 AA standard:

CodeSniffer results

but you can easily change that using the drop-down in the top right corner:

CodeSniffer accessibility standard settings

What is particularly useful are the reports that HTML_CodeSniffer offers for any errors, warnings and notices that it discovers. Select which areas you want to see results for, using the blue toggle switches, then click View Report.

You are then presented with a paginated list of results:

CodeSniffer results

Clicking on a result gives you more specific details about the issue, including a code snippet, as well as—most helpfully—an animated, bouncing marker showing you where on the page the error or warning is referring:

Detailed results from CodeSniffer

The yellow marker beneath the search box (on the left) is showing what the warning is referring to.

I can certainly see HTML_CodeSniffer being a particularly useful tool while developing sites.

Find it on GitHub: HTML_CodeSniffer.

Saying goodbye to Internet Explorer 6

Today, Microsoft launched a big push aimed at “Moving the world off Internet Explorer 6”. IE6 Countdown aims to educate people about why they need to upgrade their browsers. The target is for IE6 to account for less than 1% of global share.

Web developers have long bemoaned the amount of work it takes to make modern-day websites work properly in IE6. It is a 10 year old browser — almost half as old as the web itself — but it is only in the past year or two that many web developers have begun to feel that it is reasonable to drop support for IE6.

Even so, even to have a website that does not work well for 1% of visitors may be deemed to be unacceptably high. While it is unreasonable to expect a website to work on a stone tablet as well as it does on an Apple iPad, if enough people are using certain software to surf the web — no matter how old it is — we need to make sure it works.

Worldwide usage of IE6

Internet Explorer 6 usage around the world In February 2011, 3.5% of UK users were using Internet Explorer 6. Worldwide, 12% of users still use this decade-old browser. Most staggeringly of all, over a third of web users in China are still using IE6.

It looks like Nordic sufers are particularly savvy. Norway and Finland are the only two countries coloured green on Microsoft’s map, signalling that they have gone below the target of 1%.

St Andrews poised to go green

I have just checked the statistics for visits to the University of St Andrews website, and the percentage of IE6 users stands at 1.01%. This is a tiny smidge above Microsoft’s target of 1%. While the UK is still painted blue on Microsoft’s map, it looks like the University of St Andrews will go green soon!

Although most pages on the University website should work adequately on IE6, we have begun to stop supporting IE6 for some of the fancier, newer designs. There comes a point where supporting IE6 just becomes a waste of time — time that we really don’t have.

Why upgrade?

IE6 was a revolutionary browser for its time. But that was ten years ago, which is an absolute eternity in terms of the web. Not only are IE6 users unable to visit many websites as the designers intended, the continued prevalence of this ancient browser is discouraging developers from innovating more — making all web users worse off. Using a 10 year old web browser is also seen as a security risk.

Microsoft have been criticised for being too slow to update their browser. It was five years until Internet Explorer 7 came out. In comparison, Mozilla are poised to release Firefox 4, two and a half years after Firefox 3 was launched. Google Chrome has reached version 10 just over two years after the first ever version.

Now even Microsoft finds the continued prevalence of IE6 to be an embarrassment. Today, Microsoft are playing catch-up with other browser vendors, but have made great leaps to improve their browser in recent years.

As such, we fully support all initiatives to encourage users to upgrade from IE6. If you still use IE6, please upgrade to the latest version of Internet Explorer.

Better still, you could opt to switch to a different browser altogether. The future version of Internet Explorer — IE9 — is a vast improvement, but is still not perfect. Only today, I worked on some new code that works perfectly in every other major browser, but does not work in IE9 due to its relatively poor support of CSS3.

If you have held off before, I can promise you that switching browsers it is rather pain-free. You will probably end up being much happier with your browsing experiences.

I suggest you consider the following browsers:

Printing out webpages

Did you know that all University webpages print out in a print-friendly format automatically? From time to time we are asked if we can add ‘print-friendly’ pages to the website. But this functionality has always been on the website, using a technique that is over a decade old.

In modern web design, the visual look and feel of a webpage (determined by cascading style sheets or CSS) is kept separate from the structure and the content (built using HTML). This provides a great deal of flexibility, allowing us to present the same document in different formats without the need to maintain multiple separate webpages.

When you view a webpage in your web browser on a desktop computer (and, increasingly, a mobile phone), you will typically be presented with the webpage with a CSS style designed for screen media. This allows us to show off a bit and use the freedom of the screen to the full to create the rich, interactive webpages we are all familiar with.

A style sheet designed for print media can remove many of the elements of a webpage that just don’t make sense on a printout. So most colour is removed and all text is displayed as black on white, saving on ink. Navigation menus are removed because the clickable printout still hasn’t been invented yet. And in place of hyperlinks in the main content area, we display the URLs of all links so that you don’t have to refer back to the webpage to work out what the link is to.

What you have left is a clean, streamlined document that can be printed off perfectly — almost as though it was never a webpage in the first place. And we didn’t need to create a ‘print friendly’ version — it was generated automatically.

We are planning on publicising this feature more in the future, as it seems that many are still unaware of it, even though it has been a standard web technique for some time now.

Using Yahoo! Pipes to filter an RSS feed

Pipes

I’m currently working on a redesign of the University’s research homepage which involves a requirement to pull in three RSS feeds:

  1. Recent research outputs (from the PURE research portal, which hasn’t gone public yet)
  2. Recent research activities (from the PURE research portal)
  3. Research news (from the main University news page. But this third feed needs to pull in only those stories that are related to research.)

Using PHP SimpleXML

I’m using the PHP SimpleXML extension to pull in the news feeds, extract the data that I want and then output it onto the Web page.  For the first two feeds that was simple, I created a PHP function to which I would pass two parameters, the URL and the number of posts I wanted to display on the page:

getNews($url, $postsRequired)

As the name suggests SimpleXML was very easy to use. SimpleXML converts the XML document into an object which you can then iterate through like a collection of arrays and objects.  It’s great if you already know the structure of the XML document (which we do because a) it follows the RSS 2.0 standard and b) we generated it).

So to load  a new XML document you use the simplexml_load_file() function:

$feed = simplexml_load_file('http://www.st-andrews.ac.uk/rss/news/index.xml');

And you then gain access to the different elements as you would using ordinary object properties. So for an RSS 2.0 file which contains this data:

<rss version="2.0">
  <channel>
      <title>News feed from The University of St Andrews</title>
      <link>http://www.st-andrews.ac.uk/rss/news/index.xml</link>
      ...

I could use this code to grab the feed title and URL:

$feedTitle = $feed->channel->title; // get name of RSS feed
$feedURL = $feed->channel->link;    // get URL of RSS feed

In this case $feedTitle would equal “News feed from The University of St Andrews” and $feedURL would equal “http://www.st-andrews.ac.uk/rss/news/index.xml&#8221;.

But I only want Research news

The third feed required a bit of thinking because I don’t want to simply pull in all the latest news, I only want the latest news articles that relate to research.

To help us the RSS specification allows content creators to add any number (zero or more) of <category> tags to each news item, e.g.

<category>News</category>
<category>Research</category>

When a content creator adds a new news item to our content management system they have an option of selecting a category from a drop-down list; this populates a category tag in the RSS feed.

I realised that I then had two options:

  1. I could write into my PHP code a script that would filter out any posts that were not tagged with the Research category.
  2. Use an external, third-party application to do this for me.

Yahoo! Pipes

In the end I opted for Yahoo! Pipes simply because it was much quicker to have Pipes filter the news RSS feed for me than it was for me to write a PHP parser to do the same.  (“I’m a PHP coder of very little brain”, as Winnie the Pooh might say!)

But I then realised that an attractive side-effect of this was that I then had a new RSS feed that not only I could use but that other users could subscribe to it as well.

Screenshot of Yahoo! Pipes fetching an XML feed, filtering it and then outputing the results

Screenshot of Yahoo! Pipes fetching an XML feed, filtering it and then outputing the results

Yahoo! Pipes was really simple to use and the feed filter took less than a minute to set up.  It just involved three stages:

  1. Fetch the feed.
  2. Filter the feed, permitting only items that matched the rules I set.
  3. Output the results.