- See all our web design articles here
Multeor is a multiplayer web game developed by Arjen de Vries and Filidor Wiese and designed by Arthur van 't Hoog. The idea of the game is to control a meteor crashing into earth. You score points by ensuring you leave the biggest trail of destruction. Up to eight players can connect to a single game simultaneously.
Rather than using one of the many game libraries, Wiese built entirely from stratch. "We decided not to use a prefab game engine," he says, "which means rendering the graphics, detecting collisions, keeping track of entities and coding a particle system for the explosions. Not depending on a specific game engine was great fun: it gave us a lot of creative freedom and we definitely learned a lot because of it."
"We wanted a responsive site showing a heatmap of crime density and type for the month chosen on a slider. The heatmap, street map and location search were built using the Google Maps API v3," say Cyber- Duck devs Alex Miller and Gareth Drew.
03. Philippa Gregory
Second up is the website for international author Philippa Gregory, who wanted a website to launch alongside the new BBC One series The White Queen, which is based on her novels.
"The analytics from her previous website showed us that the split between devices was around 40 per cent tablet/mobile and 60 per cent desktop," says Adam Gatenby, head of digital at agency behind the site, Better. "Using responsive web design was part of the solution to address this issue."
"As the site developed, we had an issue with the weight of some pages, so I built a loading screen – using window.onload/setTimeout event – that hid away any tricky layout problems until we ready to reveal them."
Dickie also utilised some plug-ins to save time. "I used bxSlider for the carousel in the footer. This was a decision principally made for expediency, but this particular plug-in was chosen as it was flexible enough to re-skin for the varying responsive views."
05. Here Is Today
Here is Today was created by designer Luke Twyman. He explains the motive behind the site: "Being fascinated by the scale of time, I wanted to create something that would clearly give people a sense of that vastness, and a feeling of where we sit in relation to all that's gone before. To do this, two important features on the technical side would be some kind of zooming/scaling mechanic, and also a super clean layout."
Twyman kept all widths relative to make the site's message convey equally well on a smaller screen: "From the start I decided to do away with pixel measurements and pt sizes for type, and instead set my own measurement unit based on a fraction of the screen width. I set one unit to be 1/22 of the screen width and positioned and scaled everything using that unit, so the spacious layout would be maintained on different displays."
Tweetmap by Pete Smart and Rob Hawkes represents countries in the world proportionally based on numbers of tweets. Hawkes explains, "Tweetmap brings together lots of clever technologies, including TopoJSON, D3.js, Node.js, PhantomJS, and an algorithm to construct contiguous cartograms in real-time.
"We chose Node.js to power the server side of things as it's quick, flexible and we already had experience using it to scrape tweets. For rendering and animating the map (in TopoJSON format) on the client we use D3, which is a fantastic library for data visualisation. Specifically, we extensively used the geo module, which allows you to do some complex geographic calculations and conversions."
To prevent performance problems in the browser, Smart and Hawkes use D3.js on the server to render countries and generate contiguous cartograms. "However, we actually run it on the server using PhantomJS (a 'headless' WebKit rendering engine) and transmit the maps back to the client," says Hawkes. This prevents the performance hit experienced when generating the cartograms on the client. "The browser locked up for four seconds," explains Hawkes.
07. The Trip
08. Si Digital
"To achieve this effect I used jQuery .animate(), using its step() option to work out where the liquid was in the tube - and if it needed to activate any other animations on its journey," says Crooks. He adds, "Everybody reads at different paces, so we tried to find the right balance for the liquid speed. However, if it's too fast for the user, it [the animation] will always wait at the next stage for them to scroll down.
Pointing the way
"To 'open' new stages for the liquid to flow through I used the jQuery Waypoints plug-in," says Crooks, "which was also used to trigger the text fading in, and other various loading/waiting animations so users that skip ahead still get a great experience."
The interactive timeline on the team page, which enables users to drag with their mouse to see some of the company's past work and events, makes use of jQuery UI. "The team page has a timeline to highlight Si digital milestones and events, pulling in our social media accounts ranging from Twitter updates to Dribbble uploads," Crooks explains. "The timeline is generated entirely dynamically based on a database of our events loaded via Ajax. The primary way to navigate the timeline is by dragging with the mouse (using jQuery UI draggable), but keyboard navigation is also included."
09. Jean Helfenstein
Developer Jean Helfenstein's personal site features an eye-catching canvas animation on the homepage. "I really had fun with the backgrounds," says Helfenstein. "I always love to experiment with new technology, so I decided to use my landing page as my playground and mess around with three.js and the canvas element.
"The idea was to create a site that follows the current minimalist design trend [but adds] something fresh. To achieve that, I decided to use click-and-drag navigation rather than the usual left/right arrows. With mobile devices becoming more popular, I feel that people are starting to be familiar with this type of interaction."
Everything about the site is impressive, including the subtle animations between pages - and in particular, the way you can drag between projects on the 'Playground' page. It's a brilliant showcase of what can be achieved with some of the newer technologies we have available.
10. Nick Jones
11. KIKK Festival
A common trend is to use HTML5 pushState to allow the user to go back and forward between transitions. "The page transition is visually the most interesting feature," reckons Daubrez. "It's been composed with a dynamic URL rewriting using the history.pushState feature, so it gives the impression of travelling in an horizontal single page."
Dog Studio made full use of some quirky jQuery plug-ins to produce the falling feather effect: "For that we simply used a Snowfall jQuery plug-in we modified to give the feather rotation effect, and get more control over the number of items and their speed. Those three main directions really make us think we managed to get a unique experience."
MapsTD is a tower defence game, but with a difference. You tell it where your home is, and through the power of Google Maps, it will produce a game in which you're defending your hometown, with the baddies relentlessly charging past the streets and houses of your neighbourhood.
As the game progresses, more enemies (or 'creeps' as he has called them) appear on screen. Barclay found himself battling to keep performance high and timings correct: "One of the biggest challenges – one that still isn't quite right - was the timing. Firstly, if the page isn't active, most browsers reduce how often they check if timeouts have reached the end, resulting in creeps moving in bursts rather than moving steadily. I ended up fixing that by pausing the game when the tab loses focus. The detection code was taken from David Walsh's blog and is in the game credits.
"The other problem was that as you progressed, there were too many things happening, which resulted in the game slowing down a lot. The workaround ended up being to use harder creeps rather than more of them, and making the game incrementally more difficult each level after level 50."
This is an amazing example of how powerful today's tools are. Aditya Ravi Shankar has used them to create an online version of classic real-time strategy game Command and Conquer.
Recreating the original 1995 game was a long and painstaking process, says Shankar. "Every little thing took time - things like selecting single units or multiple units; being able to select by drawing the box from left to right or from right to left; making sure the panning was smooth; figuring out a decent fog of war implementation; allowing for building construction, dependencies (the Power Plant is needed for the Refinery, which is needed for the Factory) and building placement (buildings cannot be constructed on top of other buildings); and depth sorting when drawing so units could move behind buildings and trees."
14. Glimpse Catalogs
Page turn effect
Khandelwal also describes the usage of Turn.js. "While developing magazine-style catalogues, we used Turn.js - an open source jQuery plug-in flexible enough to be adapted to our needs. We also liked that it was managing the page turn effect entirely with DOM elements."
"Both of these together helped create an HTML5 magazine with interactive markup. It also gave us a great deal of satisfaction to contribute some of our code back to the developer community."
15. Chrome Web Lab
Red Bull is the energy drink that keeps fingers moving during late-night coding sessions: couple it with music and you have an awesome setting for code cranking. Looks like Red Bull gets this: its Red Bull Music Academy Radio brings kickass beats to your browser.
RBMA Radio is all about standards, and using Modernizr helps it get there. From a feature-detection perspective, Modernizr continues to be the best choice for enabling you to leverage new HTML5 and CSS3 features in a cross-browser manner, and the fact that it's continuously updated ensures that as new features come out, you can scale your code to handle them.
"We're exploring the human experience of vertical living in global suburbs over several years using many kinds of platforms," explains director Katerina Cizek. "In One Millionth Tower I was interested in harnessing the imagination of the people who live inside to re-envision the bleak spaces around the buildings.
"The other problem the project faced came when creative technologist Mike Robbins brought in the idea of putting a story about space into 3D space, so it became a story about transforming the physical world, by transforming the virtual world."
What got me excited about this site was that it both lives and breathes, a lot like the web - if it's actually raining in the Toronto Highrise, it's also raining in One Millionth Tower. If you've ever used weather APIs, you'll know this isn't a technically difficult feat, but integrating it into virtual landscapes is something I haven't seen done until now.
One of the core tools that made One Millionth Tower possible was Popcorn.js - a library by Mozilla featuring some work by Boston-based hack loft Bocoup. Popcorn helps link real-time social media, news feeds and other content directly into online video in real-time, enabling developers to easily create rich, interactive experiences that go beyond traditional static video on the web. Three.js was also used to help implement the 3D world around the high-rise neighborhood.
18. Nouvelle Vague
It took three people about four months to create, says Ultranoir's JB Grasset. "We were very interested in all the WebGL experiments running on the web and became convinced that Ultranoir had to try something with this new technology. The Ro.me project (ro.me) really astonished the whole team, so we decided to produce our own experience.
"The basic idea was to exploit the atmosphere we created for the Ultranoir V3 video introduction. It was produced with 3D tools and we wanted to make it interactive.
19. The Convergence
Cynics may say HTML5 is still playing catch-up to Flash in the gaming world, but it's finally getting closer to matching the smooth, arcade experiences gamers have been desperately pleading for.
While not without its flaws, The Convergence is a great proof of concept game implementation. If you enjoy playing it, you can look forward to more features in the future including extra levels and a particularly important addition - HTML5 audio.
I'd also be interested to see some support for the Web Joystick/Gamepad API Mozilla have been showing off lately; it's bound to make games like this even more entertaining!
Carrying all my books in a slim, lightweight tablet is amazing. So when Amazon announced its new web-based Kindle Cloud Reader, I was thrilled the convenience level had been pushed up several notches.
For example, the team leveraged Kelvin Luck's jScrollPane plug-in to provide CSS skinning of scrollbars to match their UI. And continuing the consistent UI theme, the jQuery Templates plug-in was used for building and rendering standard templates of data.
Amazon also elected to use WebSQL for offline support. While not the W3C standard, this web database implementation seems to have provided the team with an interim solution until IndexedDB is more widely used and implemented.
Being an avid Kindle fan, it's really exciting to see what Amazon has built and that it was able to do so using standard web technologies.