New Year, New Layout

SurfiOnline

You know how it works; you get tired of your old layout so you spend 2 months on and off trying to create something you would want to use. Once you finally hit the nail on the head and begin improving on what you’ve already designed, you get bored of it. You start again, only to find the same happening over and over.

Well, at least that is how it is for me. The number of times I created prototype layouts and threw them into WordPress over the last few months is just ridiculous. If I could find something I like, and stick with it, that is what I’d do.

That is what I did. I created something fairly quickly (as to not get bored of creating it), and decided i’d put it into place. Welcome to the new SurfiOnline, in a rather simplistic layout, but something I find is nice.

So, let’s take a look:

  • Peter Akkies kept telling me to lose the defined border look I go for. I think I sort of took his advice this time and ditched having a hard border between the body and the container. Although, the items on the sidebar do have borders around them.. Oh well.
  • Liquid width layouts are cool. Zoomable Liquid width layouts are so Web 2.0. I had to have them. If you’re in Firefox, change the text size and the layout width also changes. Sadly, Internet Explorer users are stuck at a fixed width layout.
  • How else could you get more Web 2.0, than using Ajax. I decided I’d hack up the Ajax commmenting plugin and pretty much rewrote it to include previews, and better error handling.
  • RSS Feeds and Content Syndication are also soooo Web 2.0, that I had to make sure they were mentioned in as many places as possible. You’ll see more of the little feed icons popping up soon too.
  • I found a few “Quote this comment” plugins for WordPress, however they were all pretty dodgy and I didn’t like the way they worked. I decided I’d write my own.
  • The FamFamFam Silk icons are cool. I decided I’d use them in a few places. Now I see Michael has done the same with K2!
  • It was time for a logo. I was getting bored with just using text in my header, or text on an image with a drop shadow and stroke applied. I came up with something simple, which I find looks nice.

So, just where the hell have you been?

The short answer is: really busy. In fact, too busy to even wish everyone a Merry Christmas! I hope you had a great one, mine was!

The new year is upon us..

Well, maybe me because I’m GMT +10:00. What does a new year bring for SurfiOnline? Hopefully a whole lot more in terms of activity, updates and design. I’ll be trying to get things as finished as possible given that I have time.

And MyBB you ask? Alot of things are happening. Peter, Dennis and I have been having a few branstorming sessions on things we’re going to add, the team and I have rewritten a fair deal of code, optimised things, and added a few new small features (we’re trying to concentrate on optimisation and code cleanups). You’ll hear more about a lot of this soon!

Happy New Year! and welcome to 2006!

