Head-Smashed-In Buffalo Jump

UNESCO World Heritage Site, Head-Smashed-In Buffalo Jump, Alberta, Canada

© 2009 Darren DeRidder

Canons of Layout

I've always been interested in the aesthetic of well balanced spaces and trying to understand why some geometries are so much more pleasing than others.  Because I get a lot of visitors who're interested in web development and testing, I thought an article on the aesthetics of layout and some general rules of thumb might be worthwhile.

With the growth of the Internet, a vast amount of content has been published online, and almost none of it adheres to any formal principles of margin and type areas, "laws of form" or page design "canons".  In medieval times when books were a rarity and publishing houses were few, considerable time and effort was put into achieving the perfect layout, with most printed works relating to the Golden Ratio.  Collectors of rare books appreciate the "truly beautiful" proportions of the pages.  It was very rare for publishers to deviate from the two or three most common "canons of page design".

I first became aware of these canons when researching the Golden Ratio and its relevance to architecture, art and design.  The Golden Rectangle, which is based on the Golden Ratio, is considered to be the most beautiful shape in the world.  This is so for a reason.  Many forms in nature follow the Golden Ratio, from the proportions of the human face, to the branches of trees, the patterns of sunflower seeds, or the cross sections of sea shells.  The Golden Ratio is found in ancient architecture and design from the Parthenon to Zen gardens.

The Golden Ratio is expressed mathematically as (a+b)/a = a/b = φ.  This simple mathematical statement is marvelously elegant.  It simply says that the sum of parts a and b are to the larger part a, what a itself is to the smaller part b.  Now, if a and b are taken to be quadrilaterals, the presence of two dimensions produces a curious phenomenon: the proportions of the rectangle b are identical to the proportions of the rectangle (a+b).  This is known as the Golden Rectangle, and it is a Fibonacci series.  It's recursive.  Therefore b is also a Golden Rectangle, and can be divided into c and d, where (c+d)/c=c/d.  And so on and so forth, ad infinitum.  And therein we find the elegant spiral of the nautilus, the radiating pattern of the seeds of a sunflower, the rings of Saturn, a butterfly's wing, or as Leonardo Da Vinci's Vetruvian Man illustrates, the shape of the human body (some adhering a little more closely to the Golden Ratio than others, I hasten to add).

On to another canon of page design.  There was a design sometimes known as "the Secret Canon" that was used in many medieval incunabula.  It was used by Gutenburg, for example, and features margins of 1/9, 2/9 and a text area of the same proportions as the page.

There are a number of more (relatively) modern interpretations of how this ancient and beautiful layout were acheived, one of the more common being the Van de Graaf Canon, seen here.

The dark lines have been used to reconstruct the proportions of the Secret Canon.  Here is an interesting challenge:  see if you can determine in which order these diagonal lines had to be drawn in order to come up with the red text boundary.  It's a great exercise to go through; it will make you start thinking like a page designer.

Notice how the red rectangular text area is the same proportion as the page itself (only smaller).  Also notice the left and right magins, being 2/9 and 1/9 respectively for the left page, and how the left and right page together form a center margin of 1/9 + 1/9 = 2/9, equal to the outside edges.

There are a number of other canons for page design, many approximating the Golden Ratio or it's convergents.

Tschichold's Interpretation of the Golden Canon

Raul Rosarivo's Interpretation of the Golden Canon compared with Tschichold's Golden Canon.

Now, you're probably reading this on a computer screen, and computer screens are different than printed book pages, so it might seem a stretch to imply that medieval canons of design could apply to modern web page layout.  But I happen to be writing this on a screen with 1280 x 800 resolution.  And guess what 1280 by 800 is?  It's 1.6, or φ, the Golden Mean.  It seems after spending too long in the dark ages of digital incunabula, we might be on the cusp of a renaissance in digital layout.  You've probably noticed LCD monitors shifting from the squat 1.3 ratio to the elegant wide-screen models that approximate the Golden Mean.

