WebZonez
Welcome to WebZoneZ
It has been said over and over that the content is the king when it comes to web page design. I totally agree. However, the difference is, while almost everyone stops there, I do not! If there is a king then there needs to be a queen. As the old saying goes - It takes two to tango. For a good web page design we need the two: Content (king) and Presentation (queen). And when they start their masterly crafted tango, then we can have a good web page design, which will attract and hold attention!
Consequently, this site will be dedicated to the search of different ways, tools and/or techniques - using (X)HTML & CSS, with which a web designer can improve the presentation of any given web page. At this point in time, this site consist of the following two main sections.
Screen Revolution - ZoneZ
This section introduces, and discusses in detail, the ZoneZ concept, which provide the building blocks of a rather unorthodox but very innovative page layout technique, that offers all the benefits of Frames, without the problems associated with the Frames.
Lets summarize the steps that lead to this end:
- First and most essential step is to Normalization and Pacification of the Privileged Elements by disabling their scrollbars, which basically translates to disabling the Default Scrollbars of all the Browsers. This was perhaps the biggest challenge, triggering - and based on, the series of extensive experiments detailed in the section titled Screen Mysteries. www.web-zonez.com/screen/index.html
- Disabling the Default Scrollbars of Browsers, allows the screen to be divided in as many ZoneZ as needed. Each Zone is an ordinary div element with its own scroll control, positioned and dimensioned in proportional units (%). The resultant overall page layout is very similar to that of one created by using Frames, but not as far-reaching enough.
- The second unorthodox step is the introduction of the concepts of Plastic (fixed in both axis), Elasti-Plastic (plastic in one axis and elastic in the other) or Elastic (elastic in both axis) Zones, that can be used as building blocks in the page layout. Most interesting spin is that dimensioning and positioning of each Zone uses only absolute units (px), but still the resultant page layout is totally non-browser specific, non-resolution specific!
- However, almost - if not all browsers, including IE7, are fully CSS2 complaint, supporting the unhindered use of ZoneZ with positioning and dimensioning in absolute units (px), IE6 and lower will not. Taking into consideration that IE6 is still in wide use, we also offer various fall-back scenerios (or perhaps, you can say work-around) for this.
Even though I strongly recommend you the read the entire contents of this section, I also acknowledge the ever growing impatience and the apparent need for instant gratification among many (to a great disappointment on my end). For those folks, a list of 4 Demo Pages - each using different fall-back scenarios for backward compatibility, is made available on the Auxiliary Panel.
Screen Mysteries
This section contains the wealth of information and/or data, based on in-depth and detailed experiments/studies conducted, relating to the Fundamental Flaws of Browsers, as well as providing the solid scientific foundation that I felt was necessary for the full formulation of the ZoneZ concept.
From the beginning the biggest challenge of the implementation of the ZoneZ concept was how to control the Default Scollbars of all the Browsers in a uniform way. I finally came up with an intuitive solution that worked (year 2003). However, I had to prove to myself this solution was not just a fluke, but really factual, as well as to see if there were any other avenue(s) that would provide the desired end result.
So started a series of experiments, which at the beginning, seemed to be somewhat lengthy but rather straightforward. However, I quickly realized that I had fallen into an abyss of frustration, due to interferences from other factors unrelated to the subject of these experiments. As a result, I had to go back to square one, and try to identify and isolate these UBO's and re-organize my experiments/studies under three separate categories:
-
Privileged Ones
Identifying the Browser given privileges of the body, html and phantom elements, and try to Normalize them, whenever possible, by reseting the default values of their CSS properties. www.web-zonez.com/screen/duo/index.html -
Scrollin' Along...
Investigation into the behavior of the Browser Default Scrollbars as a function of the overflow property of both the html and the body elements. www.web-zonez.com/screen/scroll/index.html -
100% ≠ 100% ?
An investigation into the Control Logic (or illogic) used by different Browsers to control (i.e. activate or de-activate) the Scrollbars, when the overflow property is set to auto - based on their height/width calculations. www.web-zonez.com/screen/100/index.html
As mentioned earlier, these sets of experiments, not only proved my intuition right, but also resulted in a wealth of data and/or information in the uncharted waters of Fundamental Flaws of Browsers, as well as uncovering some very deeply hidden skeletons in the closet, such as the Phantom of Opera.
I strongly recommend that you spend some good time looking at these experiments/studies. Who knows, based on these data, someone(s) out there may come up with other ideas and/or solutions that may make the life of Web Developers just a bit easier. www.web-zonez.com/screen/
Looking into the Future
Of course, I have ambitious plans for the expansion of this site- as outlined under our rather ambitious Mission Statement, but the reality of life is that this a truly spare-time project and the spare time is very scarce. I am hoping that there will be contributions to this expansion also from others, in the form of articles and/or studies.
- Feed-back & Comments:
- Please send any comments, opinions, and even contributions on this subject, using the Feed-Back Form.
- Further Reading:
- You can review the list of Related Articles, with brief descriptions and links on the Auxiliary Panel,
|
|
Web Design & Engineering: Dr. Z
|
