Filed under Other topics

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?

Feel free to leave a comment, or subscribe to my feed.

related

List some related articles:

You might want to browse all articles.

linkback

These people have linked to this article:

  • No linkbacks yet

To get a link in this list: make sure your blogging software supports trackbacks or pingbacks and simply link to this article like this:

<a href="http://friendlybit.com/other/new-design-for-friendlybit/">New design for friendlybit coming up</a>

You can also trackback by copying this link, and pasting it into a trackback field in your blogging tool.

about

Author: Emil Stenström

Emil Stenström blogs about web development. Posts are bi-weekly.

To the about section

popular

Thumbs up for these articles

These are the most popular articles (by number of comments):

  1. Levels of CSS knowledge
  2. Beginner’s guide to CSS
  3. Why XHTML is a bad idea
  4. How to structure large CSS files
  5. Encyclopedia of HTML elements
  6. Cross browser CSS for your site
  7. Real hackers don’t use CSS
  8. Inline CSS should not be allowed in strict doctypes

To the list of all articles

comments

What do you think about this article? I’d love to hear your view!

Scroll to comment box.

  1. Trn 7 Dec

    01

    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. Anders Ytterström 7 Dec

    02

    One word:

    Pink? :)

    Seriously:
    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. Chris 7 Dec

    03

    The new design looks great. When’s it going live?

  4. Emil Stenström 7 Dec

    04

    @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.

  5. Emil Stenström 7 Dec

    05

    @Trn: Design updated with e-mail and categories.

  6. Kristoffer Nolgren 7 Dec

    06

    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.

  7. Dan Schulz 7 Dec

    07

    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 molly.com 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 ProBlogger.net’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.

  8. Damien 7 Dec

    08

    It’s awesome !
    Even the color, it’s nice to see something different from time to time :)

  9. Martin S, 8 Dec

    09

    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..

  10. Emil Stenström 8 Dec

    10

    @Kristoffer Nolgren: Sure, I’d love to have a look at them. Mind sending them to em@kth.se ?

  11. Emil Stenström 8 Dec

    11

    @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.

  12. Emil Stenström 8 Dec

    12

    @Martin S: Good point, I’ll check so it’s accessible in IE6, even though I won’t make it look good.

  13. Dan Schulz 9 Dec

    13

    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: sitepoint.com).

    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.

  14. Dan Pettersson 10 Dec

    14

    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.

  15. Emil Stenström 11 Dec

    15

    @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.

  16. Mark McDonnell 12 Dec

    16

    sweet! sounds good to me.

  17. Dan Schulz 13 Dec

    17

    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.

If you want to you can follow the disussion through a comment feed.

add comment

This is the place where you get to say your opinion about this article, use it well. Formating with HTML is allowed. A red asterisk means that the following field is required.

Comment Form




Comment Form