The Way Home

Bank Street Bridge, Ottawa, Ontario

© 2009 Darren DeRidder

Building Really Elegant Web Portals, Part 1

This is part one of a two-part article.  Part two is here.


This article discusses principles for building really elegant web portals. More precisely, it’s about how to build portals in a really elegant way. Even though I use a particular development stack for the example implementation, the principles can apply generally to other platforms as well.

Web-based applications and interfaces have become very popular.  Even certain kinds of equipment, like routers, generally implement a web-based GUI.  In the telecom community, sites that allow subscribers to access and manage their services are often referred to as "portals".  There are a lot of approaches to designing a portal site, and a lot of potential pitfalls that could be avoided with the right approach.

A Design Pattern for Portals

Usually, when a portal has to be built, people go looking around for a framework to use, or they use the one they already know.  There are some pretty good frameworks out there, but in my experience I've found most of them to be too unwieldy, bloated, complicated, slow and error-prone for my taste.  They seem to get in the way more than helping.

Instead of a framework, what I propose is a design pattern.  For lack of a better phrase I call it the Widget Pattern.  There's already a lot of information about design patterns, when to use them, and the pros and cons of custom development versus one-size-fits-all frameworks, so I won't get into that.  The Widget Pattern is really simple, and it's been used with great success in lots of other areas besides portal design using other names  -- its just not seen quite so often in web applications.

The core of the idea is to provide a collection of widgets that a relatively non-technical person can utilize to customize or build a portal using just basic HTML and CSS skills.  It also attempts to separate functionality from content and presentation, putting them into separate areas so individuals with different roles can take responsibility for their area of expertise.  In this part, we'll look at those roles and responsibilities and the problems that the Widget Pattern is trying to solve.

It's really important to recognize the different roles people play when it comes to portal development, and to let them all do their role without stepping on each others toes.  The developers should really focus on functionality.  Then the marketing folks can really focus on the layout, messaging and workflow.  The graphic designer can really focus on getting the visuals right.  But a lot of frameworks sort of lump everything together, forcing you to go through a big learning curve before you can make even small changes to the site.

Everyone's a Designer

Web sites are a lot like wardrobes. Whoever assumes responsibility for a web site immediately wants dress it up differently.  Our taste in fashion is as unique and individual as the way we look, and can be a form of self expression.  In a similar way, the urge to reconstruct the visual components of a website appeals to our individual aesthetic sense, and promises to be noticed!

Interfaces are highly visual, so they’re really easy to latch onto, put on powerpoint slides and debate.  Since everyone has a different idea of what looks good, it makes a never-ending source of meeting-fodder.  Interface planning can become a magnet for interminable design-by-committee projects - often with bad results.

Portal design tends to generate intense pride of ownership. Everyone attaches self-worth to their own creative endeavors, from their fashion choices to their work deliverables.  Whenever I have to design a portal or web application, I feel a pleasant rush of creative responsibility.  After all, we know that artists are not supposed to be questioned on their creative work, but given uninhibited artistic license! This sense of freedom and responsibility can be very appealing, and nobody is really immune from it.  This is the “Everyone’s a Designer” syndrome.

Unfortunately the “Everyone's a Designer” syndrome leads to a lot of bad user interfaces. Web technologies make it easy for people to unleash their inner artist, but just because you can doesn’t mean you should. I call this the “Not Everyone Should Be Allowed to Wear Spandex” principle.

The Immediacy of Interfaces

User interfaces get an immediate reaction because they're the first thing you see about a system - the point of entry.  The importance of first impressions means a lot of thought and effort to go into the presentation.  This is typically the domain of marketing specialists and graphic designers, but developers are the ones who have to implement the functionality. This can lead to difficulties, since marketing folks generally don’t understand the constraints of web development platforms, and developers generally don’t understand the difference between mauve and chartreuse, or comprehend how anyone could obsess for two weeks over the precise wording of a single paragraph. The situation can get bad if the developer has to repeatedly re-implement the fickle, frivolous whims of a marketing team that can’t make up their minds and has no appreciation for the amount of work their “minor changes” require.  Or if the marketing person keeps getting road-blocks thrown up by a developer who claims "you can't do that" for "technical reasons" that "you wouldn't understand".

