Development « Datadial Blog
0208 6000 500

On the subject of Development


July 20th, 2008.

Web Usability

Web usability is about designing your web site so that users can achieve their desired goal quickly and easily. Taking time out during development to make sure your site meets usability standards can have a huge benefit to your business.
“A web usability redesign can increase the sales/conversion rate by 100%”
– Jakob Nielson

Designers and developers must make sure they spend adequate time planning the flow of information by firstly identifying the needs of their intended users, then creating a path for site visitors to follow, which firstly, addresses a users initial concerns, then gradually takes then towards achieving their goals. This is achieved by understanding the goal the goals of you target users and then identifying the information your site needs to provide.

There are millions of web sites all competing for the same space, so it is important that you get the right information across a quickly as possible. It has never been easier for users to find a competitors web site, which may do a better job than yours. It is important that you meet the immediate needs of your site visitors as this the fundamental principle behind good web design.

Web designer must realise that if a web site is hard to use or hard to read, users will leave the site. This is because most users simply do not want to spend a large amount of time trying to figure out how to use a site as there are plenty of other sites to choose from.

Definition of Usability

  • Easy to learn
  • Efficient to use
  • Easy to recover from errors
  • Easy to remember


Navigation (Breadcrumb Trail)
Site navigation is crucial as users must know where they are and where they are going at all times. The easiest way to achieve this is to follow certain site convention, layouts and phrases (i.e. company logo should be in the top left corner with a link back to the home page, ‘about us’ links should display organisational information, shopping cart or basket should refer to items a user wishes to purchase etc).

These conventions must not be adhered to whenever possible as users have become accustomed to them. Developers and designer must use this to their advantage because sticking to them can increase the usability of the site.

Download Speeds
How many times have you exited a web page because it has taken too long to download? As broadband speeds get faster users are becoming increasingly impatient when it comes to page download time. On average users are prepared to wait 8.6 seconds, so it is important that you pay attention to this. There is no use having a fancy web site with high resolution images if users aren’t prepared to wait long enough to see them.

Faster page download speeds can be achieved by using CSS instead of images, placing CSS code in a separate file and using Unobtrusive JavaScript.

Usability Testing
Many web designers fail to complete adequate usability testing due to time and budget constraints. They fail to realise that a usable web site or CMS will eliminate a lot of time spent providing technical support. It is crucial that designers and developers know that the adoption of usability testing will eventually pay for itself many times over.

The key is to start usability testing early and to involve your target demographic. If possible, use five people to complete these tests as this has been known to uncover as much as 85% of usability issues.

Usability is a hugely neglected area of web development and is an issue that needs to be addressed. We must always remember that users always come first and that if you make the user your priority then they will reward you with their loyalty.

It is not good enough using programmers and designers to do the testing either, as IT professionals do not think like the average web user. The best way to complete thorough testing is use candidate that are similar to your target audience.

Usability is an incredibly valuable tool that can save an organisation a lot of money, improve their competitive position and customer loyalty. It’s never too late, so start today.


July 19th, 2008.

Microsoft .Net Framework 3.5

The .Net framework 3.5 (released November 19th 2007) is the latest framework to be released by Microsoft. It has a host of new features and will be shipped as standard with the latest version of Visual Studio .Net 2008 IDE.

.Net framework 3.5 is an incremental build which means that instead of creating a completely new framework Microsoft has instead added new assemblies and fixed known bugs. This decision helped make the transition between .Net framework 2.0 and 3.0 as painless as possible. In essence .Net framework 3.5 contains the 3.0 framework which contains the 2.0 framework.

New assemblies include:

  • System.Data.Linq.dll – The implementation for LINQ to SQL.
  • System.Xml.Linq.dll – The implementation for LINQ to XML.
  • System.AddIn.dll, System.AddIn.Contract.dll – New AddIn (plug-in) model.
  • System.Net.dll – Peer to Peer APIs.
  • System.DirectoryServices.AccountManagement.dll – Wrapper for Active Directory APIs.
  • System.Management.Instrumentation.dll – WMI 2.0 managed provider (combined with
  • System.Management namespace in System.Core.dll).
  • System.WorkflowServices.dll and System.ServiceModel.Web.dll – WF and WCF enhancements (for more on WF + WCF in v3.5 follow links from here).
  • System.Web.Extensions.dll – The implementation for ASP.NET AJAX
  • System.Core.dll – In addition to the LINQ to Objects implementation, this assembly includes the following: HashSet, TimeZoneInfo, Pipes, ReaderWriteLockSlim, System.Security.,
  • System.Diagnostics.Eventing. and System.Diagnostics.PerformanceData.
  • System.Data.DataSetExtensions.dll – The implementation of LINQ to Dataset.
  • System.Windows.Presentation.dll –WPF support for the System.AddIn.
  • System.VisualC.STLCLR.dll – STL development in the managed world.


