Notes

An image is worth 1000 pixels

Rich interface applications require careful designs, and should almost always be multi-lingual capable. One of the best ways to achieve this for small page elements is the use of images as labels.

Examples:

  • Red circle with line through it - means ‘you can’t do this’
  • WYSIWYG labels - are so prevalent most people understand all of them, including links, images, bold, italic, etc.

Page layouts

Many times, a page has more content than can be displayed. Accordian panes and tabs are a great way to make additional content available to the page viewer, without requiring them to scroll or navigate away from the page. dojo

eZ publish integration

Add these .htaccess to easily allow additional applications or files to be added to an eZ publish site. I haven’t tried them with eZ yet - but they work with b2evolution. Be sure to place them carefully. :)


# Redirect anything that's not an existing directory or file to index.php
#
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-f

Color check

If the colors aren’t from the image you selected, go back to the color mapper page, check the colors in step 1, then click the go button. Upon return to this page, the colors should be updated (browser caching may have to be cleared).

Please remember this is a very simple demonstration. The idea is to show how you can take an image and the color attributes to update CSS files. This isn’t intended to be a user-friendly wizard. It’s a powerful tool, and may take some time to understand and appreciate.

Color mapper - control color set

To see the original skin colors, click on web notes at the top of the page. This is the asevo skin for b2evolution, although I changed the colors. The colors on web notes are the ones that are used for the mapping.

Updates

The following updates were made:

  • Tuned mapping logic - to better align the source and target colors.
  • Palette selection - this allows you to upload the image, then choose which colors to use from it. To use it, clear the image color area, then click on the colors you would like to use in the table below it.
  • Alternate precedence - Added a second mapping approach. Review the maps listed under step 3 and decide which you like best.
  • Test data cleanup - Some of the source CSS codes were wrong.

Engineering a Design

The CSS/HTML architecture has a serious impact on the cost of development, integration, and maintenance of a web site.

Divide the page into a few areas.

  • Top/header - the area that spans the top of the page
  • Bottom/footer - horizontal span across the bottom of the page
  • Middle - that which is between the header and footer

Thus, the HTML would be:


<div id="header">
</div>
<div id="middle">
</div>
<div id="footer">
</div>

Next, subdivide the middle into three columns - left, center, right, like so:


<div id="left">
</div>
<div id="center">
</div>
<div id="right">
</div>

Set up the layout in a base .CSS file. This should be a browser independent CSS file. Also create two other .CSS files, one for IE, one for Firefox to override any browser specific issues.


body
{
padding:0;margin:0;
height:768px;
width:1024px;
}

Place the colors in a color .CSS file. Place color (image) related dimensions in the color file, name your image files with their dimensions (x,y convention - where x=width, y=height).


body
{
color:#008;
background: #fff url('bg-1x768.gif') repeat-y top left;
}

You should have 5 files:

  1. index.htm
  2. base.css
  3. color.css
  4. ie.css
  5. ff.css

Adjust the layout dimensions in base.css, using background colors to help you see. Once you have the layout stable, and as you would like it, under all the browsers you want to support (usually IE6, IE7, FF), begin integrating it with the other components. This approach can be used to skin a blog, build an application, or build a simple site.

If you find you are copying index.htm, over and over, and then modifying it - you’re working too hard. Switch to a hierarchical architecture using either SHTML, PHP or other languages that allow you to include content from different files. For example:


include 'header.php';
include 'left.php';
echo '<div id="center"><p>Page content here</p></div>';
include 'right.php';
include 'footer.php';

The assumption is that header, left, right, and footer.php would be the same for all the pages on the site. This approach allows you to modify the file once and affect the whole site.

Even if you have a very simple, small site, these practices will be helpful. Web sites tend to grow. They change, and if you have a good architecture, you can change them in a cost-effective manner.