Scorigami

[Scorigami] is the art of building final scores that have never happened before in NFL history. Due to the unique nature of how points are scored in (American) Football, where it is impossible to score 1 point on its own, as well as the rarity of the 2 point safety and 8 point touchdown and 2 point conversion, there are a lot of scores that are possible, but have never happened.

American Football can be such an absorbing sport to watch in part because the scoring system often results in tight finishes, influencing the tactics a team will employ whether they are defending a lead or trying to make up a deficit. It never occurred to me that this scoring system means that some scores are almost impossible, such as a 4-4 tie. Scorigiami is the name for a score that has never previously happened and a visualisation of every score that has happened so far. Unfortunately the Eagles losing 42-0 is not one of those impossible scores.

A history of pizza

Hastily summoned to prepare some local specialities for the queen, the pizzaiolo Raffaele Esposito cooked three sorts of pizza: one with lard, caciocavallo and basil; another with cecenielli; and a third with tomatoes, mozzarella and basil. The queen was delighted. Her favourite – the last of the three – was christened pizza margherita in her honour.

My favourite thing I learned this week was from A History of Pizza. I would have guessed that pizza started off as food for those living in poverty, but I never knew that it only gained popularity throughout Italy, and then the world, after a tomato, mozzarella and basil topped pizza was served to Queen Margherita.

Flash is responsible for the Internet’s most creative era

Vice Magazine have an interview with Rob Ford of FWA about his new book that documents how web-design trends have changed. Vice make a case for the early 2000s being the sweet spot for web-design and especially the use of Flash as a tool for pushing the boundaries for what was possible.

[Web Design: The Evolution of the Digital World 1990-Today] makes a compelling case through its general structure that the sweet spot of creative web design came during the late 1990s through the mid-2000s—periods in which major brands were willing to invest a whole lot of money in a website intended for show, not just tell.

For me this era was always one of style over substance; sites took so long to load, were difficult to use and were often totally inaccessible. I don’t think the death of Flash was why this era of design ended, but rather that the web grew up. The tools we have now allow for more complex animations but the focus is elsewhere. Content, usability and high conversion rates are king, and the fact that attention spans are measure in milliseconds means we can’t afford to make users wait to access our content or storefront. Still, that intro by TokyoPlastic is very hard to beat.

Next stop, Tokyo

A massive change in my life that I have been preparing for for some time is drawing very close – today is my last day in charge of the technical team at Outside Line. I’ve been Technical Lead at Outside Line for over two years, and have been fortunate to work with some of the most talented and creative designers and developers you are ever likely to meet – we’ve put together some brilliant websites in that time, and I am really proud of the work I’ve been a part of.

Next week my girlfriend and I will be fulfilling an ambition that we’ve had since we first travelled to the country by packing our bags and moving to Tokyo, Japan. After visiting the country in 2008 and falling in love with the sights, sounds and smells, we have both been desperate to spend more time there. I will be taking up the role of UX Designer with Cirius, where I will be helping to develop and extend their products in the international market. I’m really looking forward to working with some very talented people in a fresh, agile environment, and all within a city as vibrant and exciting as Tokyo. See you all on the other side.

Exploding the myths of web design: Only use web fonts

This is a reproduction of a boxout written for the ‘Exploding the myths of web design’ feature in .Net magazine, issue 189.

Have you ever been handed a design for a website and wondered what font the designer has used for the body copy? Because I can honestly say I never have, and this certainly isn’t down to web designers having a love for Georgia and Arial. Instead, it’s down to a common misconception that the only fonts that can be rendered in a browser are the old ‘favourites’. The thing is, a modern web browser is perfectly capable of rendering any font that a user has installed, and because of the popularity of particular software packages, the list of relatively commonplace fonts includes some beauties.

On 24 Ways, Richard Rutter showed that if you take into account fonts installed by Windows and Mac OS X along with those from Microsoft Office and Adobe’s Creative Suite, the resulting list includes some rather lovely serif and san-serif fonts that a designer can use to bolster their designs. With some carefully selected fall-backs, there’s no reason why a good developer can’t provide users with Caslon or Jenson in place of Georgia, or Helvetica Neue in place of Arial. By using the CSS font-weight property, you can even use differing weights to further enhance your work.

Most websites are launched to a specific audience or demographic, and if they aren’t then your marketing team is missing a trick. If you have a good idea who will be looking at your site, it’s then easy to treat them to some nicer typography. For example, Panic achieves this on the company’s website for FTP client Coda by using Helvetica Neue Light, after surmising that the majority of visitors will be Mac OS X users, who have the font installed on their system by default. Even if you don’t have such a targeted audience, you can still play the percentage game, and in doing so, you can at least treat a portion of your visitors to a more refined, unique look. Call it typographic progressive enhancement!

