We chronicle her meals at the Innova Lunch blog. If you worked here, you’d be eating lunch right now.

Building n-Tier apps can be difficult. Instead of a single monolithic application that can easily hide its imperfections, a client-server model traditionally means making an API, choosing a transport, and sticking to it.

It’s like marriage, but with TCP/IP settings. Throw in a wireless client and it can be difficult to find a solution that fits. XML-RPC? SOAP? REST? Each way of communicating has benefits and drawbacks.

This is what we’re doing for client X, a niche healthcare business.

The requirements for the project are a web site with both static content and user-only pages with geolocation, pricing and communication features. These features are duplicated on iPhone/iPad and (in the future, Android) clients.

The obvious solution is an n-Tier architecture where we can centralize the business logic. The less obvious part is how to communicate with it. The iPhone app (Boomer) is using a wireless connection, so lightweight formats are obviously attractive. Also, iOS has a poor selection of XML-RPC and SOAP clients, so a JSON/REST solution makes sense.

On the other hand, the web client (Apollo) is running in the same location – initially on the same server – as the client, so it can use a fatter, more full-featured connection. Since we’re using Microsoft stack for this project, that means WCF. WCF also generates model code for the web client, so most of the work is just converting these models into HTML output. The server (Athena) consists of both conventional and restful WCF services each accessing the core logic of the server, which in turn consists largely of LINQ-based interaction with the database.

The neat thing about offering parallel services like this is that it makes adding additional transports much more straightforward. For example, if client X decides they want to use an RPC-based tool with the server, it just means adding another service; the business logic has already been prefactored out of the way.

We copy/paste the elevator pitch from the CoverMyMeds website many times per week. Not because it is easier, but because it is the best 15 word summary of our company that we can write.

But the best part about an honest and simple elevator pitch is that it can be used by others outside your company: your happy users, your partners, and the press.

And today, I received an email from HealthTechTopia that we’ve been awarded their #2 slot in the 25 Notable Startups that are Changing the Medical Information Industry. We’re listed among a number of very good companies, many of which I know, but something that struck me is that we had one of the only usable elevator pitches on our website out of the whole list.

Unfortunately, I’ll need to pick on someone to illustrate my point.

CoverMyMeds helps physicians and pharmacists complete Prior Authorization and other insurance coverage determination forms for any drug and for most drug health plans…

DOMA Technologies: This is a privately owned Virginia Limited Liability Corporation founded in 2000, which provides Software as a Service (SaaS) document management applications and services aimed across multiple vertical markets…

Assuming you even care about healthcare IT, which description is better? Without a good pitch, the nice folks at HealthTechTopia had to work very hard to describe what these other companies do-and it probably isn’t the very best explanation these companies could offer.

What we’ve done is improve our chances of being listed and described positively, with nothing more than a simple paragraph on our homepage (but lots of thought about who we are).

Let me close with a few simple metrics we have to evaluate our pitch. A good pitch is something that:

• A real person would repeat to their friend/colleague without feeling like a dork or shill
• A (non-paid) person can actually remember
• Describes why we matter and who should care
• Is differentiated from other pitches, but is relevant to problems to which the mainstream can relate
• Is copy/paste-able in an email or website
• Everyone in the organization is happy to repeat to open sales calls and meetings

Chip, Eddie, Keith, Reva, Matt, Dan, Jon, Michelle, Scott, Amanda, Bruce, Mary, Kent, Brian, Robert, Chris. Chad, who holds court at the Oregon branch office not pictured.

Converting a Photoshop pitch to a static HTML/CSS layout is a fundamental part of client-oriented web development. It can be hard work, not least because it is difficult to simultaneously focus on the appearance of the site and its structural foundations.

The usual solution to this is to muddle through and keep tweaking a steadily expanding morass of CSS until the site resembles the original .psd. This way of working is unstructured, which makes it stressful and self-limiting.

Let’s look at a better way.

Separating structure and appearance

A more disciplined way of working involves separating the structure and appearance of the CSS into two separate files, like this:

    <link rel='stylesheet' href='styles/structure.css' type='text/css' />
    <link rel='stylesheet' href='styles/appearance.css' type='text/css' />

But aren’t appearance and structure separate already in CSS?

At this point you may be thinking that CSS is already predicated on the idea that structure and content should be separate. HTML for structure and CSS for appearance, right?

This is true if “appearance” includes attributes such as float or position.

We want to really separate the the attributes responsible for layout – position, float, padding, margin, width, height, border, etc – from those responsible for decoration – background, color, font-*, text-*, etc.

We also want to be able to visualize the structure of the CSS. This means adding false background colors to elements in structure.css so we can see what effects those elements have on the layout. The predefined CSS colors such as “green” or “red” are great for this.

How structure.css and appearance.css see a page element

Structure.css might describe a page element like this:

div.feature_content
{
    background: green;
    padding: 5px 20px 15px 20px;
}

while appearance.css is concerned with this:

div.feature_content
{
    color: #00326a;
    background: #e8e8e8 url(images/feature_foot.png) no-repeat left bottom;
}

This means we can easily switch off the appearance file and look at a purely structural layout. If, for example, we need to add an element and inadvertently break a float clearance, we can metaphorically lift the hood on the layout and immediately see what is wrong. It’s like having X-ray vision for HTML.

With both stylesheets switched on.

With just structure.css switched on.

Visualizing in action

If you watch the animation at the start of this post again, pay close attention to the position of the top navbar.

When I first started blocking out the page the navbar was inside the top (‘header’) block. Later I realized it would be easier to position if it were the first element in the second (‘content’) block.

So I switched off appearance.css (by breaking the tag with an underscore,) and moved the nav bar’s div. The structure was fine, so I deleted that underscore and the hood went down.

The important part of this is that I was immediately confident that the change had no unexpected impact on other elements in the layout. I knew the layout of the page, even when it was in flux, because I could see it.

Divide and conquer

The important thing is that visualizing CSS isn’t a tedious “best practices” kind of thing. It really does remove a lot of stress and confusion from development. Give it a try; once you start dividing your CSS this way you’ll wonder how you managed before.