Comments

  1. 1.

    Michele (January 1st, 2006, 1:20 am)

    What can I say? I’m fairly impressed. Really really like this!

    And well, you’re using my two favorite colors: blue and orange. So what more could I ask for?

    Happy New Year, Chris! :)

  2. 2.

    Chris Boulton (January 1st, 2006, 1:26 am)

    I basically took some ideas from the previous layout I was developing (such as the style for comments), and threw them in the other day, changing a few things along the way - I think it sort of worked.

    There is still a bit of work to be done in terms of cross browser compatibility (Mainly the menu in IE and Safari), but apart from what it works fairly well.

    My favourite colours too, by the way!

    Happy new year to you too and thanks for the comments!

  3. 3.

    -dt- (January 1st, 2006, 2:38 am)

    wow nice design :P
    like the preview comment thing
    the dark background im not sure i like :/

    but tis cool well done :D

  4. 4.

    Chestah (January 1st, 2006, 12:44 pm)

    Very nice Chris!
    I love the AJAX commenting, but your AJAX searching is excellent! I am amazed ;)

  5. 5.

    Dennis (January 1st, 2006, 4:19 pm)

    Oh oh oh very nicely done Chris :)

  6. 6.

    John Anderton (January 1st, 2006, 6:55 pm)

    What the …. where the …. who the ….. huh ?!?

    I just put up my new year post on my blog and thought id read yours and im greeted by this new theme. Nice :D Im seriously shocked. The white and black look good tho its a bit to bright for me. But i guess playing lot of dark games and then comming to your site can do that :P
    The new logo that you got is really good. I love it :) I like the random footnote that tells you the number of quiries and the run time ;)
    All in all an awesome theme which has lots of handy features put in it. Every nook and corner looks good. The new features you have added are really good :) You keep saying that you make so many proto-type themes and then throw them away. You could just release them for free use or give em off to people eh ?? :P That way the time your spent on that theme wouldnt be a waste ;)

  7. 7.

    Chris Boulton (January 1st, 2006, 6:58 pm)

    Thanks for the comments, JA. ;)
    I’ve still got a bit to fix up (I noticed a bit of screwy AJAX based replying stuff earlier).

    With the themes that i’ve made, well, partially made, I could probably put a few of them together for releases.. Maybe some old SurfiOnline stuff too (before I was using K2).

    By the way, I finished the AJAX based sarch stuff earlier today - go ahead and try it out. It works similar to Steve’s, except that his is still cooler.

  8. 8.

    John Anderton (January 1st, 2006, 7:11 pm)

    I was just going to send you a pm about the dodgy comment numbers like last time :P
    If you ever found the time you could complete your designs and add them to your development page where i must say your ff extention is getting mighty lonely :P
    There are only 2 random footnote sentences. You could add a few more :P
    Everything else seems to be working well (but i havent used the search yet :P)

  9. 9.

    Chris Boulton (January 1st, 2006, 9:26 pm)

    Well, that was fairly easy too - I’ve fixed the comment counting issue as it would appear. It showed fine when posting this comment.

    It is a rather cheap and nasty workaround but it works. If this problem is still present in K2 (Though I think Chris was rewriting the AJAX commenting system), I’ll put a patch up for it at some stage.

  10. 10.

    John Anderton (January 2nd, 2006, 6:46 pm)

    Ok lets see if it works :P
    Why doesnt it remember my details anymore :

  11. 11.

    John Anderton (January 2nd, 2006, 6:50 pm)

    Nice to see the numbering fixed :D
    Half of my reply just dissapeared after i took a preview ¬¬

    You should get the email notification plugin so that people can get notifications on you post :P

  12. 12.

    Michael Israel (January 4th, 2006, 9:11 am)

    Looks excellent, Chris! The AJAX search feature is amazing, and I like the new layout a lot more. Keep up the great work! :)

  13. 13.

    Chris Boulton (January 4th, 2006, 11:30 am)

    JA, I just fixed the remembering feature - had to add some new stuff to the AJAX comment posting parser. It should work fine from here on.

    Do you mean the notification plugin so people get notified whenever I make a new post? Or the one when comments are made? I have the one when comments are made, and I always presumed most people use RSS anyway :P
    Michael, thanks for the comments!

  14. 14.

    Peter Akkies (January 5th, 2006, 1:14 am)

    Great design, well done! You still have to show me that Wordpress comment plugin you made, it’s very cool indeed. However, I’m still wondering why people would want to know if I am subscribed to comments :)

  15. 15.

    lou_habs (January 5th, 2006, 11:05 am)

    Love the new design. Too bad you don’t post too often, and I must agree with Ja, your messenger plus! toolbar is getting lonely over there:P You should put the source of it so people could make their own (a)

  16. 16.

    Zoot (January 5th, 2006, 11:16 am)

    I’m loving this sleek new design and brilliant use of AJAX! :)

  17. 17.

    Lobster (January 7th, 2006, 2:44 am)

    Ok, so it’s a cool site, and looks very pretty indeed :P But as you got on the Web 2.0 soapbox I’m going to have to point out a few things:

    Fixed pixel font sizes aren’t very Web 2.0.
    Sort of related to this is that browser incompatibility isn’t very Web 2.0. Web 2.0 is about accessibility, and it’s neither the user’s fault for using IE nor IE’s fault for not violating your CSS’s instructions.
    Related to this… googlebombing Too Cool For Internet Explorer just isn’t cool. At all.
    Fluid width pages are cool; fluid width block text articles aren’t. It’s like we went backwards from the time when even pages weren’t formatted (some subsets of the web still don’t bother) and flowing prose was wrapped only by the edge of the browser window. People need short lines to follow what they’re reading better. At my screen resolution of 1280×1024 it’s pushing it.
    Web standards are also Web 2.0 :P You need to escape forwardslashes in javascript quotes when they follow a <; you need to close the input tag for the Subscribe checkbox; <a name=”comments”> is redundant - the <div id=”comments”> already reserves the anchor, and as they’re in the same place has the same functionality.

  18. 18.

    Lobster (January 7th, 2006, 2:49 am)

    While very cool, the ajax jobby doesn’t update the “you must be new” once I’ve told it who I am and submitted my comment. It doesn’t seem right. If you have to do everything without loading the page you have to make sure that the whole page is up to date.

  19. 19.

    Chris Boulton (January 7th, 2006, 1:08 pm)

    Fixed pixel font sizes aren’t very Web 2.0.

    Pixel based font sizing is about ensuring your site appears correctly, especially in different operating systems which have different fonts and default sizes. It also ensures it appears correctly in browsers where the user has the text size set differently.

    Don’t be fooled though, any standards compliant browser will still allow you to change the text size despite using fixed height fonts. Internet Explorer is a bad example of this, as it will not allow the text to be resized.

    Sort of related to this is that browser incompatibility isn’t very Web 2.0. Web 2.0 is about accessibility, and it’s neither the user’s fault for using IE nor IE’s fault for not violating your CSS’s instructions.

    My site appears correctly in Internet Explorer, and functions correctly too. “Web 2.0″ is about accessibility, yes, standards compliance, and enhancing the end user experience. As my site appears fine, I don’t know what your gripes are about there.

    Related to this… googlebombing Too Cool For Internet Explorer just isn’t cool. At all.

    It isn’t Google bombing. It was designed to show a “too cool for IE” logo which I had in my previous prototype, however haven’t bothered as of yet to move to this one because I don’t know where to put it. I simply set it as display: none; for now until I fix that.

    Fluid width pages are cool; fluid width block text articles aren’t. It’s like we went backwards from the time when even pages weren’t formatted (some subsets of the web still don’t bother) and flowing prose was wrapped only by the edge of the browser window. People need short lines to follow what they’re reading better. At my screen resolution of 1280×1024 it’s pushing it.

    The page is set to a maximum width of 90em. This means the page will stretch out to that width, and then it will become fixed at that width. It isn’t a totally liquid design, it is semi-liquid.

    Web standards are also Web 2.0

    I’m not sure about you, but i’m over this whole “buzzword” Web 2.0 thing, which is why I italised it and trid to mention it as many times as I could when I was writing my post.

    You need to escape forwardslashes in javascript quotes when they follow a > you need to close the input tag for the Subscribe checkbox; etc already reserves the anchor, and as they’re in the same place has the same functionality.

    Yes, I know that, and yes I know that the pages don’t all validate.

    Why do I not care? Validation is nice, but validation is not everything. I’ll fix it whenever I have time.

    While very cool, the ajax jobby doesn’t update the “you must be new” once I’ve told it who I am and submitted my comment. It doesn’t seem right. If you have to do everything without loading the page you have to make sure that the whole page is up to date.
    Edit

    That is one minor thing that may need fixing - but at the moment it isn’t a priority. I was aware of this “issue” already.

    It is sort of intended too, that after you post a comment, you’ll leave the page so the next time you view one of those pages, it will be different.

  20. 20.

    trench (January 7th, 2006, 5:10 pm)

    The logo and colors look great. wish I could come up with a logo!

  21. 21.

    Chris Boulton (January 7th, 2006, 6:49 pm)

    Pfft! You say that as if your current header image on 7milesdown looks bad! That is probably one of the best and nicest K2 modifications i’ve seen - even though it is mainly colour changing. Only problem is the footer image ;)
    It looks nice!

    Chris

  22. 22.

    John Anderton (January 9th, 2006, 9:47 pm)


    Chris Boulton said:
    Do you mean the notification plugin so people get notified whenever I make a new post? Or the one when comments are made? I have the one when comments are made, and I always presumed most people use RSS anyway :P

    I dont use RSS ¬¬
    And yes i meant the new post notification. I already use the new reply notification when ever i feel the need :P

    lou_habs said:
    Love the new design. Too bad you don’t post too often, and I must agree with Ja, your messenger plus! toolbar is getting lonely over there:P You should put the source of it so people could make their own (a)

    Well people shouldnt make it their “own” but should be able to use it and mod it a bit as per their needs as long as they do not claim it to be their own theme.
    And i wasnt talking about this theme lou, i was talking about the other ‘concept themes‘ that chris makes (well he makes only half of it) and then abandons it cause he gets bored. With a bit more effort put into it he could release the theme for other less talented desingers. (Not me …. i aint talented at all so i stand in a totally different group :P)

    Btw, this quick quote plugin is really good. Good work :)

  23. 23.

    Guido (January 10th, 2006, 8:21 am)

    Any chance you’ll make available these WordPress modifications you’ve made? (the Ajax comments plugin changes, etc.)

    (That, unless I’ve missed something)

Post a Comment

Note: * indicates required fields.