gBlog redesigned – now with Flash!

I’ve been tinkering with new blog designs for a while now (the current design is almost 2 years old), with a loose goal to incorporate some Flash elements into the design. This was crystallized further by my inclusion in the “Flash Community: Perpetual Virtual Jam Session” panel at FlashForward NYC, which poses the question (among others): “why don’t we use Flash to blog about Flash?”.

I don’t believe Flash is a good medium for a full blog, but I do think that my blog about Flash should utilize the platform (ooo… new buzzword) where it makes sense, and that’s what I’ve tried to do in this new design.


Here are the exciting new features:

  • XHTML transitional and CSS

  • Focus on articles. The main page of my previous design had the focus on dates, which doesn’t make much sense for this blog. The article titles are now the focus.

  • Expanded content area. Most of my experiments are done at the default 550 wide – the new design will accommodate these.

  • Flash header

    • XML driven

    • Loads a random experiment SWF on load. Click the experiment name for more information about it.

    • Smart frame rate monitoring – displays static header if fps drops too low (and remains low). This is to accommodate slower systems, and reduce the impact on other Flash content on the page.

    • Decent error handling and recovery

    • 3kb

  • Flash sidebar

    • XML driven via a custom Movable Type template

    • Unlike the static template driven sidebar in the old design, this one will always grab updated content, so I can show recent entries and archive listings in my archived pages.

    • Expandable listings. Listings show the top 3 items, and allow you to expand to fit remaining content, including a scrollbar if necessary.

    • In-line search. You can search, and view results right from the current page… jinkies!

    • Persistent state. The expanded area, scroll, and current search results are stored in LSOs so that your state can be restored when you switch pages.

    • 12kb with fonts

The blog will evolve over the next month or so, and I appreciate your feedback/suggestions in the comments below. There are already a number of areas I want to improve, including:

  • Plug in more experiments, and clean up the existing ones to be less processor intensive

  • Unload experiment after ~45 seconds. It doesn’t make a lot of sense to have it running all the time, and unloading it eliminates the possibility of a RAM leak if the experiment is left running for a few hours.

  • Flash version detection – currently just assuming everyone has 6.

  • Tooltips on sidebar. Tooltips to show entry excerpts on rollover.

  • Create the static header. I’m not 100% certain what I want there yet, so it’s on hold until I have a bit of time to look at it.

Grant Skinner

The "g" in gskinner. Also the "skinner".

@gskinner

11 Comments

  1. Great,

    but there’s an issue in Firefox:

    Navigation on the right shifted to the left for approximately 22 px.

  2. Rostislav,

    Which build of firefox are you running? We’ve tested in a few builds (including older 0.9.x builds), and everything looks fine.

  3. I disagree about Flash not being a good medium for a full blog, if you’re talking about the front-end. Putting my blog’s front-end GUI and commenting system in Flash completely rid me of blogspam. It also eliminated the need for all those archive files (I use MT).

  4. XHTML transitional and CSS

    Doesn’t quite validate, though.

    As for Flash as a blog, there’s a few technical hurdles you need to jump with RSS linking and rdf data handling…

  5. Mike, I’d definitely have to disagree with you. Your site illustrates why I don’t find Flash to be good for blogs. Relative to an html blog, it took a long time to load, even longer to populate with content (this is on high-speed). It also uses screen space less effectively (though this could be addressed), and provides less support for easily embedding media into entries.

    I assume you have some kind of bookmarking, direct linking, or back/forwards script running, but I’m unable to check now, because on visiting a second time, I am completely unable to access your blog in Safari (probably because of the same). All I get is a blank screen, with an empty Flash player – everything has loaded successfully, but it won’t play.

    [UPDATED] Opened it in FireFox – it took 18 seconds for me to be able to interact with the site on your Flash blog. It took less than 3 seconds on my site (with the cache cleared). Switching entries took several seconds (versus 1-2 seconds on my blog). I also noticed you do not appear to have any support for bookmarking or back/forwards, this is obviously a freebie in HTML. I assume you must have support for direct linking… a blog without that is largely useless. CPU usage is hovering between about 50% (idle) and 100% (any kind of interaction), versus about 3% (idle) to 20% (scrolling) for my site without the Flash experiment running in the header.

    I think it’s very cool that you and other innovative Flashers are trying to push the bounds, and one day Flash might usurp HTML in content delivery. For the moment HTML still reigns supreme in content-heavy, single state environments (blogs have multiple states, but the user experience is typically single state) – it’s what it was built for after all.

  6. Geoff,

    Yah. We’ll look at getting it to validate over the next little while, but for now we are mostly just concerned with getting it working for real users, not validators. 😉

  7. Grant, great stuff. I particularly like the header, and the fact that you’re courteous enough to check CPU usage and disable it if need be. Nice touch.

  8. Great to see the Flash used effectively in a blog while keeping the power of HTML.

    Must admit that the old layout was a lot more clean and beautiful. I actually found your old blog to be the most pleasent in regards to layout. Anyways, this is of course all subjective.

  9. Hi Grant,

    nice new design.

    But there is an issue with the Internet Explorer (not that serious, just wanted to point it out). Your weblog is not centered in IE V.6.

    Greetings,

    Simon

  10. Simon: Thanks for the heads up. The individual archive page had the old design’s doc type still. Should show up properly now.

  11. Great new look!

    Some people might argue that your navigation could be built just as easily with DHTML.

    While I don’t think that’s entirely the case, I do get irked when I can’t open a link in a new window or tab!

    Perhaps a ContextMenu could help enhance it?

Leave a Reply

Your email address will not be published. Required fields are marked *