Site review: EcoLatino.com beta site

Written by Adrian Holovaty on July 25, 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:

The color scheme is striking. It's bright, it's bold, and it invokes a sense of multiculturalism that's right on the mark for a site like this. Too often do we see news sites use color schemes that have no real purpose; here, the tones give the content an added kick. It's apparent here that the colors were given significant thought. And, as an added bonus, they're all Web safe. (For more on colors, see Poynter's outstanding Color, Contrast and Dimension in News Design.)
Navigation in the left rail looks straightforward, although it's hard to judge it with only one page to work with. Section names are logical and easily grasped. One question here: The (intentional?) division of categories by background color implies categories with the same background color are somewhat related. Are they? The last four -- Advertisers, About Us, Site Map, Contact Us -- certainly are, but to link Message Board and Latest Issue is a bit more of a stretch.
Speaking of the navigation, it uses a neat all-CSS mouseover. No JavaScript functions or image downloads needed. And, down the road, changing it will be as easy as editing a single CSS file. Slick.
The date at the top of the page is somewhat confusing. Is that intended to be today's date, or the date of publication? If the site is updated monthly, printing the last-updated date would be more useful than displaying the current date. And to make things clear, I'd preface it with "Last updated:" or just "Updated:". If you do decide to print today's date, it'd be helpful to label it as such, to avoid misleading the readers.
The language-switcher link that rotates the page's content between Spanish and English is an outstanding feature.
The page's reliance on style sheets is commendable. I'd push it even further by using CSS to display the horizontal lines between categories in the left rail. Since they all have a single-pixel bottom border, you could just set border-bottom: 1px solid #c90; instead of calling an image of an orange horizontal line after each list item. (While we're at it, if these navigation sections were in an unordered list, they'd be a tiny bit more accessible to any Lynx users out there.)
There's a layout bug in Netscape 4 and in browsers with style sheets turned off: The main Eco Latino logo covers up the "Subscribe," date, weather, and language-switcher links for some reason.
The page uses an @import statement to call its style sheet, and that leads me to believe that support for older browsers like Netscape 4 isn't a priority here. That's fine with me, as long as the content remains accessible, which it is -- but if you're willing to disregard Netscape 4, why not take the leap and move to an all-CSS layout? Glish, BlueRobot and Little Boxes are three great resources on this topic.
Links could be more clearly defined. In the content area, they're pink on an orange background with no underline. In the top horizontal bar, the links are only distinguished as such when moused over. I had trouble distinguishing them myself; and I suspect users who are color blind would be ten times as frustrated. (Useful site: Dive Into Accessibility's Using Color Safely.)
A few shortcuts in the style sheet code would cut load time. Instead of font-family: eurostile,arial, sans-serif; font-size: 0.8em; font-weight: bold;, the same can be accomplished with font: bold .8em eurostile,arial,sans-serif;. Likewise, font-family: arial,sans-serif; font-size: 0.7em; line-height: 1.3em; can be consolidated into font: .7em/1.3em arial,sans-serif;, and background-color: #909; can be consolidated into background: #909;.

Comments

Posted by AgentKen on July 25, 2002, at 3:44 p.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 10: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 11: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:

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

Posted by Adrian on July 27, 2002, at 2:13 a.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 6: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>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</body>

</html>

Posted by AgentKen on July 28, 2002, at 3:13 p.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 8: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 page.