WPage design

About This Web Site

Many web pages made by universities and researchers use fixed width layouts that look the same for all sizes of the browser window. Kind of like <div style="width:1000px;height:5000px">. Thus resizing a browser window does not change the page appearance. This preference for the fixed width layout is partly due to abundant browser incompatibilities (think IE vs. FF), bugs, design flaws, etc. that cause problems with viewing web-sites. More control on the web-designer side, and delegating less power to a browser might give an impression of a more professional web-design. However, such an approach distorts the original idea that browser is a powerful tool for delivering your web-page content to a user in a format the user wants to see, not always in the format designer wants to show.

Liquid layouts resize to fit a browser window, so a user has more control of how space on a web-page is filled. For web-designers, it is more difficult to ensure that a page looks good at many browser window sizes simultaneously. Designing a fixed width layout is like making a single web-page. Coding a liquid layout is akin designing a continuously-infinite (read 1) number of web-pages.

We tried to design our pages using largely liquid layouts, as we believe in intelligent users and browser powers. Essentially no scripts were used on the main web-pages, almost all the design was done with Cascading Style Sheets. Images are used only as illustrations (photos, computer graphics), all other elements are variously styled text. We refrain from using images for lines, bullets, buttons, backgrounds, etc. For instance, the expression below is not an image, but a CSS-positioned text, which will resize with the rest of the text (in IE try View → Text Size → Largest):

S j (x) = 1 _____  ____ 2π σ jΣ i=1 n e −  (x − μi2_____ 2σ2j 

We believe that a web-page is easier to grasp when it looks like a page in a book, not like a painted canvas. White background, simple layout illustrated with images, emphasis on some words. We are experimenting with a right-positioned vertical navigation bar, thus leaving to top-left corner for the page-content information, frequently an illustration. Despite some push by the CSS community to reduce the use of tables in favor of CSS styling, we take full advantage of the <table> tag, e.g. see a table on this page. Nothing comes close to table support as far as cross-browser compatibility is concerned. We think that tables should be used freely when appropriate.

Many tricks to increase cross-browser compatibility used here are largely experimental and will fail from time to time. For instance, using anything other than 100% scale in IE7 essentially ruins the page layout. Zoom in many other browsers looks mostly ok. We borrowed many interesting CSS tricks from others. In particular, ingenious inventions by Stu Nicholls are gratefully acknowledged. However, if you don't like or cannot see our formatting, turning off page style will result in usable, although somewhat challenged, pages (e.g. in FF try View → Page Style → No Style).

If our pages do not look like this in your browser (click on the image to download enlarged version):

example of our site layout

try changing your browser settings to their default values. Make sure that the text size is set to "normal", or "medium" and zoom is reset to 1:1. Also, these pages are not formatted correctly by older browsers, e.g. Netscape 4 and some earlier versions of 'Internet Explorer'. If you have one of these, maybe it is time for an upgrade. Many excellent web browsers are available, and they are all free! It should take several clicks and several minutes to download any one of them, and you will see the difference. Here are a few links to some of better-known free browsers, listed alphabetically, as we don't offer opinions about browser ranking. All these browsers with default settings (on October 1st 2008) display our web-pages well.

Browser name Company Web-site for FREE download
Chrome Google http://www.google.com/chrome
Firefox Mozilla http://www.mozilla.com/en-US/firefox
Internet Explorer Microsoft http://www.microsoft.com/ie
Maxthon Maxthon http://www.maxthon.com
Opera Opera http://www.opera.com
Safari Apple http://www.apple.com/safari
•  •  • 

Found errors? Got a second to leave a comment? Have questions? Please let us know!
Your criticism is always much appreciated, as it helps us to improve the web-site.

Disclaimer: we try our best to update these pages, but inevitably fall behind. Please tell us what you want to see.
HorA Server2
Lab meetings
About this site