Avoiding Entanglements

Design review meetings can quickly degenerate into debates on aesthetics and battles of opinion. Programming skills are not particularly well-suited to this environment, and the developer caught in the middle has a hard job ahead. This brings us to the next principle: Avoiding Entanglements.

At all costs, developers should avoid getting embroiled in debates about aesthetics, text content, layout and any other aspect that are likely to be scrutinized by marketing, branding and product level management types. For developers these things can be a phenomenal time-waster. Instead, developers should try to adopt a framework that puts power into the hands of branding / marketing folks to take ownership of as much of the presentation as possible, or at the very least make it extremely trivial to make ongoing changes to the static design.

A really elegant framework will turn a rebranding exercise into hours - instead of weeks - of effort, and from a job requiring major programming skills into one requiring only a modest familiarity with web design. This way, developers can extricate themselves from the entanglements of aesthetic debates and focus instead on functionality, while marketing and branding specialists can have a great deal of flexibility in the design and presentation of material.

Content vs. Functionality

An oft-quoted maxim of web development is “content vs. presentation”, harking back to the days when stylistic details like fonts and colors were embedded into the markup tags of text on web pages. Designers were admonished to separate content from presentation by using cascading style sheets to supply the stylistic details in a way that could be more easily swapped for alternate styles.

But the notion of separating content from presentation can be carried further. Although “presentation” typically means things like fonts, colors, layout and background images, and “content” typically means text, whenever a marketing team is hammering out the wording of a particular paragraph, the phrase in question can begin to seem a lot like a matter of presentation. Or when they're coming up with different scenarios about what should appear on the screen after clicking the “submit” button, even the workflow can be seen as a presentation concern.  Again, a really elegant portal framework will enable such decisions to be implemented and modified by the non-technical folks themselves... perhaps with a little hand-holding, but without requiring any real custom programming effort.

To enable such a level of flexibility requires more than a separation of content and presentation, it requires separation of content and functionality. This is the next principle, the Principle of Content versus Functionality.  It allows the developer to focus on what the portal should do, while the branding experts focus on what it should say and how it should look.

Offload Everything

For the developer, an elegant approach to designing a portal offloads as much of the responsibility for visual and interactive decisions to other people as possible. It's the Offload Everything Principle.  That includes not only the things typically found in a stylesheet, but as much of the static content and layout as possible, too. A really elegant design should even permit changes to the “workflow” (the series of pages a user must navigate while completing a particular task) without sacrificing simplicity and a small footprint. The dynamic parts of the interface that require programming knowledge to implement should be so well encapsulated that they can be reorganized to fit the client’s unique requirements, like a collection of “widgets” that supply bits of dynamic content and functionality, and can be relocated, re-skinned and reconfigured without any special programming expertise.

Next in Part 2
As a developer, I always like to get the technical details first, and read about the justification for the design later, so I've approached this backwards by offering lots of context first.  However in the next part we'll get into the technical details of the design pattern itself.  Here is part 2.

Strong vs Weak Typing

Apple says it best:

"If you are used to using strongly typed languages, you might think that the use of weakly typed variables would cause problems, but they actually provide tremendous flexibility and allow for much greater dynamism..."

I've always felt the same way. Its a different mindset but I wish it was more prevalent.

Shoes and the US Health Care System

If you live in the US, and have been hearing rumblings about single-payer health care, "socialized" health care, or how terrible it would be to have a Canadian-style health care system:

don't believe a word of it.

I've lived in a few countries, including the US and Canada. Whatever you hear, Canada is a great country to live in. And one of the greatest things about Canada is universal, socialized health care.

I know there are stories of long wait times, and there's a grain of truth to some of those. But in my experience I have never had to wait very long to see a doctor. I had a broken finger fixed in an hour. I got surgery to fix a hernia in about a week and a half. I know that for certain other things, people may wait longer. But I don't know anyone who hasn't gotten the care and treatment they needed. For free.

Furthermore, work is being done in Canada to reduce wait times in areas where they may be longer, using innovative research in queuing theory and techniques learned from countries around the world, with positive results.

