Interfaces matter!
A great piece of software is only as useful as it is useable. That is, an application works best when it’s built around it’s user, a human being (or in some cases, another computer*).
Consider the Mapquest of the early ’00s — a click to move, a click to zoom in, a click to zoom out, and a page refresh for every click. Compare that to the Mapquest of today which takes a photocopied page from Google Maps’ book. Panning around the map is akin to holding a physical map, a much more intuitive experience than the “deck of cards” feel of the original.
Here’s the kicker: it’s possible to do the same things with both versions, it’s just infinitely more enjoyable with a better interface. And a more enjoyable interface is the one people will want to use.
Also consider browsing the internet on a non-touchscreen tablet. Zooming in to a portion of the page would require you to use a combination of button presses for zooming and re-centering on the content. Now imagine you have an iPad, and you use a two-finger “unpinch” to do the same zoom and re-center in one fluid motion. In this case, the iPad was no more capable than the button-driven tablet, but the interface made it more enjoyable to use. With the iPad & iPhone, Apple has been selling interfaces. It’s no wonder they’re raging successes.
With that, I’m off to check for apartments in SF for my upcoming move. Given my options, I’ll be using housingmaps.com, which takes the wealth of Craigslist listings (data) and marries them to the easier and more-visually-informative Google Maps (interface). Same data, new interface.
*(For those of you interested in what it means to build interfaces for computers, I’d recommend this talk by my friend Max Ogden on middleware and government data. Short and eye-opening!)
Grid tool for iPhone web design
I started looking for a grid overlay tool much like the 960.gs for use on the iPhone. Turns out there isn’t one. At least, not one that’s comparable. There is the iPhone Unigrid as designed by Vladimir Carrer, but it’s a static grid that seems intended for single-screen apps.
The best tool I found was the 960 Gridder by Andrée Hansson which needed some tweaking to work with the iPhone. Instead of dealing with setting up a bookmarklet, it was easier to just embed the 960.gridder.js file:
<script type="text/javascript">
// Insert optional override object before the function
createGridder = function() {
document.body.appendChild(
document.createElement('script'))
.src='./gridder/960.gridder.js';
}
</script>
Then I modified the variables to match the 320px-wide* iPhone screen:
<script type="text/javascript">
var gOverride = {
urlBase: 'http://gridder.andreehansson.se/releases/latest/',
gColor: '#EE0000',
gColumns: 7, // Number of columns
gOpacity: 0.15,
gWidth: 5, // Width on each side of gutter (1/2 desired gutter width)
pColor: '#C0C0C0',
pHeight: 10, // Baseline height in px
pOffset: 0,
pOpacity: 0.55,
center: true,
gEnabled: true,
pEnabled: true,
setupEnabled: false, // Awkwardly sized for iPhones
fixFlash: false, // Not needed on iPhone
size: 280 // Adjust for gWidth overlap (subtract gWidth * 2)
};
</script>
In the above example, I set the size variable to 280px, not 320px. I wanted a 15px gutter on both sides of the layout. 320px-(15px*2) = 290px. Also, the gWidth variable (in this case, 5px) will overlap the gutter on either side, so that value needs to be subtracted as well. 290px-(gWidth*2) = 280px.
After this, we add the script to the body tag:
<body onload="createGridder()">
<!-- <body> -->
This lets you quickly enable or disable the grid by switching which tag is being commented out.
We can see the finished result here (non-grid version here):
Also works on iPhone 4.
Hope this helps!
