Reflections on Style for Shrink Wrap Web Sites

By -

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.

Comments

Post a Comment

Popular posts from this blog

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

By -
Once upon a time, long long ago, I wrote 8-bit programs in Tiny-C with absolute addressing being the only reality.  Then we had Borland Turbo-C with relative addresses and the joys of relative assembly jumps. Enter Windows and the joys of locking and unlocking memory blocks that you must allocated and manage yourself. Then came Visual Basic which evolved into .Net CLR and decreasing awareness of what is happening under the hood.   With VS2010 including F# and enhanced parallelism in .Net4, we actually have to go retro a bit – back to the world of having to understand the hardware. CPU speeds are no longer increasing – I have an old laptop from six+ years ago that ran at 3.2 GHz. This year I updated one of my machines off-the-shelf from Costco.com, an I7-920 with 4 cores and hyper-threading (8 CPUs appears in Task Manager) and 12 GB of DDR3 RAM. This week I ordered from Costco a Phenom II X6 (Yes – 6 REAL CORES) for one of my daughters.  This CPU will (according to YouTube demos) o
Read more

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

By -
Image
This is a continuation of this post , explaining how the sample app works. Caution : This sample isn’t meant as an example of best patterns and practices. If you see something in the code you would never do, then don’t. Solution File Organization The app has three Visual Studio Projects: the app, the agent, and the shared code library between them. One of the great things about Mango is that now the built-in Visual Studio Unit test functionality is available. By separating out the meat of the work into the SampleShared project, I can also focus my unit testing there. SampleApp1 The app has a MainPage, a ViewModel, and the WMAppManifest.xml file modified to note my ExtendedTask of BackgroundServiceAgent. The Agent is extremely simple with a call to the shared library, an update to the Tile, and a call to pop up Toast. The meat of the work is in the SampleShared library. The AgentMgr manages the background agent : add, remove, find, run now. It is only called f
Read more

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

By -
Image
Introduction The project required the need to put the visual pie chart on a web page on the client and in a Pdf file created on the server. I eventually choose to use a Telerik Kendo DataViz Chart control on the client, and use a PNG file on the server for the Pdf file. This blog post will explain the process and code to convert the client-side pie chart Svg data to a Png file, and provide a download to the working code. Prerequisites You need to have a trial version of the Telerik Kendo library installed in order to make the sample code work. You also need InkScape installed. InkScape is the application that does the actual conversion. You will need to change the Web.config appSetting of “ExeDirectoryForInkscape” to represent your own installation location. Any SVG Data Will Work The pie chart was created using the Telerik Kendo DataViz chart control. While I name a specific control, as long as you have access to the SVG data, the same conversion process on the server will
Read more