Reflections on Style for Shrink Wrap Web Sites

My main bread and butter is commercial software designed to be installed on customer sites (with the host of environmental variations that may occur). One aspect is build websites that may be easily branded by the customers with the use of CSS.


One of the first steps  is moving CSS to resource files so pages may be style in a culturally aware manner.  Sentence length can be doubled or halved in different languages so layouts may need to change.


Once that step is done – then there’s the issue of how to factor the page for branding. Often folks go for a cheap solution – allow only a few things to be branded; I prefer to support comprehensive branding.


Often the page delivered by a developer may look like this:

   1: <div style="display: table-row block; border-bottom: solid thin red;">
   2:       <div style="display: table-cell; whitespace: nowrap">
   3:         <font: Arial>
   4:             <b>
   5:                <asp:Label runat="server" ID="EmailAddressLabel" 
   6:                     AssociatedControlID="EmailAddress" />
   7:             </b>
   8:         </font>
   9:       </div>
  10:       <div style="display: table-cell; whitespace: nowrap">
  11:           <asp:TextBox runat="server" ID="EmailAddress" />
  12:       </div>
  13: </div>

The label content is filled from a resource file in the code behind.


Of course, the above is not really customizable by CSS – not a single class attribute to be seen!


So where do you go? You start normalizing the html using classes – but not a class for every item. You normalize the classes by exploiting items through naming a section, for example:

   1: <div class="username">
   2:     <h3>
   3:         <asp:Literal runat="Server" ID="RecoverUserNameHeader" />
   4:     </h3>
   5:     <bb:Literal runat="Server" ID="RecoverUserNameBody" />
   6:     <div class="row">
   7:         <div class="rowlabel">
   8:             <asp:Label runat="server" ID="EmailAddressLabel" 
   9:                 AssociatedControlID="EmailAddress" />
  10:         </div>
  11:         <div class="rowinput">
  12:             <asp:TextBox runat="server" ID="EmailAddress" />
  13:         </div>
  14:     </div>
  15: </div>

What you should go for as the end-HTML  is:

  • No Style attributes in the page
  • No obsolete or UI modifying tags (<b>,<i>,<font> etc) in the page
  • As few classes as possible.

Then for verification of the refactor,  you need to  enumerate out how you can specify each piece of text in a css file. For the above example we have:

  • .username
  • .username H3
  • .username .row .rowlabel
  • .username .row .rowinput
  • .username .row .rowinput LABEL
  • .username .row .rowinput INPUT

So, via CSS the customer can customize the look of each element. You do not have to supply all of these items, you may just define a few items in your shipping package  like

  • .row
  • .rowlabel
  • .username H3
  • .rowinput

The red items are universal.  What is the result – well, the code in the page is actually much simpler (and easier to review) and yet your customer can customizes to a very fine level. The process of refactoring the pages is very much like database normalization. The outcome is a much nicer product code base.


Popular posts from this blog

Yet once more into the breech (of altered programming logic)

Simple WP7 Mango App for Background Tasks, Toast, and Tiles: Code Explanation

How to convert SVG data to a Png Image file Using InkScape