(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, 1 I've decided just to go live with the whole gig.
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 2, 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.
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.
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 readers3.
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?
There are 3 layout types; one for people with 1280×1024+, one for people on 1024×768 and one for those on 800×6004
Quick search
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.
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 feedback5? Besides, this is a good opportunity for the lurkers amongst you to come out of hiding and post a comment:)
- Yes Bryan, I'm looking at you:) [back]
- 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. [back]
- Personally, 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. [back]
- There's even a pseudo-big-footer of sorts. [back]
- That said, can I ask kindly that browser-specific issues/bugs are emailed to me rather than being added as a comment? Cheers. [back]
-30-
On the front page, all your “read more” links are empty (the
hrefattribute I mean). :)[Edit by Phu: Thanks Federico; this is what happens when you launch a redesign late at night:)]
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.
I love it. It looks beautiful in last nights build of Camino.
God damn Phu! It’s beautiful, makes me want to throw away my reboot design and start again!
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.
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.
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).
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.
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..
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!
..ok - so the elements snap around in a predictable pattern, that’s actually really fricken cool. :)
[…] Phu has unveiled the results of his CSS reboot design a little early.. […]
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?
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!
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.
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.
Good work Phu. I love it, specially that UXMag-style top navigation :)
That’s farking beautiful. ;O
Thanks guys! The comments were quite a surprise to wake up to:)
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:)
Try the front page; there’s actually 5 different layouts; 3 for the front page and 2 for internal post pages.
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.
Reminds me of someone else I know:)
I love the grid, Phu. And I also love the greys you chose. :-D Awesome!
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!
One word… One meaning… WOW!
Phu - the three column look with the shorts looks great. I am happy to see that you stuck with grey.
You’re website is looking great, I love the design and the search feature!
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.
Kudos! - this new layout hits all the right notes. Legible, friendly, simple without being simplistic. Nicely done.
Jeez… I am beginning to get nervous about rebooting with quality like this being launched :/
Love the new design!
It’s nice and clean, just the way I love it !
great work
This is just awsome Phu… just awsome.I have never seen anything like it before anywhere.It is completely original.
Phu, you’re raising the bar on us all now, aren’t you.
This is really nice - very impressive work!
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.
Gorgeous, Phu. Love the grid.
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
I echo everything said in the previous 30+ comments
I like it!
[…] That said, best of luck to those who are rebooting. Phu Ly has already gone live with his reboot and it’s nothing short of brilliant. […]
Great reboot/realign Phu!
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.
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.
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!
You’ve managed to make a good looking design, but thankfully, not on the cost of functionality, well done.
[…] 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 […]
Ijust wann say you did a great job m8!
Really great job.
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
Thanks Sadish; should be fixed now:)
PS. Can the rest of you commenters go sign up on coComment already?! This thing rocks. Sorry… being a coComment-whore at the moment.
Cool. It works now ! :)
nice reboot.. like the style!
I like the gray to!
Nice job Phu! :D
Awesome site - easy on the eyes - and the colours contrast really well. Thanks for sending me back to the drawing board!
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.
Congrats with the new design. I really like this simple, clean but still sophisticated look. Sweet!
Excellent new design. I’ll give ya 5 stars for this in the reboot rating. Congratulations & Well done !
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
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.
Looks sweet! I wish I has web design skills like you. :(
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
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]
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]
Seems like you got comments like Bryan’s Phu… in terms of theme-ship.
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? :)
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
“Does ANY font look good without ClearType? :)”
No :) Surprisingly, a lot of people don’t use it though. Weird.
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.
i nice site and like your new design.
i am interested in your Ajax serch! any code?
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.
Where does the 3rd column go in the low resolutions?
i want this template!!!! ;) please pretty please
Wow amazing solution! nice template would you mind sharing it?:P
[Edit by Phu: As mentioned above, this is a custom design for private use on this site only]
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. :(
That’s farking beautiful.
WOW… this is just OWOWOW
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!!!
God damn Phu! It’s beautiful, makes me want to throw away my reboot design
Cheers
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!