cheating yourself out of a technical problem

We all want to create the best technical solution, making sure it flows naturally and that it looks good. But there is always time and budget pressures that do not allow you to create that perfect piece of software that you want. It is always a struggle between quality, time and money that shape the resulting product.

Interestingly there are always ways to cheat yourself out of an issue to fix it later. The solution might be not technically the best but it can work for 90% of the time and when it fails you can make it matter less. Cheating the client out of the best solution might make them happier than delivering a perfect product.

The pledge

Let’s say your creating a photo gallery. You want to create a page with all the images as big as possible but not exceeding a certain box size. Facebook does this with their photo galleries and it is a very common practice. But if we look at it closely it’s not easy to do as it looks, sometimes an image needs to scale to a maximum width and sometimes it needs to scale to a maximum height. This can be done by using css and doing something like this

.container {
  width: 80px;
  height: 60px;

.container img {
  max-width: 80px;
  max-height: 60px;

This can work for images that are bigger than the container, but what about smaller image? It is also not very efficient as you will push bigger images to the client than they will be displayed. On a large scale like Facebook this can really hurt the bandwidth.

What you would like to do is create thumbnail files from the original photos that fit the container size exactly. This would be most efficient in bandwidth and would allow for both bigger and smaller images from the container to fit.

The Turn

What if you do not have the time or the resources to set up this kind of thumbnail system you might want to cheat this thing a little. The CSS technique mentioned earlier would now keep white space if the image does not fit the proportions of the container. Photo’s in a photo gallery will almost always exceed the size of the container but are in different ratios. This can pose a problem but can be solved by this kind of solution.

.container {
  width: 80px;
  height: 60px;
  overflow: hidden;

.container img {
  width: 80px;

This would make the image slide below the container that will hide it. This way the container will be filled most of the time. Only panoramic pictures now have a small white are at the top and bottom. This is a solution that would work for 90% of the images as panoramic is not a very popular format at the moment. It is not perfect as higher images now only show the top part and the image is not really the best performance. But for a first release it will do and taking off a couple of weeks in development is also nice.

The Prestige

It’s not actually about this example… Although it nicely illustrates what you can do in this kind of situation. It is more about allowing yourself to take small shortcuts that can save you weeks in development. As long as the shortcuts are acceptable and users are not complaining about it yet you can get away with it. But don’t forget that sooner or later you will have to fix it. The photo gallery thumbnails will work as scaled down and not perfectly cut version. But in the end you want to take care of that performance issue and make it look and feel better.

Lesson learned: You can cheat and get a quick result but you’ll need to fix it later. The quicker can be an advantage in some situations but pick your cheats carefully.


, , , ,

  1. Leave a comment

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: