What exactly is dynamic design? With the advent of content management systems pre-made designs have appeared that are able to shift and bend with large variables. The best of these designs look great no matter how the site owner builds out his site. Though it may appear to be the same on the outside as any other website design style, it is very different.
In the beginning there was only one kind of website: static. Static sites are controlled by the webmaster who is in control of the HTML, design, and the content. If you want to add/edit/delete the content, you email your webmaster/web designer and he adds your content while making any necessary design adjustments. There's no need to think about anything other than what the design looks like AT THE MOMENT since it won't change.
With the advent and popularity of dynamic content that outputs from a content management system (CMS) such as KarmaCMS, the need for dynamic design has appeared. In this kind of website, the design or style is completely independent of the content. Since with a dynamic website the site owner is in charge of the content, the designer can no longer adjust the design when needed. With KarmaCMS, the designer also has no control over the HTML other than the ability to add to it in certain places through hooks, and/or disable it through CSS.
The dynamic designer must anticipate all possibilities and create a design that will adjust automatically with the content. These sites are generally styled exclusively with CSS and have many unknown variables - usually vertical ones - in many key elements. This requires a brand new approach and way of thinking... and can pose quite a challenge to any designer used to the "old" way of doing things.
Dynamic Design can be fixed width or liquid. Unlike liquid designs where you can simply drag your browser window back and forth from big to small to see the effects, with dynamic design there is much you have to anticipate without seeing the results. Of course given this challenge, liquid dynamic design is the most difficult of all since you have to deal with unknown vertical and horizontal variables. It's the ulimate separation of style and content.
Here are the variable you have to keep in mind when constructing a dynamic design around the KarmaCMS in addition to the content:
1. main links
2. main link groups
3. teasers
4. teaser headings
5. teaser groups
6. main photo
7. footer
Gosh, isn't that everything? Well, almost! There is one element that is rather static in Karma sites: the header. The header can be given a height without much consequence since the header only contains the site title which is displayed on one line at all times.
None of this is a problem nor takes any special consideration if you are not using graphics since background colors will blend and expand perfectly. However... there's only so much you can do with background colors and borders. Things would also be easier if IE6 which is still 50% of the browser market share as of 5/8/07 supported alpha PNGs. Unfortunately it doesn't and any work around is waaaay too complicated and not much use for a dynamic design anyway.
So we make due for now with jpg's, gif's and cleverness.
Free Training Courses
We have step my step intructions here explaining how to construct a design with the wizard where you can actually "do" as you read along as well.
What is Dynamic Web Design?
Dynamic Design Checklist
There are many things that you must keep in mind in your design when constructing for a dynamic website that you wouldn't normally with a static site. They are as follows:
Main Photo
One of the biggest challenges for a designer (and one of the most popular features for the user) is the photo that can be uploaded to each module.
- What will the layout do if no photo is uploaded?
- What happens if a horizontal photo is uploaded?
- What happens if a vertical photo is uploaded?
- Will the overlay/underlay adjust to the size of the photo or vice-versa?
- If the photo adjusts to the size of the overlay and a photo is uploaded that doesn't match the dimensions of the overlay what happens?
If both dimensions are specified for the photo in the design, the uploaded photo will adjust proportionately to either the height or width of the overlay/underlay, whichever is greater.
If only one dimensions is specified the overlay/underlay will adjust to the size of the photo that is uploaded.
Main Links
The user is free to add as many links to the main menu as he wants. He also has the option of splitting the links into two groups or not. Things to keep in mind for your design:
- What it will look like with a few links.
- What it will look like with 100 links.
- What it will look like with the links split.
- What it will look like if the links aren't split
I suggest never placing a height on the main links. If you absolute must don't forget to add overflow: auto in the Custom CSS tab so it will scroll if more links are added than your design allows.
To simulate what your design will look like when the links aren't split, place this in your Custom CSS tab:
div#main_link_group_1 { display: none } Teasers
Just like main links, the site owner is free to add or remove as many teasers as he or she wants. In addition, the teasers can be split into two groups or simply stay as one. The site owner also has the option of disabling and image based title and displaying it as text or not displaying a title at all.
Things to keep in mind for your design:
- What it will look like with no teasers installed.
- What it will look like if the teasers aren't split into 2 groups.
- What it will look like if the teaser title is text.
- What it will look like if there is no teaser title.
You can simulate no teasers by entering this in your Custom CSS tab:
div#teasers div.teaser { display: none }
Even when no teasers appear, the div#teaser, div#teaser_group_1, and div#teaser_group_2 are still present in the source in case you want to place a min-height on them for display purposes.
Main Content
The main content is the module content that is different from page to page. Here's what to look out for:
- What happens when the content is very short.
- What happens when the content is very wide.
You can simulate what a short content page will look like by placing the following in the Custom CSS tab and viewing the download page:
div#content { height: 100px; overflow: hidden; }
Footer
The footer is a place where designers like to place that last little something to cap off their design. That's great, but with a dynamic site you have to take into consideration:
- What the design will look like with pages worth of content in their footer
- What the design will look like with nothing in the footer
Though it is tempting, I strongly recommend not placing a height on the footer. Instead, bottom align your background image with bottom padding, and if necessary use on of the wrappers to complete a vertical repeating background that seamlessly blends with your footer background image.
To simulate what the design will look like with no content in the footer, place the following in the Custom CSS tab:
div#footer div#site_footer { display: none }
There is some padding on the footer by default, so if you wish you can zero out the padding and place it on the div#site_footer instead.