AJAX support has been added to .Net 3.5 as standard so that server and client-centric AJAX functionality can be added to existing and future web applications.

Some additional data-controls have also been added, in the shape of ‘ListView’ control for displaying data and the ‘LinqDataSource’ data control that exposes LINQ data to web applications. The ListView control is highly customisable (using templates and styles) and supports edit, update and delete operations as well as paging and sorting functionality.

Support from Vista styled Windows application has been added, which will even allow developers to update the appearance of old applications written using previous frameworks. Common file dialog boxes will be automatically updated to the Vista version. (See.

Some of the biggest language orientated changes to.Net 3.5 are the inclusion of XAML, C# 3.0 and LINQ. Link and XAML are covered within my Silverlight and Visual Studio.Net posts.

One of the most important things to realise is that current web and windows application can be easily upgraded to .Net 3.5 as it is essentially built on the back of the previous two frameworks. Developers can make the switch safe in the knowledge that it won’t break their existing applications (unless their application exploited a bug, in which case it will!).
These types of upgrades are extremely welcome as it lessen the learning curve and give .Net developers more faith in Microsoft frameworks core infrastructure.


July 19th, 2008.


Firstly let me start by saying that I do not claim to be an expert in either PHP or ASP.Net. Although I use ASP.Net daily, I am fairly new to it. I have decided to do little investigation to the age old debate about the difference between PHP and ASP.Net. This is only a short post, but hopefully it will give readers a better understanding of how the two technologies differ. Hopefully this will be as un-bias as possible.

The reason I have chosen to investigate the difference between the two is that non-programmer constantly ask the questions: “What’s the difference between PHP and ASP.Net”, “Why can’t PHP applications talk to ASP.Net applications?” or “That could have been done in PHP so much quicker, for free”. There are so many deciding factors when choosing a web application framework. I will attempt to outline the differences using a For and Against bullet point format for both.


  • Free
  • Open source
  • Easier to learn due to its basic scripting language structure and build in functionality
  • PHP5 now offers many object orientated development concepts
  • Has many free IDEs available that are very impressive and well supported (e.g. Eclipse)
  • Runs on Apache server which is open source
  • Run on IIS 6.0 and IIS 7.0 due to Microsoft’s implementation of FastCGI open standard
  • Has multiple platform support
  • Marginally faster due to the overheads imposed by .Net’s Common Language Runtime, which is responsible for intermediate compilation of .Net’s many languages
  • Has a huge support base as it is open source


Against PHP

  • Although it claims to be free, when using free 3rd party add-ons developers often run into issues when developing commercially available applications (i.e. ownership of code / intellectual rights)
  • Most PHP IDEs require lots of add-ons in-order to add similar functions to Visual Studio
  • No built in support for AJAX. Requires add-ons.


For ASP.Net

  • Can be developed using the stunning Visual Studio.Net IDE that offers vast array of features, that make coding much easier and development more productive
  • Developers can download a free scaled down version of Visual Studio that offers an impressive array of features. This is aimed at students and hobbyists
  • Runs on IIS (Internet Information Services)
  • Applications can be written using many programming languages (e.g VB.Net, C#, J#, C++ COBAL)
  • The .Net framework (the engine that ASP.Net is runs on) has more sophisticated error handling capabilities than PHP
  • Allows better separation of design and application logic using of code-behind pages and user-controls
  • Has built support for AJAX as of .Net Framework 3.5


Against ASP.Net

  • Requires a Microsoft licenses
  • Requires a basic knowledge of object orientated concepts which can sometimes deter newbie developers
  • Single platform and will only run on Microsoft web servers

These bullet points emphasise some of the main differences, advantages and disadvantages of the two languages.

Quotes from other developers for ASP.Net and PHP

For ASP.Net
ASP.Net is Strongly Typed, Object Oriented, Sandboxed, Multi-Syntax, Component Centric, Event Driven, forms oriented, pre-compiled experience.

PHP is a loosely typed, objects optional, fixed syntax, component-less, runtime interpreted, structured programming model.

Joe Stragner

In the end, PHP is less expensive, faster, more secure, and able to be deployed from a Linux server that is also less expensive, faster, and more secure than their Windows based counterparts.


There are many factors that may sway you decision about which web application framework to choose. This decision should be based on the factors above, the kind of career path you want to choose and detailed research. In reality though the decision is usually down to which framework you are exposed to first as many develops get comfortable with on languages syntax and features.

My advice would be to use both; if you can, as each one has its own merits and has earned its place in today’s web application development industry.


July 16th, 2008.

Object Databases

Many developers spend a huge amount of time creating well designed object orientated applications only to have to have to write complex mapping classes in-order to interact with a relational database. A large percentage of application code often consists of mapping application objects to a relation database model.

Relational databases have been the industry standard for persisting data since the mid 70’s. Relational databases consist of flat two-dimensional table that are related to other tables using keys.

Data manipulation is handled by SQL (Structured Query Language) which is standard across the majority of database vendors.

The downside to relational databases is that the application object model that developers code against cannot be stored in a relational database. Classes have to be written to provide the necessary mapping so that the objects and databases can communicate. Each object has to be flattened out to support many-to-many relationships. Each field and property has to be mirrored in database tables or views in-order for fields to match up. Stored Procedures are also needed (sometimes as many as four per class) to marshal data to and from the object. The mapping of class fields to database columns is a laborious but unavoidable task.

Object database approach things from a different perspective, offering a different way of designing the persistence layer of an application. The fundamental idea behind object databases is the idea that you store your data in the same way that you use it.

Matisse Object Databases
One of the major .Net object database vendors, is a company called Matisse Software Inc. Matisse have created a database management system that helps developers to bypass the whole mapping process usually associated with object application design and relational databases.

Using Matisse the object database management system, developers can create database schemas and generate application code from simple class diagrams. The development mapping process is eliminated as this is all taken care of for you behind the scenes. Performance is increased as complex joins are no longer needed. Object databases store object as they exist in the application domain along with all the necessary object relationships.

There are many other interesting feature object databases have to offer and this post has simply scratches the surface as to what is possible. The main point to make though is that using Matisse or any other object databases database management system allows you to stay within the object orientated paradigm, eliminating the need to bridge a gap between two different domains. Matisse’s support for VB.Net, C#, Java and C++ make it an extremely via candidate for a .Net developers that are ready for the paradigm shift or tired of the huge overheads in terms of code maintenance and database administration.



July 16th, 2008.

Microsoft Silverlight

Microsoft Silverlight is a cross browser implementation of the .Net Framework that delivers interactive applications via the web. It does so by unifying the capabilities of the web server, the web browser and the desktop.

Silverlight improves the potential for developers and web designer to create rich applications that aren’t limited by the constraints of modern web browsers.

Silverlight runs on all major browsers including Internet Explorer, Firefox and Safari and also has the ability to adapt its video quality depending on what device it runs on e.g. desktop browser, mobile device, or 720p HDTV video mode.

Silverlight application can be created by a graphic designer or a web developer using either:

  • Microsoft Extended Blend – for layout and graphic design
  • Visual Studio .Net – for coding


There are currently two versions of Silverlight, 1.0 and 2.0 beta. The most noticeable difference between the two versions is Silverlight 2.0’s support for the .Net Framework.

Silverlight includes Windows Presentation Foundation which is new to .Net 3.0 and is designed to allow rich client features by extending browser based user interfaces beyond what is capable with HTML alone. It also provides a declarative mark-up language known as XAML (Extensible Application Mark-up Language; pronounced “zammel”) as well as adding extensions to JavaScript so that the client UI elements can be manipulated programmatically using event handlers.

Silverlight 2.0 is designed to integrate seamlessly with existing JavaScript and ASP .NET AJAX code and goes one step further by making it possible to create applications using VB .NET and C# due to its ability to access the .NET Frameworks programming model.

To run Silverlight applications all you need is a modern browser and the Silverlight plug-in, which can be downloaded and installed in minutes.

Silverlight XAML syntax is very similar to HTML as it allows you create rich web based UIs in HTML like syntax. Using Microsoft Extended Blend (MEB) designers can create engaging graphics, animation and media. MEB can generate XAML so that (via Visual Studio .Net) programmers and designer can collaborate and work on the same files.

XAML is to Silverlight what HTML is to web pages. It is text based and can be incorporated directly into a web page via the Silverlight runtime. It is used to define objects and their properties and focuses on defining UIs. XAML is firewall friendly unlike other technologies like Java Applets, Active X or Flash, (which all send binary content to the browser) which can pose security risks and is also easier to updates due to its text-based nature, unlike its rivals, (mentioned above) which have to be recompiled and redeployed after every change. Each time a Silverlight application is updated a new XAML file is generated that will be automatically downloaded the next time a client request is made. This eliminates the need for re-installation or redeployment and prevents the user experience from being disrupted.

Silverlight has a long way before it can compete with flash’s popularity, especially as it is a Microsoft only product. It has a huge amount of potential as it is designed to work with the .Net framework, which is a robust and proven foundation. Only time will tell as to how popular it will become and whether users and developers will jump on the Silverlight express!!


July 16th, 2008.

Visual Studio.Net 2008

The latest version of Visual Studio .Net 2008 will be shipped with as many as 250 new features and enhancements. There are too many new features to cover in one blog post so we will concentrate on features that will improve the productivity of our Datadial developers.

Multi-Framework Targeting
This is a superb new feature that allows Visual Studio to target previous versions of the .Net Framework. In the past developers have had to have as many as three different versions of Visual Studio installed (i.e. 6.0, 2003, 2005) so that they could update and modify old applications built on previous frameworks. It is now possible to target applications written with .Net framework 2.0 SP1, 3.0 and 3.5, safe in the knowledge that each project targeted at a specific version will contain the correct project types, toolboxes, references, features and intellisense.

A welcome addition to the intellisense library is JavaScript. This new Intellisense library is smart enough to look at the underlying type and deduce what methods and properties are available (e.g. if you choose a numeric type, the intellisense dropdown will be populated with the correct methods and properties available to that type).

Intellisense has gained an additional feature in the shape of option filtering. This is very similar to the way Internet Explorer suggests previously visited web sites when typing in a URL. Visual Studio now filters the options available based on the words you type, instead of just jumping to the key word that best matches the text. This makes it easier to find the properties or methods you require as it eliminates unnecessary choices.

Support for the ASP.Net AJAX Library is also included as standard (due to Visual Studio .Net 2008’s full integration with .Net 3.5), so traversing the new JavaScript base class via intellisense is a welcome addition. This added functionality makes creating next generation AJAX enable web application more pleasant.

Split Screen View
The use of multiple monitors is not just reserved for designer anymore. It is fast becoming more common for developers to use dual monitors too; due to an increased number of simultaneous applications being used (i.e. Dreamweaver, VS .Net, Adobe Photoshop, Outlook etc). Visual Studio capitalises on this fact by allowing users to tile their code and design view windows across two monitors. This feature will increase a developer’s productivity by decreasing the amount of time spent scrolling through lines of code.

ADO .Net Entity Framework
ADO.Net has also been improved by raising the level of abstraction at which programmer work with data. This changes the way developers interact with databases and removes the need to code against rows and columns. This means that developers can use a richer vocabulary that includes concept like inheritance, complex types and explicit relationship (See. LINQ blog post).

Visual Studio .Net 2008 offers a vast array of additional features and takes advantage of the latest framework advances. With each update programming and application development moves to a new level and commonly used programming techniques and coding procedures are moved into the framework to help increase productivity and so that developers can concentrate on higher level functionality.

It is expected that the majority of .Net developers will eventually upgrade to Visual Studio .Net 2008 as the benefits literally speak for themselves. Any developer that wants to stay on the cutting edge of today’s software development procedures should upgrade to Visual Studio 2008 as it will allow them to concentrate on the next generation of application development.


July 14th, 2008.


The W3C is currently developing HTML 5 as an open and royalty free upgrade to HTML 4. Its development is entirely public with over 500 participants including companies like AOL, Apple, Google, IBM, Microsoft, Nokia and Opera.

This time around browser vendors and developers are working together to create the best possible version of HTML that meets the needs of modern and future web applications.

Much has changed since HTML 4 was published in 1997. The age of static web pages being cutting edge has long since faded and has been replaced by media rich and dynamic web applications that function on desktops as well as mobile devices like mobile phones and PDAs.

In-order to get as much feedback as possible, the W3C created the HTML Working Group in March 2007 as a forum for building a consensus around the new HTML standard and has since published a number of design principles and features to help guide the development of HTML 5 in a direction that truly represents the future of the World Wide Web.

Some of the more exciting feature additions and advantages are:

  • APIs for drawing two-dimensional graphics
  • Embedding Audio and Video
  • Maintaining persisted client-side data
  • Improved page element representation
  • The ability to choose a classic HTML or an XML like syntax


Structural Element Tags
One of the many interesting additions to HTML 5 is the inclusion of structural elements tags, e.g. header, nav, article, section, aside and footer. These tags are intended to replace the arbitrary DIVs that would have contained IDs and classes of similar names. These new tags make source code more intuitive and easier to read and allow specific rules to be applied as standard. They also eliminates the age old problem of conflicting naming conventions by providing a more standardised method of structuring HTML.



Audio and Video Tags
Two of the most interesting tags to be added to this new version of HTML are the Audio and Video tags. These tags provided HTML 5 with a method of embedding multimedia elements in a page, which was previously provided by 3rd party plugins like Flash. It will also be possible to apply style and custom interfaces that provide playback functionality via DOM APIs and clients-side scripting.

Here is a list of the new tags planned for HTML 5 (this list is subject to change):

  • <article> Defines an article
  • <aside> Defines content aside from the page content
  • <audio> Defines sound content
  • <canvas> Defines graphics
  • <command> Defines a command button
  • <datagrid> Defines data in a tree-list
  • <datalist> Defines a dropdown list
  • <datatemplate> Defines a data template
  • <details> Defines details of an element
  • <dialog> Defines a dialog (conversation)
  • <embed> Defines external interactive content or plugin
  • <event-source> Defines a target for events sent by a server
  • <figure> Defines a group of media content, and their caption
  • <footer> Defines a footer for a section or page
  • <header> Defines a header for a section or page
  • <m> Defines marked text
  • <meter> Defines measurement within a predefined range
  • <nav> Defines navigation links
  • <nest> Defines a nestingpoint in a datatemplate
  • <output> Defines some types of output
  • <progress> Defines progress of a task of any kind
  • <rule> Defines the rules for updating a template
  • <section> Defines a section
  • <source> Defines media resources
  • <time> Defines a date/time
  • <video> Defines a video


Tag definitions from

HTML 5 is still a work in progress and may take another few years before it is finalised and few more before it is supported by today’s popular web browsers. The W3C welcomes and encourages feedback from individuals as well as software vendors and urges people to join the HTML Working Group to ensure that HTML 5 meets the need of today’s web users, designers and developers.


July 14th, 2008.


Ajax stands for Asynchronous JavaScript and XML and has become hugely popular due to concepts such as Web 2.0 that has been made fashionable by companies like Amazon and Google. The key word in the definition of AJAX is Asynchronous! Despite all the wonderful web technologies available today the method in which users access web content is still synchronous (i.e. request / response model). This means that when a user navigates to a web page, their browser makes a request to the web server and then waits for a response. This means that replicating the quick seamless response of a desktop application is almost impossible due to the distance the data has to travel. This request for a web page (known as a postback) requires the server to render / re- render a page’s content to the users browser window (i.e. the server returns a complete page of HTML).

Synchronous postbacks are one the major disadvantages of many of today’s websites as the round trip from the client to the server can be slow; especially when accessing web pages that require intensive updates (i.e. pages that contain large images or other rich media content). This is perfectly illustrated by comparing the Synchronous model of to the Asynchronous model of Google Maps seamlessly delivers it content while the user browses and Street Map performs postbacks every time the user requests a different section of the map.

Introducing ASP .Net AJAX (Synchronous Vs. Asynchronous)
Consider the case whereby a web site has to regularly update its content with ever-changing information, e.g. stock prices. This stock price information may only take up a small portion of the page but in-order for this small update to occur a full page postback is required. Even on a good day when the round trip to the web server is fast this will still case the browser to blink / flash and on a bad day users will be left staring at a blank white page while the server build the new page and posts back the results.

When using AJAX enabled web pages it is possible to implement partial page updates whereby the only part of the page is updated allowing the users to continue browsing other content while a specific region of the page is updated. The addition of visual loading indicators are also possible as a welcome change from a blank screen and give user a clear indication of what is going on.

ASP .Net AJAX Architecture

Using conventional ASP .Net controls the server is responsible for dynamically creating HTML mark-up which isn’t ideal as it doesn’t provide a clean separation of presentation and business logic. ASP .Net AJAX follows a different model whereby data is still managed on the server but presentation is handled by the client side components that run in the browser.

The AJAX library has been developed to make client-side functionality easier as it provides core classes that extend JavaScript to support object orientated scripting. It contains a base class library that also offers error handling, debugging and tracing; a network layer that provides asynchronous communication and an application services layer, UI layer and Browser layer.

From a programming point of view the AJAX library provides a more powerful JavaScript programming model that offers many of the constructs that are needed for object orientated programming like, namespaces, interfaces and inheritance.

ASP .Net AJAX can be easily incorporated into excising ASP .Net applications and makes it possible to develop a richer client-side experience.

Combining the client-side Microsoft AJAX library and ASP .Net AJAX 2.0 Extensions .Net developers can add an extensive array of new functionality using a familiar object orientated programming environment (Visual Studio .Net, Dreamweaver etc), Web Services and new sever controls, all in a unified design and coding framework. With the new possibilities that ASP .Net AJAX provides the key decision for developer is how much of the application logic to place on the client (JavaScript) and how much to place on the server (VB. Net, C#)?


July 14th, 2008.


The .Net framework 3.5 has introduced a new database query language known as LINQ (pronounced ‘LINK’). LINQ stands for Language Integrated Query and has been developed to make querying data a first class programming concept. LINQ can be used with any data source and can be expressed in any .Net language. It provides full type-safety, compile time checking, step through debugging, refactoring and (when incorporated with Visual Studio 2008,) full intellisense.

LINQ allows you to model a relational databases using object relational mapping. You can then run queries and perform inserts, updates and deletes using its object programming syntax.

LINQ is not VB .Net or C#, even though it can be expressed using a similar syntax. It contains standard query operators that allow you to work with data in a more intuitive way regardless of whether you are working with a relational database, XML or in-memory collections (i.e. generic lists).

Some of the main query operators are:

  • Select
  • OrderBy
  • Where
  • SelectAll
  • TakeWhile
  • Take
  • Skip
  • First
  • SkipWhile


These are similar to their SQL equivalents while some operators add additional functionality.

LINQ fully supports views, transactions and stored procedures and with the addition of the ‘LINQ-to-SQL’ designer users can easily create object representations of any SQL Server database. The LINQ-to-SQL designer is a type of wizard that can automatically create the mapping classes needed to link an object to a database table or view. This saves developers a huge amount of time as it dynamically maps table column names to a mapping class and creates the necessary properties within that class.

The code generated by the wizard is split into several classes depending on how many tables that have been targeted. The main class (which is of type System.Data.Linq.DataContext) relates to the database as a whole, and the remaining classes relate to each of the tables or views.

Using the LINQ-to-SQL wizard isn’t essential as these classes can be created manually. A happy medium would be to allow the wizard to generate the necessary code for you then customise and strip out any unnecessary content.

Data Modelling
Many developers may find the way LINQ creates object relational mapping very familiar to how the currently work. It models one-to-one class entity relationships with a key (ID) property (e.g. a product has a category, therefore a category ID is placed within the product class). In the case of a one-to-many relationship (e.g. an order object has many order-lines); a collection of order-lines are placed within the order object.


Many developers are used to the tedious but essential process of mapping relational data to .Net objects but with the introduction of LINQ this process can be made a lot smoother as it provides a bridge between the two domains. Additionally you can use some of the other LINQ data providers to map data like: LINQ-to-XML, LINQ-to-Entities, LINQ-to-Objects, LINQ-to-SharePoint and LINQ-to-Terra Server. The addition of LINQ to the latest version of the .Net framework makes writing error prone mapping objects and stored procedures a thing of the past.


July 1st, 2008.

Layering IFrames using positioning and z-index

I was recently given a task by a client that required me to layer multiple IFrames on top of each other in order to facilitate the display of 3 separate content blocks (share price feeds) so that the content of two of them was only partially shown.

Each frame was a simple, relatively small area of text that displayed the current share price for a listed fund:

There were to be 3 frames in total.  Each frame was to display a different price, in the bottom 2 frames, only the share price was to be displayed and not any of the other content.

Using standard CSS positioning techniques I was able to position the 3 frames so that the 3 share prices were aligned correctly:

(Note the CSS code here is inline for simplicity)

<div style="display:block;position:absolute;top:0px;">
|||||<iframe src="" frameborder="0" allowtransparency="yes" scrolling="no" style="width:200px; height:90px; position:relative; left:-20px;top:30px;margin:0;padding:0;" />
<div style="display:block;position:absolute;top:30px;">
|||||<iframe src="" frameborder="0" allowtransparency="yes" scrolling="no" style="width:200px; height:90px; position:relative; left:-20px;top:30px;margin:0;padding:0;" />
<div style="display:block;position:absolute;top:60px;">
|||||<iframe src="" frameborder="0" allowtransparency="yes" scrolling="no" style="width:200px; height:90px; position:relative; left:-20px;top:30px;margin:0;padding:0;" />

The major problem here is the overlapping of IFrames, while the positioning is correct, the 3rd IFrame overlaps the 1st and 2nd IFrames, and the 2nd IFrame overlaps the 1st IFrame.

To get around this we use the z-index property of CSS.  This property only works on elements that have been positioned, as we have done with each IFrame, in that it has been placed within an absolutely positioned HTML div element.  Z-index facilitates the display order (or ‘stack’ order) of elements on a page.

Hence we get the following by setting the z-index of each div to 999, 998 and 997 respectively.

<div style="display:block;position:absolute;top:0px;z-index:999;">
|||||<iframe src="" frameborder="0" allowtransparency="yes" scrolling="no" style="width:200px; height:90px; position:relative; left:-20px;top:30px;margin:0;padding:0;" ></iframe>
<div style="display:block;position:absolute;top:30px;z-index:998;">
|||||<iframe src="" frameborder="0" allowtransparency="yes" scrolling="no" style="width:200px; height:90px; position:relative; left:-20px;top:30px;margin:0;padding:0;" ></iframe>
<div style="display:block;position:absolute;top:60px;z-index:997;">
|||||<iframe src="" frameborder="0" allowtransparency="yes" scrolling="no" style="width:200px; height:90px; position:relative; left:-20px;top:30px;margin:0;padding:0;" ></iframe>

Note the lower the number the z-index, the lower the priority it has in the stack.  Z-indexes can also be negative.

The solution was effective enough for the client to be implemented on their site and saves the space that would otherwise be needed on the web page if there were 3 IFrames positioned separately from each other.


January 31st, 2008.

Firefox Developer Extensions

Here is a list of 25 Firefox Developer Extensions that we find extremely useful at Datadial. These extensions are geared towards web development, SEO, network administration and end user marketing.

1. Firebug

Firebug integrates with Firefox to put a wealth of development tools at your fingertips while you browse. You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page… More

2. Web Developer

The extension is actually a large collection of various tools for a Web master. Using Web Developer, you can get extensive information about page elements: link details, size, attributes, and colors. More

3. View Source Chart

Draws a colour-coded chart of a web page’s source code. More


4. Total Validator 5.0

Provides true HTML validation (HTML 2.0 to XHTML 1.1) using the official DTDs, plus added attribute checking.
Also performs accessibility validation (WCAG, US-508), broken link checking, spell checking (5 languages), and takes screenshots using 25 browsers on Windows, Linux, and OS/X. More


WASP is the Web Analytics Solution Profiler, a free Firefox extension aimed at web analytics implementation specialists and web analysts who wants to do quality assurance and understand how their web analytics solution is implemented. More

6. FireShot

FireShot is a Firefox extension that creates screenshots of web pages. Unlike other extensions, this plugin provides a set of editing and annotation tools, which let users quickly modify captures and insert text and graphical annotations. Screenshots can be saved to disk (PNG, JPEG, BMP), copied to clipboard, e-mailed and sent to external editor for further processing. More

7. JSView 2.0

All browsers include a “View Source” option, but none of them offer the ability to view the source code of external files. Most websites store their javascripts and style sheets in external files and then link to them within a web page’s… More

8. Router Status

View the status of your router in the tool or status bar. More

9. Console² 0.3.9

Console² (pronounced Console Squared or Console Two) replaces the JavaScript Console with what could be the next generation Error Console… More

10. GA? – Is Google Analytics Installed 0.6

Checks to see if Google Analytics is installed on any given page. More

11. IE View 1.3.5

Lets you load pages in IE with a single right-click, or mark certain sites to *always* load in IE. More

12. Professor X 0.4.1

The Professor X Extension let’s you see inside a page’s head without viewing the sourcecode… More

13. EditCSS 0.3.7

Stylesheet modifier in the Sidebar. More

14. SeoQuake 2.0.11

Seoquake is a Mozilla Firefox extension aimed primarily at helping web masters who deal with search engine optimization and internet promotion of web sites. Seoquake allows to obtain and investigate many important SEO parameters of the internet… More

15. 1.0.10

Create free disposable email addresses and paste them directly in forms. This helps to protect you from spam mails and could be useful when subscribing to forums or newsletters… More

16. ViewSourceWith

The main goal consists to view page source with external applications but you can also…

– open page source as DOM document, read faq
– open CSS and JS files present on page
– open images using your preferred image viewer (e.g. GIMP or ACDSee)
– open PDF links with Acrobat Reader or Foxit Reader or what you prefer
– edit textboxes content with your preferred editor and automatically see modified text on browser when you re-switch focus on it, this simplifies wiki pages editing, read faq
– open server side pages that generate the browser content, this simplifies web developer’s debug, read server-faq
– open files listed in Javascript console. When editor open file the cursor can be moved to line number shown on javascript console.

17. FireFTP 0.97.1

FireFTP is a free, secure, cross-platform FTP client for Mozilla Firefox which provides easy and intuitive access to FTP servers. More

18. KGen 0.2.1

KGen (Keyword Generator) is an extension that allows you to see what keywords are strong on visited web page. Then, you can retrieve them for social sharing (tag filling) or webmastering/SEO. More

19. Extended Copy Menu 1.4

Provides the option to copy selection as plain text or html… More

20. PageDiff 1.2

Pagediff is a simple page compare application. It helps web developers and designers to see HTML-code(text) differences between web pages… More

21. IE Tab

This is a great tool for web developers, since you can easily see how your web page displayed in IE with just one click and then switch back to Firefox. More

22. View Dependencies

View Dependencies adds a tab to the Page Info window, in which it lists all the files which were loaded to show the current page.  More

23. MeasureIt 0.3.6

Draw out a ruler to get the pixel width and height of any elements on a webpage. More

24. Add-ons Sidebar 0.2.2

View your Add-ons in the sidebar by pressing Ctrl+Shift+E! More

25. Update Notifier

Notifies you when updates are available for your extensions and themes. Allows quick access to your extensions and themes and the ability to check both types for any updates. Easily configurable for automatically installing updates when available… More


July 9th, 2007.

How to irritate an online shopper or “Philfing”

Given that shoppers are a fickel lot it’s probably best not to annoy them too much, particularly if they have bothered to visit your website. 

However, a survey of 2,400 UK online shoppers commissioned by has revealed the irritation many shoppers feel when shopping online. 

Particularly, the most annoying thing an online retailer can do is something called “philfing”. The term ‘philfing’ stands for ‘purposely hiding what I’m looking for’, and the survey found that 93% of UK web users are annoyed by such things as hidden delivery charges or credit card charges.

Other e-commerce practices which irritated shoppers included:

  • Having to register before buying – this annoyed 57% of those surveyed, while 14% said this would make them abandon a purchase.
  • 35% found hidden delivery costs annoying, while this would prevent 64% from buying from a website.
  • No phone number being supplied for the site annoyed almost everyone, and rightly so.  48% found this annoying, while 50% would never purchase anything from such a site.
  • Interestingly, 36% found the type of ‘people who bought this, also bought…’ information typical of Amazon annoying, while 5% said this would put them off buying.

At the end of the day it’s all about trust.  Establishing customers’ trust in the buying process is essential, and it’s difficult to re-establish once it has been broken. Not providing a phone number or hiding extra charges until the customer has gone through the checkout process is guaranteed to break this trust. This is all obvious stuff youo might say but it’s amazing the number of companies ignoring these simple steps.

Newer Posts » « Older Posts

Recent Posts »

Our work »

What we do »

Who we work with »

Got Questions? Lets Talk »