Windows 8 inspired website

Download the zip here

Working in New Biz

As I work in Red Gate’s new business division much of what we do isn’t very visible. So along with Marine Barbaroux I decided to try to create an engaging website to capture what we’re doing in an easy to digest way.

The idea is to create a website that can be used by everybody in Red Gate to get a picture of what we’re doing on a day-to-day basis. It isn’t quite there yet but I thought I’d share the work so far so that anybody can play with it.

How it works

The website is run entirely in javascript and makes use of jquery so should be hostable on whatever web server you have lying around. The main index.htm page reads a data page html and uses the

data inside to construct the pages and segments on the fly. The reader can then browse around the various pages reading all the updates.

image_thumb.png

A sample “empty” page

The segments are arranged in 3 columns and 3 rows, each being a known size. Each segment can span half to 3 columns and 1 to 3 rows. The smallest segment being a perfect square of 175px which looks really nice with just a simple image on it.

Have a play

Please feel free to download the source code for the update pages and have a play with it. I’ve tried to go through and comment the code so hopefully it should make sense.

Things to do

There are still quite a few refinements I’d like to make which I will probably do over time if it takes off. These are (in no particular order)

  1. Back from sub-page goes to referring page
  2. Clean up carousel – probably re-implement.
  3. Allow swipe to work on iPad etc (did try it but couldn’t get it to work)
  4. Similarly allow mouse drag to shift pages
  5. Also allow keyboard to work left + right
  6. Back button via pushing history on stack or clever stuff?
  7. Neaten sources – probably provide some sort of data source server

Download the zip here