2xp is een modern company, that needed a modern website. Video is the principal subject.
To build this website, I used the latest technologies: HTML5, CSS3, and JavaScript. Everything is animated, without the need of the—currently quite aged—Flash plugin. Video is played by the browser though HTML5 video, but older browsers can still see the video via the Flash-plugin.
Video
Video on the web is nothing special anymore. Sites like Youtube and Vimeo are immensely popular. Because 2xp is all about video, that had to be something special. That's why I created—for the first time in the history of the web—a videoplayer with ambilight. Completely with new technologies like HTML5 video and HTML5 canvas. I got inspired when I saw this. This makes watching a video on 2xp.nl something special. Lights out, ambilight on!
Customers
At 2xp, a lot of the communication goes via the internet, and 2xp.nl is an important part of that. Customers can log in on a special personal page. Concept videos can be placed there for example, but also other files.
Important things first
It is important to know how a person filters information. When you visit a page, you must immediately be able to see what it is about. That helps you determine whether the page contains the information you were looking for, and optionally continue reading. When surfing, you often do not stay on a website for more than a few seconds. So in those few seconds, you have to tell what's important, to draw the attention. It's not hard to find out how that works. Watch what happens.
When you see the site for the first millisecond, a few things draw your attention.
The first thing is the logo, which you are able to see immediately.
Then there is a big title beneath the logo, and something barely visible (thus unimportant) below that.
The coloured surfaces also draw your attention, because of the large contrast with the rest of the page.
So the first thing you really see, is the logo.
Only a fraction of a second later, when you realise what is happening,
the title becomes clearer. Because it's big, you can read it immediately.
And the title says what 2xp does in one sentence. In one second you see what 2xp does,
and you can decide whether this is the information you need. It also becomes clear that the
rest of the page is filled with text, the coloured surfaces too.
They still draw your attention, but you can't read anything yet.
So the second thing you see, is the title.
Some time later, when your first impression has already been made, you slowly begin to realise
what kind of page you are visiting. The subtitle becomes readable.
The subtitle gives important secondary information, and helps you determine the content of the page.
The text in the coloured surfaces also becomes readable. It turns out to be the navigation,
and gives an idea of what's on the site this way.
So the third thing you see, are the subtitle and navigation.
Finally the rest of the page becomes visible. By now, you already decided wether you want to continue reading, or not.
If yes, you can go ahead. The frontpage which you landed on gives a description of what 2xp does.
The title and subtitle are really a summary of the rest of the page. After that, you can browse
the rest of the site—if you have become interested.
So the last thing you see, is the content of the page.
2xp.nl
November 2010
Technologies
- XHTML5
- CSS3
- XML
- AJAX
- JSON
- PHP
- URL-rewriting
- JavaScript
- HTML5 video
- HTML5 audio
- HTML5 canvas
- HTML5 history
