Jamie Balfour BSc

Welcome to my personal website!

Technology enthusiast

I am very interested in technology, particularly relating to computer science. I am most interested in web design and development.

My main hobby is programming. One of my most well known products from this is ZPE. I also am the sole creator of BalfBlog, BalfBar and BalfSlider.

A little bit about me

In 1997, when I was six years of age, I got my very first computer. I was always very interested in the ins and outs of it and dismantled it to see how it worked.

Years later, in 2016 I received my BSc (with honours) in Computer Science, obtaining a First class degree.

I'd like to welcome you to my website and hope you enjoy using it as much as I have enjoyed building it!

Google Plus
Me
Jamie Balfour BSc
Full stack developer

Personal Blog

We all know that responsive designs are the way to go. For a long time now my website has been fully responsive, but one of the features I used that was developed by someone else was the responsive table. For as long as I have had it in use on my website I have disliked it.

I dislike it because it shifts the first column of the table to the left, essentially floating it above the rest of the table, whilst letting the user scroll the rest of the table. It created an ugly, ugly mess of things being thrown all over the place. Alas, finding the best solution for a responsive table could be much easier.

What about using an overflow:auto and display:block on it? Good idea, but the problem is that now the tables will not stretch the full width of the container.

The solution I am now using is a combination of JavaScript and CSS. The solution involves using jQuery's wrap function like so: jQuery("table.responsive").wrap("<div style="overflow: auto;"></div>");which will wrap each table with the class responsive in a scrollable div (see, very little CSS and JavaScript). Also, by giving the table inside a minimum width of 100%, they will always stretch the width of their container (which is the wrapper div), ensuring that they are always 100% of the content.

The problem though is with the interaction design side of things - how are users supposed to know when they can scroll some table in the middle of the content?

After reading a few articles, I found a comment in one of the websites with a link to this page. This allows you to make scrollbars always visible - something that should not need to be hacked together but should be a CSS feature, but Apple and Google don't agree with this so we do need to hack it together.

Although this does not guarantee that users will notice the scrollbars, it does leave some possibility that they might notice them.

Tables are a difficult thing to work with and making them responsive is one of the most difficult things to do in terms of usability. Let me know if you have any solutions to these problems.

Here is an example table, resize your browser or use a smartphone to test it.

Name Platform Year Sales Revenue
Warcraft: Orcs and Humans MS-DOS and Mac OS 1994 1,100,000 $45,000,000
Warcraft II: Tides of Darkness MS-DOS, Windows, Macintosh, Saturn, PlayStation 1996 1,000,000 $50,000,000
Warcraft III: Reign of Chaos Windows and Mac OS 2002 3,000,000 $175,000,000
Warcraft III: The Frozen Throne Windows and Mac OS 2004 5,000,000 $95,000,000

A couple of weeks ago I posted an article about building a webpage with a fluid sidebar. I was completely unaware that this is actually a common issue, but I'm very proud to say that all of my solutions can also be found on the Wikipedia page on the Holy Grail (web design). A lot of my knowledge on this comes from my own experience with the issue, since my website actually follows this design pattern and I struggled to get it perfect.

In the old days, before CSS, background colours were set using the bgcolor attribute as below:

HTML
<html bgcolor="rgb(255, 0, 0)">
</html>

But since this is quite an old way of doing things and not used often nowadays, you'll probably find it has a lack of support in some newer browsers like Google's Chrome. I came across this issue when I was trying to make the background red by using rgba(255, 0, 0) which would normally produce red and does in other browsers, but in Google's Chrome browser it produces a totally different colour. I believe this is because Google did not spend much time working on support for this older attribute that should be banished from HTML5 altogether. Below is a sample that may or may not do anything at all:

Hello world

Have you experienced this issue where the colour value represents different colours on different browsers? If so let me know by commenting below.

Since the day Apple announced that they were going to drop their skeuomorphic design patterns, everyone has tried to follow suit - me included.

Skeuomorphism is all about making your design look like something from the real world - something I aimed to do with my website by making it look like a page on your screen (I have since dropped this and moved to a much flatter design). 