I'm not suggesting that designers everywhere should go out and study Fibonacci numbers and medieval typography.  Rather, all of this points to (in my interpretation, at least) a more fundamental concept - that the human mind is, above all, a highly adapted pattern-recognition engine.  That human beings, and perhaps all living things, are innately attracted to order and repetition.  And perhaps this attraction to order, symmetry and repetition is a counterpart to entropy and the tendency towards chaos.  Yin and Yang.  The light and dark side of the force.  But let's leave philosophy aside and return to the topic of layout.

Dealing with web pages as a medium, layout is generally more complex than a simple one or two-column type area.  Banners, callouts, images and menus will all compete for screen real estate. But it's still possible to come up with a beautiful layout by following a few simple guidelines.  Here are a couple simple rules of thumb I use when considering a page layout.

1. Consolidate Boundaries

Look at a web page and, scanning left to right, find all the edges you possibly can.  The left-hand margin of the page.  The edge of the first letter of each line of text.  Every vertical line that forms a left or right-hand boundary for any section of the page.  Edges of margins.

Now, draw imaginary vertical lines from the top of the page to the bottom, one line for every edge that you have found.  As a general rule of thumb, the more of these vertical lines there are, the worse the design will look.  Text justification is a great tool for consolidating boundaries.  Be especially vigilant for boundaries on forms - they are often the very worst offenders.

2. Find Symmetry

Next, ask yourself if there is any symmetry in the pattern of imaginary vertical lines.  For example, is the distance between two vertical lines on one side of the page the same as the distance between two vertical lines on the right side of the page.  Scan the page from top to bottom and identify all the margins, like the space between paragraphs or the vertical margin above a banner.  Once you have identified all margins, both horizontal and vertical, ask yourself why the margin is the width it is.  If you can't find any logical reason why a margin has it's particular width, consider it a mistake.  It should be that particular width because it forms part of a repeating pattern or adheres to a discernible ratio.

3. Use Patterns

Remember the idea that the human mind is a pattern-recognition engine.  It's what makes music beautiful to us.   Remember the Golden Ratio (especially the symmetry and repetition it embodies).  It's what makes shapes, faces, and design beautiful to us.  Use symmetry and repetition to base your layout on subtle patterns that the human mind will subconsciously pick up and find innately attractive. A pattern doesn't have to be boring, a mirror image, or based on multiples of two.  Remember the number 3, once considered the divine number.  Remember ninths of the secret canon (three times three) and consider using them as a guideline for creating margins and white space.  Consider layout that reflects the symmetry of the end-user's screen itself, with horizontal and vertical margins being the same in proportion to the vertical and horizontal screen resolution of their monitor (easy to accomplish with percentages).

(Update - since originally writing this article, grid-based layouts have become increasingly popular. I recommend checking out the following resources on grid-based design.)

4. Need a shortcut? Use a Grid!

Grid-based design has evolved in response to some of these issues. Two popular examples are the 960 Grid System  and Twitter Bootstrap grid system.  For many examples of web sites designed with a grid, and interesting comments from designers about ratios, margins and the Golden Mean, check out this Smashing Magazine article.

----

Eventually somebody is going to come along and write a book on Canons of Digital Page Design.  That person is not going to be me.  So until that book comes out, I hope this article was interesting for you and will give you some ideas next time you have to shoot a photo, hang some paintings on a wall, dig a flowerbed, or design a web page.  Good luck and have fun!

Images courtesy of Wikimedia Commons

Classic Modern

The Confederation Building reflected in the Bank of Canada Building.

 ©2009 Darren DeRidder

The Mountaineering Journals

I've begun moving some of my old mountaineering reports to a new blog.  I like the blog format and this should make it easier to add new reports if and when I do more mountaineering.  My collection of old climbing write-ups on the original Mountaineering Journals web site is pretty big, and warrants a dedicated site, I think.

