Hello everybody! This is my first blog post for WSI. I’ll try and steer away from any technical jargon, but I do love it so a bit might creep in here and there.

So today I’m going to talk a little about a custom project I’ve been working on which will help us monitor links that have been built for our clients on an SEO package. The problem faced is that each link we have on the system has a large amount of data associated with it. Anything from the text which is displayed on the webpage (anchor text) to Google’s pagerank and when the domain of the website was created, along with a multitude of other data we use to be able to see the quality of any given backlink.

Click on the picture below, it will open a new page. When you view the image make sure that it is scaled to the correct size (you usually have to click on the image in the new window to get to the correct scale). At full size the table is almost 2700 pixels wide! The average full HD monitor is only 1920 pixels wide, and most laptops are around 1280 pixels wide. I can already here you saying, why not just let it scroll horizontally? Well, I hate it when I have to scroll sideways on a website and I’m sure a lot of you do too. It’s generally considered to be a user interface faux pas to make a user scroll sideways. Which is why it needs to be looked at and solved.

So, the first way to reduce the width of a table is to only display the most important columns to a user. Take a look at the image below this paragraph to see what this looks like. This is achieved by allowing the user to change their own settings to display only the information they are interested in. It’s also possible to allow the user to remove columns on the fly using javascript. Another pretty nifty trick is to use visual data instead of textual data. You will notice that the ‘Status’ column has been removed. I could argue that it’s not necessary at all because if I display a row as red I instantly know that this link was not found.

The second method is to try and reduce the width of visible columns. This can only be achieved by looking at the data being displayed and deciding whether or not it can be contracted while still being useful. In the below image I have reduced the width of the ‘Link Address’ column by removing the domain name which is already displayed in the ‘Website’ column. In the first ‘URL’ column you can see some of the entries have been contracted and an ellipsis added to provide a visual clue to the user that some of the url has been omitted. On the far right of the table I have also reduced the ‘Actions’ column by turning it into a popup menu. Every pixel helps.

The final method to help display a wide html table is to add any extra information on a separate row that can be shown and hidden as can be seen below. This enables all the extra info which is related to a link to be shown to the user as and when they need it.

With all the above tricks in place, the table is now 1772 pixels wide (this depends on which columns I want to be shown) which displays correctly in a 1080p HD monitor. Further reductions in width are necessary before we release this product, but good progress is being made.

Kirk Docker,
WSI Developer