But why is it that skeuomorphism has disappeared all of a sudden and what really is it?

In this post, I'm going to talk a little about what a skeuomorphic design would look like and why flatter designs are much more convienient.

Skeuomorphism

By building a system with a real-life-like design using a skeuomorphic design pattern you make the learning curve much smaller: what looks like a microphone is a microphone. This means that more time ends up being on developing the interface than with a non-real-life-like version. 

Skeuomorphism has however one drawback. Complication. Whilst yes it is true that skeuomorphism reduces time spent learning the interface, it also complicates the interface. Buttons may not be so obvious, taking for instance, a volume toggle which you rotate. This would be obviously complicated unless you knew how to use it before hand. This is an example of skeuomorphism at it's worst.

Skeuomorphism also tends to rely on images and gradients as well as other computationally complex elements (including rounded corners and the like). All of this adds to the time spent loading the interface. 

This div below appears with a skeuomorphic interface.

Skeuomorphic design

'Flat interfaces'

Flat may not be the best word to describe these interfaces but it's a good one. Microsoft was one of the first companies to introduce a flat interface with Windows 8:

Microsoft's website is an example of a flat design

The main benefit flat interfaces have over skeuomorphic interfaces is that they tend to be easier to produce and then tend to be easier to render on the client system. Flat design rely less on images, gradients, curved borders, box shadows and a lot of the new CSS 3 styles that are being added and goes 'back to basics'. 

The focus of a flat interface is contrast, making colours the dividers, not box shadows. It also focuses on solid colours, not gradients. And finally, it attempts to make the interface more rectangular than circular (on this note, I may be changing my logo from the orb design to a more square design). 

Below is an example of a flat interface (and also happens to be the style of the buttons on my website):

Flat design

Flat designs do have a few problems however. The first and foremost obvious failing of these designs is that it is difficult to give it a personal feel. Almost all flat designs are in some way or another similar to the next. This ultimately is why flat designs work well however, since they are very easy to understand and are now commonplace. 

More importantly, there is less of an oomph of feeling for the website. Since it can be difficult to make a flat design interesting and not just another boring website, it is very difficult to build a flat design effectively (I do not believe I've got my flat design perfect yet).

The future

The future may see the world go back to a skeuomorphic design again and like all designs, flat interfaces may only be a phase.

Whether or not the design will disappear or not, the design is here to stay for now.

The following image inspired me to write about this:

This image came from Web Designer Depot

Infographic: Flat design vs. skeuomorphism

Nokia's new advert suggests that "every day, more photos are taken on the iPhone, than any other phone". Nokia's Lumia camera may be better, but does that mean more people will change to Nokia's phones? Well clearly not as Windows Phone only has around 2-3% of the market share. I'm not criticizing Windows Phones themselves, but the operating system they run on.

For now my point is that if Microsoft don't do something with Windows Phone 8 and indeed Windows 8, then they will see the market slip out of their hands to both Google and Apple as BlackBerry did.

http://www.youtube.com/watch?v=PqfEE_X5cpQ

We Blog

Finally, a WordPress We Blog. The old blog has been scrapped and replaced with a new one. Anyone can now join and write with me and other bloggers! Here's why you may consider it:

  • My personal blog brings in about 30+ views a day which can easily transfer over to this blog as I recommend and write for it
  • The blog is run by me, and I know how to run the blog to make it successful
  • It may encourage others to view your own blog
  • It is created with WordPress

So if you want to be an author or editor, please get in touch.

Site accessibility

A lot of the original functionalities that once existed here have been removed.

This page was generated in 0.24 seconds using 2097152 bytes. Slow? Let me know.

To use project mode, the window must be greater than 920 pixels in width.
Click here to disable Project Mode.
This site uses cookies to deliver its services, to personalise ads, to store preferences and to analyse traffic. Information about your use of this site is shared with other companies. By using this site, you agree to its use of cookies.
Contact me
Contact Jamie Balfour

Get in touch with me via this form.