Home arrow Design Usability arrow Dynamic Page Elements-Cloak and Dagger Web Design

Dynamic Page Elements-Cloak and Dagger Web Design

There are not many aspects of web design that seem to ignite the same fascination in developers as making elements dynamic by hiding and showing them on user interaction. Collapsible lists, maps with hover elements and multi level drop-down navigations still seem to be hot and need to be part of a web site to make it "cool" and to "increase usability". Much like the magician conjuring the rabbit out of the top hat for the tenth time in a row, this design stunt does gets a bit stale though. Maybe it is time to take a step back and look at what we do.

Author Info:
By: Christian Heilmann
Rating: 4 stars4 stars4 stars4 stars4 stars / 14
October 18, 2004
  1. · Dynamic Page Elements-Cloak and Dagger Web Design
  2. · The Origin of Dynamic Elements
  3. · Current Problems
  4. · Troubles with Available Screen Estate
  5. · Current Uses of Dynamic Elements
  6. · Explorer Menus (collapsible list navigations)
  7. · Collapsible Page Elements
  8. · Tooltips and Hidden Extra Information
  9. · Enhanced Internal Navigation
  10. · Conclusion and Notes

print this article

Dynamic Page Elements-Cloak and Dagger Web Design
(Page 1 of 10 )

The History of Dynamic Elements

Originally, HTML was not meant to have dynamic elements that show up when the user interacted with other elements. That is what links were for, and interaction with them meant a new page was loaded.

In the olden days we were amazed to see a bunch of links in different states (link, active, visited) and we looked awe struck at a blurb of colour or a rectangle slowly turning into an image.

These restrictions and the simplicity also had its merits:

  • Sites were designed to tell us at any stage of our journey where we are and where other pages with related content are - a static navigation on one spot.

  • The different link states made us realize where we have been already and what is new without any search effort.

  • Deep sites never dared to show us links not related to this sub section in the main navigation - the sitemap, the search and internal promotions fulfiled that job nicely.

When CSS got supported and JavaScript allowed us to modify elements and their CSS attributes, "DHTML" was born.

"DHTML" is not a standard; it is a marketing word, and there was a time when a new site needed to have a "DHTML" intro and elements, or else it would not show up in the "cool pages" lists of our web world. Browser shortcomings and newly emerging browsers triggering the need to change the scripts over and over again soon made it transparent though that "DHTML" was just not reliable enough. These incompatibilities and the high maintenance made many an obtrusive and badly designed web site go the way of the Dodo bird. We are now at a stage where we can create some of these effects in CSS only, and our Javascript skills have become more sophisticated [See Note 1]. We can test if a browser supports a certain technique before we apply it, and we have browsers that are more sophisticated and standards-literate at our disposal.

blog comments powered by Disqus

- Responsive Web Design: More Than Just a Buzz...
- Add New Website Features to Please Users
- Gzip Components in Action
- Configuring Gzip Components
- Gzip Components
- Create Great JavaScript and CSS Menus Simply
- Design Principles that Shape a Web Site
- Creating Aqua Style Images
- Easy as A,B,C dynamic A to Z indexes
- EasyChart: a Usability Teaching Tool to Demo...
- Building Friendly Pop-up Windows
- Back to School: Design Usability
- Using HTML_QuickForm To Manage Web Forms, Pa...
- Using HTML_QuickForm To Manage Web Forms, Pa...
- More Website Knick Knack

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 

Developer Shed Affiliates


© 2003-2018 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials