A way to use spare screen width on a website

by | Published | Last updated

Except for mobile phones, computer screens are too wide to fill with text that can be read easily and most websites find a way to restrict the width of a column of text. Here is an idea for doing that while making the remaining screen space useful.

Reading long lines of text is difficult because your eyes do not automatically find the start of the next line correctly. For centuries, newspapers have printed in columns of around 5cm. Magazines with A4 pages divide the page into vertical columns.

But while an A4 sheet of paper is about 21cm wide and about 29.5cm high, being higher than it is wide, computer screens are the opposite, being wider than they are high, with many of the last decade having a width to height ratio of 16:9.

So what do websites do? Many use a large font and restrict it to a column, and then find some way to occupy the margins.

There is a way that wide screens could potentially be useful and sometimes make a website more convenient to read than a book. Those are the times when you want to read the text and refer to a diagram or a table at the same time. Technical subjects are one example. You would like to see the diagram while you read its explanation. You have to put your fingers in the book and keep flicking backwards and forwards from one page to the other. And not only technical subjects, but also perhaps history, where you would like to be able to see the map while you read where events occurred. And not only history, but in any factual subject where you might want to look at the references, usually at the back of the book, where you have to keep a second bookmark.

For these kinds of situations the idea is to make use of the excess screen width by dividing the screen into two vertical columns and - this is the important point - making them independently scrollable. One of them is for the text which can be scrolled in the normal way, and the second one contains, pictures, maps, diagrams and references. You can scroll separately to whichever of these you want to see without leaving your current place in the text.

Related articles

External links