New theme up for friendlybit.com

May 22, 2008 • Emil Stenström • CSS

Hi! If you're reading this blog through your feed reader, today is a good day to break out of it and have a look at the site. There's been several little changes throughout, and I invite you to click around and explore things. Let me know if you find anything broken!

Comments have moved up to the top and gotten more space. That includes the comment form which have been an insult to people wanting to comment. I'm hoping you reward me by correcting me even more often.
I'm using Google for my searches. Instead of trying to patch the builtin wordpress search I'm just linking to google from the header. It gives both faster and better results.
Design-wise it's much "lighter" than before. The old one felt hard and heavy, and didn't look to be as open as it in fact is.
Widgetized. I'm using wordpress widgets all over the place, which makes the administration of things like the "recent comments" easier. I just log in and change a number from the admin interface.
Fluid width (between 1000 and 1250 pixels).
Much nicer CSS, with a structure that you can actually follow.
I've promised you the number of feed readers clearly visible, and I'm still going to get it done. But I'm not done yet.

No matter what I will keep what I've always done with comments: I will read each and every comment you post, and I won't close articles for comments even though they are a year old. I will keep replying to (almost) all posts within a couple of days. I won't delete your comment just because I disagree with what you're saying, and I will go back and correct the original article with any errors you find.

You are what makes this blog what it is. I could have written all my texts in word instead (and some of you probably wish I did sometimes), but that would have been totally meaningless. Feedback is what makes this blog go around.

Thanks!

Comments