Branding the London 2012 Olympics

The logo for the 2012 Olympic games was yesterday unveiled on the London 2012 website. Wolf Olins, the firm tasked with creating the branding, have avoided any kind of cliche, (I was thinking the Thames, London Eye or Big Ben would feature prominently), and instead have opted for a new-rave/eighties themed device that looks to be focused more on it’s ability to be co-branded than as a stand alone logo or mark.

Bryan Bedell of Coudal has written a fantastic piece on the inevitable furore that has erupted from the usual short-sighted media outlets. While I think it may be dated by the start of the event, I agree with almost every other point and especially with regard to complaints about the pricing – the fact that every tabloid in the country is questioning the cost of the design without understanding the processes involved is disgusting, ill-informed and exactly the cause of much of the poor, generic and uninspiring design of recent times.

Skip past content, not to it

This is a reproduction of an article written for the inaugural Cimex magazine in July 2006.

The separation of a web site into structural, presentational and behavioural layers is the key to making a usable, accessible and future proof web site, and the fact that CSS and unobtrusive Javascript allow us as developers to do this has been a major factor in the uptake of web standards. The reason this separation is so important lies in how it allows so many devices to access your data in so many ways. Mobile phones see a different version of your site to Safari, which sees a different version to JAWS yet all access the same mark-up and the same URL. Maintaining this separation intelligently is the key to allowing as many users as possible to access to your data using any means they want.

Many web developers are still falling quite short of this separation, not because they are using tables for layout, inline styling or obtrusive javascript but because they are ordering their mark-up not by how it is used but how they want it to appear. The structural layer of a web site should focus on enriching your content semantically to provide a user with the content they need in the most accessible way possible. This doesn’t just mean using suitable heading hierarchies, lists and labels but also ordering your content properly to provide suitable focus to the most important parts of the page.

Users who visit sites with devices that support limited or no CSS, or with devices that do not display your content visually will not see your content in the organised columns and colours that the majority do – they will be browsing your site in a single column ordered as your mark-up is. This often means they first receive a long list of nav items, logos and introductory paragraphs when what they really want is the latest article, train time or number of goals Thierry has scored today.

There seems to be a growing trend for developers to include ‘skip to content’ links as a solution to this problem. These links bypass the nav and header elements and move the user straight to the content, but users still have to move around a page instead of being served what they want straight away. This technique also fails to account for other ways in which your data is accessed; search engines indexing your pages may rank prevalent content more highly for example, and they won’t use skip links to pursue the content you deem most important on the page. Although I am not an SEO expert I can’t believe that important, relevant elements at the top of a page won’t have more influence on a search engine in how it interprets the meaning of your site.

There are plenty of CSS techniques that can be used to separate your page structure from appearance—the excellent methods explained at Position Is Everything for creating columns in any order on the canvas, for example. Just remember that the most important column is the one containing what the users came for.

The dangers of customisation

In the past few years emerging techniques have allowed web site creators to customise their user’s browsing environment to an increasing extent. Cascading style-sheets have allowed authors to modify form elements and scroll-bars to more closely match the aesthetics of their sites, javascript can be used to alter window size and shape and the behaviour of toolbars, browser buttons and mouse actions.

This amount of control is embraced by traditional designers who enjoy maintaining strict control over every facet of their work, and who in the past have struggled with the unpredictable nature of the Internet as a medium of design, but many web developers are wary of the damage this customisation could be doing for the user experience and the effect it could have on how web sites are currently being used. Is there a point at which you can ‘design’ and control too much of the users browsing environment?

Before the growth of the Internet, users would generally only be exposed to user interface elements that followed their platform developer’s Human Interface Guidelines. These guidelines regulate the behaviour of widgets, buttons, mouse clicks and other interactive elements to achieve a level of consistency across applications, allowing a user to become familiar and efficient when using their computer.

With the growth in usage of the Internet, and web sites that do not follow such specific guidelines, it is important to achieve as much consistency with a users native platform as possible, so that familiar interfaces are present where possible, especially for the more important tasks such as inputting data and navigating information. While it is always important to create a tight and integrated visual style when designing for the web, (or any interactive medium), the demands of the user that the interaction can occur easily and efficiently are equally important. With regards to specific elements or behaviour on the web, the user will have more experience with the elements and behaviour of their own operating system than with your site specific customised controls and mouse actions. If you want them to interact with your site more efficiently, it may be wise to let them use what they know.