Evolutionary vs. Revolutionary Design
Traditional design is what I think of as “revolutionary” design: a Big Picture view that takes in all aspects of a problem and seeks the solution that best solves all of them.
Evolutionary design is a much more narrowly-focused view that is only concerned with finding a solution to the current problem. This often inevitable next step is usually the source of “cobbled on” features in an updated version of a product or a website. In solving the specific problem, the Big Picture may be ignored, leading to a well-designed feature and a poorly designed product.
Think about products or websites that have been updated with new features many times over several years. Which ones feel clunkier now than when they started? Think about the iPod. Think about Photoshop.
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!
