..by making the “score” larger and bold and outside of the rest of the text. In my opinion, people shouldn’t need to care much about the score of a link. If the algorithm is good then the numeric score is irrelevant…

-9000px

This is the number originally used by Mike Rundle on his famous Phark image replacement technique. Another variation is -100em or -5000px or -9999px. Nevertheless, the idea is to apply a big, negative number to the CSS text-indent property, so that it puts the text way, way off of the screen, effectively hiding it. Combined by adding a background image of choice to the element, this gives the effect of having text inside the HTML structure, but shows an image instead.

HTML:

<h3>Revised Image Replacement</h3>

CSS:

h3 {
  text-indent: -9000px;
  overflow: hidden;
  background: url(image-to-show.png);
  height: 25px;
  }

Note: The usage of em causes some slight problem with old Version of Safari, so whenever possible (actually I can’t think of a situation when this isn’t possible) use px.

62.5%

This is the known number used for the base font size in browsers so that 1em equals 10px, mostly used in the practice of using em’s for setting font size yet still thinking in pixels to make things simpler. This method is first introduced and explained by Richard Rutter. The usage of em instead of pixel for font-size, of course, is good for many reasons, one of them is due to the fact that fonts set in px cannot be resized on a certain wretched browser. Back to this number, it is commonly used on the html element, for obvious reasons.

body {
  font-size:62.5%;
  }

A more advanced usage is 62.5%/1.6em, where the second number denotes the line height. This only works in font instead of font-size property:

body {
  font:62.5%/1.6em Arial, Helvetica, sans-serif;
  }

1%

This number, used on height property, is commonly used with the Holly Hack to fix the strange escaping floats bug in IE6. It is also featured on A List Apart’s 2004 article on creating horizontal drop down menu. Now if you’d excuse me, talking about IE bugs is obviously not my (or any other web designers’) happiest moment, so kindly peruse the links above to learn more about it.

101%

Like the number before it, 101% is also used on the height property. This is commonly used to deal with Firefox’s behavior of adding/hiding its vertical scrollbar depending on whether the page is taller than the viewport or not. This behavior gives the effect of inconsistencies between pages depending on their height. Using this technique, Firefox is forced to always display the scroll regardless of page height.

html {
  height: 101%;
  }

Nevertheless, it is said that this does not fix the same problem in Opera, and the more correct solution is this:

html {
  overflow-y: scroll;
  }

Another similar discussion about this can be found at Dzone Snippets.

Closing

These are what I can remember easily. It’s by no means a complete list, and I’d love to hear it if you know more about them!

Anyways, I’m not here to write a review about the engine. Not yet. Instead, after reading about Chryp a little, I decided to learn and find out how the theme system works. While I obviously can’t claim that I have completely mastered the art of Chyrp theme creation, this is what I came up with.

Introducing Freebird, a Chyrp Theme

This one’s a simple, tumblelog-flavored theme with relatively narrow width and minimal decoration so that your content remains the focus of the site. The screenshot above does not show the admin bar, for which you will need to install Chyrp and use this theme to find out.

Interested? Download Freebird, completely free.

Credits and Stuff

• The name Freebird is taken from a song by YUI (not to be confused with the Yahoo! UI Library).
• The background pattern is modified from one pattern made by Squidfingers. Squidfingers’ patterns rock.
• Icons are from Brand Spanking New’s Mini Icons v2, which by the way is an awesome, free, iconset.
• Most PHP files inside the theme are copied directly from Chyrp Default, modified here and there to fit.
• This theme is licensed under GPL.

Conclusion

I plan to create a separate post to discuss more about Chyrp, including how the theme system works, so this part will not be too comprehensive. In short, I find myself grinning a lot while working on Freebird. The theme system is indeed powerful and highly modifiable, and it’s been quite a fun little project to work on. There’s only one page of documentation, but it’s really quite intuitive once you dig into the theme files.

So, this is where I leave you to play around with the new theme. Have fun!