Now I hope you'll all listen up: Even if you added up all the waiting lists here, it still would not come remotely close to 25 million Americans who are under insured and can't get treatment at all.

The US is one of the only developed countries without universal, socialized health care. A lot of people who live and travel in other countries think the US is way behind the rest of the modern world in this regard, and they look down on Americans because of it. People need to get out from under the BS that the corporate health care and insurance companies are shoveling out, realize that corporatism is the problem - not the solution - and get on with building a system that works for everybody. Not just for people who have financial means or a good benefits package.

"Another name for a 'single-payer system' would be: healthcare as a human right, not a commodity to be purchased. Many humans have this right. They just aren't Americans." - David Swanson

I learned a while back that you can tell a lot about a man by looking at his shoes. It may not be the most obvious place to look, but a man's shoes can reveal a lot about his character. And although it may not be the most obvious place to look, you can also tell a lot about a society by the way they treat their ailing poor.

The US has a long way to go in the shoe department.

Call the following six members of Congress and ask them to vote yes for single-payer health care (H.R. 676).

Lean YesDiana DeGette CO01 202-225-4431
Jane Harman CA36 202-225-8220
Christopher Murphy CT05 202-225-4476
Frank Pallone NJ06 202-225-4671 @FrankPallone
Bobby Rush IL01 202-225-4372
Peter Welch VT00 202-225-4115

Won't Say / "Not Enought Votes"
Rick Boucher VA09 202-225-3861
Bruce Braley IA01 202-225-2911
G.K. Butterfield NC01 202-225-3101
Lois Capps CA23 202-225-3601
Kathy Castor FL11 202-225-3376
John Dingell MI15 202-225-4071
Charles Gonzalez TX20 202-225-3236
Gene Green TX29 202-225-1688
Jay Inslee WA01 202-225-6311 @RepInsleeNews
Doris Matsui CA05 202-225-7163
Jerry McNerney CA11 202-225-1947
John Sarbanes MD03 202-225-4016
Bart Stupak MI01 202-225-4735
Betty Sutton OH13 202-225-3401
Henry Waxman (Chair) CA30 202-225-3976

Banana Leaf

Excerpt from Norton Lecture #1 by Charles Eames

There's sort of a parable I'd like to . . . In India . . . I guess it's a parable: In India, sort of the lowest, the poorest, the, those, those without and the lowest in caste, eat very often--particularly in southern India--they eat off of a banana leaf. And those a little bit up the scale, eat off of a sort of a un . . . a low-fired ceramic dish. And a little bit higher, why, they have a glaze on--a thing they call a "tali"--they use a banana leaf and then the ceramic as a tali upon which they put all the food. And there get to be some fairly elegant glazed talis, but it graduates to--if you're up the scale a little bit more--why, a brass tali, and a bell-bronze tali is absolutely marvelous, it has a sort of a ring to it. And then things get to be a little questionable. There are things like silver-plated talis and there are solid silver talis and I suppose some nut has had a gold tali that he's eaten off of, but I've never seen one. But you can go beyond that and the guys that have not only means, but a certain amount of knowledge and understanding, go the next step and they eat off of a banana leaf. And I think that in these times when we fall back and regroup, that somehow or other, the banana leaf parable sort of got to get working there, because I'm not prepared to say that the banana leaf that one eats off of is the same as the other eats off of, but it's that process that has happened within the man that changes the banana leaf.

And as we attack these problems--and I hope and I expect that the total amount of energy used in this world is going to go from high to medium to a little bit lower--the banana leaf idea might have a great part in it.

-- Charles Eames

Sailing to Baskins Beach

The plan for the weekend was to set sail on Saturday after lunch and try to make it all the way to Baskin's Beach. Thunderstorms conspired to force a change of plans, but by 5:30 in the evening the skies cleared and the trip was on again. Rushing home I grabbed an extra shirt and some rain gear, ran through the grocery store grabbing pre-packaged food and snacks in a more-or-less random fashion, and zipped back to the marina where my friends Liam and Kate were already loading their Aloha 28. Basil the Dog was as excited as ever at the arrival of another crew member, especially one that he knows will slip him small pieces of cheese and bread under the table.

