As web pages gain both functionality and content, they often develop visual clutter that can frustrate users. An extreme example would be something like HavenWorks, where so much information is crammed into the space that the page is practically unusable. The desktop GUI has windows to help organize all the user's information: allowing the user to re-position material, rearrange it, and hide or close it when it is not needed. People are used to GUI windows as a way of practically managing large amounts of content, and as web applications become increasingly complex, it makes sense for the window to make a jump to the web page.
We developed a simple library that allows developers create windows in their web pages, simply by adding a class to the content they want in a window. End users will be able to move, resize, minimize, and even remove these elements within the page.
What it DoesEdit
In order to use our windowing kit, a developer needs to include a couple resources in their file system:
- The Windowing.js library, containing the code to generate windows from the DOM
- The windowing stylesheet, which styles the generated windows appropriately
- The background image for the window header
where PATH is the relative (or absolute) path to these resources
Finally, to make content a window, the developer just needs to wrap the content in a div and apply the "window" class to it. The developer can also supply a title caption for the window, along with default size and position. For example, one such div might look like:
<div class="window" caption="My Caption" style="height:100x; width:200px; position:absolute; left:95px; top:15px;">I am a window!</div>
We aimed to make creating windows as painless and fluid as possible for the web developer. Thus, he or she can simply modify an existing html document with divs to create new windows. However, it is also possible to functionally create windows, if the developer wants to generate one dynamically. To create a simple window, a developer could just write:
Clients see simple windows within the developer's web page. These windows can be:
- Moved by clicking and dragging on the title bar
- Resized by clicking and dragging the resize icon in the lower right
- Minimized by clicking on the "-" icon in the upper right
- Restored by clicking on the "+" icon in the upper right when the window is minimized
- Closed by clicking on the "x" icon in the upper right
Only non-minimized windows can be minimized, and only minimized windows can be restored. The icon for "-" changes to "+" when the window is minimized, and back to "-" when it is restored. The minimize action and restore action both have smooth transitions, and the close action has a simple fade animation.
ExampleEditFor an example of the window system in action, click here.
The functionality for dragging, resizing, and minimizing the windows is then added to the outer window div itself, using some of the jQuery UI tools. This allows for much of the functionality that we are used to from desktop windows.
A windowing approach to web organization allows for three main benefits. The first is economy of screen space. By packaging content in windows, users can decide what content they want to see at any given time. By allowing them to minimize windows they're not currently using, you can decrease the amount of scrolling that users need to do on a given page. This allows not only for better use of screen space, but also for user-customizable screen space.
The second major advantage of a windowing system is better organizational capabilities. A windowing system doesn't require the developer to figure out ahead of time how users are going to want the content arranged on the screen. In fact, it may not even be the case that all users want the content arranged the same way. With a windowing system, all of this is left in the hands of the user. The user can decide what content should be placed next to what other content, and which content is important enough to merit being near the top of the page, etc.
The third benefit of a windowing system for the web is porting to the browser an analogy that users are already familiar with from their desktops. This means that users don't need to interact with your website in a fundamentally different way than they interact with their desktops. Because you're using a system that is already familiar to users, it allows for a more accessible website.
The windowing analogy is arguably of limited applicability on the web. It is not necessarily always the case that web pages are attempting to display disparate sets of data such that it makes sense to encapsulate it in windows. Often, different sets of data are simply given their own pages in a website and don't need to be accessed at the same time. The windowing analogy is more useful in cases where disparate sets of data may need to be displayed side-by-side.
A major shortcoming of the implementation as it stands is the lack of namespacing. Right now, the functions defined in the library could conflict with preexisting functions on the website. Also, the current implementation requires that users add the class "window" to any divs that should be made into windows. This also could cause some naming conflicts, if a particular web page already has div's that have the class name "window."
The following is a list of features that could make the windowing system more reusable.
- Allowing the user to specify the class name for divs that will be made into windows- This will allow the windowing framework to be added to existing web pages with less fear of unintended behavior
- Minimization- Users are used to being able to minimize windows to the bottom of the screen, and then restore them. In the current implementation, windows are minimized in place. This decision was somewhat based on limitations of the jQuery UI framework, as minimizing windows to the bottom of the screen breaks the dragging and resizing code. In order to allow minimization to the bottom of the screen, the windowing system would need to be rewritten without using jQuery.