The Mountaineering Journals began as a creased collection of photo-copied trip reports that I and a few friends circulated amongst ourselves while living in Japan.  There were three main contributors, all decent writers, and some of the reports were very entertaining, especially for anyone familiar with life as a foreigner in Japan.

http://mountaineeringjournals.blogspot.com

Building Really Elegant Web Portals, Part 2

The first part of this article talked about some principles for building really elegant web portals.  It proposes using a design pattern rather than a one-size fits all framework.  It requires no specialized software and once implemented, can be rebranded, reorganized, and re-featurized by anyone with basic HTML design skills.  Part 2 looks at more technical details of this design approach. 

An Example

The following example shows a simple contacts list with email addresses.  The layout of the page is already set up, so we just insert a simple tag, <?Widgets::membershipList?>, to create the list.  It looks like an HTML tag, but it automatically expands into the full contacts list.

 

Obviously this is a simple example, but you can see how easy it would be to move this widget around, change the CSS styling, relocate to another page or change the entire look and feel of the site around it.  Even if the whole layout of the portal changes, this widget will still provide the same functionality.

Some readers will point out that there have been a number of implementations of this approach, and they’re absolutely right.  This technique has roots going all the way back to Server-Side Includes, or “SSI”.

SSI and CGI Paradigms

Traditionally there have been two approaches to building dynamic web applications: the CGI approach and the SSI approach.  The difference between these two approaches has major implications for a web application so it’s good to know which approach you’re going to take and why.

In the CGI approach, a server-side script often generates an entire web page from top to bottom, including the HTTP headers, although in some cases the script performs an action on the server and then redirects to a landing page.  The CGI technique works really well for creating an API for handling actions, and it can work well for a large web sites with lots of pages using the same layout.

In the SSI approach, the document being requested contains snippets of code that get converted to HTML before it is sent to the browser.  SSI excels when it comes to presentation, allowing everything but the dynamic content to be written in plain old HTML.  The SSI approach can be very useful for separating out the functional parts of a portal from the layout and presentation.

The Widgets Pattern uses both CGI and SSI paradigms.  Understanding the difference between SSI and CGI Paradigms is an important part of the approach.

N-Tier Architectures and the MVC Pattern

The well-known MVC pattern and “N-Tier architectures”, are good design practices that separate the data, presentation, and application logic.  One principle from MVC that works well regardless of the scale of the project is to create a clean break between the data store and the rest of the application.  A great way to do this is to wrap the database in a web service of it’s own, a la Service-Oriented Architecture.  In a LAMP situation I would recommend using JSON or XML-RPC, never SOAP.  The reasons for this would require another article, so let’s just move on...

Assuming that our database is nicely encapsulated in an XML-over-HTTP interface with the requisite create-read-update-delete methods, lets see how the rest of the Widget Pattern works.

The Principle of Linear Includes

The diagram above is the core of the Widgets Pattern.   One of the key features of this design is the principle of linear includes.  Each file contains a class, and includes only one other file at most.  This is different from a lot of code bases where each class file contains a long list of includes.  It might seem like this would make code organization difficult, but I found that it forced me to organize the code very efficiently, to encapsulate responsibilities carefully, and to build clean, intuitive interactions between the layers.  It might also seem like the files would get really huge, but I found that with the responsibilities cleanly divided like this, the methods within each class were very concise - often just a few lines.

The Widgets Layer

The pattern uses classes not for object instantiation, but purely for namespaces.  So the membershipList widget in the example above was written as widgets::membershipList.  The Widget Layer does one thing and one thing only!  It takes the data structures passed up from the Utilities Layer and wraps them up in HTML.  That’s it, nothing more.

The Utilities Layer

The Utilities Layer is where application logic resides.  The Utilities Layer does one thing, and one thing only!  It issues messages and correlates responses.  This could mean for example that it sends a message to read a user’s account information, another message to read subscription details, and combines the two responses into one array of data to return.

