ReSrc.it – Responsive images done right

The image you’re about to see is not residing on my server; it’s being served by ReSrc.it – a new cloud-based service which will actively deliver the optimum-sized image for your device. Don’t believe me? resize the browser window (so that the image size is reduced); reload the page and check out the source. you should be getting a new image every time the window is resized!

Sunset in Norfolk - ReSrced!

This is a massive leap forward for responsive design; it means that the right image, at the right resolution, at the right time can be delivered to your device. ISPs and Network providers are going to love this (as it saves on bandwidth); Web designers, photographers, content producers and anyone who works with images online have been crying out for this sort of a service since the whole ‘responsive web’ thing started.

I encourage you to check out their demo page (they have a load of image effects and switches to alter the loaded image) and if you think its awesomesauce then register for the Beta programme!

Working with Twitter Bootstrap on OS X

After messing with some of Twitter’s Bootstrap files locally, I decided it was time to get a build environment established on my Mac. It quickly became apparent that there wasn’t a whole lot of guidance on setting up the build environment in OS X; so i’ve posted my efforts here so that someone in my shoes can follow these steps:

Step 1: Install Node (and Node Package Manager)
Visit http://nodejs.org/ and download the installer for OS X (Lazylink: http://nodejs.org/dist/v0.8.12/node-v0.8.12.pkg)

Step 2: Clone and build Less.js
Install Less.js via folowing command (Assumes GIT CL Tools is installed):
git clone git://github.com/cloudhead/less.js.git

Next, go to the less.js directory, type: ‘make’.

Then copy the install directory to /usr/local/less.js

Add ‘export PATH=$HOME/local/less.js/bin:$PATH’ to ~/.bash_profile:

Open a terminal and type:

touch ~/.bash_profile; open ~/.bash_profile

Paste following in:

export PATH=$HOME/local/less.js/bin:$PATH

and save…

Step 3: Install Bootstrap Dependencies
Twitter Bootstrap depends on a number of packages; you can install all of them by using the following command with NPM:

npm install uglify-js less jshint recess -g

Step 4: clone and make Twitter Bootstrap
Clone Bootstrap:
git clone git://github.com/twitter/bootstrap.git

Go to the bootstrap directory, type: ‘make’.
Built files are output in the ‘docs’ directory…

Enjoy!

Pragmatic Responsive Web Design

Following on from my last post; i’ve been doing some spleunking into ‘responsive design’ – the latest buzz term circling the web design / development camp. I’ve stumbled across a rather insightful slideshare presentation from Brian and Stephanie Rieger; they worked on browser.nokia.com at Breaking Development conference. For that project, they invented a new way to combine client side information with device detection. It’s a really interesting approach and certainly worth assimilating!
Continue…

Foundation: Rapid prototyping framework

First off; I know it’s been a looong time since I last posted an update; suffice to say i’ve had a lot of things on in my life that have kept me preoccupied… but enough of my whining; i’m here to talk about a promising new framework I stumbled across called Foundation; its from the guys at Zurb who made the lovely CSS3 buttons that I utilise a lot (with my own modifications of course! will be blogging the changes shortly).

Continue…

jolicloud 1.0 – REVIEW

As my girlfriend is the proud owner of a Samsung N210 netbook; i found myself itching to test out Jolicloud; an OS designed entirely for Netbooks. Jolicloud 1.0 is the most recent ‘cloud-based’ operating system; it is built on an Ubuntu 9.04 build and is stripped down for lightness and speed. The essence of Jolicloud is ‘keep things online’; a harkback to the days when cloud-based computing was still in it’s infancy.

Continue…

BBC News primed for refresh

One of the most popular websites in the world; BBC News; is set for a refresh in the next week or so. BBC editor Steve Hermann gives the skinny on what we can expect:

What’s new:

  • a fresh, updated design, with more space for the main stories of the day
  • better use of video and images
  • clearer and more prominent labelling and signposting of key stories, whether you are on the front page or a story page
  • a better indication of which are the most recent headlines
  • easier ways to share stories with others, for those who wish to

Some things are staying the way they are:

  • all the same content is still there: the best of the BBC’s journalism in text, audio and video
  • the latest news headlines will be as quick and comprehensive as ever
  • accuracy remains at the core of our editorial values
  • we’ve been careful to keep things simple and easy to use; you have told us how important this is