The BUTCH & harold website is a traditional HTML website. It’s nicely designed but unlike the blogs I’ve been working on recently, there are no templates or includes for global page elements. There are just a lot of HTML files. I didn’t build this site, but the Web designer/programmer who originally constructed it did a good job writing clean, modern code, making It easy to add content and make minor layout changes within the existing architecture. However, s/he did use some tricks with the navigation menu that gave me headaches trying to implement the drop-menu without rewriting the entire thing—and make it work in all browsers.

The remainder of this post is more technical. Skip it unless you’re really interested in how page navigation works. Or just visit the site and check out how I built the Stickr (frame) and Stickr (mini) pages. You’ll see (hopefully) some fun javascript in action.

Navigation menus have evolved since the early days of the Web. At first, websites were only able to feature a list of links; either vertically, as a list, or horizontally in a table. A link changed color when the mouse pointer hovered over it but all links on the page had the same color behavior. Designers wanting more choice than the common available fonts (e.g: Times, Helvetica and Courier) replaced the text with small images using designer fonts. However, unlike linked text, a linked image provides no visual feedback when you hover over it other than the mouse pointer changing from an arrow to a hand.

When Javascript came along in the mid-nineties, it provided a means to capture a limited number of page “events” and take action when they occured. These events have descriptive names, such as: onMouseOver, onMouseOut and onClick, and one of the actions availabe on the occurrence of such an event is changing the source of an image. Thus, instead on a single image used as a button, with Javascript, the button could have both “on” and “off” image that were swapped when you moved the mouse on and off of the link. This provided the interactivity designers wanted, but it came at a price. There was often a noticeable delay the first time a link switched between its off and on images as the browser waited for the alternate image to download from the server. Techniques were developed to “pre-load” the alternate images, which helped somewhat (as did faster Internet connections) but pre-loading images just moves the delay from the individual buttons to the initial page load.

Plus, there was the additional cost of complexity—If you had ten navigation links, that meant having 20 images to manage. Changing image-based navigation links involved expensive software tools, such as: Photoshop, Illustrator, DreamWeaver and ImageReady, and took much more time. This limited the ability of the client to explore and develop their online concepts from the bottom up as they learned the technology of Web publishing. It robbed them of the freedom to play with ideas.

But, Wait! It’s even worse than that. There are two other problems related to the 21st Century Web (aka: Web 2.0.) First, robots can’t read images. That is, the specialized automated tools that Google, Yahoo, and others use to visit, catalog and rank sites can’t interpret the content inside an image. From the robots perspective, a lot of information about the structure and flow of a Web site is invisible when you use graphic images for navigation links. Now let’s face it, Google has become indispensable to the way we use the Internet to market our products and services and you’re at a competitive disadvantage if your site isn’t robot-friendly.

The second problem with graphical navigational elements has to do with complexity again. You’ve heard it said that “Content is king.” What this means is that a static site, where the content hardly changes over time loses out to sites where fresh content is dynamically generated tailored to the customer’s needs. Publishing content on a regular schedule requires good content management systems. It’s also a lot easier if the overall structure of the site and its component HTML elements are as simple as possible.

Thus, there’s been a return to the use of text as navigation items and, indeed, a movement away from specifying layout constructs and style choices in the HTML, and toward using cascading style sheets (CSS) for these purposes. Google is a good example of this. Fortunately, the CSS recognized by today’s browsers is much more powerful and the designer has many more options to add interactivity than s/he did in the last century. For example, you are all familiar with simple, unordered lists, the kind with bullets. With CSS, you can eliminate the bullets and float the list items so that they appear in a horizontal line instead of using a table for the items. Also, nested lists are easier to manage than nested tables. And, instead of capturing a mouseOver event with Javascript, you can preset the hover state of any element and change text and background colors, even background images with the CSS without the pre-load problems.