<div id="sidebar">
  <ul>
    <li id="pages" class="widget widget_pages">
      <h2 class="widgettitle">Pages</h2>
      <ul>
      <li class="page_item page-item-2"><a href="http://url/?page_id=2" title="About">About</a></li>
		  <li class="page_item page-item-2"><a href="http://url/?page_id=2" title="About">Contact</a></li>
      </ul>
    </li>

    <li id="categories-1" class="widget widget_categories">
      <h2 class="widgettitle">Categories</h2>
      <ul>
      <li class="cat-item cat-item-3"><a href="http://url/?cat=3" title="View all posts filed under Asides">Asides</a></li>
      <li class="cat-item cat-item-1"><a href="http://url/?cat=1" title="View all posts filed under Uncategorized">Uncategorized</a></li>
      </ul>
    </li>
  </ul>
</div>

This is where I begin to wonder. Why do widgets go into an unordered list? Semantically, it’s possible to argue that the sidebar is actually a list of widgets, therefore the usage of the <ul> tag. But with that same logic, the content area of a blog is basically just a list of posts. Yet I never found any theme placing each post inside an <li> tag. Have you?

This is what Automattic has to say on this, emphasis mine:

Notice that the entire sidebar is an unordered list and the titles are in <h2> tags. Not every theme is built this way and it’s not necessary to do so, but it’s currently the most common sidebar markup in the themes we surveyed so we adopted it. The element with id=”links” is the equivalent of one basic widget.

So, I assume that this practice date back before WP Widgets is created, and is simply picked for compatibility reasons (so that it’s easy to convert already-made themes to be widget-ready). But that does not mean it is still necessary for new themes, I believe.

If you take a look at some of the more well-known web designers’ code, you’ll see that they don’t do this on their sidebar. While none of these examples actually used WordPress widget on their site, but does that matter? Widgets or plain old hardcoded PHP, we’re simply talking about items (or sections, contents) on the sidebar, right?

The last thing that also bothered me is that the usual code above looked so cluttered. Tag soup, anyone? Nested <ul>’s and everything. They’re actually quite difficult to follow, and I don’t see a reason why something simpler can’t be achieved yet still be semantically okay. Something like this, for instance:

<div id="sidebar">
  <div id="pages" class="widget widget_pages">
    <h2 class="widgettitle">Pages</h2>
    <ul>
      <li class="page_item page-item-2"><a href="http://url/?page_id=2" title="About">About</a></li>
    </ul>
  </div>

  <div id="categories-1" class="widget widget_categories">
    <h2 class="widgettitle">Categories</h2>
    <ul>
      <li class="cat-item cat-item-3"><a href="http://url/?cat=3" title="View all posts filed under Asides">Asides</a></li>
      <li class="cat-item cat-item-1"><a href="http://url/?cat=1" title="View all posts filed under Uncategorized">Uncategorized</a></li>
    </ul>
  </div>
</div>

Mm. Tasty.

And So We Bump into Troubles…

By default, the value for the function register_sidebar (consult Widgets API docs page for more info) are these:

$p = array(
  'before_widget' => '<li id="%1$s" class="widget %2$s">',
  'after_widget' => "</li>/n",
  'before_title' => '<h2 class="widgettitle">',
  'after_title' => "</h2>/n"
);

register_sidebars(1, $p);

In other words, the built-in Widgets code is to put each of them inside an <li>. To fix this, we do it this way:

$p = array(
  'before_widget' => '<div id="%1$s" class="widget %2$s">',
  'after_widget' => "</div>/n",
  'before_title' => '<h2 class="widgettitle">',
  'after_title' => "</h2>/n"
);

register_sidebars(1, $p);

And to set-up the Widgets area inside sidebar.php, simply use the code:

<div id="sidebar">
  <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar() ) : ?>
  // static code here
  <?php endif; ?>
</div>

And that’s it. Simple changes, much lovely code. Thoughts?

So, this is the list of the various blocks that would fit into an online magazine’s home page. I definitely would use this as reference, and hopefully it’s useful for you guys too.

First, the obvious ones:

• Title and description
• Navigation bar
• Search Form
• Footer

Next, the custom blocks:

