If..Else Log

(CSS) Rebooted

Having supported the last CSS reboot, I thought that it was time for me to join in and reboot this site as well. So, with not long to go, I decided to put on my designer boots, knuckle down, and work on the next iteration of ifelse.co.uk. Despite interruptions such as dealing with a kitchen renovation and FA cup football, I finished ahead of schedule. As such, instead of teasing you all with reboot previews, Yes Bryan, I’m looking at you:) I’ve decided just to go live with the whole gig.

Front Page

Redesigned? Realigned? Rebooted.

Each of the last couple of redesigns for this site have brought major overhauls to the look and feel; not only did each of the design bring about structural changes (for example, moving from a 3/2 column switch design to what is now known as a fat bottom design) but they also brought in overhauls with the colour scheme and imagery.

And, to a certain extent, so does this iteration. Gone is the fat bottom and in comes a new flexible multi-column design. If you were a fan of columns and you own a wide monitor, then rejoice.

However, regular readers will notice little inklings of familiarity. Whilst the header has undergone change along with the colour scheme The last theme was dubbed Black Gold and though neither are dominant colours any more (in particular, the infamous gold colour has mellowed out and black has taken a back row seat to the other colours), they’re still around albeit if only in more of a background role., it’s change as evolution; I hesitate to use the words brand or identity but there’s enough touches to help make this feel like the If..Else that you’ve remember.

Black Gold

The new look hasn’t totally annexed the old; it’s more a case of the old design gently ushuring in a new successor.

Horses for courses

The more astute of you will have noticed a few developments with regards to columns. Firstly, if anyone is reading this post directly, take some time to go to the front page. Then head back to this post. For those of you using a resolution of 1280×1024, try resizing to 1024×768. Those of you with 1024×768, try dropping down to 800×600. Don’t forget to scroll down to the bottom of the page.

Don’t worry, I’ll wait till you’re ready.

Landing portal

OK, let’s discuss the front page. This is the first place that many people will visit.

Front Page

One of the things that I tried to do with the last couple of designs was to make the front page a real landing page. The home page shouldn’t just be a chronological listing of your posts. It’s also the place where visitors will arrive at for the first time. Let’s try and hone the experience so that both the reader and ourselves benefit.

Let’s highlight the lead/latest post so that we can draw attention to the important content. Let’s segregate out our little asides, shorts and snippets so as to note dilute our main content. Give the readers a focused set of exit points to other content or parts of the site. By all means provide information but provide it in a way so as to not overwhelm the user.

Different layout for different situations

It’s time to embrace wider screensizes. According to the everyone’s favourite fresh smelling oracle, the lowest resolution on which this site is being viewed at is 800×600 by 4% of my readersPersonally, I’ve standardised on 1280×1024 but in the last month, there were over 3 times as many readers that ran their machines with even larger resolutions than those that were still on 800×600..

I don’t want to provide an inferior experience to anyone, but by not taking advantage of improvements in screen real estate, that’s what I’m doing. And so, with some help from our man in blue, this site is now sporting a resolution dependent layout. However, resolution dependent layout sounds so technical and sterile; I call it a tailored layout, a design that accomodates you. Besides, if Simon Collison gets away with it, who am I to argue?

800 layout

There are 3 layout types; one for people with 1280×1024+, one for people on 1024×768 and one for those on 800×600There’s even a pseudo-big-footer of sorts.

Quick search

1024 layout

Searching was neglected in the previous design; in fact, I didn’t even show the search bar anywhere else apart from the front page. That said, I do find myself searching back for old posts (mainly my shorts which serve as my personal del.icio.us) and seeing as you can’t develop a website without a mention of everyone’s favourite kitchen cleaner, I decided to spend a bit of time plonking down a fancier search bar.

Different layout for different situations part deux

I’ve talked about two layout scenarios so far. There’s the front page and as well as the resolution dependent layout. What we can look at next is the internal page layouts i.e. for a given blog post. Quick question: if you’re viewing a blog post, what are looking for? The answer is content. So if that’s what the reader is after, let’s make it comfortable for them to read.

Post layout

The general layout and colour scheme already gives the content an advantage but by increasing both the content area and the type size, it feels just that much more nicer for lack of a better word. Besides, this gives me an opportunity to use larger images which is always good, right?

Your thoughts

If you’ve made it this far, you must either have superhuman willpower or a severe bout of insomnia. Well now it’s your turn. Any feedbackThat said, can I ask kindly that browser-specific issues/bugs are emailed to me rather than being added as a comment? Cheers.? Besides, this is a good opportunity for the lurkers amongst you to come out of hiding and post a comment:)

-30-