May 22, 2008
By: Martin S. (#1)

Looking good man. Much better alignment of things. Clean layout. I like it already!

A horizontal scrollbar is visible in 1024x768 mode though.

Keep the great stuff up!
May 22, 2008
By: Dan Pettersson (#2)

I think the old theme had a more personal feeling to it. More like you could feel that you were in someone's home.

And RSS doesn't work anymore.
May 22, 2008
By: Emil Stenström (#3)

@Thanks for the bug reports, I'll fix them first thing when I get home from work.
May 22, 2008
By: Niklas Olsson (#4)

Hello Emil! Nice with a new style, maybe a bit too minimalistic for me but what I really like is the structure and the way you high lighten the comments.

Even though you write very interesting material, it is often (like on many other good blogs) the discussion/comments about the current article that fill in the blanks and give you a different perspective on the area.

Keep up the good work!
May 22, 2008
By: Emil Stenström (#5)

There. No scrollbar at 1024, and the feed is back up. Thanks for bringing it up.

@Niklas: Thanks! Keep commenting and it will keep being as good :)
May 22, 2008
By: James (#6)

Interesting. I like the minimalism. I don't necessarily like the fluid width: at full width the lines feel too long. And you might consider making the link to the feed more prominent.

I do like the style you've used. Comments alongside the posts is great.

Keep up the design and writing, both are great!
May 22, 2008
By: Rotem (#7)

What, no pink? :)
May 23, 2008
By: Damien (#8)

Displays greatly in Opera both on large and small screen. Good job :)

Can' wait to check it on my mac this evening :P
May 23, 2008
By: Kalle Persson (#9)

This looks really nice and very developer-ish. The fluidness is also good!
May 23, 2008
By: Nita (#10)

The new layout is great; I had just noticed the longer comments on the previous post seemed to need more space :)

Now, on to the "reward"... Ahem. The search button is only half-visible when it gets linewrapped down in a narrow window.

Have you noticed that layouts tend to show if the author is primarily a programmer, a graphic designer or a markup & style writer? This one says you're a front-end developer (a good thing, IMO ;) But I do miss the pictures a bit.
May 23, 2008
By: icaaq (#11)

I like it a lot (http://snurl.com/2a8ef)

PS. nice code-style DS.
May 23, 2008
By: Jens (#12)

Much better, especially the commnents. Good work
May 23, 2008
By: Pece (#13)

The layout is much better, and I like the minimalistic style. I thing you should add some simple gradients.

Keep up the good work.
May 24, 2008
By: Exec (#14)

Looks really nice, good source and nice use of colors to show "importance". Though I think you should either remove the line at the very bottom of the comment box or make it thinner. It looks excessive to me as you already have the thick border running along the bottom of the page.

Btw, any chance that we may see some sort of subscription or feed for the comments?

I think I found a "misspelling" here and some of you probably which I did sometimes. You mean wish?
May 24, 2008
By: Exec (#15)

Ran into a problem with the floated definition list items in the Encyclopedia.
Example 1, Example 2

Works fine without the float.

You forgot to style the .correct .almost .incorrect classes.
May 24, 2008
By: Emil Stenström (#16)

@Exec: Great comments. Removed the line below the comments and fixed the misspelling.

Wordpress always generates a comment feed, just add /feed/ to the url of any article and you'll get it. Of course that's not enough here, so I added one link to the comment feed in the Comment heading, and another one in the footer below the article. Hope that's ok.

Also fixed the problems you found on the html encyclopedia page by changing what HTML I used to something else than a definition list. It was strange anyways. I also styled the correct, incorrect and maybe classes.
May 24, 2008
By: Emil Stenström (#17)

@James: I've also made the feed link a bit more prominent. When I add the number of feed readers I currently have I'll make sure to add some feed promotion there too.

@Nita: What browser/OS are you using? In the smallest width they don't wrap on my screen. Might be that the buttons on your OS is wider. I'd like to fix that!
May 25, 2008
By: Nita (#18)

Oh! I must have changed the default font size at some point... Well, never mind then. Although you can get a similar result if you increase the page text size. Firefox/Ubuntu, btw.
May 25, 2008
By: Emil Stenström (#19)

@Nita: I'm using the release candidate of Firefox 3 which have changed how zooming is done. It uses the same zoom as IE7, which means there's no wrapping any longer. I think I'll skip fixing that bug :)
May 26, 2008
By: Robert Nyman (#20)

Nice! Perhaps a bit sparse, but it's very easy to read, and, as mentioned above, especially the comments.

The possible downside of having the comments next to the post is that it might draw some unwanted attention at the first initial read, i.e. people might read the comments before finishing reading the actual post.

Aside from that, good work!
May 26, 2008
By: Emil Stenström (#21)

@Robert Nyman: Yeah, that's a risk I'm willing to take. If some comment draws more attention than one of my posts, I'm fine with that. Let people chose themselves what's most important...
May 26, 2008
By: Martin S. (#22)

Man, I would really love to read the complete posts on the startpage, instead of a clipped excerpt. Anyone with me?
May 27, 2008
By: Adam Z. (#23)

Sorry, it just looks unfinished to me, just my opinion. But judging by the other comments I'm in the minority. Regardless, I'm here for the articles, not the eye candy :).

Just curious... Is your headshot and short bio supposed to be up next to the FriendlyBit banner? There seems to be a little open spot that would fit it nicely. Then the top of the Comments box would line up with the top of the article.

Kudos on having the guts for such a major redesign!
May 27, 2008
By: Emil Stenström (#24)

@Martin S: Feels rather strange... Would mess up the page stats, and what would google think of it? Feels too dangerous I think...

@Adam Z: I see what you mean. The gap up there have been left out intentionally. I had it like that first, but letting some friends look at the page they had problems deciding where to start. So I made the header color more prominent, and moved the right column down, seemed to fix the usability stuff.
Jun 12, 2008
By: Mediaspawn (#25)

I really like your new theme, simple, elegant, clean, and colours that are easy on the eyes. Keep up the good work.
Jun 22, 2008
By: Peter Vigren (#26)

Hi! ^_^ I thought I should comment some things about the new design... First of all, I really liked the other one and am sad to see it gone, I actually thought that one felt open (I so loved the sky image ^o^) but it's your website. ;-) As for the new design... it's really minimalistic, that's for sure. Hey, I can dig minimalism, no problems, it's just that... hm, well, like the content area feels so "white", void like. But then again, it can just be that it's new, in contrast to your old design with a lot of details... But overall I think it's a good design, don't think otherwise. :-D

Well, to the things about the design itself...

* The corner images have a white background, while the main background is not.

* "/* Safari needs to get html tag cleared */" intrigues me..?

* This one I was actually going to bring to your attention when you had the old design up but didn't get around to it. Since your site uses cookies, it is requiered according to swedish law, to inform the user about that but I have found no trace of such information. Why I was looking for it were because I was curious how you implemented it, trying to decide how I should implement it myself.

More info on the Swedish Post and Telecom Agency/Post- och Telestyrelsen's website.

* You have a more or less empty div with the id of "navigation"?

* Why do you give the div containing the actual post an id based on what I would believe was the post number?

* Hm, I'm thinking a little about that you have the label for the input fields after the fields themselves, is that not bad accessibility-/usabilitywise? I mean, if they were checkboxes/radiobuttons that would be expected but with ordinary text fields...

* The strangest thing happens (Firefox 2) when I hover over the search input field; it moves 1 px to the left. But that is only if it is blurred, since it moves back upon blurring.

Nitpicking: Word is a program, word is a group of letters. ;-)

Anyway, keep on blogging, I regularly visit to find some good and useful stuff. ^^
Jul 8, 2008
By: Dutch (#27)

I have not been here for a while, but I think your new look is great. The comment column (division) is easer to read. Great to see you put it on the right, the articles are very clear to read on the left. The website gives a more adult look now.

The look however is more business-like compared to the older look. The older look gave a cosy idea. I miss this a little bit. And smaller screens have to scroll horizontal I presume, but when this only for the comments it really doesn't matter.
Aug 2, 2008
By: Exec (#28)

Noticed some more strange things.
The popular articles page is empty and there's nothing specified for Email/MSN on the contact page.

Also, if it's possible, the "Recent Articles" snippet should be changed to a "Popular Articles" snippet on the frontpage as you already have a large listing of recent articles there.
Aug 9, 2008
By: Emil Stenström (#29)

@Peter Vigren: Big thanks for all your comments and suggestions. I've now gotten some time for fix the things you mention:

* Corner images are now the right color.
* Safari didn't work with the bottom red:ish border as it should without a clear there.
* About cookies: I really think it's a silly law so I won't put up any text about it. There's much more important issues to warn about.
* I fixed the empty navigation div with a little wordpress hack.
* The post ID is used by some plugins I think (javascript targeting some specific posts), and is included in the default theme, so I just let it be there even though I don't use it.
* Strange mouseover in Firefox 2? Who uses that anymore? :P Doesn't sound too serious though, so I'll let it be.
* I'll have a look at the accessibility issue later this week, thanks for bringing it up.
* Nitpick: Uppercased "Word" :)
Aug 9, 2008
By: Emil Stenström (#30)

@Exec: Thanks! I removed the popular pages page. I'll bring it back later rewamped. The email is also not back on the contact page, without any dependency on php-execution inside pages. Good catch about the recent articles on the frontpage. I'll have to remake the frontpage I think.

Comments

By: Martin S. (#1)

By: Dan Pettersson (#2)

By: Emil Stenström (#3)

By: Niklas Olsson (#4)

By: Emil Stenström (#5)

By: James (#6)

By: Rotem (#7)

By: Damien (#8)

By: Kalle Persson (#9)

By: Nita (#10)

By: icaaq (#11)

By: Jens (#12)

By: Pece (#13)

By: Exec (#14)

By: Exec (#15)

By: Emil Stenström (#16)

By: Emil Stenström (#17)

By: Nita (#18)

By: Emil Stenström (#19)

By: Robert Nyman (#20)

By: Emil Stenström (#21)

By: Martin S. (#22)

By: Adam Z. (#23)

By: Emil Stenström (#24)

By: Mediaspawn (#25)

By: Peter Vigren (#26)

By: Dutch (#27)

By: Exec (#28)

By: Emil Stenström (#29)

By: Emil Stenström (#30)