Japanese PS3 commercials

Everyone knows Sony's marketing can be, uh, interesting. Most people have seen the US commercials for the PlayStation 3, but not so many people have seen the Japanese commercials.

Since the Japanese launch of the PS3 is scheduled for November 11th (aka 11/11), most of them involve people seeing 11/11 in odd places. They're short and interesting and there aren't any creepy babies.

Here are some YouTube links for your viewing enjoyment.

Concent (The Socket)

Foku (The Fork)

Entotsu (The Smokestack)

Taikan (The Sensation)

Blogger: Condensed Label List

This is a continuation of the series about customizations I made to my Blogger template after switching to the Blogger beta.

This time I'm going to talk about the condensed list of labels that I've put in the sidebar. Synonyms for "labels" used by other blogging tools include "categories" and "sections". For user navigation I like "sections", personally, so that's what the sidebar says.

Why customize it?

The default list of labels is a standard bulleted list that displays vertically.

The problem with vertical lists is that, well, they're an inefficient use of vertical space in the sidebar. If you have a lot of labels, you'll wind up with an extremely large portion of your sidebar devoted to this list. The vertical space that the list occupies will be far out of proportion to its importance.

Frankly, the list of labels isn't that important to me. It's a nice touch, and I would like them to be there, but I wouldn't say that it needs an entire screenful in my sidebar. So I set out to fix that.

Widget modifications

Here are the modifications I made to the default "Labels" widget to accomplish this.

<b:widget id='Label1' locked='false' title='Sections' type='Label'>
<b:includable id='main'>
  <b:if cond='data:title'>
    <h2><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <ul style='padding-left:10px; margin:0; text-indent:0;'>
    <b:loop values='data:labels' var='label'>
      <li style='display: inline; list-style-type: none; padding-right: 5px; line-height: 140%;'>
        <b:if cond='data:blog.url == data:label.url'>
          <data:label.name/>&#160;(<data:label.count/>)
        <b:else/>
          <a expr:href='data:label.url'><data:label.name/></a>&#160;(<data:label.count/>)
        </b:if>
      </li>
    </b:loop>
    </ul>
  <b:include name='quickedit'/>
  </div>
</b:includable>
</b:widget>

Widget explanations

Since the styles here are very highly specific to this single list, and unlikely to be re-used, I decided to mix CSS with HTML here by assigning the styles via the style attribute on the tags. This isn't normally good practice, but Blogger templates do it a lot already, and it's actually kind of convenient here.

The display: inline; style on the LI tag makes the list horizontal. Adding list-style-type: none; removes the bullets.

