New design for friendlybit coming up

Hi. I just wanted to tell you that I’m now working on the new friendlybit. I’ve listened to your previous comments, and these are the changes I’m going to make/not make:

  • Blog format stays, no community. You’re damn conservative (something like 95% percent said to keep it a blog).
  • More compact writing. I’ll skip more of the fluffy wording, and concentrate on what I want said. That means shorter posts.
  • WYSIWYG-editor inside WordPress (my blogging tool) gets turned on. This might make the HTML somewhat worse, but It makes my job easier, so I’ll try anyways.
  • Paid links gets removed. I previously sold links on the frontpage and got like $200 a month from them. I’ve now removed them, since:
    1. It seems to be hip inside the Googleplex to kick on people making money from other things than AdSense.
    2. I have no idea if the PageRank drop from PR6 to PR4 is caused by them, but I’m still going to hope that was the case. We’ll see.
    3. To show to myself that blogging isn’t about money. Now I most definitely don’t blog for the money.
  • Number of feed readers will be used as a way of seeing if I do my job or not. This will also be shown at the top of all pages, so you will be able to follow them too.
  • Comments will be central, as Jesse Skinner suggested. For now, I’m just moving them up, above the fold, but we’ll see where we end up.
  • New design underway. As a token of me caring for you (and me wanting to steal your skills), I thought I’d post a screenshoot of it here:

But. This damn layout is to narrow, so I’ll just paste a link instead: New friendlybit design. Some ideas (all changable if you give me good reasons):

  • It will be flexible width, between 800 and 1024 pixels.
  • Content and comments will each take up approx 50% of the page width, so you’ll get plenty of eyeballs on your comments.
  • I don’t know the height of the columns, so I’ll just let them expand downwards as long as they need to be.
  • I won’t make it work in IE6 (on purpose). This is for my own satisfaction, and seriously, any decent web developer should already have something better. Stats say 60% Firefox, 16% IE7, and 14% IE6. Please upgrade people. I will test it in the latest version of Opera (4.2%) and Safari (4.5%). Why? Because I want more users with good browsers, and fewer with bad. And since this is a personal blog, I can choose. Yay!

Now. Do I have to tell you I want your feedback on that?