77 Responses to “(CSS) Rebooted”

  1. Gravatar Federico

    On the front page, all your “read more” links are empty (the href attribute I mean). :)
    [Edit by Phu: Thanks Federico; this is what happens when you launch a redesign late at night:)]

  2. Gravatar Natalie Jost

    Beautiful, as expected, though not in the FORM expected! :) I’m thrilled to see a little more white on the page too. It’s easy on the eyes which is a personal preference of mine. Really awesome work, Phu.

  3. Gravatar Daniel Nicolas

    I love it. It looks beautiful in last nights build of Camino.

  4. Gravatar Sam

    God damn Phu! It’s beautiful, makes me want to throw away my reboot design and start again!

  5. Gravatar Derek Punsalan

    Great look. The gray tones and subtle graphics for detail work well together. Quite a change from the darker template before the reboot. Everything is definitely easier to read.

  6. Gravatar Prabhath Sirisena

    I landed on the article page and thought “wow”, and then you asked us to go to the front page. That reboot theme I’m working on? I’m already beginning to have second thoughts about it :P

    Beautiful.

  7. Gravatar Matthew Pennell

    I’m not seeing three different layouts – there’s a narrower one for 800×600, but for the rest it seems that just that the right-hand sidebar drops below the main content at less than about 1200px, and the top-nav disappears if you resize the browser (Win/FF1.5).

  8. Gravatar khaled

    See now you bastard have set a pretty high standard for the rest of us. At least you could have waited a few more days!!! You’re so impatient :).

    Needless to say I really love it. This is no slant on the previous design, but it’s a great deal more readable as far as I’m concerned. There’s been a massive attention to the typography on the page and it’s something I’m really digging overall.

    Love the comments (oddly look very similar to the ones I’m doing for my redesign, except they’re on the other side,…must be an issue of great minds think alike).

    Only thing that I noticed that could use a bit of a widening is in the comment form, the three input boxes don’t align with the big one where the comment is written. I know how hard it is to get those fekkers aligned but it’s just me being anal and trying to find something to find flaw with this design.

    Anywho great work Phu.

  9. Gravatar brendan

    Looks good phu – although the wider layout might benefit from a dynamic middle column, so that browser resizing doesn’t cause elements to snap from one place to the next..

  10. Gravatar Oliver Beattie

    Fantastic! Loved your old design and this just accentuates the whole thing! I’m doing a reboot too, which I’ll be offering as a free download – but in comparison… wow! Brilliant Work, Phu!

  11. Gravatar brendan

    ..ok – so the elements snap around in a predictable pattern, that’s actually really fricken cool. :)

  12. Gravatar is | incoherently surreal » if ‘new design’ reboot – else ‘done’

    [...] Phu has unveiled the results of his CSS reboot design a little early.. [...]

  13. Gravatar AsceticMonk

    The redesign/realignment is ineffably cool (hehe, a new word that I just learned today)! I like the dynamic layout that you’ve equipped with this design, I would like to hear you sharing the details of this technique. One thing I want to point on, what is going in Shorts Archive?

  14. Gravatar Don

    Pure genius! I never would have discovered how dynamic this new design is until I maximized the browser. I’m using a widescreen monitor and your new design just works very well with varying widths! Great work, Phu!

  15. Gravatar Ben

    I’m loving this theme. A big improvement on the old one, and that wasn’t too bad to start with :) Like most people, it appears, I really like the extra white that’s going on here, and the columns work great.

  16. Gravatar Arjan

    Damn you Phu and you sexy reboot! Now all those rebooting at May 1st have to start all over again!
    I love the details in this design. It’s (again) one of those designs that make you want to look around, rather than read the actual text on the page.

  17. Gravatar Saddam Azad

    Good work Phu. I love it, specially that UXMag-style top navigation :)

  18. Gravatar Veracon

    That’s farking beautiful. ;O

  19. Gravatar Phu

    Thanks guys! The comments were quite a surprise to wake up to:)

    “I like the dynamic layout that you’ve equipped with this design, I would like to hear you sharing the details of this technique. One thing I want to point on, what is going in Shorts Archive?”

    I’ll probaby write something up when CSSReboot has ‘officially’ come and go. Besides, that’ll give me time to sort out my shorts archive; in my rush to launch, I overlooked that part:)

    “I’m not seeing three different layouts”

    Try the front page; there’s actually 5 different layouts; 3 for the front page and 2 for internal post pages.

    “…easier to read… a great deal more readable… like the extra white that’s going on here”

    Readability was one of my aims so I’m glad you all appreciate it:) Colour scheme, layout and typography were all chosen so as to make it easier on the eyes.

    “At least you could have waited a few more days!!! You’re so impatient :)”

    Reminds me of someone else I know:)

  20. Gravatar Lea

    I love the grid, Phu. And I also love the greys you chose. :-D Awesome!

  21. Gravatar Luca

    I just love it.
    As a brave lurker, I’d like to tell you that I found two bugs:
    1. I use Opera 9 (beta preview 2), and comments are completely hidden(here’s a screenshot);
    2. If I search with the traditional method (http://ifelse.co.uk/?s=theme, for example) and I click on “Go to comments” or “Add comment” nothing appears. [Edit by Phu: My fault, comments link should now be now fixed:)]
    In spite of this two little things, excellent theme!

  22. Gravatar Matt

    One word… One meaning… WOW!

  23. Gravatar Dennis Bullock

    Phu – the three column look with the shorts looks great. I am happy to see that you stuck with grey.

  24. Gravatar Prashant

    You’re website is looking great, I love the design and the search feature!

  25. Gravatar Benedict

    A couple of the drop shadows seem a bit heavyhanded, but apart from that, very clean and slick. Moving the additional content (for the widest layout) rather than removing it altogether would, I think, be preferable.

  26. Gravatar Tom

    Kudos! – this new layout hits all the right notes. Legible, friendly, simple without being simplistic. Nicely done.

  27. Gravatar Alan

    Jeez… I am beginning to get nervous about rebooting with quality like this being launched :/

    Love the new design!

  28. Gravatar Brock

    It’s nice and clean, just the way I love it !
    great work

  29. Gravatar Shawna

    This is just awsome Phu… just awsome.I have never seen anything like it before anywhere.It is completely original.

  30. Gravatar Anton

    Phu, you’re raising the bar on us all now, aren’t you.
    This is really nice – very impressive work!

  31. Gravatar stuart

    Just beautiful Phu, as with the previous design it exudes a sense of class and real craftsmanship, I like that it feels like a natural progression of the design rather than a shift. Well done indeed.

  32. Gravatar Adam Bouskila

    Gorgeous, Phu. Love the grid.

  33. Gravatar Bryan Veloso

    Damn you Phu! Damn you! Damn you!!! You’ve taken away all of our mojo. Now everything will suck compared to this. x_X;

    Thanks a lot. :p

  34. Gravatar Jesse

    I echo everything said in the previous 30+ comments

  35. Gravatar Nanyaar?

    I like it!

  36. Gravatar Sherwin Techico

    Great reboot/realign Phu!

  37. Gravatar neogen

    Yeah, the reboot looks great… just one thing that should be simple to fix. When resizing the browser window’s width, the right menu drops off the right and lands to the left underneath the end of the site making it seem as if the menu was kind-a suppose to be there which would be why some ppl haven’t gotten it yet. I’m on firefox browser just incase you were wondering.

    Overall the site is badass. I give you three whole kudos.

    Nice Cool blend, I like your style.

  38. Gravatar Montoya

    I think this new design is totally awesome, you’ve shown you mastery of design for content yet again.

    But you lose the scrollbars when they window goes below 800×600… I know this isn’t a big deal, but it looks like a bug worth fixing.

  39. Gravatar Jonathan Barket

    Congratulations on finishing the new design.

    While I’m not 100% sold on the comments–they’re like a distant cousin to mine, and I hate mine, haha–the majority of the site is polished to perfection.

    I love how you’re retained a moderately darker look, while keeping the content as readable as it can be.

    Here’s to the reboot bringing your site new visitors!

  40. Gravatar Sarah Oteem

    You’ve managed to make a good looking design, but thankfully, not on the cost of functionality, well done.

  41. Gravatar Broken Kode | Spring Musings

    [...] CSS Reboot Talking to Bryan yesterday, it’s amazing how this particular reboot is one of the best ones I can remember in a good long while. It’s a great time for feeding on the immense amount of creativity filling the internet landscape right now. Go and be inspired. « calexico Posted on the 1st May, 2006 Categories: Cerebral Interviews, Portfolio, Internet Tagged: avalonstar, broken kode, css reboot, england, ifelse, snook, spring, updates [...]

  42. Gravatar Marko Mihelcic

    Ijust wann say you did a great job m8!

  43. Gravatar ciem

    Really great job.

  44. Gravatar Sadish

    oh…Wow !

    What else I can Say !

    The work you have done in the background is clearly visible and I appreciate it.

    (one thing, there seems to be a javascript error, for any key pressed on Name, Website or the comment.
    I typed this comment on a notepad and pasted it.
    I wouldnt care to do that if it is somenone else’s blog.)

    Thanks
    Sadish

  45. Gravatar Phu

    Thanks Sadish; should be fixed now:)

  46. Gravatar Sadish

    Cool. It works now ! :)

  47. Gravatar baldo

    nice reboot.. like the style!
    I like the gray to!

  48. Gravatar Terry Ng

    Nice job Phu! :D

  49. Gravatar Pascal

    Awesome site – easy on the eyes – and the colours contrast really well. Thanks for sending me back to the drawing board!

  50. Gravatar Kalphegor

    Well this is odd, the fact that the design has the feeling that there are colors whitin (and there isn’t any color, only grey) and the fact that there really are colors whitin (hover on elements).
    I’m not sure I spell it right, but the design is that good.

  51. Gravatar Eric

    Congrats with the new design. I really like this simple, clean but still sophisticated look. Sweet!

  52. Gravatar AurangZeb

    Excellent new design. I’ll give ya 5 stars for this in the reboot rating. Congratulations & Well done !

  53. Gravatar Paul

    Great design Phu. I thought you’d done some great designs in your admirable “A Theme a Day” – Emire is just beautiful and Bosa’s a close second-but you know-I think you’ve even surpassed those with this reboot. Elegant, clean, easy on the eye-just plain very nice

  54. Gravatar Jesse J. Anderson

    I think I already comments on the 9r forum and you already have way too many comments praising you here but… I figured what the heck.

    Your reboot rocks dude. You’re able to pull off that really nice clean look that I can’t even touch. Mad props.

  55. Gravatar Viper007Bond

    Looks sweet! I wish I has web design skills like you. :(

  56. Gravatar Pascal Klein

    I’m sticking my big toe into the metaphorical tub of web design at the moment and it’s both quite exciting but also frustrating at other times.

    I recently had some problems with my WordPress themes so I switched to one of yours (Ambiru) and decided to check on your site again while I was at it. I can only say I am stunned, and embarrasingly jealous.

    Lovely design, as always.

    Kind regards,
    Pascal

  57. Gravatar Arun Kale

    I think this is the best customisation (or theme, if you want to call it that) of WordPress I have ever seen. Would you mind putting up a tutorial or something?
    [Edit by Phu: Need to find some time first:)]
    Also, you’ve switched to WordPress 2.0 now. How come? :p
    [Edit by Phu: Mainly because 1.52 had a security vulnerability that was fixed in 2.0x]

  58. Gravatar mustaq

    hi phu

    great work bcose of your themes i belive most of the MT user switch to WP LOL , i can’t able to find the download link for this themes

    [Edit by Phu: There's no download link for this theme because it's not a downloadable theme for public use. It's a custom design for private use on this site only]

  59. Gravatar Sherwin Techico

    Seems like you got comments like Bryan’s Phu… in terms of theme-ship.

  60. Gravatar Arun Kale

    Also, does it bother you that some of the fonts on this site (Lucida Grande/Sans Unicode, for one) don’t look too good on computers that don’t have Cleartype enabled?

  61. Gravatar Natalie Jost

    “Also, does it bother you that some of the fonts on this site (Lucida Grande/Sans Unicode, for one) don’t look too good on computers that don’t have Cleartype enabled?”

    Does ANY font look good without ClearType? :)

  62. Gravatar Pascal Klein

    Text in the right hand sidebar on the top is rendering quite poorly for me. I suggest including Bitstream fonts into the font family as they are the common standard font family delivered on all free desktops (UNIX and GNU/Linux desktops such as KDE and GNOME).

    Check out http://www.gnome.org/fonts

  63. Gravatar Arun Kale

    “Does ANY font look good without ClearType? :)”
    No :) Surprisingly, a lot of people don’t use it though. Weird.

  64. Gravatar Brief Pow

    Great look. The gray tones and subtle graphics for detail work well together. Quite a change from the darker template before the reboot. Everything is definitely easier to read.

  65. Gravatar mrhappymac

    i nice site and like your new design.
    i am interested in your Ajax serch! any code?

  66. Gravatar SEO Guru

    Wow, Phu, you are a great designer. I will forward this link to all my webdevelopers. I wish there would be more talanted people like you. Good job on the site.

  67. Gravatar Isulong Seoph

    Where does the 3rd column go in the low resolutions?

  68. Gravatar marlon

    i want this template!!!! ;) please pretty please

  69. Gravatar Ituloy Angsulong

    Very nice and clean. Where do you drawn your inspiration from from? I just totally get stuck with my designs. And I find it hard thinking of something new. :(

  70. Gravatar cysterny

    That’s farking beautiful.

  71. Gravatar Legado

    WOW… this is just OWOWOW

  72. Gravatar Gorg

    The soft greys, the typeface, judicious use of style and elements that self-adjust dependant on display size all create something special – it’s resulted in some of the best work I’ve seen of late.

    Good job!!!

  73. Gravatar Gorg

    God damn Phu! It’s beautiful, makes me want to throw away my reboot design
    Cheers

  74. Gravatar Maria

    Really clean design and still it is not boring – that’s what I call nice :)
    I use 1152×864 resolution, I changed it to see the different layout types and it still looked great.
    Good job!