Thursday, March 31, 2011

Preview Blogger's New Dynamic Templates That Use AJAX, HTML5 and CSS3

Blogger announced that it is making 5 of their new templates available for preview today. You can take a live look at the Sidebar one for my blog here and change between all five using the top right blue drop down menu. Sidebar is by far the best from a readability and usability standpoint. The others have some cool features and are more pretty and may be good for photo blogs, but are not the best for everyday reading.

If you are a publisher you can deactivate allowing people to use the new views by going to Settings tab then the Formatting screen in your Blogger Dashboard. Since they are in test, advertisements will not appear or many other things like widgets and elements.






Timeslide


  • This view breaks the blog content down into three different areas:
    • Left column: Enlarged picture with a post snippet, title, and snipppet displayed in chronological order
    • Middle column: Displays just the post title and snippet
    • Right column: Displays just the individual post titles
  • When searching for posts in this view, the results will be highlighted.

Snapshot


  • This view will display only the posts which have images.
  • Clicking through any photo will display the full post page, with naviagtion links at the bottom for Newer and Older posts
  • Mousing over any photo will display a post snippet

Sidebar


  • Optimized for quick reading and browsing.
  • Left sidebar is list of chronological posts, with comment counts and thumbnails for individual posts.
  • and arrow keys will navigate through the posts, and comments can be displayed on the same page by clicking the Show link.


Mosaic


  • Clicking on an individual tile will expand that post to the full width of the view, and clicking again will collapse the post back into its original position.
  • The exact position of the tiles is randomly determined each time the blog loads, but they will appear chronologically from top left to bottom right.
  • Once a tile is expanded, you can page down by using the "up" and "down" arrow keys as well as J and K.
  • This view is optimized for the tablet viewing, and supports screen rotation.

Flipcard


  • Mouse over any of the cards to see the post title and comment count. As you scroll down, additional posts will continue to load.
  • Click on a card to see the post in full view. You can navigate through the posts using J (older post) and K (newer post) or the arrow keys. Hit escape or click Back to all posts to return to the Flipcard view.
  • In the upper left, click to sort by DateAuthor and Category.