17 responses to “New design for friendlybit coming up

  1. Looking good, nice use of whitespace and much better top down order.

    The color takes a bit to get used to for me, not that I have any sort of sense for it anyway.

    No email required when commenting and no categories?

    Shouldn’t it say “I’ve” here?
    “I’m listened to your previous comments”

  2. One word:

    Pink? :)

    Wise to pick on IE6 and go for IE7. It is a difference than avoiding all versions of IE. Me likes. To give the comments more space is a good thing too, as it will be more attention to discussions and not just the articles.

    Thumbs up.

  3. @Trn: Great comments. I’d forgotten about e-mail, and I’ll think about categories, and if they are needed. Spelling corrected.

    @Anders Ytterström: Thanks!

    @Chris: The image is as far I’ve come design-wise. I have a static HTML file with all the content, so what I need to do is: 1) write the CSS, and 2) convert the static files to a wordpress theme. I’m hoping for about two weeks, but we’ll see.

  4. Idéerna för den nya sidan tycker jag är jävligt skyssta, mes vad är grejjen med färgen? Det ser ut som att en påfågel har sprängts upp över hela ytan. Dessutom vet alla att vitt och blått är färgen alla sanna web 2.0-designers använder ;)

    Nu till det jag skulle säga. De små blomklummelurerna som du har slängt upp på sidan är rätt trevliga, men skulle nog kunna bli ännu trevligare. Jag har några skyssta Illustrator penslar som har blomformer. De var gratis och open soucre och sånt, men jag minns inte var jag hittade dem. Säg till ifall du vill att jag ska maila dem till dig.

  5. Emil, please don’t take this the wrong way, but how is anyone supposed to be able to read anything with the lack of proper contrast between the text and the background? And why are you ditching IE 6 and hacking for IE 7 in the first place? From what I’ve seen there’s no need to hack for one and ignore the other, unless you’re really worried about PNG support or :hover on elements other than anchors – in which I’d look into using .hta or .htc files instead (served via a conditioanl comment specifically written for IE 5/6 if necessary).

    I also have to object to this:

    It seems to be hip inside the Googleplex to kick on people making money from other things than AdSense.

    That’s actually not the case. Yes, Google said they would go after those who sold links, but it’s not because they’re trying to dominate the advertising market with AdSense. It’s because people were trying to abuse the PageRank system (as foolhardy as that is), nothing more. If you’re going to keep the ads (and this goes for the rest of you as well), just add rel=”nofollow” to the links if the advertiser will let you. Problem solved.

    This also struck quite a nerve with me as well:

    I won’t make it work in IE6 (on purpose). This is for my own satisfaction, and seriously, any decent web developer should already have something better. Stats say 60% Firefox, 16% IE7, and 14% IE6. Please upgrade people. I will test it in the latest version of Opera (4.2%) and Safari (4.5%). Why? Because I want more users with good browsers, and fewer with bad. And since this is a personal blog, I can choose. Yay!

    Now, you said this is your personal site, and as such I will respect that as well as your decision, but the “any decent Web developer” part really set me off. Which is never a good idea. Any decent Web developer will code to the standards and against the four major rendering engines that are available, not to a particular browser or browser version (yes, this includes the Web developer’s favorite toy, Firefox). For those who need a reminder (or simply don’t know), the four major rendering engines are Trident (IE), Gecko (Camino, Firefox, Flock, Galeon, K-Meleon, Netscape, etc…), Presto (Opera), and WebKit/KHTML (Safari, OmniWeb – IIRC – and Konqueror respectively).

    Now, as for the design itself (deep breath, Dan), it appears too amateurish for me. The purple just screams “mysticism and occult” to me for some reason (probably the shades you’re using, as well as that pink in there as well), the text as I said before is hard to read due to the lack of proper contrast between the copy and the background, and also feels a bit hypnotizing as well.

    I’ve also noticed that your site reminds me a bit of Veerle Pieters and Molly Holschzlag’s Web sites as well, especially with the aspects of those sites being incorporated in your design (probably unintentionally). I actually like that, since it helps me (as someone who’s a regular reader of for instance) to associate your site with the pillars of the community, and helps recognize right away (before reading one line of text) what the site is going to be about. Kind of like how’s design is quickly becoming the “standard bearer” of professional blog designs (at least in my opinion anyway).

    I do like the separation of comments from trackbacks, but would it be possible to use JavaScript to create a tab switcher that can display and “hide” the two depending on which is selected so that people who want to see who’s linking don’t have to scroll down to do so (especially for when there are a lot of comments on a particular blog entry, or a long comment, such as this one)?

    (Another thing I would include is a “subscribe to comments” feature – I don’t read a lot of blogs, but of those I do, I prefer to follow the comments via email.)

    Anyway, I have other opinions (that go along with “scrap this and start over”), but I’ll leave them for later if you like.

  6. Really interesting and looking quite good, Emil.

    However, I can’t really stick with the idea of not making a pre ie7 compatible layout. We’re speaking so much of accessibility and what must be done, yet we still decide to make our websites inaccessible for pre ie7 users. Not very good, if you ask me..

  7. @Dan Schulz: Thanks for your comments, really helpful.

    1) About color: I’ve slightly tweaked (i was rather close already) the colors to adhere to the standards when it comes to contrast and brightness. I believe it’s easy to read.

    2) I’m coding to the standards. But in this instance I won’t do extra coding to fix IE6, not with PNGs or otherwise. In my experience, and I’ve done quite a few difficult layouts, fixing IE6 bugs takes about half the total time. Not worth it.

    3) I’m saying that any decent web developer show use a modern browser as their default browser. I’m not saying that everyone should stop supporting IE6, big difference.

    4) I’ll think about the tab switcher, interesting idea.

    5) I’m sorry you don’t like it, but then again, to read the site via RSS you don’t have to see it. It’s really not an easy thing to like, since it’s rather colorish and different. Yes, it’s amateurish, I’m a design amateur.

  8. Hi Emil,

    Just a couple quick things before I head off to bed (been busy working on a custom WordPress theme all night)

    1.) Cool. I’ll check it out in the morning (eh, afternoon, actually).

    2.) The only “fixes” I usually use are a .htc file for :hover, :focus and :active in IE 5/6, and adding the occasional height: 1% or overflow: hidden; property/declaration pair to a style rule (no hacking needed). I hate transparent PNGs with a passion, but if I had to use them, there is a way to get IE 6 “in line” without having to use a hack (link:

    3.) I use Opera myself, and I’ve tried a LOT of them.

    4.) (slightly off-topic) I have a custom WordPress theme framework under construction that I’m hoping will save me a lot of time developing WordPress themes; the tab switcher is just one of the things that’ll be going into it. Of course anything that makes it easier on the designer/developer and the user is a win-win scenario in my book.

    5.) I use the My Yahoo! service, so I only see the excerpts anyway. So I have to head here anyway if I want to continue reading.

  9. Great with a new design. I agree with you that making a design work in IE6 isn’t necessary, as long as the content is available anyway.
    It might be a good idea telling IE <=6 users that they should upgrade, so you get the message out – there isn’t much point in IE6 users not liking the design.

  10. @Dan Schulz: Where to put those height: 1%, display: inline, narrowed widths, position: relative, overflow: hidden, or whatever IE6 decides is the bug of the day, is what takes the time. It’s just not worth my time. I’m well aware how much work it is, and in this instance I don’t feel it’s worth it. Thanks for the links.

    @Dan Pettersson: Good idea, added an ugly conditional comment to take care of that.

  11. Emil, when I have no choice but to use the declarations you mentioned, I usually just in-line them with the rest of the style rule since 99.995% of the time they don’t conflict with other browsers or browser versions (exceptions being support for PNG alpha transparency, :hover on non-anchor elements, and cases where mixing height and min-height in the same style rule can cause a conflict of interest).

    The rest of the time I just code around it.

Comments are closed.