Redesign!

I’m sitting here; just sipping some nice red wine and eating chocolate, celebrating that the last seven days are over now. I’ve been working double shifts for about a week, doing my hours as a consultant daytime, and working on redesigning this web site nighttime.

So finally: redesign! And I wanted to get done with it as fast as possible, I couldn’t stand making a live redesign spread over a longer amount of time, like one of my friends does. There have been a number of reasons I wanted to create and implement a new design for this web site, and the factors and choices have mainly been these:

Write the code myself

When I launched robertnyman.com, I installed WordPress and looked around for themes written for it. My previous design was a theme designed by Shawn Grimes, that I tweaked a bit to personalize it. But with me ranting about how web sites should be developed, I ought to live up to what I preach at my own web site. You know, the shoemaker’s children and all…

Also, someone (in a jokingly way) teased me saying that I couldn’t create my own design. πŸ™‚

The design

I wanted something that was really easy on the eyes, something that looked good and also being original to get some attention for that as well. All image material used here is from pictures I’ve taken myself. And since it’s an Easter Island theme, naturally there has to be an Easter egg; if you find and hold down a certain key combination, you will get to see a freaky picture of me! πŸ™‚

Accessibility

I want this web site to be an example of being accessible to everyone:

  • With or without JavaScript enabled.
  • With or without CSS switched on/supported.
  • With a wider or narrower window.
  • With a smaller or larger text size setting in the visitor’s web browser.
  • With or without using a mouse.

Technology

Since I work full-time with web development and also have it as a hobby, this web site should be a showcase of how I think a web site should be. Therefore, the layout is elastic and works in most web browser window sizes. I also use AJAX for the search functionality, thus not requiring a post back of the whole page to see the search results.

But naturally, everything should downgrade well too. The search has a fall back that works without JavaScript and all JavaScripts used are unobtrusive, meaning that all events are applied externally from a JavaScript meaning. The effect of this is that no elements have any inline event handlers whatsoever.

It’s possible to easily navigate through the web site just using the keyboard, leaving out the dependency on using a mouse.

Something that will interest certain people out there, and definitely Anne van Kesteren, is that this web site is using strict HTML, not XHTML. The reasons? First, I’m tired of everyone using XHTML without knowing the reasons why. They just do it because their tool/-s deliver it, they’ve heard it’s cool etc.

Second, XHTML should be served as application/xhtml+xml. In my previous design, that was the case first, but since WordPress wasn’t fool-proof and I still wanted it to be user-friendly to write comments on my posts, this ended up in me having to check the web site all the time just to make sure that nothing bad had gotten through. I then went to using text/html with XHTML for that design, according to Appendix C, but knowing that my code should be valid so I could switch to application/xhtml whenever I wanted to, I hadn’t used anything intentionally that should break.

However, now I use innerHTML in my AJAX script and Google’s ads use document write; two things that don’t work with application/xhtml+xml. So, my decision to use plain old HTML is definitely thought through and a very deliberate one. Maybe some day this web site will use XHTML again, but only the future can tell.

Testing web standards

I’ve haven’t had access to an Apple computer during this whole design face. It has been coded using web standards code, well-tested CSS approaches and object detection in JavaScript. My testing in Firefox and Opera 8, two of the most standards-compliant web browsers out there, leads me to believe that it should work automatically in Safari too. Apple user? Please let me know!

 

So, get going now! Resize your web browser window, increase/decrease your text size setting, turn off using any CSS, try navigating using only your keyboard, turn off JavaScript and test it!

When that’s done, and your eyes have feasted on the new layout, please let me know what you think of it! πŸ™‚

 

PS. Don’t miss the two new cool map functionalities; they can be found at the bottom of the left column. DS.

PS 2. A big thank you to Henrik Box for helping me evalute my design sketches. DS.

