New Museums and Collections website

I say “new”, but the Museums and Collections website actually launched a good few months ago now. But I have been so busy over the summer that I haven’t got round to writing about it, until now.

I recall that the very first meeting I had when I began working here two years ago was about the Museum Collections Unit’s web presence. The ultimate result was this new website, which we worked on during the spring and summer.

Screenshot of the MUSA homepage

The visual design was created by Steve Evans, the Web Manager. It was then passed on to me to build within our content management system, TerminalFour Site Manager.

It is a fairly complex website, and definitely the most challenging project I have worked on. I really enjoyed stretching my limits and working with T4 Site Manager in new ways.

Creating the homepage

My first task was to create the ‘four panels’ page, as I called it. This is the overarching Museums and Collections homepage, which links through to the individual websites for each of the four museums. Each museum is represented by a square, which expands to reveal more information when the user hovers over it.

Screenshot of the Museums and Collections homepage

This uses JavaScript, which has not been a particular strong point of mine in the past. But I am beginning to wonder if that has changed, because I surprised myself when I managed to achieve this result quite quickly.

Personally speaking, this is not the sort of design I would normally opt for. But in the end I think it has turned out quite well and feedback from others has been positive.

Building the website in T4 Site Manager

The five websites themselves all share the same basic building blocks, but are subtly given unique identities. For this, I had to be quite creative in the way I built the website in T4 Site Manager, in order to avoid unnecessary duplication. I did not want to create several styles (which can be a pain to maintain in the long run) and templates that all looked almost but not quite the same.

This meant creating lots of navigation objects and ‘related’ sections instead. This is one of the trickiest parts to get right. It is a jigsaw puzzle with lots of different potential solutions, but each with their own little pros and cons. So it takes some careful thought. But it’s easily worth it for the long-run benefits it brings in terms of ease of maintenance.

A bit of creativity in using existing navigation objects was also required to give each museum’s website its unique identity. This allowed me to use the same style (page layout) for each website, while still being able to assign different CSS stylesheets to each website’s homepage, and separate stylesheets again for the lower level pages. This is what enables each website to have its own colour scheme, yet still all use the same style.

Screenshots of three Museums and Collections websites

Other interesting bits

While working on this website, I also used the Google Maps API v3 for the first time for the maps on the visitor information pages. As far as I know, it is the only part of the University website that uses this newest version of the Google Maps API.

I was surprised to find it pleasingly easy to work with, and I think it provides a smoother user experience than version 2. The newer version is designed to work better on mobile devices too.

Another interesting part of the website is the virtual tour of MUSA’s Learning Loft. This was another first for me, working with Flash as well as JavaScript (normally we only use Flash for videos). But again this turned out to be reasonably straightforward in the end, and looks really good on the webpage.

Visual design

Initially the Museums and Collections website was going to be a more conventional affair. But Steve was inspired to create something more striking after seeing some of MUSA’s physical promotional material. Steve’s decision led to him creating a brilliant design. The Museums and Collections webpages are now, in my view, some of the very best looking pages on the University website.

On reflection, the decision to go with an image-heavy design makes perfect sense for a Museums and Collections unit that can draw on 600 years of history for its visuals. There are some fantastic images of some of the objects in the collections, which helps make these webpages particularly appealing to look at.

Summary

The new Museums and Collections website was a brilliant project to work on. It threw all sorts of challenges at me, but this was a great opportunity to learn. It took a while to get it right, but I think the result is a really eye-catching website.

What developers think of Internet Explorer

I like this self-deprecating advert from Microsoft about Internet Explorer 9.

Only today I was thinking how refreshing it is that I now don’t have to worry too much about testing webpages in Internet Explorer 9. Everything just works now.

Sure, it doesn’t have the same level of support for HTML5 and CSS3 that Chrome, Firefox and Opera have but it does the basics really well and doesn’t have the same weird quirks that IE7 and IE8 have that require obscure hacks and workarounds.

Besides, at the moment all the major browsers have varying levels of support for these new Web standards-in-the-making. That’s why we’ve got tools like Modernizr.

Let’s hope that Internet Explorer’s support of Web standards grows from strength to strength.

Either that or they see sense and move to using the WebKit rendering engine! 😉

My favourite Web developer add-ons for Firefox

Mozilla released Firefox 4.0 on Tuesday—it has already been downloaded 16,041,437 times; that’s about 92 downloads a second!— and there is a lot to commend it for: a clean look, that’s not too far away from both Google Chrome and Internet Explorer 9 and it’s much faster too.

While I use Google Chrome for most of my day-to-day browsing I still use Firefox for Web development, largely thanks to the number of mature add-ons available for it. These are my favourites:

