Dynamic Site Design: Keeping Your Pages Uniform

Posted by Mike Harvey on: 2007-01-28 03:54:39

Self SEO > Web Development Articles

At my company we build dynamic websites - sites which constantly adapt to user input and allow for extensive content management by site administrators. Regardless of the amount of information on a page, the design should adapt, maintaining its professional appearance.

The Site Container:
For a dynamic site to work at all it needs a solid base. A height-flexible container encasing the content of the site is a perfect foundation. Something as simple yet as effective as a black border with a consistent site-width will set the inner content apart from the page background. This container can expand or contract height-wise to naturally accommodate different amounts of content.

Navigation:
One of the best ways to maintain a dynamic and functional site navigation is by using drop-down menus. Drop-downs allow for specific site navigation from any page on the site, and are easy to dynamically produce, employing the same logic as the site container.

Main categories are each wrapped inside a relative div so that each can be assigned an absolutely-positioned, hidden submenu which will appear upon mouseover. This method is best for dynamic sites because the height can increase or decrease as the number of submenu items increase and decrease without affecting the overall layout of the site.

Too Much Content (We should all be so lucky):
A constant challenges facing dynamic site developers is displaying a wealth of content in just one page. Often times, layouts are optimized for a specific amount of content, and if they exceed that amount, the pages will appear crowded and jumbled.

One of the best methods of alleviating this problem, ensuring a usable and SEO friendly design, is combining JavaScript and DHTML to create tabbed browsing within pages.

Examples of this can be found at Ugallery.com, an online art gallery, where a page was created for users so that they could display as many pieces of their artwork as desired without exceeding the fixed site width. The solution was a scrolling gallery powered by JavaScript and DHTML. All of the information is still rendered in the source, however, much of it is hidden, to be revealed when a user mousse over a scrolling arrow button.

The same basic function was employed for the artist’s profile. The height of the container was constrained, and so, a profile was placed within a scrolling DHTML text box, making use of the "overflow:hidden" style, and affording artists more space to describe themselves.

The artist’s current portfolio, their exhibitions, and a visitor commentary section also had to be incorporated on one page. The solution: Tabbed JavaScript and DHTML navigation which better organized space and allowed the visitor to toggle through the artist’s portfolio, exhibitions, and visitor commentary without reloading.

The lesson here is when building a dynamic site, make use of advanced design techniques. By using these methods, not only can information be better organized and more intuitively arranged, but it can also be constrained to achieve a consistent look and feel for the site. Also remember that most DHTML mentioned in this article can be found at various open source web sites.

Happy web designing!

This article was co-authored by Mike Bradbury and Mike Harvey. Both are employees of Objectware, Inc, an Atlanta-based web development firm and Washington DC web design company. See the examples from this article live at the online art gallery Ugallery.com

Webmaster Podcaster

If you are tired of using a text editor to write your RSS podcast feeds for your audio and video podcasts, use this powerful software that will generate your RSS podcast feeds in no time at all! Supports both normal and iTunes feeds!

Generate your podcast feeds(audio/video) feeds with the click of a button.

Publish your podcasts on Apple iTunes. The software generates iTunes feeds as well.

User friendly interface for easy navigation and use of the software.

Built-in voice recorder that can record your audio and save as Mp3 format.

Auto enclosure generation. Builds your enclosure tags automatically!

Supports both audio and video files. Mp3, M4A, M4V, Mp4, MOV and also PDF.

Print this article

Tell a friend

User comments:

phoenixp160 - Posted on: 2011-07-23 09:10:33

Dynamic websites are now extensively used in the web world. It give an advance website design which are user friendly,
________________
Heathrow Taxi

webmaster.mcintosh - Posted on: 2011-09-12 09:10:17

thank you very much i learn bit HTML tags here.

home theater system
audio source

abe - Posted on: 2011-09-15 00:42:35

A nice article.
I found it useful.
Thanks for sharing it.
/Abe
webcreationtips.com

hirewebprogrammer - Posted on: 2011-12-15 15:10:24

Web designing though depends on advanced applications, it is purely masterstroke and personal talents of the designers that firmly place them in the industry. Be it Joomla Web design, WordPress Web design or Flash-based design, in-depth knowledge of the professionals help them to deliver wonderful sites.

jiangjiang11 - Posted on: 2012-01-10 08:42:40

designer bags good quality
designer handbags worthy to buy
nike shox shoes very hot online
super bass shoes satisfied
super mario shoes single product
air max 90 very fashionable
puma men shoes new design
cheap timberland boots come to look it
men gucci shoes root inexpensive
louis vuitton purses Much sought after fashion
air max shoes a different style

Post New Comment

This site does not allow anonymous comments. Registered members can login to participate. Registration is free and takes only a few seconds