The Messages Layer

The Messages Layer does one thing, and one thing only!  It knows the syntax of the messages to issue for each of the CRUD operations supported by our data store.  If the database is behind an XML-RPC interface, this means that the Messages Layer has a bunch of methods that contain the correct XML syntax for each of the operations supported by that interface.  When one of these messages is invoked, the variable parameters of the message are filled in, the message is fired off and the response is returned. Again, a very simple and limited scope of responsibility.

The Connection Layer

The Connection Layer does (you guessed it) one thing, and one thing only!  It manages the connection to the database server.  Utilities that require multiple messages reuse the same connection.

The Configuration Layer

Throughout the code there will be, of course, parameters that should be configurable, whether it be an IP address, the action to perform on submit of a form, or the landing page to redirect to after an action.  So the Configuration Layer is the lowest layer in the stack, meaning all the other layers can make us of it.  The Configuration Layer does one thing only! It provides getter methods for a list of parameters that are defined in a config file.  In the LAMP stack, the config file is just a “.inc” file with a list of variable declarations in name=value syntax.  Couldn’t be simpler.

Note that, if your server is configured properly, ".inc" files are parsed as php files, never sent as text. The extension you use is largely a matter of preference.

The Action Handling Layer

Borrowing a page from CGI, the last component, sitting a bit off to the side, is the Handler. This is the component that handles actions from the user interface, particularly submitting information for updating the data store.  This component again does just one thing.  It receives requests, typically POST requests, extracts the variables from the request, including the action being requested, invokes the appropriate utility methods, and redirects to a (configurable) landing page which may or may not be the same as the page that issues the request.  It includes the Utilities layer so it has access to all the Utility methods.  In practice there will be some utility methods used by Widgets, some used by the Handler, and some used by both.  But the handler doesn’t need to provide any output to the browser other than a header that redirects it to the correct landing page, in the case of success, or an error page, in the case of failure.

Performance

The question of performance often comes up.  Please refer to my article “A Policy of Simplicity” which talks about getting exceptional performance from LAMP-based applications.  The venerable APC cache will be of interest in this regard, although other byte-code caching and code optimization tools are available.  APC is among the best options and performs extremely well. In fact, I have yet to come across a platform that can perform better.

On the way to really elegant web portals


This article is really nothing more than the application of some good design principles in a popular medium, and I hope it helps some designers who might be thinking through different approaches and leads to some really elegant web portals! 

This approach has been used for portals in a number of 1st-tier telecommunications companies.  It has enabled rebranding and feature requests to be implemented with unprecedented rapidity, and enabled clients to implement their own functionality with very little assistance, very quickly.  Having seen the success of this approach in the field, I wouldn’t go back to using a cumbersome application framework unless there was clearly a performance benefit to be had.  One possibility would be the LYME stack, and I’d like to spend some time with it. I expect that the Widgets Pattern would also work very well with it.

In the next couple of weeks I’ll try to post some code examples that demonstrate the Widgets Pattern in action.  Till then, take care and have fun!

Piz Balzet

Yours truly leading pitch one of the Piz Balzet, Albigna, Switzerland.

Photo ©2008 by Iain Williams

New Belcanto

Mike del Ferro, "New Belcanto - Opera Meets Jazz"

Great discoveries should be shared.   I came across Mike del Ferro's rendition of Nessun Dorma on Imeem.com more than a year ago.  Several months ago I went back and found that it was gone.   I finally tracked down the album.  It's available on iTunes.   Spoiler: this album will be on my Top 5 Albums of 2009.

I've also been enjoying the new CD/DVD from my own piano teacher Brian Browne, entitled "Brian Browne Trio at the NAC".  A protege of Oscar Peterson, Brian is one of the greatest jazz pianists that Canada has ever produced.  The album is available at brianbrowne.com.