Site review: EcoLatino.com beta site

Written by Adrian Holovaty on July 24, 2002

Eco Latino, an upcoming Morris-affiliated Spanish/English monthly online tabloid in Florida, is still a work in progress. In fact, it only consists of one page that's about half done. But staugustine.com's AgentKen, who's working on the site, asked for some comments. Here goes:

Comments

Posted by AgentKen on July 25, 2002 at 10:44 a.m.:

Thanks very much for the constructive ideas. It's very hard to design in a vacuum.

The EcoLatino site will definitely undergo some major revision -- I have to meet extensively with the Spanish-language editors.

It's funny, they pushed me to use the bold color scheme (which I normally wouldn't use). But it's a ton of fun to cut loose with reds and oranges on a web site.

The navigation will definitely change -- I do want to color code the sections based on compatibility, but in this version (beta 1.1) I just want to give the editors an idea of the structure.

I did take some tips from this site, btw, especially regarding "putting main content first" -- the nav rail is below the content area on the code. And I tried to CSS as much as possible, though as you can see, I'm still not comfortable with css shorthand.

The date at the top will likely be a "last updated" date, which we use on staugustine.com via a cgi include to show when a new page hits the server.

The biggest challenge that we face is the bi-lingual aspect. If you look at the placeholder on the site front ecolatino.com just know that the first line of Spanish that I posted used the wrong tense (which the editors quickly noted). If anyone has any good tips or tricks for designing multi-lingual sites, please share. The plan right now is to present _every page_ in both English and Spanish, both online and in print.

Posted by Adrian on July 26, 2002 at 5:31 p.m.:

Glad to be of help! I just wish some other folks would help you out with more comments...

Presenting every page in both languages would be extremely cool. Has any other news site ever done that? I recall hearing that the BBC translates its site to several different languages (Arabic being one of them, I seem to remember), but I'm not sure whether it does an exact page-for-page mirror.

Will that "last updated" date be on every page, or just the home page? And if it's on every page, will the timestamp reflect the last update of that particular page, I assume? I'm just curious, as I've seen different sites do different things.

Posted by AgentKen on July 26, 2002 at 6:23 p.m.:

On staugustine.com, we use a dynamic time string that reads the upload time of virtually every news page that we load. So the intent would be to do the same thing here.

We use the following server-side code for that:

<!--#config timefmt="%A, %B %d, %Y at %I:%M %p %Z"-->

<!--#flastmod file="NAME OF FILE"-->

FYI: I also find the Color Harmony Guide very useful, even if its not web-safe.

Posted by Adrian on July 26, 2002 at 9:13 p.m.:

I used similar server-side code for the timestamp on ajc.com's home page, except I had to feed it through JavaScript for various reasons. I had the timefmt code return a comma-delimited string which I included into a JavaScript array. Then JavaScript was free to make appropriate calculations. A backward hack, I know.

I hadn't seen the Color Harmony Guide. Thanks for passing that along. It looks great!

Posted by AgentKen on July 27, 2002 at 1:12 p.m.:

It also occurs to me to note that the NS 4 fix is to remove _all_ spaces (including line breaks) from table code that needs to display within an absolute space (in this case, 780x75, as I recall). It's just that NS 4 reads initial white space as a "space" character and that disrupts the positioning of elements.

It is something that I routinely do, but later in the dev stage. At this point, I just want to put some ideas on screen so that the editors can "see" what I'm talking about.

I found that color harmony guide after doing a few Google searches on color wheels and harmony. It's funny, the first EcoLatino mock that I did followed the harmonies pretty accurately, and the editors hated it. Not colorful enough.

The colors that the software picks tend toward pastels and lightly saturated shades that I think are more appropriate for print. But I find that it works ok if you round the value to web safe. Here's a snippet of a "translation" of their suggestions for colors compatible with "CC6666" (an underused color):

<html>

<head>

<title>Color Test</title>

<style>

.overall {background-color: #000; width: 250px; padding: 1px; text-align: center;}

.one {background-color: #c66; margin: 3px;}

.two {background-color: #696; margin: 3px;}

.three {background-color: #096; margin: 3px;}

.four {background-color: #060; margin: 3px;}

.five {background-color: #fcc; margin: 3px;}

.six {background-color: #c00; margin: 3px;}

.seven {background-color: #cfc; margin: 3px;}

.eight {background-color: #369; margin: 3px;}

.nine {background-color: #09c; margin: 3px;}

.ten {background-color: #06f; margin: 3px;}

</style>

</head>

<body>

<div class="overall" align="left">

<div class="one">

<br>Test<br><br>

</div>

<div class="two">

<br>Test<br><br>

</div>

<div class="three">

<br>Test<br><br>

</div>

<div class="four">

<br>Test<br><br>

</div>

<div class="five">

<br>Test<br><br>

</div>

<div class="six">

<br>Test<br><br>

</div>

<div class="seven">

<br>Test<br><br>

</div>

<div class="eight">

<br>Test<br><br>

</div>

<div class="nine">

<br>Test<br><br>

</div>

<div class="ten">

<br>Test<br><br>

</div>

</div>

</body>

</html>

Posted by AgentKen on July 28, 2002 at 10:13 a.m.:

In playing with CSS-only layouts (no tables), I can easily duplicate the 4-column with header design of the site, but I have one seemingly insurmountable problem: The inability to add a footer.

It seems that to make the CSS positions work, I have to hard-code in sizes and positions. While that's easy to do, it doesn't leave any way to add a footer box that appears beneath the content.

test page

Any examples out there?

Posted by Adrian on July 28, 2002 at 3:07 p.m.:

This page template pulls it off. It looks like using "clear:both" will do the trick.

This Digital Web Magazine tutorial also mentions a footer.

Comments have been turned off for this entry.