1. Firebug

20110324-firefox4-firebug

Firebug is the number one reason that I use Firefox. Sure, Chrome and Internet Explorer have their own Web developer tools but none of them come close to Firebug for its awesomeness.

That said, I recently tried out Opera Dragonfly and I was really impressed.

2. Web Developer

20110324-firefox4-webdeveloper

A close second is Chris Penderick’s Web Developer toolbar that adds all sorts of useful tools to Firefox: disable CSS, outline headings and tables on the page, show HTML classes and IDs, show image sizes as overlays on the images. Brilliant!

3. ColorZilla

20110324-firefox4-colorzilla

The most useful feature of ColorZilla for me is the eyedropper tool that allows me to sample a colour on a Web page and find out the RGB or HEX value for it.

4. HTML Validator

20110324-firefox4-htmlvalidator

HTML Validator does exactly what it suggests that it does: it shows HTML validation information in the Firefox add-on bar (what used to be the status bar) at the foot of the browser viewport.

It’s very useful for at-a-glance error checking; obviously, recognising that HTML validation is an ideal and a guide rather than a hard-and-fast rule.

5. Wappalyzer

20110324-firefox4-wappalyzer

Wappalyzer is a new add-on for me that adds to Firefox the functionality that I’ve been enjoying with the Chrome Sniffer extension in Google Chrome.

It shows you in the AwesomeBar what technologies are being used, e.g. JavaScript framework, server type, content management system, web statistics, etc.

6. RSS Icon in Awesombar

20110324-firefox4-rssiconinawesomebar

For some unfathomable reason Mozilla has removed the RSS icon that appears in the AwesomeBar when you visit a page that has an RSS autodiscovery tag, such as the University homepage.

That’s where RSS Icon in Awesombar (sic) comes in. It… well, puts an RSS icon in the AwesomeBar.

7. Tab Mix Plus

20110324-firefox4-tabmixplus

There are some options within Firefox that I still cannot believe are missing. There is still no way to, by default, open your homepage when you open a new tab.

Tab Mix Plus allows you to set this option—and a whole lot more, like being able to duplicate existing tabs, or protect or lock tabs so that you don’t accidentally close them.

Over to you…

What are your favourite Firefox add-ons, for Web development or otherwise?

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:

Window sizes and the fold

It can be difficult to design a webpage. Sure, there is a great deal of freedom. You are not limited by, say, the size of a piece of paper.

But there is, of course, a limit to what you can reasonably do with a webpage. One potential constraint is the size of a browser window. As monitors have increased in size over time, webpages have gradually become wider in order to fully use the available space.

Sometimes a web developer will be asked to optimise a webpage so that it looks perfect on a client’s setup, but not necessarily anyone else’s setup. While it may be common for something to be displayed at the bottom of a page on a physical publication, it is impossible to guess where the bottom of a monitor will be when designing a webpage.

Estimating browser sizes

There is not one set browser window size. While the vast majority of visitors use a display that is at least 1024 pixels wide, a handful are still using a display that is 800 pixels wide or smaller. Even then, there is nothing to say that the user has their browser window maximised! In essence, a user can be peering through a window as small or large as you can imagine.

Screenshot of the University of St Andrews website and browser sizes

To help us out, Google have a useful tool called Google Browser Size. This is probably familiar to those whose work focusses on the web. But it may be useful to other content creators and website maintainers to see this in action.

Google Browser Size shows you an estimate of the browser window sizes of web users. It displays this data like a map with contours, which is then overlayed onto your webpage. As you can see, 80-90% of users can comfortably view the full width of the University website.

What about the ‘fold’?

Where is the ‘fold’? Almost everyone has to scroll to view all of the content on a normal webpage. But when does this begin to matter? At the 80% mark, where horizontal scrolling stops? The 50% mark?

It is impossible to say. The truth is that web content should be accessible to all users. If the motivation is to stop people from having to scroll, arbitrarily selecting a percentage of people who must scroll is not good enough.

But we needn’t worry about squishing up our webpages so that no-one has to scroll. The fact is that scrolling is okay. We all do it. The fold is largely a myth.

Don’t worry about where the fold is. Of course, what appears at the top of a page is important. But cramming everything up there will overwhelm users. They would prefer to scroll. Just lay out your page so that it entices your users to read on.

Designing with all users in mind

The evolution of browser window sizes is one of those challenges that can make web design a tricky job. Just as developers have become accustomed to designing for monitors at least 1024px wide, the mobile web is ensuring that we must always keep smaller displays in mind too.

The beauty of the web is that there is great freedom. We really don’t have to worry about concepts like the fold. The trick is to embrace this freedom while exercising restraint.