Goat StaringI 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 😉

Signature
Image: Pete O’Shea

6 comments

Shirl

Very technical but if you are into the in’s and out’s of a computer then I should imagine it would be invaluable.A good read as always keep up the good work.

    Pete O'Shea

    Hi gorgeous, I did try and keep it to a level I was hoping everyone would be able to find interesting. Did you know about the ctrl and + and ctrl and – to resize a web page for example?

Gary Crompton

Hi Pete, we have the same problem regarding creating online courses – we need to make them accessible for iPads, iPhones, Macs, and normal PC monitors – it’s a headache, I can tell you!

PS: Didn’t know about the CTRL + and CTRL – (usually resize using CTRL and MOUSE WHEEL!)

    Pete O'Shea

    Hi Gary,

    How do you go about checking your online courses on all of the different hardware? Do you have an iPad to play with at work!!!

    Are there any web design tips you want to share…

Michael Ludgate

Contol & scoll fo the win! This blog handles esizing petty well aleady. You’e descibing a fundamental testing issue, it’s madness to chase pefection o even basic compliance in evey bowse. Instead ask who ae you witing fo and what has to wok, what is acceptable to leave out. Web testing is moe intesting fo a softwae teste, as it highlights issues that othe people ae willing to ignoe. Any testing ventue makes demands that don’t get satisfied, the typical tadeoff is esoucing Vs. coveage. Bugs emain and it’s easy to say it’d have been the same with moe esouces. But when it comes to web development, the ug isn’t so big. Tun anothe diection and see that you’ve boken something that woked befoe – being foced to make a decision of which fault to accept. Almost like a docto, fo some eason a pogamme decides he must esolve the poblem. I think it makes fa moe sense to say ‘compatible with’ o ‘best viewed with’, then making sue that it’s slick. Besides, by using x bowse, which intepets a standad and endes appopiately is an active wilful choice to deviate fom what the designe intended.

(Soy fo the post with no lette ‘ahhh’, my keyboad isn’t spitting them out)

    Pete O'Shea

    Hi Michael,

    The design for this site is currently using a free template. I am fairly happy with it for now but I want to design my own template from scratch and add a bit of a personal touch to the site. When I get around to it I am going to have to bear these ideas in mind.

    I am not sure you can just say ‘compatible with…’ anymore for websites as that is restricting what hardware a reader can use! There are even more restrictions with the resolution. I see a lot of sites that say best viewed at 1024×768 or greater which is fine for a desktop but basically saying you are not interested in people using smartphones or even netbooks! Just to add to the complication there are settings within Windows that can change the border size of the windows or the text size or even the taskbar width or position, all of which have a knock on effect to the viewable area within the browser. And that is assuming the browser is always viewed at full screen when it is more likely that each user has the window open at whatever size it was when last used it, which could be pretty much anything…

    I agree that thorough testing is impossible for all possible setups but I do think that pages should be designed with all possibilities in mind even if certain design features are only available on the higher end of the scale… I suppose this will make testing even harder in the future though…

Leave a reply