larryaronson.com

I’ve just finished a project: DigitalHHR – a Wordpress blog for the Intellectual Property department of a big law firm. The IP department, consisting of 4 lawyers, wanted a online platform to promote their ideas and opinions about intellectual property and generate good press for their firm. I was under contract to a wonderful creative agency, Aha! Insight Technology and was working again with Howard Greenstein. Howard provided the strategic direction, project management and training for the client while I provided the technology.

Howard proposed a robust set of features to showcase their familiarity with leading edge, social media technologies and services. The specifications called for an integrated BBs, an event manager, feature-rich videos, a Flash-powered header with a customized navigation menu tying it all together. Howard and I knew we were pushing the limits of Wordpress and that’s what the client wanted to show off.

We started with a three column theme, Seashore by Sadish Bala. I added a video presentation space on top of the  sidebars and a game space below. With a bit of work, I was able to shoehorn the custom flash video the lawyers designed into the header code and replaced the generated navigation menu with a two-level structure.

The four lawyers were already blogging on other sites. This was their first opportunity, not only to write under their own brand, but to actually craft that brand as publishers and editors. As they began to post articles, they became concerned about their authorship rights —they’re IP lawyers, remember, and important ones at that! So, as we neared completion of the project, new feature requests started creeping in.

They wanted special lawyer profile pages so they could edit in additional content about themselves. These page would feature a portrait image and an expanded contact section with a download-able, virtual address card. For these special pages, I cloned the standard single page template and modified it to fetch the page author’s portrait photo from a sub directory of /wp-content. I setup custom fields for the contact information and displayed those next to the portrait image. Following that, I formatted a box to display the most recent posts by that author. Finally, I displayed whatever content they wanted to add via the post editor. Click here to see some of the code.

The head partner of the IP division liked the profile page so much that he wanted a special version just for himself that also displayed  any press articles written about him. I figured out how to accomplish that using a custom post field and some more template programming.

They also wanted to post co-authored articles. I know that there was third-party plug-in that did something like that, but at this late stage of the project, it was easier to add more template modifications to get exactly the functionality the client wanted. The solution we devised features a double portrait image, double email links and a hook to pick up the post for the special lawyer profile pages.

It’s been exciting to watch this blog progress from it’s initial launch last month. Everything we did is being used by the client and it’s all working well.

Hooray, I don’t have to do systems admin work anymore.

Systems admin work was anything I had to do with a client’s hosting company in order to accommodate their domain and work with their files. It often involved waiting on hold while some tech support person, somewhere in the developing World, tried to find an answer. It wasn’t that my requests were anything special, it’s just that every Web hosting company thought that their Web server’s unique configuration options were special.

That’s now changed. In the past couple of years, a quiet productivity revolution has dramatically simplified and standardized the business of Web hosting. Hosting has been commoditized and, consequently, is more reliable and a lot cheaper than it ever was. How cheap? Less than $10/month will provide more than enough resources for most small and medium-size businesses, including support for multiple domains, email accounts and databases. But more important is the availability of Web-based administration tools that automate the process of installing and configuring dynamic Web applications. Two in particular, cPanel and Fantastico De Luxe, have cut down the amount of time I typically spend in preparing a client’s site from hours to minutes.

cPanel is a suite of tools that a Web hosting service installs on their servers so that you, the client or me, on your behalf, can manage the options and settings related to your account without having to contact technical support. Using cPanel, you can set what domains and host names point to which Web sites; which email address are attached to your domains; who can upload and download files; and what logs and usage reports are generated. If your Web pages contain dynamic content (e.g: a blog) cPanel gives you complete control of the database that serves that content.

Fantastico De Luxe is a web application services installer. It works under cPanel to install popular programs automatically in seconds. I’ve used it serveral time to install Wordpress and it just works. Wordpress, by itself, is not difficult to install but does require a few more steps and knowledge about what you are doing. With Fantastico everything is done over the Web. A basic Wordpress used to take about a half hour of uploading files and configuring options. Now it takes about 30 seconds—and always works!

There is quite an extensive list of applications that fantastico can install besides Wordpress: other blogging systems; portal and content mangement systems; ecommerce, shopping cart and customer support software; discussion boards; image galleries; mailing list managers, polls and survey software; courseware and educational applications; advertising and real estate listing programs and more.

So, if you’re looking to move your business onto the Web, or feel it’s time to update that old, static Web site and engage your customers with dynamic content and custom services, you can have confidence in having it done fast and right.

I’ve been working with Michelle and Ariane Gold for about two years helping them maintain their website, ButchAndHarold.com. Michelle and Ariane market a line of peel-and-stick artware on their Yahoo Store-based website. Pretty nifty stuff. They have recently expanded their product line to include peel-and-stick photo frames and mini-stickers and, so, the website needed updating. New pages had to be created for the new products and their URLs had to be linked into the navigation menu. We decided to change the top level “Collection” menu button to “Shop” and make it a drop-menu showing the three product lines.

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.

Two new Web browsers have recently become available for exploring the Internet. Google Chrome and Flock take radically different approaches to the browsing experience and I recommend you take a look at them when you get a chance.

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

Here’s how to add a floating tipbox or editorial sidebar to a post in your Wordpress blog. I’m writing this to answer a question from a client and it just made more sense to demonstrate the technique in a post rather than explain it in an email.  The floating tipbox that appears below duplicates the example my client provided. The text explains how to create and customize a box to your own specifications.

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 */
}

Tom Watson’s “labor of love,” the New Critics blog, had been hacked and he had to bring it down.

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.

US Tour Of Duty is a dot-org providing support for authors and speakers on the political left that oppose the Bush administration’s military adventurism in the Middle East. I was asked by their communication’s director, Jeff Norman, to consolidate two of their existing sites, USTourOfDuty.org and RealIntelligence.org, then, incorporating the same design, link in a new site, ScottRitter.us, devoted to the writing and appearances by Scott Ritter, former UN weapons inspector and author of several books on geopolitics.

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.

Kevin Werbach was in trouble. He was coordinating activities for Supernova 2008 and had used a local connection (i.e. cheap labor) to redesign Conversation Hub, the conference’s weblog. The new design was good but it was executed with old technology that just didn’t integrate with Wordpress. Moreover, it was a cross-browser mess. Blogs do things differently than the webtools many designers are still using to create brochureware. They tend to use simple lists and rely on CSS for layout and positioning rather than nested tables. This makes for faster rendering, easier modifications and better search engine visibility.

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.

I’ve did three very different blogs for clients at the end of 2007.

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.

Here are some of the sites I’ve designed and built for clients in the commercial and fine arts. I offer them as examples of the simple, static, Web 1.0 sites, done very quickly for friends a few years ago. Today it’s much easier and more effective to establish an online presence using Web 2.0 tools and social media services.

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.