Like, redesign

It felt like it was time to spice this baby up, so I stayed up way too late Saturday evening (rather, Sunday morning), to put the finishing touches to my new design. For a while, I haven't been satisfied with some of the Information Architecture issues my previous design had, as well as some other minor things, so it felt good to start from a clean slate (or, cleaner). Hopefully, it will be easier to navigate and to find information now! Then, naturally, I had the design about a year and a half, so naturally I wanted to write leaner and more efficient code. I always learn new stuff and evolve (and the day I stop doing that, I should stop working with the web), and what better place to put into practice than my own web site? :-)

A late 2-year anniversary

In March this year, I have been writing, blogging, if you will, for two years. It has truly been a great time, and the things I've learned and the vast amount of nice, talented, friendly and funny people I've gotten to know are unmatched by many things. Since the start, I've written 393 posts and have gotten 6730 comments, so this system has to work hard! :-)

The new design

The top bar is a picture taken in 2002 by the large rock named Uluru (Ayers Rock) in Australia during my and Fredrika's round-the-world trip. I wanted to work with three columns, since it gives me more separation between different areas and also the possibility to have more things visible in the first-screen view. In the end, though, I'd love to have your opinions! I won't necessarily agree with the criticism, be it constructive or just to annoy me ( ;-) ), so don't be let down if I don't make the changes you suggest. With that said, all suggestions are of course welcome, and if I like it, I will implement it.
Posted in Developing,General |