This brings us back to BUTCH & harold where the original designer tried to have it both ways with the navigation menu—using text lables for the robots to read and pretty images with mouseOver effects for humans. It’s all done in the CSS. The navigation menu is an unordered list displayed horizontally with a unique on and off background images assigned to each list item. The images have a nice font (Bliss) for the labels and the “on” or hover states have the B&H logo above them. To keep the actual text out of sight for humans but still readable by robots, the designer set the text indentation in the CSS to -5000 pixels. The robots don’t care; they don’t bother reading a website’s CSS, but for humans, this moves the text off the left side of the monitor to somewhere in the next room.

Michelle and Ariane didn’t want the clutter or expense of new graphics for the drop-menu items; they’d be satisfied with text in the same color as the labels and a close match to the font. Making the drop-menu items appear in the right place meant setting the text-indent for the nested list to +5000 pixels to counteract the original setting that made the top level invisible. This worked well for Firefox and IE7 but not for Safari and, try as I might, I could not get the positioning right for all three.

I threw out the text-indentation hack and used the visibility property to hide the text labels from humans. This fixed the positioning problem with Safari, but made the entire “Shop” menu and the drop-menu invisible in IE6. IE6 is significantly different in that only recognizes a hover state for links whereas other browsers recognize a hover state for any HTML element. I did my research and found a solution using Javascript to capture a onMouseOver event on the top level list item (the Shop button) to dynamically change the CSS class of the nested drop-menu.

Wow, I make it sound simple but it was anything but. It took a lot of trial and error and I ended up rewriting almost all of the CSS to eliminate conflicts between the list styles used for the menus and the list styles used everywhere else.

In conclusion, I notice that about 1/5 of you are still using IE6 to browse the Web.* Please Stop! Make my life easier and your computing more secure and enjoyable. Upgrade to IE7 or download Firefox, Safari, Opera or one of the two new browsers: Flock or Chrome.

Google Chrome is a minimalist’s browser. It doesn’t offer a multitude of features, but it’s very fast and solid as a rock. It relies heavily on tabs when visiting different sites and each tab runs in its own process. This keeps the browser from crashing from a page error or some misbehaved plug-in, and prevents pages in the background from slowing down the foreground window. I like Chrome’s history function. When you open a new tab or window it displays thumbnails and links to your most recently vistited pages.

Chrome offers a single address bar for both URLs and keywords. Google is the default search engine, but it can be switched to others—Wikipedia, Aol, Yahoo, etc. The address bar has a fast auto-suggest function. For flying around the Web from site to site, Chrome is a jet fighter. However, if you mostly stay put on a collection of actively fed “home” pages, Flock may be the browser for you. It’s a mega-cruise ship.

Flock is Firefox on social media steroids. Flock takes a framed approach to visiting the Social Media Web, grabing feeds from places, such as: Facebook, Twitter and MySpace into sidebars and YouTube selections into a headband. Flock works best opened full-screen on a big, wide, LCD display. Beware! The shear number and variety of tool bars, control tabs, bookmarks, menus and search boxes can overwhelm.

Flock, by default, remembers the sites you had loaded when you last quit and reopens them. It also opens a generated page, “My World” that captures all your various feeds, messages and pings.  I like the way Flock integrates with Gmail, and find it useful as an “active desktop” – a one-stop site that I scan every so often to keep in the mix as I’m doing other work. Flock pops-up a standard blog editor when I want to post something and just about anything can be shared with a drag-n-drop action.

The online support documentation provided by the these two new browsers also provide a facinating contrast. Google wrote a Chrome comic book that teaches you how to use Chrome with a technical depth that’s actually readable. Flock has uploaded a series of youTube videos showing Flock’s Features in action. Check it out, you’ll get a better idea of what Flock is like and I won’t have to insert a screenshot here.

Google Chome is only available now for Windows. When it becomes available for the Mac, I’ll probably be using both Flock and Chrome more often than Firefox and Safari.

— Larry

