Please do not change your browser settings.
The GSD blog has been redesigned.
For some reason, in a fit of summer boredom and bravery I decided it was time for a redo. Maybe it was the recent redo of the NPR website. Maybe it was the Chron.com redo (or Dwight’s TechBlog ) . I’m not sure. Anyway I decided it was time for change.
And yes…your eyes don’t deceive you. That indeed is a recent image of Lavie and I snuggling away in our real-life vectorized skins. No need to imagine our mugs any longer.
I spent a few hours (honestly) poring over the Blogger Templates at btemplates. There were lots and lots of really great templates. Only problem I kept coming back to is that many of them looked way too commercial or polished for the tone of the GSD blog. In addition, I just didn’t like having to depend on images or banner-images hosted off-site.
So I reviewed the default ones on Blogger and ended up really liking “Sand Dollar”. It was a two-column template which was a bit hard to adopt from my previous three-column style. However, I really liked the way the post-body section auto-resized (floated). And the font worked quite well.
I did use this tip BP Web News and Tips: Template MakeOver - Procedure 3 to swap the body and sidebar columns. I was just so used to having the body-text on the left that I had to get it back that way with the sidebar on the right. This worked perfectly.
I did break the tag-cloud horribly with the new template. However, I did find that the code I previously used by phydeaux3 was updated and refined a bit more since: New Blogger Tag Cloud / Label Cloud. I think it looks smashing!
I did drop the “Links from Japan” as though I still RSS feed a number of Japan-centric blogs, I really didn’t find the length of the sidebar items pleasing going from a double-sidebar to a single one. So it got cut.
I finally hard-coded the HTML code for the “apostrophe” character in “Claus’s Toolbox” so that darned “quote” character previously in it as “Claus”s Toolbox” is now fixed.
I also tweaked the colors (Blogger now has added a nice WYSIWYG Fonts and Colors editor) with Lavie’s help providing a critical eye Simple borders were added to better separate the body from sidebar. Padding and font sizings were manually adjusted as well.
The real killer-diller for me on this was the comment widget. The original widget transferred over fine but the text was all jammed together and it was next to impossible to differentiate between comments. It’s a JavaScript creation and while I am comfortable with basic HTML/XHTML coding, JavaScript is a different manner. Through trial-n-error and careful studying of the code layout I finally figured out where to add a JavaScript language “linebreak” of sorts. I think the comments look quite sharp now. I also expanded the amount of allowed characters so it is easier to get a sense of the comment on longer ones before they are truncated.
I’ve still got some additional fine-tuning to do. I’d like to separate the posts a bit more as they seem to run together just a bit. And with the new-found extra room I might be changing some of the other graphics on the side-bar just a touch.
I’ve checked it in Firefox, Chrome(ium), and IE8. I’ve not jumped over to my Vista (dual-booting) OS yet so I haven’t seen it yet in Opera or Safari. I imagine it is rendering fine there. I really hope this particular template design fixes the annoying habit of long-lines breaking the previous three-column template in IE. Specific HTML code I found in the template seems to address that issue.
Of course, I had to remember to update (refresh) my theme in Windows Live Writer so it now correctly formats according to the revised template.
All things said, I think the changes are pretty refreshing and makes a much more eye-friendly blog.
What say you?
Cheers!
--Claus V.
4 comments:
I miss the old manga drawing...
Looks great, but one thing doesn't work as well for people with wide screens: the main body text is no longer fixed width. On a 1680x1050 screen, that makes for a column width of about 160 characters, whereas about half that (72-80 characters) is an ideal (to me) column width. Maybe a question of taste, but...
Regardless, thank you very much for a great blog.
@ cdman83 & Anon. - Points taken! Everytime I've made a change to the blog and considered removing the manga art of the Valca clan done by artist Range Murata the consensus has been to bring it back. I've gotta learn to listen!
So it's back, moved down to the bottom with the context of Last Exile. May move it up more as the fine tuning continues.
Anonymous, I appreciate the perspective. I'm actually using a 1280x800 widescreen format for my own purposes. However, I keep forgetting that I keep the "bookmarks" sidebar in Firefox permanently open to the left, so that skews my working page-size considerably.
I've got to play with the margins and padding settings on the layout some more to see if I can can indeed control the body-width better.
If it is too wide then it does seem a bit more challenging to read. At the same time, I just wasn't ever completely satisfied with the fixed body size under the original arrangement. Plus remember, I went from a 3-column layout down to a two-column, so although I did bump the font-size up just a touch for readability, that inherently leads to a wider page-body element.
Please be patient and keep the suggestions coming! I value them all.
Cheers!
--Claus V.
Nice to see you used my tutorial to switch columns! Found you via a BlogLines search (small world).
You can use % instead of fixed px to adjust the text a bit better for wide screens.The key is setting the outer-wrapper to less than 100%, maybe 89% instead of 900px. Then the main to 60% instead of 630px and 35 or 30% side bar instead of 220px. See how it looks using browsershots (.com) with different screen sizes.
You may have to play with it and/or maybe add a light border around the post to limit the eye movement across the page.
Post a Comment