Styling

A wasps nest or progression?

Promoting Web Standards

The web has evolved in many way shapes and forms!
Nearly perfect examples of this can often been found at your national News provider - very proficient databases, xml, content mangement and JSON in the background!

Glorious images, shopping carts and up to date news via their feeds, blogging and so much more.
We believe the 'web standards' should be promoted where and when possible!

Unfortunately most of us don't have huge advertising, IT budgets or teams of people to manage this state of 'evolving perfection'!

But with a little help from us, you can achieve a good styling strategy that is affordable and get still your customer's attention.

Do's and Don'ts
CSS vs Tables
Static Tables
Dynamic Tables

A modern web site should contain:

'eye appeal' that enhances the information
textual clarity
techniques to promote business
deploy today's technology rather than old concepts
fast content coding
affordable, advisable and flexible solutions
client user control where and when required

At this moment many web sites are:

still mixing up their .gif & .jpg graphics
writing their story in 'technical' or vague jargon
having little impact on the business concepts (in fact the reverse)
paying 3rd party services with little to no rendement
using tables and deprecated coding for layouts
costing that fars outweighs financial results
little to no client control

Tables a very short history

Most of us know what tables are... basically data that goes into rows & columns.
We introduced a couple of good headers and the 'boss' knew what was going on.
The nice thing to know is that this concept hasn't changed, or has it?

No, but due to lack of styling concepts on the web, tables became the way to create design layouts. So most designers took the <table> element to produce all types of wierd and wonderful layouts.

Unfortunately the table element was never meant to be a design method!

Creating 'nested tables' for a 'out of' column look.
Often by adding so called 'invisible graphics' to make the layout look correct.
Adding lines and colours to images get a 'match-up' with edges etc..
Resulting in large overheads and often quite complex code.

Having said that a table is still good at displaying tabular data, especially when CSS and other techniques are applied!

Cascading Stylesheets

CSS allows much more control over postioning, colors, fonts and many other styling elements.
By using stylesheets, many of the archaic code be can be reduced to give site wide change.

Table structure layouts can be reduced to far more coherent coding, reducing 'overheads'.
Many changes can be applied to site wide elements within seconds.
In general Web Maintenance is far more efficient and less costly.

If the data is produced by a database then hopefully there will be some sort of order applied that makes sense. Of course it's not then really static, but still might lack user interaction your customers want.

A customer might think the data is not sorted to his / her requirements and might wonder what their company is doing with you!

Imagine the sorting is placed on a town... a place beginning with a Z like (Zwolle) will not help him. This sorting structure might put him at the bottom of the league and that could easily mean that his information is ignored.

Any reasonable listing that is done via a Table should have some sorting capababilty whatever the techniques behind it and as seamlessly as possible.

Static Tables.

Basically static tables just produce the data as is.

In other words something gets added and it appears where it was typed in.

Below you can view the different results of the same imported Customer table.

Click on Example 1 and import the simple HTML file.
Click on Example 2, it uses the same file - however it does provide a bit more functionality - just click on one of the companies.

It's still pretty basic, but a little slicker compared to Example 1 - the dated has been sorted by location.

Don't forget they are both using the same input table!

Click here or on the 'Dynamic Tables' tab to see the improvements that can be made.

Example 1 - Static unsorted data

Example 2 - Static data transformed

Company

{ds2::Company}

Contact: {ds2::Contact}

Department: {ds2::Department}

ID: {ds2::PID}

Location: {ds2::Location}

Dynamic Tables

A Dynamic Table should do what it suggests - leverage the interaction for your customers.

Using the same data as shown in 'Static Tables' (with a few extra fields), the data here should give some interaction to your clients.

Below are two small examples of dynamic tables.

By clicking on the header columns in the table below all the data is sorted accordingly.

Company	Contact	Department	PID	Location
{Company}	{Contact}	{Department}	{PID}	{Location}

This example shows 2 extra details - Telephone and Job Title

{Company}

{Contact}

{Location} Tel: {Telephone}

{PID}

Dept: {Department} - {Position}

A step further - transposing Static into Dynamic.

Just imagine you had a few hundred or more 'Customer details' and wanted to find them fast!

Enter one or more letters of the above Companies.
The results should be pretty fast and narrow down the information you need.

Enter Company name: Contains: