I created my first web page back in about 1994 and at that time there was no choice but to be flexible with the layout of the page. The idea was more about making information available rather than trying to create a snazzy display. Loading images over a modem could take a while and so they were kept to a minimum…

The internet has changed dramatically over the years and now some websites seem to be based purely around images. This can be quite visually pleasing but there is a down side to it, the size is pretty much fixed.

As more and more internet enabled devices are appearing with different resolutions how can a fixed width website still work?

The Problem

I have a lovely 24″ monitor on my desk, running at it’s native resolution of 1920×1200, and I like to maximise whichever window I am currently working on to help me focus on just that one thing. This means that with most websites I have huge blank, unused areas down each side…

I also surf the internet from my laptop, which has a much smaller resolution, or even my iPhone which is tiny in comparison. With the iPhone, for example, the same web page is usually either too small to read or requires horizontal scrolling as well as vertical. Vertical scrolling is perfectly acceptable and the idea of the fold is no longer an issue. Anyone who can’t scroll down deserves not to see what is hidden below…

As for horizontal scrolling then it can get a bit complicated. It’s not too bad on the iPhone with the ease of scrolling with just a flick of your finger but with a laptop this can become a bit annoying having to go from one scrollbar to the other to navigate your way around the page. Due to the iPhone’s limited size this can almost be expected but if you turn the phone to landscape orientation and you still have to involve horizontal scrolling if you want to read the text then I think there is a bit of a usability issue.

Another major issue that seems to be overlooked by many web sites is that the user now has the ability to resize stuff themselves. If you are using a PC try holding down the Ctrl key and pressing the + or – keys to see what happens…

This is a great idea especially for people with bad eyesight and should be encouraged. Unfortunately a lot of sites are so fixed in their layout that they go horribly wrong when resized.

Making Things Worse

There are a lot of different browsers in use at the moment. I currently use a mixture of Google Chrome and Mozilla Firefox on my PCs, both of which have pros and cons, and the default Safari on my iPhone. I even open up Internet Explorer 8 once in a while…

Anyway my point is that each of these browsers display things slightly differently. One of the reasons I gave up with web design was the insane amount of workarounds required to try and make the page display the same in just a couple of different browsers. With so many out there nowadays it is quite literally impossible to accomplish. In fact it is not just the browser any more as this also relates to the many different internet enabled devices out there. It would mean buying every single new device out there and checking the display looks correct at all of the devices different resolution settings, using all available browser options.

The question is whether or not that should even be a goal any more? Why does the page need to look the same on every device in every browser?

One way around this issue is to create a different style for each device. In fact my website looks completely different on my iPhone thanks to a plugin called WPtouch. Looking forward though I am not sure if this is even possible as there are so many different types of device and more are being though up all the time. This would become very similar to the issue with trying to design for each browser…

Target

The original idea of the web was just to get information out there. If you want to put out static information in a magazine style format then put it out as a PDF to get the nice fixed page layout you require. If you are truly trying to get the message on a web page then why not allow for a bit more flexibility in the design. Give the user the choice to allow them to view it however they want. In theory there are still people out there using text based browsers only—they do still exist you know. Another example is blind people who only require access to the text so that an external program of some kind can convert the words to audio.

What I am trying to get at there is that the most important part of the web page should be the content. Embellishment can be very useful and should not be forgotten about, it should just be considered as a nicety. A very important nicety if you want your web site to stand out from the crowd…

There is then no need to create mock-ups of a proposed page in PhotoShop, or your graphical app of choice, and be forced to make the site look exactly like the mock-up for every single browser. If all the layout stuff is done with stylesheets then it can be considered optional, and even turned off by the user if they so desire.

Possible Solutions

A little extra thought is required to allow for different resolutions from the outset. There are great examples out there already and it is something I think is the future for web design.

Have a look at Simon Collison’s site or Hicks Design and try resizing your browser window. The layout of both of these sites adjusts itself as the size changes to make use of the space available…

I eventually want to redesign this site and this flexibility is something that will be my top priority! Don’t get too excited though as this is a way off yet as I have a lot to do before I can find the time for a job like that…

What are your views on the stuff out there on the internet? I may have biased views wanting to go back to the simpler days of my youth 😉