48 Comments

  • I like it! To be honest- it feels much better than the previous design. The contrast between the columns is nice and makes the site feel alive and full with content.

    Well done!

  • Maarten Leewis says:

    No suggestions here. It's visually and typographically pleasing. I am wondering however, if you plan to change out the picture in the top bar every now and then.

    I do have to say that the previous design made you stand out more from the "rest".

  • Birgit says:

    good job! the colors fit very vell and I like the flickr bar.

  • Nice design, Nice Image.

    About the header; no worries about this:

    I knew I should have shot my header myself…

  • You did a fine job, Robert! It takes some getting used to, but it immediately feels fresh and easy-to-use :)

    Good work!

  • Skrim says:

    Very pleasing to the eye :)

  • Andy says:

    To be honest I liked the old design a lot more. The logo's font i think is rather dull and so are the color combos as well. The top image, albeit a good one, doesn't really say much about the content of this blog. The structure of the page is better though.

  • Arjan Eising says:

    Nice job done on this Robert! Also a very nice photo for this design, it rocks ;)

    Is it an idea to have different colors for the odd/even and author comments? Now it is sometimes a little bit confusing (you had the same 'problem' in the previous version). I think a nice gray color for the odd/even ones would be just fine to see the recognize two comments.

  • wioota says:

    I like the three column layout with the flickr images down the right – its probably the quickest way you can communicate something about yourself, helping personalise the blog.

    As an Australian it may be my cultural cringe that makes me feel like your blog now looks like one focused on Australiana trinkets than a web development blog but that is probably just me. You may get other Australians saying the same thing – but don't mind us, we are biased from the touristy stores both here and overseas that try to reduce the urbanised environment of Australia to Koalas and Gumnuts :) We don't see Uluru anymore – we see an image from countless Tourism Australia ads!

    Two aesthetic, maybe eye-of-the-beholder comments; I don't think your title font gels with your other fonts. Also, the rounded corners of the info boxes that appear anti-alias to a light color when over the black menu area.

    The colors are well selected off the image, contrast well and are pleasant to look at. Key information was easy to find and your meta information also presented clearly but not at the expense of other elements.

  • Aldrik says:

    Well first off I can't see any text in the input/textarea form elements when they have focus as you use the same background colour as my default text colour (If You Pick One Color, Pick Them All).

    Over all it's ok but I do prefer the old layout, maybe you could make it available as a alternate style sheet?

  • long time fan says:

    god i hope this is an april fools day practical joke. this old one was a lot better. i've been reading your post for 5 month now and i got to be brutally honest – it looks like a demo page for a three column layout in css.

    not all reboots
    edesigns are good. honesty goes a long way.

  • inoodle says:

    Hi Robert,

    Liking the new design – definitely an improvement.

    I'd prefer it more if the elastic main column didn't run quite as wide – the reason being, that your background colour sets off the page nicely, but I don't actually see it at the resolution I'm running at (1200×1600 – yes monitor turned sideways). Perhaps you could limit the page width to 1100 or something.

  • Pat says:

    It doesn't feel like you.. but then again, everything new takes some getting used too.

    I like that your posts are now on the left side for reading; in fact I mentioned your previous columns on my own blog a while back :) So it's nice to see your main content on the left.

    I don't like how big the picture is at the top of the page.. it doesn't appear to mingle well. For example, your reader Stef Spijkerman has a big header too, but it intertwines nicely. If you get what I mean – I'm not so distracted by it. Also I honestly think it would have been better to shove a div at the top and call your header image as a background. That's a big pic for basic viewing (no styles).

    The colours are kinda blah, but I get why you chose them :) Also, the columns run off my screen (800×600), and your blog is much slower to load now :(

    Robert, I certainly know that alot of effort is put into a clean redesign, so I'm not trying to be a downer!! Great job, it really doesn't matter what your blog looks like, it's your content that keeps me coming back.

    Keep up the great work!!! :)

    PS.. is it me or is it flickering a lot when typing in this textbox :(

  • Pat says:

    Oh ya.. happy 2 years !!! :)

  • Kiper says:

    Hi Rob!

    I like the clean feel of the new layout although I can understand some of the criticism from the other commenters. I think the menu bar is too black. Or maybe it is the contrast on my screen… ;)

    Readability is better but I still feel that there is something missing… Oh, now I know, where are the Faces from Easter Island? They are synonymous with Robert's Talk for me!

    Have you tried to center the Flickr photos? And maybe you should put the flickr and rss menu options to the left of the rest of the menu.

    Just my 2p.

  • Henry says:

    Great stuff Robert. You rock!

  • @ Pat:

    The header on the article I linked is not mine.

    It was the first that came to my mind when I read the explanation of the header-image.

  • Colors – I like the colors with the exception of the gray in the textarea when its selected and footer. Great choices otherwise. The black menu bar works for me. I think the Send button should be the same color as the search button.

    Logo – I'm not sure what's missing with the logo font. Maybe it's the color or positioning. It looks plain compared to the rest of the site.

    White Space – You definitely need more white space in the content area. I used Firebug to change the padding of the inner-content div from "1.5em" to "2em 4em", and it made an improvement.

    Typography – I've changed the typography of my own site (for non-IE and IE7 browsers) because of notes from the South by Southwest 2007 Web Typography Sucks presentation by Richard Rutter and Mark Boulton. Select the PDF with notes, it's good reading.

    Comment Preview – Did you change your preview code? It is very slow in Firefox 2.0.0.3 Windows. I based my own preview code on your code and it isn't this slow when you get to the end of a message. It actually takes around 30 seconds to catch up with my typing and I'm not a very fast typist.

  • P.S. Beautiful new design.

  • Walter Cattebeke says:

    I'm not a designer but as I see simplicity is still around and I like it.

    Good job !!

  • Pat says:

    Sorry Stef.. I stand corrected.

    By the way Robert, now that I've visited a few times, your new design is growing on me :D I forgot to mention how gorgeous that place is in your picture (header).

  • Antony says:

    Hi Robert,

    First up let me say I love the blog, congratulations on the second years work.

    Now the bad news…sorry it's only my second post here and i'm already about to criticise (constructively I hope).

    As for the redesign I have mixed views. On the whole I like it but there are a few niggles.

    I agree with Maarten that the old look was more unique and with Tanny on the whitespace and grey colour below.

    However what I really don't like is the top banner image and font.

    The font (Bank Gothic?) reminds me of the hideous craze started by 2advanced a few years back whereby everyone used bank gothic regardless of whether it suited the site's content and style. I don't think it suits your style, it's too formal and futuristic (though i'm no typographer)

    The image seems a little generic and washed out and, in my opinion, has little impact. Unfortunately if you change the image of Uluru (Ayer's rock) the colours will have to change too. though this may be better with a softer font that suits the rest of the style.

    keep up the great writing.

    Antony

  • I like the layout but I was a fan of the Easter rock statues. They had more personality than a big red rock sitting in the middle of nowhere with a bunch of flies buzzing around it. I think it would be cool if you put a whole row of those statues up there, not a photo but stylized like you did before.

  • Sean Fraser says:

    It's good that you kept the Easter Island dudes.

  • qureyoon says:

    nice pick for the color theme ^^

    made this blog more colorful :D

    great ^^

  • Robert Nyman says:

    Wow, thanks for all the feedback (especially all of you who just like it ;-))! I think the criticism is great, and there are some valid points. Let me address them:

    Kalle,

    Thanks! :-)

    Maarten,

    I might change the top image, but that will in turn reflect on the colors, so I'm not sure. And yes, I know that the old design did stand out more, but it was, to me, a necessary sacrifice at this point.

    Birgit,

    Thank you!

    Stef,

    Ah, interesting! I missed that that happened to Marco.

    Harmen,

    Good! Fresh is one thing I was going for.

    Skrim,

    Great!

    Andy,

    That's just fine. I think I ,personally, got tired of the old design and wanted something new. The idea with the colors is to give a nice soft feel.

    Good that you like the structure!

    Arjan,

    Thanks!

    The idea is to have alternating comment colors, but perhaps you're right; the contrast might be too much.

    wioota,

    I definitely thought about the Australian Tourism factor, but at the end of day, I hope it's seen just as a nice image and nothing more. Naturally, people will always weigh in more when it comes to a well-known place, but I hope it doesn't become too distracting.

    Regarding the fonts: Do you mean the heading fonts throughout the page? And, if yes, do you get the Bank Gothic font (i.e. the one used in the top image)? Either way, I will try and remove it from the headings, because maybe it doesn't suit that well with the rest of the page. We'll see…

    Good point about the tooltip; it has now been fixed.

    Aldrik,

    Thanks. It was my bad regarding the <code>form elements</code>, but it has now been addressed.

    I would like to offer the old version as an alternate stylesheet, but too much of the HTML has been changed/improved, so it's not that easy. Then I would have to maintain two separate code bases, a cookie-based switch etc, and that won't happen at the moment.

    long time fan,

    Oh man, that was brutal! :-)

    I do see your point, though. My aim was to have a soft feel with the columns.

    Anyway, I hope it is some comfort that the columns are at least equal-height and elastic… :-)

    inoodle,

    I agree about the maximum width, it's a bit wide. I'll decrease it a little: please let me know what you think.

    Pat,

    The idea with the header is that I do want to distract; at least a little. :-)

    One of the ideas behind having the top image reference in the HTML code is that it will be the first image to render (as opposed to CSS images, which are the last to render, after all inline images), because I do want it to be the first thing to be seen.

    I don't get any flickering with the textbox, so I'm not sure what it could be.

    And thanks! :-)

    Kiper,

    Thanks!

    I wanted to have the menu bar black just to distinguish it a little extra from the other colored parts.

    I tried centering the Flickr images, but things just looked out of order, so I went back to having a solid left starting point.

    The idea about the order of top menu items is that they're ordered by importance. Besides, I think the RSS and Flickr links stand out a little more in the middle with their icons.

    Tanny,

    Thanks!

    Absolutely, the send button has to be fixed and I will do that as soon as I get a hold of the computer with the correct font (i.e. at home :-)).

    The gray isn't perfect for focus, but I'm sure what color would be a good match there.

    To me it's ok if the logo text is at least a little plain. It's good to have there, but the actual name isn't really that important to me.

    I added some more white-space in the content column, and it did look better!

    The preview code is just the same, so I'm not sure why it would be slow now. Perhaps (read: hopefully) it's a temporary lapse.

    Walter,

    Thank you! Simplicity is one of the cornerstones for me.

    Pat,

    I'm glad that it grows on you! :-)

    Antony,

    Thank you, two years has been both a long and a short time.

    Yes, the font is Bank Gothic, but I've removed it from all of the web site except for the top logo. Hopefully, you will think it's better that way.

    And don't worry, the criticism was constructive!

    Jason,

    Yeah, maybe I'll have to do a combo one of these days…

    We'll see. :-)

    Sean,

    Yes, they're still here, although minimal!

    qureyoon,

    Thank you!

  • inoodle says:

    Wow, that was a large replying comment you had to construct for everyone :) Well done!

    The width is definitely better – although I'd still like to see more of that background colour at the edges when the browser is maximized (majority of people are still at 1024px wide remember! although possibly not your visitors).

    Did you also increase the left / right margin on the main column ? Either way, its better :)

  • Robert Nyman says:

    inoodle,

    Yes, it went pretty far… :-)

    Ok, I made it just a little bit more narrow, but that's as low as I'll go. :-)

    Just out of curiosity, I looked at my top five list when it comes to resolutions:

    1024×768: 29.66%

    1280×1024: 28.09%

    1280×800: 9.01%

    1680×1050: 6.41%

    1440×900: 5.90%

    But it's not that important; what is important, though, is the web browser window size people uses, and for that I don't have any statistics.

    And yes, I increased the padding a little around the main content to make it stand out.

  • inoodle says:

    Yeeehaw…. Looks great!

  • Pat says:

    Thanks for all the replies Robert :) As for the flickering in the textbox, I think Tanny explained it better than me. I use FF 1.5.

    By the way, I finally got a chance to see some of your pics at Flickr! Haha Some wonderful pics Robert. I especially love the one of the monkey hanging out all comfy on your shoulder! LOL And the Orangutan's.. that must of been amazing to see, I've always been so fascinated with them.

    Sorry off topic. What I was really doing was looking at your Easter Island pic you had before, I agree with some of the commentors, "I really miss that pic" it totally represented you for some odd reason. Like one of your commentors said on your album. "Hey, wait a minute… you stole this one off some Swedish guy's blog!" – LOL sums it up :)

  • Thanks for the white space. Could you add a little more between each comment? This should do it:

    style.css (line 211)

    #content ul li { margin-bottom: 2em; }

    I actually liked the plum color you used for alternate comments. I think that it added a richness to the page.

  • Robert Nyman says:

    inoodle,

    Good!

    Pat,

    Don't worry, I love my pics too! :-)

    And absolutely, it's true about the easter Island-pic. I needed change, though. :-)

    Tanny,

    I don't think I necessarily need more margins between the comments, I find the padding to be sufficient, actually. What i will add, though, is margins around my author comment, because that one has a tendency to melt into the others around it.

    <blockquote cite="http://www.robertnyman.com/2007/04/02/like-redesign/#comment-46657"&gt;

    I actually liked the plum color you used…

    Noooo! :-)

    My feeling is that it was a bit heavy, but maybe not. I think that now, with a lighter color, I achieve the alternating item feel a bit more than the plum one, which felt too strong.

  • Yeah I also like the design, agree with above comments that maybe you could do with an rotating image header as it does look 'Australian', not that I mind seeing I am an 'ocker proud and blue.

  • Johan says:

    That type you used in the header seems like bank gothic medium. I would use something else. More roundish.

    The light brown [#CCA353] looks better on the third (right col) and the dark brown for the second.

    Also a ripple effect between columns would amplify the ayers rock image.

    The header image is great but drop the gothic.

    Gotta rush …

  • Kenneth Sundqvist says:

    I like the earthy nature theme you got going now, and I liked the green in the previous design as well.

    Some things which bothers me about the design now:

    – Text vs. background contrast. You had problems with this in the previous design too, and I even have a UserStyle sheet [made with Fx extension Stylish, of course] for your site to fix this issue.

    My main problem is the author posts in the comments. The contrast here is so low that I find it hard to stay focused on what I'm reading.

    It was worse in the previous design though when the alternative and author comments looked so much alike. Thank You that's fixed now.

    And about the change in background colour when a text input is focused; why would I want less contrast when I'm ready to write my comment and focus on that? Doesn't make sense.

    – The font face used in the heading. What's up with this urban, hard, sharp, edge cutting face which would normally be seen in a Hollywood title along the lines of "Hawk Core Sec-Ops Stealth Team," together with this strong nature theme?

    Other then that it's nice, and I'm sorry if my comments seem harsh or such.

    Cheers.

    PS. Can I rent 2 gigapixels of space in your footer? You seem to have enough to go around. :D

  • Wow! Some of you are really harsh about the top banner. I actually like it, but then I have a fairly large image as my top banner too.

  • Robert Nyman says:

    Jermayn,

    As long as you're not offended! :-)

    Johan,

    I prefer the darker brown in the rightmost column, because it conveys slightly less importance than the other column colors.

    Kenneth,

    <blockquote cite="http://www.robertnyman.com/2007/04/02/like-redesign/#comment-46982"&gt;

    I like the earthy nature theme you got going now, and I liked the green in the previous design as well.

    Thanks!

    Contrast is always an interesting discussion, and a delicate balance between design and what's readable/usable. The author comments aren't prefect, but my take is that they got better once I changed the text color to completely black.

    We'll see, I'll probably sneak in small improvements now and then… :-)

    I agree about less contrast for text fields, while at the same time, I want to show that the element has gotten focus. Color suggestions for this are more than welcome!

    The hardness in the heading is probably mainly there because the rest of the design is so soft. :-)

    And yeah, I know about the footer… Eventually, I will add things to it.

    Tanny,

    Thanks! :-)

    "I like big banners, and I cannot lie…" :-P

  • Devon Young says:

    I love it! There's only two things that I don't like about it:

    1. Do you have to display the flickr pics by default?

    2. Is there a way to turn off "comment preview" as I type? It's annoyingly slow on this computer.

  • Devon Young says:

    Suggested enhancement…. OpenID.

  • Robert Nyman says:

    Devon,

    Thanks! :-)

    1. Well, yeah. For now, at least… :-)

    2. It's annoying to hear that it's slow, since it's a very simple script. This sounds so stupid and condescending, I know, but if it doesn't help you, while it assists most people, is it ok for you just not to look at it?

    And OpenID… Maybe one day. :-)

  • Devon Young says:

    I didn't mean it was slow to look at it…but it actually slows up my typing. The cursor plays catch up. There's a lag. I hate to say it, but that's how it works here. Maybe it's just my computer. I'm using Firefox 2.0.0.1, so I imagine that's not the issue for me.

  • Robert Nyman says:

    Devon,

    Oh, I see. Ok, given time, I definitely have to take a look at it then.

  • Andy says:

    I must say, that logo is huge. The height really needs to be reduced. As for the rest in general, I must say your old design was much more eye-pleasing. I have no problems with the current placement of content (except for the logo height), it's more of a issue with colors and graphics. I'm sure it could be improved alot. Also, If I were you, I'd revert back to green shades. It suited you & your site better.

  • Robert Nyman says:

    Andy,

    Thanks for your comment.

    Well, what can I say? I'm content with the logo height, and it is intentional that it is so dominating.

    I like the colors and think they convey a nice smooth viewing experience, so a change back to green doesn't seem likely (at least not in the foreseeable future).

  • Andy says:

    Robert,

    I've scrapped something together while keeping the color scheme (sorta) and the uluru. Drop me a mail if you're interested. I believe you'll like it. Weither you'll apply it or not is up to you.

  • Deborah says:

    I've been away from the site for over a week (somehow Bloglines didn't notify me of articles), and come back to this beautiful design! I like the redesign, the rock, and the color contrast in the right columns.

    Personally, I like the Flickr photos – works for me! Congrats on the redesign Robert!

  • Sverre says:

    Wow, I almost read *all* of the comments:-) Anywho, I would like to comment something that happened to me while reading: Reading the first comments on white and grey background worked fine, but after reading your own comments (on purple-kind-of background) – and then returning to white/grey – it made my eyes sore! Actually, I still see colored dots flying around if I close my eyes…

    Part from that, the color itself looks nice in combination with the other colors.

    Also, I think you could set the line-height to a lower value.

    Well, I'm done with negativity now. Part from what's mentioned, I think the new design is great! I just love the picture in the head. And, a comment on the font used on the image: it is not that bad! I mean, where on earth could you find a font that matches the image itself? Go look for it, and you will never return;-)

  • Robert Nyman says:

    Andy,

    Naturally you're welcome to send me your suggestions (Contact info), but I want you to know that it isn't likely that I will do any major changes at this point.

    Deborah,

    Thanks! And welcome back. :-)

    Sverre,

    It is kind of a dilemma with the author comments. I want them to stand out, but at the same time they shouldn't disturb the reading experience. We'll see, no CSS is written in stone…

    Personally, I think the line-height makes it easier to read, especially if there are larger chunks of text.

    And thanks for liking the picture and the font. :-)

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>