That's almost good enough right there! But during testing I found that the original template used normal spaces in between the label and the numeric post count. Since I am expecting the list to wrap -- it wraps five times at my normal web browser size -- I need it to wrap cleanly. With a normal space, you often get the break in between the label and the post count, which doesn't look right. So I converted the regular space into a non-breaking space (&#160;).

Why '&#160;', rather than something like '&nbsp;'? Because I'm still shooting for XHTML eventually, and XHTML does not recognize '&nbsp;' as an entity. The Unicode code point '&#160;' is the direct equivalent.

After all that was done, padding, margins, and line height were adjusted to my personal preference. Your needs may vary.

Dead ends

Although this looks simple, I tried a couple of other things before settling on this solution.

• Putting the list in a paragraph - I considered this as an option, but was unable to get Blogger's template language to do it. You could do it as a space-separated list, but as soon as you add separators of any sort -- like commas -- there's no apparent way to avoid putting a separator in at the end. Blogger supports an "isLast" property on labels when used in the post widget, but it does not do so in the labels widget. On further consideration I decided that this was probably a bad approach, anyway, since it's not as accessible as using real lists.

• Changing font size based on post count - This is a relatively new twist in Web design. Flickr's tags are a popular example. However, I couldn't figure out a way to do it without resorting to Javascript. Blogger has a very minimal expression language for templates, but I haven't been able to find any detailed documentation for it. The closest I came was doing something like this:

  <font expr:size='data:label.count'> ... </font>

  But that didn't cap the maximum font size -- potentially leading to problems as I write more posts in each category. For now I've tabled this idea. It would still be interesting, but I think the best way to do it in Blogger would be to leave the base template HTML as-is, then dynamically modify the HTML with Javascript on the client side.

• Adding some interesting CSS decoration - I considered doing this too. But the only decent decoration I could think of was a rounded button look similar to what Safari uses in its Bookmarks toolbar. That would have been possible, but I'd need to create and edit some images and use this method to get the rounded corners. Worse, it wouldn't display correctly in Internet Explorer so I'd need to do a CSS hack to hide it. So I tabled this idea too. Even so, I might look back into this in the future.

More template tips

Other entries in this series:

• Blogger: Image as Blog Header

Blogger: Image as Blog Header

I'm going to do a brief series about how I wound up customizing my Blogger template (styles and widgets) after switching to the Blogger beta. First up, how I replaced the header with an image.

Why customize it?

Like a lot of people, I prefer to use an image instead of text for the header of my blog. I also want it to be clickable and always be a link back to the "home" page of the blog, which is a widely-adopted convention.

But I do not want to simply encode an inline image. For reasons of accessibility, I prefer a normal H1 tag that gets translated to an image by CSS.

Since I've been trying to keep the look-and-feel of my old template, I started with this image from my old template. It's 790 pixels wide by 105 pixels high.

Widget modifications

Here are the modifications I made to the default "Header" widget to accomplish this. Data that is specific to my blog, and which you'll want to change if you copy this code, is displayed in red.

<b:widget id='Header1' locked='true' title='Header' type='Header'>
  <b:includable id='main'>
    <div class='titlewrapper'>
      <h1 class='title'>
        <a href='http://drewthaler.blogspot.com/'><span/><data:title/></a>
      </h1>
    </div>
    <div class='descriptionwrapper'>
      <p class='description'><span><data:description/></span></p>
    </div>
  </b:includable>
</b:widget>

Widget explanations

The original Blogger template had a conditional so that the header was only a link if we weren't on the main page already. I removed the conditional because I think it makes more sense to always make it a link.

The original template also used 'data:blog.homepageUrl' for the link, but this resolved to 'http://drewthaler.blogspot.com/index.html', which is redundant. I wanted the shorter and more future-proof URL 'http://drewthaler.blogspot.com/' so I changed the link manually.

I left the description code as-is, because I don't use it. You may want to do something different.

You'll notice a single <span/> tag in the middle. That's required for CSS image replacement.

Stylesheet modifications

Here are the CSS additions that go with it. These are additions to the original stylesheet.

/* Replace the header with a graphic on computer displays */
@media screen, projection, tv {
  h1.title {
    width: 750px;
    height: 89px;
    left: 0;
    top: 0;
    padding: 15px 0 0 40px;
    margin: 0;
    border-bottom: 1px solid black;
    z-index: 0;
  }
  h1.title a span {
    background: url(http://homepage.mac.com/drewthaler/images/blog-header.gif) no-repeat;
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 790px;
    height: 105px;
    z-index: 1;
  }
  #sidebar {
    z-index: 2;
  }
}

Stylesheet explanations

The @media directive means that these styles should only be applied for certain types of media. For screen, projection, and tv renderers I prefer the nicer look. But they will not be applied for screen readers and printing.

I'm using the Gilder/Levin Method for CSS image replacement. In this method, the span does all the work: it gets resized and repositioned, and the image is displayed as a CSS background image for it. The image is clickable because it's on the span, and the span is inside the link tag.

The span is given a z-index of 1 so that it sits above the original H1. The H1 text is still there, hiding underneath at z-index 0. Then the sidebar is given a z-index of 2 so that it will float above the header image if the two overlap.

The pixel sizes (790px by 105px) are from the size of my image. The padding (15px 0 0 40px) and bottom border are in there to make CSS-on/images-off browsing still look acceptable. It's a personal preference and based on the size of my image and text, so you might need to tweak it for your setup. The H1's width of 750px is the image's width (790px) minus the horizontal padding (40px), and the H1's height of 89px is the image's height (105px) minus the vertical padding (15px) minus the one-pixel bottom border (1px).