Display resolutions in Tarantula 1.98

With computers becoming cheaper, and web content turning more 'livelier', a lot of people are going in for larger monitors, such as 15" and 17" displays. Large monitors, of course, show a larger picture... but they also have higher resolution : resolutions if 1024x768, or even 1280x1024 are fairly common. Contrast that with 14" monitors, which are still the most widely used today, and most GUIs default to a resolution of 640x480. A lot of people don't bother to change it, some because they don't know how.

We mention all this here, because a number of web-sites have sprung up which have been designed on systems with large monitors, without keeping in mind the fact that most people will be viewing it on 14" monitors, with resolutions around 800x600. As a result, a lot of the page is either 'clipped' out of the window (the surfer will then have to scroll the page horizontally, in addition to scrolling it vertically), or it is wrapped, which may completely destroy the complicated layout of pages. In fact, quite a few people now have a line at the bottom of their pages, which goes 'designed for 800x600' or something similar.

Tarantula, however, is more elegant in dealing with this problem. We believe that rather than being inconsiderate of a surfer's monitor resolution, the page should be designed such that everyone is able to make the best of it. This will only go towards increasing the reach of the web-site. For this, Tarantula provides several facilities.

Probably the simplest aid that Tarantula provides for multiple resolution development is the 'resolution barrier'. Monitors generally work in standard resolutions, with the width being one of 640, 800, 1024, 1280 etc. The height aspect of the resolution does not really matter, as people are generally used to scrolling pages vertically. To make sure that you know just how much of your page will be visible in different resolutions, Tarantula draws a dotted line at these preset widths (at the top of these lines, you will also see the actual width at that point). Of course, this barrier does not appear always : It only makes an appearance when you cross one of the width boundaries. For example, if you are designing in 800x600 mode, the vertical barrier will appear as soon as you create any area that goes beyond the 640th pixel. This 'barrier' does not actually stop you from creating the area, it merely informs you that any person browsing with a resolution of 640x480 will not be able to see what is being created. Such barriers will appear at widths 640, 800 and 1024.


Note :
If you don't see the barrier when you cross any boundaries, just click on the select tool (button with single red arrow) again. This will bring up the barrier.

Another simple aid that Tarantula provides, is the 'on-the-fly display resolution switching'. What this means is that even while designing, you can quickly switch the display resolution without restarting the computer, and check out how the page looks in different resolutions. Just click on the resolution you want in the 'Display' option of the main menu. This menu lists the modes that Windows thinks is right for your hardware, but still, to be on the safe side, Tarantula gives you 8 seconds after a mode change to decide if you want to keep the new mode. If you don't respond within that time, it is assumed that something went wrong and you are unable to read the display. In this case, Tarantula automatically switches the display mode back to the original working mode.

reso
These, however, are features which help in developing pages for multiple resolutions. However, Tarantula also has different modes for HTML generation, which can create pages suited for different resolutions. What the aids described above do is to help you with placement etc., so that you decide for yourself if you want that particular layout. The generation modes, however, go further : They generate HTML such that the same copy of HTML itself is able to adapt to the different display resolutions. The default mode is the 'fixed mode', where every area in the HTML remains exactly as it was designed. Besides this, there are four other placement modes : Align left, align center, align right, and autoexpand.

config 
 
   
The alignment modes do not generally change the position of the areas relative to each other... they merely align the whole page with respect to the browser. Thus, the 'Center Align' mode will always display the page in the center of the screen. Now, this page could've been designed in 640x480 resolution, but since on higher resolutions it appears centered, it doesn't look like it was designed for a specific resolution.

A very unique mode is the 'AutoExpand' feature. Using this (experimental) feature, the HTML generated is such that it dynamically adapts to resolution changes of the display. In this mode, the HTML is able to 'strech' itself to fit the entire browser window. If the window is smaller that the designed size, the HTML will 'shrink itself'. Note that all this shrinking and stretching happens without changing the general layout of the page. Thus, a page designed on 640x480 resolution will automatically fill a display with a 1024x768 resolution, and it will appear as if the page was actually designed for that mode itself!



[ Main ] [ Text ] [ Images ] [ Project and site management ] [ Thumbnails & galleries ] [ Forms ] [ Multimedia ] [ Multiple display resolutions ] [ Scripts and Applets ] [ Foreign language support ] [ Navigation & indexing ]