Spread the Word

Site Feed

Powered by FeedBlitz

Subscribe with ...

  • Add this blog to my Technorati Favorites!
  • Subscribe in Bloglines
  • Subscribe in NewsGator Online
  • Subscribe in Rojo
  • Add Random 

Bytes (WebLens Blog) to Newsburst from CNET News.com
  • Add to Google
  • Add to My AOL
  • Subscribe in FeedLounge
  • Add to netvibes

Translate This Post

Burn a Feed

Ping the World

Saturday, December 31, 2005

Fix for Blogger Lack of Categories

In the short time I have been blogging, I have learned much. The biggest lesson so far: check out blog editor features before you commit. I went with Blogger, mainly because of its apparent ease of use -- in hindsight, perhaps not the best choice since this tool does not provide the ability to sort entries by category. Had I known this, I might have chosen another tool, such as Wordpress. By the time I realized the limitation, however, switching was not an option as I had created several entries and didn't need the headache of starting over.

Maybe there's a workaround, I thought. Once again, the Internet to the rescue. A quick query made it obvious that others have struggled with this issue. The many fixes proposed include:

  • create multiple blogs and rely on heavy linkages among them

  • rely on the tagging feature of tools like Technorati or Del.icio.us

  • embed a piece of custom code in your blog template to do the job

I chose the third option, an elegant solution proposed in Daniel Chong Jyh Tar's .Net Compact Framework Tutorials blog, which abounds with helpful advice. He, too, uses Blogger and was bothered by the lack of categories. His fix, based on the Blogger search feature, is quick and easy to implement and clearly explained. Code jockeys can bypass the instructions and go straight to his free Javascript code generator. The result of this hack is evident in the list of categories to the right. Thanks Dan!

Thursday, December 22, 2005

The Blogging Phenomenon

Is it just me, or has the whole web gone blog-crazy? Type any query into Google, especially on topics related to web design, and it seems like at least half the results are likely to come from blogs or from pages that look like blogs.

Blogs have become such a serious phenomenon that a new genre of search tools has evolved just to search and/or aggregate their contents. Likewise, their potential for abuse was quickly recognized by spammers, and the phenomenon of splogging was born. Splogs are blogs that have no meaningful content and exist solely to spam the search engines with advertising. Already, sites have emerged just to track and purge splogs. (See the WebLens Blogs and Blogging page for a list.)

Blogs are affecting the web in other ways. They have a characteristic "look and feel" that is starting to impact web design. They have the potential to make everyone an instant publisher, with global access. Depending upon your point of view, this is either flooding the web with inane garbage or the beginning of a profound democratization that threatens to loosen the stranglehold of mainstream media.

What Are Blogs, Anyway?

So, what exactly are blogs and how do they differ from regular web pages? Blogs are, of course, web sites, though not all web sites are blogs. Confused yet?

Blogs tend to be personal, though they can be on any topic. Blog content is semi-automated, created through a content management system and propagated through the web via RSS or XML feeds. Regular web site content is independent of such systems, and can be opened and edited with any text or HTML editor. (That said, already people are using blogging tools for web site creation because of the powerful automation features.)

Other key differences lie in page layout. Blogs tend to have navigation choices on the right whereas traditional web sites place menus down the left. Blogs are ordered by date; regular web sites order content by topic. Conventional web sites utilize a hierarchichal information architecture; blogs tend to have a less obvious, somewhat sprawling structure. Navigation is less intuitive (in my humble opinion).

For more about blogging, and for links to blogging resources, see the WebLens blogging page. For a more in-depth discussion of the differences, see Lorelle VanFossen's excellent blog.

Peek-a-Boo Floats and Other CSS Mysteries

Update: for more on troubleshooting Internet Explorer bugs and glitches, see this post.

Until recently, my work with CSS had been limited to prettying up site contents, using stylesheets to control or change text, link, background, and paragraph formatting. (Even at this basic level, you can create some nice effects, using CSS for font size and colour, mouse rollovers, margins, borders, vertical spacing, and so on. See Eric Meyer's Definitive Guide to Cascading Stylesheets for an excellent guide to this topic.)

Like many, however, I continued to use HTML tables for layout, aware of what was possible with CSS but nervous about going the distance. But stylesheets provide so much more capability, including precise control over layout and positioning of all the elements on a web page. You can create a nested two-column layout (as I have done at WebLens) with nary a table cell to be seen! With the WebLens re-design, and Shutterscribe before it, I became determined to take full advantage of the powerful capabilities of stylesheets for layout.

Once the world of FLOATs and DIVs opens up, there's just no going back, though I quickly discovered that positioning is a complex subject, with a steeper learning curve than anticipated. This was partly because of browser implementation issues and other perplexing glitches that CSS purists don't like to talk about. One of these is known fondly as the peek-a-boo float: a crazy-making bug wherein certain content mysteriously disappears when you take some mouse action. In the case of WebLens, the left-hand column persisted in playfully vanishing every time I moused over a link on the right-hand side!

Fix: I just about went nuts troubleshooting this and other problems, until I discovered some excellent fixes and workarounds. Among these: try experimenting with height and/or width of the containing and/or floated DIV, or adding the argument {position: relative} to one or both DIVs. These fixes and others are described in John Gallant and Holly Bergevin's article, How to Attack an Internet Explorer Display Bug. MaxDesign provides some useful strategies in their excellent Float Tutorial, and there's lots more good CSS introductions and troubleshooting resources among WebLens' web design links.

A final note: sometimes, stylesheet problems are due to the complexities of the cascade and the intricacies of CSS inheritance rules. When a style declaration is not behaving as expected, try inserting the !important attribute just before the closing semi-colon. This usually over-rides the cascade and achieves the intended effect. This tip comes from CSS guru Eric Meyer. His book, Definitive Guide to Cascading Stylesheets, is among the best introductions to CSS available.

Why CSS?

If you've been poking around WebLens, you'll know that the site has recently been overhauled, making full use of CSS cascading stylesheets. CSS provides the ability to make site-wide changes quickly and easily, and to alter look and feel with minimal effort. Stylesheets allow designers to separate content from presentation, and to create web sites that are surprisingly elegant.

Best of all, CSS means that web designers no longer need sacrifice accessibility for sophistication. CSS-based design has been hailed as next-generation web design, and is quickly making a purely HTML-based approach archaic. As web pundit Todd Dominey points out in his amusing and informative blog, What Do I Know?, all the "layout hacks" we are accustomed to, including transparent GIFs, hard-coded line breaks, and nested tables, will soon be history.

If you're not aware of what's possible with CSS, have a look at CSS Zen Garden for inspiration. You may also want to check out the new book by Dave Shea (the brains behind Zen Garden) and Molly Holzschlag. The Zen of CSS Designprovides a tantalizing look behind the scenes of some of the Zen Garden designs. And I have links to some excellent resources on the WebLens Web Design page.

Tuesday, December 20, 2005

Welcome to Random Bytes

This blog is the latest addition to WebLens. Stop by for useful tips and techniques, interesting web trends/destinations, and musings on all things digital. Overflowing daytimer notwithstanding, my ambitious plan is to post here several times a week. Coming soon: peek-a-boo floats and other CSS mysteries, the blogging phenomenon, Wikipedia vs. Google, and so much more ...