First, make sure you are logged in as an administrative user. Go to the site admin area (also called the dashboard) and click on the Design tab; then click on the submenu tab, Theme Editor. You should now be looking at a page with a text editing window on the left and a list of theme files on the right. Stylesheet (style.css) should be the active file in the edit window. If it’s not, then select it from the bottom of the list on the right.

Scroll to the bottom of the stylesheet file and add the follow lines. Don’t worry, you only have to do this step once:

.tipbox {
 max-width: 33%;
 float: right;
 font-size: .66em;
 padding: 1em;
 border-width: thick thin thin thin;
 border-style: solid;
 border-color: grey;
}

Click the button labeled “Update File” to save your additions to the stylesheet.

Now, back in the post editor, edit your post as usual. The content of the tipbox should be entered just as if it were an ordinary text, but place that text before the content that you want to flow around the tipbox. Here, we just have one paragraph of text in the box but you can have any content—headings, lists, images, etc., in an floating box.

Once all of your content is in place, click the tab labeled, HTML, at the top of the editing area. The content of the editing area will change showing the marked up content instead of the WYSIWYG version. Find your tipbox content and insert the following text immediately in front of it:

<div class="tipbox">

and the following text immediately after the content:

</div>

Click the Visual tab to return to the WYSIWYG mode and save the draft. The  WYSIWYG mode doesn’t recognize the floating mode, so you’ll have to click on the “Preview this Post” button to see if it worked.

You can create as many tipboxes as you’d like. Enclose any content in a set of division tags  with the class assigned to tipbox – headings, paragraphs, lists, whatever, it will be boxed and floated on the right margin.

Customizing the tipbox.

Let’s take a look at the details and see how they can be changed to achieve different effects. The rules added to the stylesheet do this by giving your browser the following instructions:

• Set our tipbox to occupy no more than 1/3 (33%) of the available column width. Unlike an image element, which has a fixed width, a division element normally takes up 100% of the width available, so, we have to tell it to take less.  You can also supply a fixed value, e.g:   max-width: 200px;
• This tipbox element should float on the right margin of the column and whatever content follows this element should wrap around it on the left. This and the previous rule are required to create the sidebar or cutout element; everything else is decoration.
• Make the font size 2/3 of what it would normally be. ‘em’ is a measurement unit equal to the width of the letter ‘m’. We could have also stated the size using a percent or other measurement units: 66%, 9pt, 12px, for example, but em works better for a number of reasons.
• Put 1 em worth of space as padding between the border of the tipbox and the content inside. Space is important for readability.
• Give tipbox a thick border on top with thin borders on the right, bottom and left sides. Borders can also set set as pixels, l.e:  border-width: 5px 2px 2px 2px, would be about the same in this example
• Make the border a solid line. It could also be dashed, dotted, double, inset and outset.
• Make the border grey, You can also give it an explicit color value as an RBG value. see below

Here’s a set of rules that, instead of a border, creates a class called ‘bluebox’ that uses different background and foreground colors to visually define a floating box:

.bluebox {
 max-width: 150px;
 float: left;
 font-size: 9pt;
 margin-right: 8px;
 padding: 5px;
 color: #ffffe0;                 /* light yellow text */
 background: #000066;    /* on a dark blue background */
}

I had just returned from my honeymoon and my home office had been in disarray for months. Helping Tom promised to be more fun than doing my taxes. It was. I like New Critics and regret that I haven’t had any time in this busy year to contribute.

Tom had built New Critics on an older version of Wordpress and needed to upgrade to prevent another hack. He wasn’t happy with his current hosting arrangement either and wanted to move the site to a hosting company with more services and better support.

Real Intelligence aggregates articles from other sources, including Scott Ritter’s site, ScottRitter.us. Using Wordpress custom fields, I gave Jeff the ability to post both “local” and “global” articles—which appear with their original bylines, publishing dates and permalinks.