A pizza had been ordered and arrived just as a passing raincloud unleashed a torrential downpour on the marina. I ran back to the boat with the box in hand, and opened it up to find our "Veggie Lovers" pizza was actually a "Meat Lovers" pizza. When I called back Pizza-Pizza they refused to give a full refund. We couldn't wait for a replacement since we were about to cast off.

A mild sou'wester carried us close-hauled all the way to Aylmer Island, and as the sun went down we decided to put in at the YMCA campground on the southern shore. Here the water runs deep close to the Ontario border, unlike the shallows that lurk below the expansive waters on the Quebec side. We did only three tacks to our anchorage, one being in the narrows between Alymer Island and the Quebec shore, and hence quite a short starboard tack.

The trees were all a black silhouette against the darkening sky by the time we had the anchor set, so it was hard to tell just how close we were to shore, but the depth sounder read 14 feet. Liam rowed ashore with Basil the Dog in the tender, affectionately named "Mr. Tippy". He was aided by a rechargeable 1000 watt handheld floodlight, quite possibly the brightest flashlight in the known universe. I'm fairly certain this light would be visible from the moon. More than adequate for taking your dog for a walk.

The morning was clear and sunny and after another trip ashore with Basil in Mr. Tippy, we had pancakes. This is also when I discovered that I had soaked my contacts overnight in a glass of vinegar instead of distilled water. I barely started to put in one of the lenses and immediately knew something was wrong and pulled it out. The resulting condition was pickle-eye, and I had to throw the lenses overboard. I spent the rest of the trip looking at everything through a large pair of binoculars that had a wide focal adjustment between the two sides.

We decided to sail on to Baskins. Again, a good sou'wester carried us upriver easily, though we kept getting headed by wind shifts further from shore and had to throw in a couple of tacks. Along the way we passed Pinhey Point, site of my last overnighter, and the Port of Call Marina. A lot of beautiful houses and some large mansions line the Ontario shoreline. We wondered who these people are. I don't think they are computer programmers. Then again... they might have started out as computer programmers, you never know!

Anchoring at Baskins was a bit tricky since the water was a bit shallower than anticipated. After two or three attempts we managed to set the anchor with about 8 feet of water below. The wind had picked up quite a bit and it was cool enough for a jacket by this point, so I decided to go ashore and tour the BYC camping grounds instead of swimming. After lunch on board we motored off and set sail for a long downwind run.

We stayed on a reach most of the way to keep the genoa full. Only once we tried to go wing on wing, but the winds had continued to increase, and a few rollers were coming in from the northwest, causing us to roll. It doesn't usually happen when you're flying a genoa wing-on-wing, and is more likely to happen when reaching under a spinnaker, but an effect that is dreaded by sailors called the death roll was on my mind as the waves caused us to roll leeward to windward. The big genny on the starboard side would fill powerfully as we rolled towards it, amplifying the heeling tendency. On the third roll I eased the sheet to depower the genny, which prevented the oscillation from getting any worse. But these things are hard to control. Sometime the reactions of the crew and helmsman trying to control the boat can actually increase the oscillations and lead to an accidental gybe. I've not done an accidental gybe that I can remember. Most likely I've just been lucky so far. I have been aboard during a couple of accidental gybes, both on my own boat and others, however. We also broached under spinnaker once on my boat. Quite a scary experience; but thankfully the Tanzer is a tough and forgiving boat, and she handled it well. We crew were a little worse for wear.

With this in mind I agreed heartily as Laim called to gybe the genny. For the remainder of the sail downwind we fought gusting winds that grew so strong abeam at one point that we feared a knockdown and furled the foresail. Under big pressure, we fought to bring it in, loosed the sheets, and "ragged" the sail. It flogged crazily and shredded part of the leach. Under main only we carried on a beam reach towards harbour. We passed other boats taking shelter in the lee of Aylmer Island, and a few limping back under mainsail towards Nepean. Ahead the skies were black with clouds and rain, but approaching from behind were clear skies, promising the worst was over. Entering the harbour, the calm water and quiet air was a relief. We met a couple of boats heading out for an evening sail, but we were quite happy to be back at the mooring. Half blind, but safe and sound.

Simply Messing Around In Boats

Cruising on the open water at sunset.

© 2009 Darren DeRidder