• Featured article. A big, differentiated block with big images and excerpt of the magazine’s current top article
• Also featured/previously featured articles. Could be a list of three or more articles with smaller thumbnails, smaller header, and so forth, compared to the single, featured article above.
• A glimpse of the most recent articles on each categories available. Mostly just list of titles with date of publication.
• Popular articles. Either visit count-based or reader rating-based.
• Multimedia. Featured video, podcast, and so forth.
• Latest reader comments.
• Advertising spot(s).
• List of categories.
• List of archives based on date.

Also remember that the above are just common blocks and they might very well be modified to fit your needs. Why just one featured article, for example? Maybe six is the way to go. Who knows.

Another point of interest is thinking how these blocks can be presented. Use DOMTab to put more than one blocks in one space, displaying only one block but still allowing visitors view the other blocks by clicking on the corresponding tabs (it’s much easier to check the DOMTab site and see the effect in action). You can see this effect being used tastefully on The New York Times, Small Potato’s magazine-styled WordPress theme, and basically various other places.

It’s probably a good thing as well to feature your readers somewhere on the front page. A list of the most valued contributors of some sort (those who comment the most, or who send the most articles, and so on). There are plenty of different things to try, so experiment and have a lot of fun!

But your blog does not have to be the same.

Instead of having yet another messy blog tangled with of blocks of ads, contents, and links all over the place, you can have something that looked like this instead. Did you know that a minimalistic design is one of the 15 powerful ways to differentiate your blog?

Yes. That’s what our Whitespace Nation theme for WordPress can deliver. It’s very simple. Beautifully simple.

This is a two-columns, dark theme built on top of the wonderful Sandbox theme. Yes, it’s widget-ready (because Sandbox is). That said, you will need to upload both this theme and the Sandbox theme in your WordPress theme directory before The Whitespace Nation can deliver that silent elegance of simplicity to your blog. The theme is created using Sandbox v1.1 for WordPress 2.3.x and above, tested with Firefox 2, Opera 9, Safari 3 Beta, and IE6+.

• Live preview
• Download Sandbox theme (get the v.1.1 one)
• Download The Whitespace Nation theme

Comments and questions are welcome.

Basic Necessities

First of all, I think this goes without saying that the most popular form for a search result page is a list. I just mentioned this because I wonder if there is another way to present the result more effectively. No, I haven’t put more thought into it, maybe you have?

Okay now, here’s the list.

1. Remind user what they are searching. A few common places:
   • <title> tag
   • subheader text (above search result)
   • highlight the search term inside the result (say, with different background color)
   • put the search term inside the searchbox. Also useful for refinement, discussed later.
2. Add short description and or more information available. This is good to help the searching process.
3. Categorize if necessary.
4. Consider the two extremities: no result and too many results. Let user know if there is no result (blank page is a no-no), use pagination for the latter.
5. Show the scope of the result (e.g.: 1-50 out of 1,000 result)
6. Using numbered list for the search results already show the relevancy of the result, but if necessary it can be further refined like using percentage in Wikipedia.
7. Refinement. Allow user to refine search query easily. Having the search term ready inside the input box is good. Advanced search option is another solution, although not always necessary and or viable.

Advanced Features

While might not be needed on most cases, but they can be useful depending on the situation.

1. Addressing near hits. Typo. Misspelling. Suggest word correction, like Google.
2. Advanced search. Scoping.
3. Show commonly searched terms.
4. If you’re dead sure that the first result matches with the query, redirect immediately without showing the search result page. Like in Wikipedia.

TOC

This is Part II of the On Designing Search Result Page article series.

1. On Designing Search Result Page, Part I
2. On Designing Search Result Page, Part II: Quick Summary
]]> http://playworkplay.com/blog/search-result-page-design-2/feed/ 0 http://playworkplay.com/blog/search-result-page-design-1/ http://playworkplay.com/blog/search-result-page-design-1/#comments Thu, 13 Dec 2007 14:51:34 +0000 Hafiz Rahman http://playworkplay.com/blog/search-result-page-design-1/ Compared to other commonly discussed part of a website such as the homepage or product page, I find that search result page is a topic that is much less studied. This is baffling, because designing a good search result page can be a difficult task at times. In fact, we are currently stuck right here in our small project: we just can’t seem to create that perfect search result page!