This is also a rare case where the finished project reflects my visual design. The orginal site’s styles and graphics had little in common other than projecting a sense of patriotic investigative journalism. My client had no solid feelings on how the site should look and liked every choice I presented. I employed a red-white-and-blue color scheme with crisp lines and open fonts and reused the existing graphics as best as I could. I put in a lot more Photoshop hours on this project than I typically do.

Conversation Hub was also running on a very old version of Wordpress and needed an upgrade to take advantage of the newer editing and media management tools and plug-ins available. I was able to upgrade the site, lay in the design changes and install/configure the new plug-ins in plenty of time to meet the conference deadlines.

East-West Dialogue – Under subcontract to graphics designer, Michael Pinto, of VM.com, I installed and configured this content management system for The East-West Center. It primarily serves as the online companion to the print version of the organization’s signature magazine, East-West Dialogue. The design requirements were very specific featuring a custom navigation menu and different sidebars for the index pages and post pages.

The Partnership For Prescription Assistance, Pennsylvania, blog. They client wanted a three column design with a Google Calendar. My favorite bit is the ShareThis wiggit attached to the end of each post.

Air Safety And Law is intended to serve as a forum for the legal community to discuss air travel safety and liability issues. I worked with my graphics designer friend, David Schiffer, who provided the header image and selected the theme from several sample templates I presented. This is a demo version on Wordpress.com which took me about an hour to create.

Suzearts is the online showcase for my best friend, Susan Thornton, who creates wonderful images from the land and sky scapes of New Mexico and Fire Island. We put this simple site together in an afternoon several years ago for the New York Licensing show. Today, you can do a lot more to showcase art and music by using services such as flickr and photobucket, to organize and tag your art, and social media services like Facebook and Twitter to promote your work across a web of networks, groups and friends.

Mick Kolodgy Fine Art

is an online gallery of his paintings. I developed the horizontal gallery design with rollover menus at both ends and tied it all together with a compact image caching and navigation scheme written in Javascript. This was fun to build but I can’t advise artists that having your own showcase site is the best way to leverage the Web anymore. There are many web services companies that want and need your content; provide a wide range of options for organizing, displaying and selling it; can boost your search engine juices and connect you to networks, groups and forums of people interested in what you do.

A lot of new features have been added to SmartMC including automatic alert messages with pop-up graphs that show how the the metics associated with one claim compare to other claims for the same patient, provider and insurance plan. The Edit interface has also been upgraded with AJAX driven drop-menus and auto-suggestion input fields.

Smart Medical Consumer is a new Web-based service business conceived and designed by a remarkable person, Banu Özden, providing free health issue forums, resource directories, secure medical document storage and a sophisticated medical records manager.

I designed and programmed the records manager, MySMC, which was released this Spring in a limited, early beta version. MySMC is a LAMP application with HTML, CSS and AJAX, on the front, and a MySQL database with Perl CGI on the back. It manages health service provider invoices, insurance claim benefit statements and patient payment receipts.

MySMC features easy input and editing, strong searching and reporting, automatic error detections and comparison checks. Each registered MySMC user can define any number of patients making the system usable by individuals, families, organizations and companies.

Riverside Marketing Strategies

This is the website of a wonderful, online marketing consultant, Heidi Cohen. The design and layout was done by Michael Pinto of Very Memorable Media who provided a Photoshop file to work from. Ms. Cohen set precise standards for usability and searchability. The resulting collaboration resulted in a near perfect website.

Pass Open Records

This blog, subtitled: A Movement to Lift the Lid on Pennsylvania Government is an initiative of the Pennsylvania Newspaper Association. I did the blog installation and configuration using WordPress, adapting and modifying a third party theme, Misty Look, under contract to Howard Greenstein who provided the association with the online strategy and training to make them bloggers. The project was conceived and designed by BravoGroup, a specialist in government communications.

I’ve known Howard since the early days of Silicon Alley. We’ve worked together on several dot-org projects and it was a pleasure to finally work with him, B2B, on a project.

]]> http://larryaronson.com/2007/recent-projects/feed/