ImQuSo : Information on this web design.

www.imquso.com

Information on this web design.

This webdesign explained

Program code

The website is written in PHP. The texts (left and right) are combined in a single file (the page that is requested) to have Search Engine Friendly (SEF) URLs. E.g. www.imquso.nl/webdesign.php. Search engines favour this.
The general functions needed to construct the html page are in a central file, there are also (language specific) configuration files that define the relations between the files, pages, chapters, etc.
During the html generation the template is created and the texts are shown in the correct language.
There is other PHP code that based on the configuration files creates sitemap, index/tree files for search engines and 'crawlers' in different formats.

About this web design

The idea for this webdesign, a folded open book, bugged my mind for a long time but it wasn't mature enough. But know there are much more widescreen monitors so it was an option. However: the scalability of the web pages (for normal users) must always be assured. Also changing the characters size on screen (bigger or smaller) shouldn't cause layout conflicts.
A paging book constructed with flash was an idea, but the standard and commercial available flash components could not deliver the functionality that i needed. That's why the simple html generated pages.

The book background

Using CCS to create the two text columns/pages with scalable height and width (fluid) was possible but the problem of different page lengths (left and right) was not solveable by me.
That why i choose a table layout with five columns and three rows, of which some heights and widths are Fixed while others are Sscalable.

  +-F-+---S---+-F-+---S---+-F-+
  F   |       |   |       |   |
  +---+-------+---+-------+---+
  |   |  left |   | right |   |
  S   |  side |   | side  |   |
  |   |content|   |content|   |
  +---+-------+---+-------+---+
  F   |       |   |       |   |
  +---+-------+---+-------+---+

The left and right page content must be scalable while the other parts must stay stable.
The book is contructed with a table and background pictures. Fixed height and width is enforced with dummy pixels of a defined height or width.

The tabs

The tabs are also tables because all CSS variants had limitations (normal, hover, selected) or scalability. The tab distribution left or right can be determined from the order of the pages. By giving them an (internal) number one can have a differened horizontal ofsets and so creating the impression that the tabs are on different pages in the book.
The tabs stay on the same height when moving from left to right (or vise versa). This mirrorring while paging mimics the natural effect of a real book. Obviously have the tabs a different color for the front and rear.

The Table Of Contents

The table of content, previous page, next page and pagenumbers are deducted from the configuation file where e.g. the page/chapter relation is defined.
The actual layout of the table of contents is CSS and reused from a WWW css sample.

Paging in the book

The effect of skipping thru the pages in the book is reached with changes of the book left and rightsize depended on the page shown. Higher pagenumbers have a narrow rightsize and lower pagenumbers have a narrow leftsize.
By giving the tabs a logical ofset the different book thickness becomes more vissible. But the book top and bottom also change in size and the center vouw changes per page. The pagenumbers, table of content on page 1 and previous, next page option in the page corners contribute to the natural book behaviour.

Navigation

Obviously the main menu is the table of contents. But at the left and right size of the book are tabs with the same main menu choices(Chapters).
Every left page has at the left top and left bottom corner a previous page option.
The same for the right page in the right bottom and right top corner a next page option.
If there is no previous or next page the options are hidden. E.g. page 1 has no previous page.
The pagenumbers are a link to additional static page information.
At the bottom of every windows there is small print with on the left a link to the general terms of use for this website. At the right bottom there are two links. One to this webdesign explanation and a link to my family website.
In the left top corner there are two icons. One "the printer" is a link to a printfriendly webdesign/layout.
The other "A celluar phone" is a link to the special GSM/Mobile phone webdesign/layout.
The book left top (below the icons) is a link to the actual page content for visual disabled people that use readers.

Related Webdesigns

The Design for mobile browsers

Personal Information Managers, phones and other mobile devices are used more and more to browse the internet. Many of these devices have a small screen, limited memmory and a relative slow connection to name a few limitations.
That's why many companies (including this) have a special GSM/mobile design in which one skips the fancy layout and shows only the essential information for this group of users.
The webserver can recognise a mobile device a forwards it directly to this special design(website).
Here is the link ImQuSO GSM Design or use the GSM icon and it is ofcourse bilingual.

The Textonly design

Especialy for internet browser that doesn't support pictures (or this option is turned of in normal browsers), is there a design that has no pictures and loads with the speed of light.
The content is identical to the book design content.

This textonly webdesign is optimised for people with a visually disabillity that use a speech device. There is a link to skip the menus (Available is all three designs) but it has also no 'redundant infromation'.

This webdesign is also suitable for people with a colour disabillity and is tested to validate the readabillity for different forms of colour blindness and the results are positive. For most people with a common colour blindness ofers this website sufficient contrast.
Also the content is identical to the book design content.
Here is the ImQuSO Text Only Design link or use the printer icon and it is of course bilingual.

Website validation

- 15 -

- 16 -

Webdesign by: Peter van de Kerkhof