Thursday, August 26, 2010
Blog layout.
Howdy all my shy readers. I was preparing a post and realized I really couldn't stand my current blog layout. So it's been redone. Still some bugs in the system though, so post a comment here if there's something that's hard to read / etc. I noticed one already is that the post times are colored nearly invisible. The reason I changed is that I was having trouble with the width of the main posts making it really tough to do anything with complicated images in the posts, so removing that sidebar and putting it at the bottom really helped. For those of you viewing by RSS, let me know if it's any better. I did reformat my latest post to take advantage of the new style, so let me know what you think - another post probably up later today that also uses it.
Subscribe to:
Post Comments (Atom)
15 comments:
Huh, like the layout. RSS looks the same as always (it's Google Reader-themed to me!), but I dig the new look of the actual blog.
I appear to have made the terrible mistake, however, of trying to read the markup. I was curious to see what the hardcoded width was (looked a little gaunt at 1920x1080), and WOW is dat sum super-nested machine generated layout? Not a bad thing, just not meant for the human eye. Looks like around 900 pixels, though, which I think is more or less standard these days?
I approve of the missing blogspot bar :) Very clever.
Yeah, the full markup is a mess - it's auto-generated via blogger's template designer, which is really fun to work with but not if you want to directly work on the full markup. It does let you do some nifty things - note the nav bar no longer shows up, that's due to my adding a custom CSS style to the page.
I highly recommend the "inspect element" feature in Chrome, it at least lets you look at the CSS style trees in a reasonable manner and you can pick out specific pieces. Still a mess to look at this thing though.
As far as width goes, yeah, I maxed out the main post width in the template. I may go back and just change it slightly so that it's got a fixed minimum and then scales the post width rather than page width. Should be easy by adding another custom css bit to the template. :)
Yeah actually, the inspect element thing can find the computed sizes really easily, just pick an element and make sure the "computed style" tab is expanded, it'll show the computed sizes for each bit, so I can see the main page is auto, which is computed to 1163px (my current browser width), the content area is then 900px (the fixed size via the template designer) and then the actual blog post area is about 836px.
Whoa hey! Looks pretty good!
The overall layout looks good and the background is pretty, though I prefer having a sidebar for navigation if I want to look at an old post. Also, the old sidebar information has a weird layout at the bottom. The other thing I noticed is that I am finding it quite difficult to read the dark blue link colors with this background.
Interesting - not sure how I feel about the lack of sidebar/sidebar linkage moving to the bottom of the page. However, it generally looks the same to me in Google Reader. Only thing that would make it awesome-er is if the pink of the design were purple!!!!! Purple!!!!! Pur-ple pur-pur-purple is the most awesome color ever. Pur-ple I love you Pur-ple - you are so sweet!!! Yay!!! Purple!!!
Yeah, I'm not terribly happy with the sidebar at the bottom. The problem was that it was eating up a ton of space on the side that I couldn't get to resize well, so my posts were limited to being really small. I think I may know how to fix that now though.
I suspect the bottom sidebar looks funky because it wasn't meant to use the whole width.
Link colors: Yep, I'm still fiddling with those. At one point they were black if the link had been followed and it was impossible to see them.
The chrome dev console is the only thing that let me make heads or tails of it at all. And yeah, I should have just looked at the final computed style, I kept trying to find where it was computed *from*.
As long as the page renders on 1024 pixel wide screens, I'm happy. (Even though I typically see it reformatted anyway).
Clearly, to make the sidebar (bottom bar?) look better, you should put it in it's own absolutely-positioned and sized box, and use javascript to make the box run away from the mouse cursor. It's the obvious solution. If a user wants to actually click anything in it, they'll have to corner it first.
Lem: That's an awesome idea. I did implement a different solution though, so for everyone that commented on the archives / sidebar thing, see what you think about the current page - Just below the header there's a home and archives link, and the archives link actually has several archives widgets for a variety of display styles for your archive-perusing enjoyment.
Also, updated link colors yet again.
I have no opinion on the archives, as when I want to see the past, I just hit "older posts" until it appears. So as long as you keep the "older posts" button, I'll be happy.
Readability is solid for me now. The archive on the top helps, but with all the extra 'white' space, you could maybe put pop-down menus for each year or something?
Hello from the airport, by the way. I'll be in North Carolina in a bit. (OK, maybe have a day.)
Mason: Not a bad idea but probably tricky to pull off without munging with the internals code even more. The header bit there goes to 'static' pages for the site, I just added an archive page and then messed with CSS internals so that different bits only show up on different static pages.
I don't really read my archives much anyways, but it's handy to have a page with multiple views on them at once - it's not really supported in the base templates as you can only have one archive widget, but getting two of them was surprisingly easy.
I think perhaps I will try to right-justify the widget up top and maybe reduce the height a bit, rather than add more tabs.
Actually, the present "Archives" is better than before (alt. page better than at the footer).
You can always use javascript to muck with the page DOM after it's loaded, but that can get a bit hairy, and breaks if they change the way their static content is laid out / labelled.
(Note: that solution is about as serious as my first, perhaps slightly moreso)
Post a Comment