37 Comments

  • I like the new layout, both the layout and the colors. I did also check with Safari 2.1 and IE5.2 (as well as Opera and FF) in osx. Works out very well, without any flaws during my quick check =)

    I'm also glad for your choice of HTML.

    Keyboard shortcut given away removed – author

    Keep up the good work!

    Michael Odden, regular reader

  • Oops, wasn't supposed to post the secret-key-combination. Feel free to edit the post πŸ˜‰

  • Robert Nyman says:

    Michael,

    Thank you, and thanks for reading! Interesting to hear that the experiment with Safari seems to have worked out.

    I took the liberty to take away the keyboard shortcut you revealed in your comment (I hope you don't find this offending). Let other people look for a while first! πŸ™‚

    But it's duly noted that you're the person who found it first!

  • Nice! Very nice.

    Everything seems to work fine in Safari, Camino, and OmniWeb. iCab can't handle the Ajax stuff, but you provide a fallback for that, so it's not a problem.

    The only things I don't like are the background colour in this here textarea and the image buttons.

    Oh, change the posting guidelines to make it clear that you're using HTML now, not XHTML ;-).

  • Hey, new design is a bit of a shock πŸ™‚

    I think you could use some extra padding around 'about the author' 'most popular posts' 'feature web sites'

    There's a pixel or so of margin nominally, but if I refresh it closes up tight – that's running Safari 2.0.1 on OSX 10.4.2

    Screen grab posted here

    hth πŸ™‚

  • Robert Nyman says:

    Roger,

    Thank you!

    Good to hear that the Apple web browsers are catered to then! Web standards is an amazing thing… πŸ™‚

    I disagree with you when it comes to the background color of the textarea, I really like it.

    The image buttons, however, aren't optimal. I might change them in the future, but for now, they aren't show-stoppers. πŸ™‚

    And yeah, I changed the commenting guidelines. I had this thought first to save them as <acronym title="eXtensible HyperText Markup Language">XHTML</acronym> in the database, but then again, I don't allow any tags that need a quick close slash.

    Steve,

    Hey, new design is a bit of a shock

    In a good way, I hope? πŸ™‚

    Thanks for the pointer about the top links in Safari. I guess this will be a live redesign after all. πŸ˜€

    I tried something else: how do they look now?

  • Hehe – I'm all fine with that, Robert πŸ˜€

    Some second thoughts:

    (minor) You change the padding of textboxes as they get focused, which makes it "rearrange" the content when loosing/getting focus. Just a minor annoyance.

    I would also suggest that you make the textarea perhaps cols="20" instead of 10 because it makes it very narrow without a stylesheet. What do you think?

    – Michael

  • I tried something else: how do they look now?

    Different πŸ˜‰

    Lots of whitespace now… not entirely even and

    some weird effects occur if I resize smaller?

    I'll mail you some screen grabs!

    In a good way, I hope?

    Of course in a good way! πŸ™‚

  • Robert Nyman says:

    Michael,

    Yeah, I saw that thing with the padding. Should be ok now, except for the <code>textarea</code> element in Opera (and I'll leave it at that, since they use their own layout of form elements as opposed to the Operating System one).

    Good feedback about the <code>cols</code> attribute. Changed to 20 now. πŸ™‚

    Steve,

    Yes, some more whitespace. They each get one third of the available width now. You think it's too much whitespace?

    When it comes to the resizing issues, those effects were only temporarily. I know exactly what you're talking about, and it's fixed now. πŸ™‚

    Of course in a good way!

    Great! πŸ˜€

    Now I really think I deserve some sleep…

  • Mark Wubben says:

    Dude, you could've at least obfuscated the JS code πŸ˜‰

    Nice work. Keep it up.

  • Bruno Torres says:

    I like the new design.

    I agree with Roger that the background color here in the form is a little weird.

    I also use wordpress with a template written entirely by me, and I use HTML strict now too, mainly because I was tired of using objects to put adsense code when using application/xhtml+xml.

    Just tell me one thing: how did you manage to make wordpress output instead og ? Did you hack the code, or wrote a plugin or found one already done?

  • SÃ&Acir says:

    I like the design a lot. It's nice and agreable, plus it's very distinctive.

    I'd second those who criticize the background color on text fields. I think you could have used a contrasting color: everything's green down here! But that's just a detail.

    One thing that I always bitch about is background colors in CSS. I didn't check whether you provide a text color for the comment fields, but if you do should always provide a background-color. I know you haven't because Opear uses system background colors, and I don't use white on my system so the backgrounds of your text-fields aren't white. End of nitpicking.

    I'd really like to here an in-depth explanation of why you ditched XHTML. Why it was a pain to use it, what are the benefits of HTML4…

    I am currently serving my site as XHTML to capable browsers, but with IE7 announcing they will not support XHTML MIME types (they can't even spell <code>application/xhtml+xml</code> by the way), I'm starting to think there's no future for XHTML on websites.

    I'll probably switch myself in the coming months. Anne van Kesteren suggested (jokingly?) to "start an HTML-aware list" with people "who used to use XHTML in a non text/html way and then realized how things work". I guess it could help make things clear on this subject.

    Short version: cool redesign man!

  • Martin S, says:

    Whoa. I thought you told me some weeks ago a redesign never would happen over here. πŸ˜‰ But now a redesign is live and I'm bound to think it's a quite amazing work you've done here. I really like the implementation of AJAX in your search function. Nicely done there..

    What's bad, or less good in here? Hm.. maybe the green colours you use are too dark. And maybe the left column is to wide (or the logo is to big).

    But overall a positive surprise. πŸ˜€

  • Dan Nye says:

    For Firefox users with the Web Developer extension installed, pressing the secret key combination causes unexpected results.

    How about using the key diagonally below and to the right of the current one?

    Nice site, btw. It makes me realise that I should get my site up and running. If only I could get past that "design block" phase.

  • As already mentioned in the personal email:

    Cool stuff, however:

    – make the close button fixed and the rest scrollable on the search results layer.

    – set the focus to the search results layer when it gets shown – now keyboard users will have to click inside the layer before being able to scroll it.

    As Roger mentioned, I am not too happy with the light blue field highlight either.

  • Urgh, these list items are a bit much. Might be because I am just reading a book about sheep…

  • Robert Nyman says:

    Mark,

    Good to see you, long time since we last spoke! And thanks!

    Dude, you could’ve at least obfuscated the JS code

    Ha ha! πŸ™‚

    Well, no, that's really not something for me.

    Bruno,

    Thank you!

    Just tell me one thing: how did you manage to make wordpress output instead og ?

    Since code in my old posts and code from my comments come in <acronym title="eXtensible Hypertext Markup Language">XHTML</acronym> format, I use a regular expression at runtime that removes such slashes and formats it to <acronym title="Hypertext Markup Language">HTML</acronym> instead.

    Sebastian,

    Thanks!

    I've made sure that all form fields now have a text and background color set by default.

    I'll write a post about my choice in the upcoming week, is that ok? Stay tuned! πŸ™‚

    Martin S,

    Well, I changed my mind. πŸ™‚

    And thanks for the compliments!

    Also, you don't have to think something's bad/less good. πŸ™‚

    Dan,

    Thanks!

    I knew about the secret key combination and the Web Developer extension, but I really wanted that letter I used in the key sequence.

    Anyway, good feedback. The letter being used now is the one that you suggested.

    Everyone about the form field's background color,

    First, I was under the impression that you didn't want any different focus color at all, but now I understand that you meant that the color I've used wasn't distinguished enough.

    I've now changed the color to the same color the sky has in the masthead image, since I want to reuse an existing color and keep a tight color scheme. Hope you like it better this way (this just changed before Chris' visit, before the backgroudn was a bit more greenish)! If you don't like this, please let me know; and I'd be grateful for any other color suggestions then. I've already ruled out a darker background color, because I wouldn't like it and the need for using a white text in the form fields then.

    Note to Internet Explorer visitors: you won't see these colors on form fields, since your web browser doesn't support the <acronym title="Cascading Style Sheets">CSS</acronym><code>pseudo-class :hover</code>, and I really didn't think it was worth using JavaScript to accomplish that detail.

    That, folks, is what we web developers refer to as progressive enhancement. πŸ™‚

  • Another thingy:

    You could use the AJAX loading for the list of most commented, last 10 and so on, too. I am using these lame pop-unders at the moment http://www.wait-till-i.com/ but thought about it for a while, too.

  • Robert Nyman says:

    Chris,

    Thanks for the feedback!

    I've now made the close button fixed. Good suggestion! I'll look into setting focus to the search result layer.

    And I have no idea why the list items remind you of sheep! πŸ™‚

    You could use the AJAX loading for the list of most commented, last 10 and so on…

    Yeah, I thought about that too, but didn't like the idea. It would be too much, basically; they deserve their own page.

  • Robert Nyman says:

    Chris,

    The idea was just pulling the titles, not the whole entries πŸ™‚

    Well, yeah I know! πŸ™‚
    But I didn’t think they were that important to create some kind of AJAX dropdown menu for them.

    FOUC? Huh…
    First, I thought that was an IE only problem on Windows. Second, since I do have a script element before I import the CSS file, it shouldn’t happen.

    Anyway, I moved up some link elements above the CSS importing now. Please let me know if the problem persists.

    More reading about FOUC for the uninitiated, please go to Flash of Unstyled Content (FOUC).

    Also, as you wrote about setting focus to the search results layer to able to tab right away from its start, that has now been implemented.

  • The idea was just pulling the titles, not the whole entries πŸ™‚

    You have a FOUC here, btw (Safari, OsX Tiger)

  • Kalle Wibeck says:

    Nice work Robert!

    I firstly spotted the design change via Opera Mini on my mobile, and could just barely see that the Chinese Wall had turned into Easter Island inhabitants πŸ˜‰

    Thank you so much for removing the calender, that one always caused me some "mobile-scrolling-annoyance" since Opera Mini stacked the numbers in a never ending pile…

    Once again! Well built redesign…

    // πŸ™‚ Kalle

  • I agree with Chris: the list item (eggs? pebbles?) are a little bit too much for my taste.

    The focus colour in the input fields is better now (as in more readable)

    The Safari FOUC is related to Google AdSense and is very difficult to reproduce consistently. It comes and goes a bit. I suppose it may depend on which ads get displayed when the page loads. The fixes for the IE FOUC don't help. Apple (Dave Hyatt) is aware of the problem.

  • Dejan says:

    I am really sorry, but I do not like redesign. Choice of colors is not my favourite (rather heavy on my eyes) and left "margin" is just too heavy for my taste. Somehow it makes me little dizzy each time I visit site.

  • I like it. Very distinctive and easy on the eyes. I like the addittion of a photo in the top left corner, but it does seem a bit low quality.

    Only thing I couldn't care much about was the search. Seems less usable to me than a default redirection to a search results page. High cool-factor for AJAX, nonetheless πŸ˜‰

  • Robert Nyman says:

    Kalle,

    Thank you!

    It should also be a lot faster for viewing on cell phones and such. A full page's weight, including dependencies, are only about 40 kilobytes.

    Roger,

    Yes, those are little rocks. Sorry that you don't like them.

    The focus colour in the input fields is better now (as in more readable)

    Good (although I get the feeling that you don't like the color design-wise? :-))

    Thanks for your feedback and the explanation about the occurance of FOUC.

    Dejan,

    I'm sorry to hear that. What I can say about the left margin is that it's supposed to be a more spacious design.

    Jeroen,

    Thank you!

    I wouldn't say that the picture is low quality, but rather designed in a cartoonish and sketchy way, which might make you experience it that way.

    When it comes to the search results, I wanted to offer the possibility to do a search to find related posts without having to navigate away from the current one.

    But naturally, it's about show-casing AJAX too. πŸ™‚

  • Ben says:

    Wow, nice redesign, dude! I really dig the layout, I think I may steal it for another design sometime. I really like the Easter Island theme as well, although I'm not such a fan of the drab green.

    I do not like the blue focus colour, I suggest you use the light green for that, the one you use for blockquotes. Or a very light version of the brown. I think the blue is too different from the surrounding colours, by the time you reach the comment form…

  • Robert Nyman says:

    Ben,

    Thanks! And good to see you here!

    The bluish focus color was a light green first, and that wasn't really popular either. People thought it looked like the comments boxes.

    Maybe the current color isn't optimal, but at least it makes it stand out and easy to distinguish from the rest of the surrounding content.

  • Carl Camera says:

    Robert – new design is quite distinctive. If only you had some Easter-Island-themed smileys. πŸ™‚

    As for the topic of DOCTYPEs, I have a slight difference of opinion but sincere respect for your decision.

  • Robert Nyman says:

    Carl,

    Robert – new design is quite distinctive.

    Naturally, I take that in a good way. πŸ™‚

    I think I'll keep the smilies as they are, but I really like the idea of Easter Island-smileys!

    Thank you for respecting my decision, although you didn't even mention me in the any of the lists in your post! πŸ™‚

    As promised above, I'll explain my decision and the options between HTML and XHTML in a day or two.

  • Ha!

    Just realised why Chris says the list images remind him of sheep… πŸ™‚

    Now, lets see if I can find the easter egg…

  • Jens says:

    Hey Robert, love your new design, much better than before and really like the colours. One thing though, the line width (90-100 characters)is a bit too much for me when browsing at 1280X1024, mayby a max-width. Is is just me that browses with a full expanded window, I know that Mac users mostly don't. Also the change of size of the logo is excellent.

    Keep it up.

  • Robert Nyman says:

    Jens,

    Thank you!

    I need to think about the line width, I know it's a border call for full-width layouts. Thanks for the feedback!

  • Carl Camera says:

    Robert – yes, for the record, distinctive = good. And to atone for my glaring omission, you get a link from every page on my website.

  • Robert Nyman says:

    Carl,

    Thank you! Really!

    I'm touched and I appreciate it a lot!

  • Johan says:

    Did you do a trace bitmap of a jpeg in flash mx for the eastern island statues?

    No one knows why these statues came there?

  • Robert Nyman says:

    Johan,

    Nope, just Photoshop work.

    Well, it's known where they came from, they were manufactured right there on the island, but people aren't sure how they moved them around.

    There are several theories about this, and when I visited the island, I met an archaeologist working on testing his theories and doing restoration work. Interesting, indeed!

    If you want to see some images from when I was there, you should look at my round the world travel web site <img src="http://www.robertnyman.com/images/sweFlag.gif&quot; alt="" /> .

Leave a Reply

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