Building for 1024 x 768

HTML & CSS
1

Hi there,

I’m currently working on a new portfolio website and got most of it there. I have been trying to build for a 1024 x 768 resolution which has been going well so far but I’ve just had a look at a few of the pages and hit a wall with how I can physically fit everything into such a small space.

The idea of my portfolio is to have everything contained in the viewport you start with (i.e. you load up any page and the content will fit the space without any scrollbars, vertical or horizontal). The main reason for using this restrictive layout is so that it is easier to navigate and you don’t miss anything.

However, when testing with the 1024 x 768 resolution I am hitting all sorts of problems with fitting everything in - mainly when it comes to providing large images for people to view or information about how the project was produced. When I check all of this on my usual resolution of 1280 x 1024 it looks perfect, nothing out of place.

If anyone has any suggestions on how I can fix this major problem please let me know :(.

Some example pages:

http://www.psychobeing.co.uk/2012/demo2/print-work-soundsofthesummer.asp
http://www.psychobeing.co.uk/2012/demo2/animation-video-redbull.asp

Cheers,

Shoxt3r

2

The solution is not to fix a navigation to the header, side and footer then. e.g. you can just make the footer at the bottom of the page as opposed to fixed.

3

Personally, I don’t think it’s worth trying to control a page layout like this. It may work ok for some visitors, but is likely to fail for many others—those on small screens and so on. Trying to control a layout like this on the huge range of devices available—with all their various quirks, shortcomings and limitations—is a nightmare.