Hoping to solve the problem in a different way, I will try to create a series of article about our current endeavor. The best thing to do first is, of course, to stand on the shoulder of the giants. So, the first part of this series will list various articles that have been written about the arcane art of search result page design. Here we go.

Before we get started…

Search: Visible and Simple, from Jakob Nielsen’s Alertbox. He raised two important points about the usefulness of a search feature: it is a way for user to go anywhere he want regardless of the available site navigation, and it is also an escape hatch with which user can find a way to go somewhere else when they’re stuck in a page.

About.com’s Web Usability section has Site Search Dos and Don’ts, a short article filled with utterly useful tips, tricks and knowledge. It’s a must read. Also read about scoped search and whether it’s necessary to include in our website.

How to Create a Good Search Result Page

Why, About.com has that very page: Designing a Good Search Result Page. In a nutshell, their recommendation is to remind user what they searched for, put results in context, keep it consistent with the rest of the site’s look, and provide further search tool. Visit the page to learn more about each item.

Web Design, The Complete Reference has a chapter dedicated to Search functionality, and there’s a quality content there about Result Page Design. The article is actually longer than About.com’s article above, and I dig the list of common result page elements.

Martijn van Welie also have a great article on the subject, with samples from the already familiar search page of Google and Amazon.

With an emphasis on e-commerce website, E-consultancy also have a page on search result design. As a side note, the site is rather broken in Opera, with the content page squeezed to a really small width making it hard to read, so you might want to use Firefox or Safari.

Also interesting, here’s Design by Fire’s attempt to redesign what possibly is the world’s best known search result page: Google’s.

There’s also a paper called Presenting Search Results: Design, Visualization, and Evaluation, by John Cugini.

That’s about it. Kindly let me know if you have more resources on the subject, it’s quite possible that my Google-fu is not great enough to find more juicy links.

In the next part, I will try to use the knowledge from the sources above to study search result pages from various sites. Stay tuned.

]]> http://playworkplay.com/blog/search-result-page-design-1/feed/ 1 http://playworkplay.com/blog/designing-with-less-features-in-mind/ http://playworkplay.com/blog/designing-with-less-features-in-mind/#comments Wed, 12 Dec 2007 13:35:53 +0000 Hafiz Rahman http://playworkplay.com/?p=4 Play Work Play Studio is currently taking part in developing a smallish side project site where most of the features have yet to be determined. The basic functionality is there, but feature-wise there is no unique factor that can make our site stand out.

But could the scarcity of features be a site’s strong point? If we’re looking at 37signal’s direction, then the answer is yes. However, should we decide to go that way, it will be necessary to actually delve deeper into the very essence of the site. The lack of feature should actually be a defining factor, the philosophy behind our design, instead of just a byproduct of the developer’s lack of idea (which is closer to our actual situation right now).

One of the biggest driving factor for us to take part in this project is due to the fact that most competitor sites are so poorly-designed, browsing around them felt difficult and tiring. Our goal is to provide a better experience for users: our content might be the same, but you’ll have a lot more fun exploring our site. Also, if all you want is to grab what you need and immediately go somewhere else, we’ll make sure our design don’t get in the way.

Now, could the lack of features aids us in reaching that goal?

In a way, we are optimistic that it could. By leaving only the very necessary part intact, we could ensure that users don’t have to work hard to get the content. Also, the simplicity of the design means that it will be much easier for people to master the site. This can give users a better sense of satisfaction, so that they felt comfortable enough to use and return to the site every now and then (and happy enough to recommend our site to others!).

Also, the load time would be much faster without all those unnecessary features. It’s one major plus for our target market.

Stay tuned to further development of this project. Who knows, perhaps by the next post the site will already be up and running.

]]> http://playworkplay.com/blog/designing-with-less-features-in-mind/feed/ 0