Broken Kode 4.0: Saida Part 1

Version 4.0 has been a long time coming, as I’ve been sitting on the design for at least 3 month now. The idea popped into my head sometime in May, just something snapped and the idea began to grow. By the time I came back from holiday I knew exactly what I needed to do. Unfortunately due to work and life just getting in my way I was forced to put it on hold.

Reason for Redesign
Emmortel was a failure. Not for anything other than the fact that I just couldn’t force myself to take care of two websites, and provide them with the same attention and loving. It’s a change of philosophy for the this site as I effectively will be my blog and portfolio at the same time. It took me a good long while to accept that this was the proper route to take. I truly admire Joen for being able to consistently push out his monthly installments without fail. That sort of commitment is something I can only hope and dream of achieving. This is effectively my attempt at that.

The one section of the site that is still in active development is the Gallery section. I’ve got an slight idea of what I want however I’m not 100% there yet. Hopefully that should get sorted out in the coming days.

Code
Originally I was planning on doing what I’ve done with the previous 2.5 code designs, which is mainly taking Rin or Manji and hacking them to death. So how this didn’t feel like the right way to go for this particular version, and I went about writing the code from scratch. One of the main reasons I love doing a redesign anyway is because it improves me as a designer and coder. I can see the steps I take forward every single time I decide to go down that road.

This project also marks the first time I’ve used PHP Designer 2005 and HTMLGATE. Both fantastic applications that deserve your attention. Sure they’re not perfect as there are several bugs that need to be ironed out, but as website development tools go they’re both exceptional tools.

Inspiration
Yeah right, like I came up with this stuff without nicking ideas of people :). I just wanted to take the time and acknowledge the works of several people that inspired me when I wasn’t feeling particularly creative. Joen’s Noscope, Bryan’s Avalonstar, Khoi’s Subtraction Phu’s Ifelse. Thank you gents couldn’t have done it without you (and in Joen, Bryan and Phu’s case really couldn’t have done it without them).
Future modifications
There is bound to be many modifications to come, as hopefully people will point out funky things happening in their browser, and the more I look at it all and take it in the more I’ll try and find different ways of dealing with things. I felt that it was time to release it and then tinker slowly but surely, with my self imposed pressure being elevated. Now to make sure all the plugins work before I go on and sort out the links.

40 Comments

  1. Wow, looks fantastic Khaled! I’m insanely jealous:)

    1 Phu
    20/8/2005
  2. Looks great, I love it :D — Preferences is broken BTW.

    2 Michael Heilemann
    20/8/2005
  3. I look at something like this and realise that I have so very much more to learn.. The design is very well executed - colour me green with envy, too. :)

    3 brendan
    20/8/2005
  4. Really nice redesign. Keep up the good work.

    4 Yannick
    20/8/2005
  5. Great job Khaled. I love it.

    5 David Babylon
    20/8/2005
  6. Fantastic graphics Khaled. I love the colors you’ve gone with here. Keep up the good work!

    6 Shawn Grimes
    20/8/2005
  7. I’m impressed - it looks very slick. The only quirk I found is in your section headers (ie: Inspiration, Code, Future Modifications, etc). They blend in with the text, and it may be possible to give them more distinction. But then again, that may be personal preference PLUS I’m not a designer :) I just figured you would want some feedback as well. Great work!

    7 Ryan Campbell
    20/8/2005
  8. Thanks guys, really appreciate all the kinds words.

    Michael, yeah all my ‘pages’ are pretty busted right now. I’ll be sorting them out throughout the weekend.

    Ryan, I’m in the process of sorting those things out, along with blockquotes, cite and a slew of other selectors that need to be sorted out as well :). Baby steps I guess.

    8 Khaled
    20/8/2005
  9. lovely! I love it.

    9 kristin
    20/8/2005
  10. Really fantastic. Very clean and spaced out (which I find is always important). Reminds me of a cartoon. Great job.

    10 Sujay
    20/8/2005
  11. Dude, how can you call us inspiration when this completely blows ours out of the water. You’re helping me with my next site dude, it’s settled.

    11 Bryan Veloso
    20/8/2005
  12. Stellar job. One of the best blog redesigns I have seen in awhile.

    12 Chris Gonyea
    20/8/2005
  13. Khaled, very slick, of course. I love the way the header graphic works, and of course, it’s lovely. You’re a fantastic illustrator. You’ve given us all something to aim for with our own next redesigns.

    13 Chris
    20/8/2005
  14. Real quick, the design is named for the city in Lebanon, Sidon, yes?

    14 Chris
    20/8/2005
  15. Love the choice of colors, very slick work.

    15 Christopher
    20/8/2005
  16. As beautiful and elegent as ever Khaled, I can only join in the echoes of jealousy. :)

    16 Zenith
    21/8/2005
  17. As always, you never fail to astound, please and awe.

    I am looking forward to watching the site really take shape as you bring more sections online.

    17 Chris J. Davis
    21/8/2005
  18. Chris - yeah it’s my hometown. That’s where I drew the drawing and came up with the concept effectively. I’ll talk more about it in Part 2, after I published that I realised there were a few other points I wanted to make.

    18 Khaled
    21/8/2005
  19. Beautiful!

    I’ve already said it in the pingback, I love it. With regards to the actual details, I love how little it looks like the usual two-column blog layout that I’ve come to expect most everywhere. Not only have you cleverly broken the fatal “verticality” that most blogs (including my own) suffer from, but you’ve done something very interesting with the sidebar as well.

    What really interests me is your “pictures” section. I had never even seen your “emmortel” site, but if it’s a pointer as to what’s ahead, it’s going to be great.

    Thank you, by the way, for your kind words, I truly appreciate it.

    I’m really looking forward to seeing how the rest of this unveils.

    19 Joen
    21/8/2005
  20. Ã�stas son las páginas que hacen que gente como yo nos interesemos por el diseño.
    Enhorabuena Khaled!

    20 black_soul
    22/8/2005
  21. I’d like to be the 23rd person to say this looks fantastic. Great work.

    21 Ryan
    22/8/2005
  22. Yep, I like it, too! Great graphics and a fresh colour scheme. However I think the typography really needs some major improvement.

    22 Sebastian Schmieg
    22/8/2005
  23. Entaxi.. kalo einai…. eikosi teseries pipes apo diaforous… sou vgalane olo to zoumi… nevertheless it is looks good… very good… pare ali mia pipa kai apo emena!! I like what you have done with coco too and as much as I hate to admit this you seem to have a knack at the way you match and mix your colours. I also like the layout of the pages, even though I am still used to the previous version. Tous titlous gia kathe section pou greafies, pistevo oti prepei na einai se bold font kai, in leaving a comment of this length my text has managed to ‘jump’ out of your designated writing box…. sort it out!!!!! Otherwise marks FOR BROKENKODE VERSION 4.0… I would give it ONE!

    23 Stahis
    22/8/2005
  24. Sebastian, which parts do think are lacking, typography has always been a weakness of mine, and it doesn’t help to have your hands tied on the web, but that shouldn’t really be an excuse _.

    24 Khaled
    22/8/2005
  25. Khaled, for body text set in Trebuchet I recommend the following settings:

    font-size: 13px; /* whatever this is in “em” */
    line-height: 20px; /* dito */
    letter-spacing: 0; /* instead of 0.06em */

    I hope this helps.

    25 Sebastian Schmieg
    22/8/2005
  26. Wow! Very nice. :)

    26 Bilal
    22/8/2005
  27. Thanks for that Sebastian, I increased the font from 0.7 to 0.8em and then got rid of the letter spacing and it really does seem to read much better now. A bit bigger but I think that’s a good thing.

    27 Khaled
    22/8/2005
  28. Now I find it much easier to read. Btw. the styling of your own comments rocks as does the colos scheme of your 9rules logo although I don’t like that 9rules-network thing in general.

    28 Sebastian Schmieg
    22/8/2005
  29. Just to make a quick comment.. Fantastic design. The nine rules logo is absent in IE (work computer). Also, the word preferences is also not visible at the very top. I could take a screen shot or two if you want?

    29 David
    23/8/2005
  30. A few further comments:

    • I’d like it if the header, when clicked brought me back to ‘home’.
    • I like the styling on this form, but the text exceeds (on top of) one characters to the right of the textarea (in Firefox on Windows currently).
    • I think it would be a good idea to tone down the footer stuff a little.

    Otherwise much of what you have done are things I have scheduled for my own redesign, and that’s says it all really :)

    30 Michael Heilemann
    23/8/2005
  31. Oh yeah, and perhaps it would be cool if you used sliding doors to fade off the “sidebar’s” top and bottom fades?

    31 Michael Heilemann
    23/8/2005
  32. Thanks Sebastian, the 9Rules guys are pretty cool bunch of guys, and the logo rocks, just had to have it on the site in one capacity or another.

    David - Yeah, IE has been giving me several isues which I’ll be trying to hammer away but I’ve got to be honest it’s not really a priority.

    Michael - I’ll have a look into the header thing (you probably have a point from a usability point of view).

    Form’s been sorted out, how embarrassing _.

    In the individual posts you might have a point.

    Sidebars, not really sure what you mean by the sidebar’s top and bottom fades.

    32 Khaled
    23/8/2005
  33. By the sidebar fading, I mean: At the moment the background (a line with some gray shadows on either side) is simply cut off at the top and bottom, right? Well if you use the ’sliding doors’ technique, you can overlay two transparent fade white fades at the top and bottom, which make them not look cut off. Make sense? Else I’ll mock it up in PS.

    33 Michael Heilemann
    23/8/2005
  34. Not that I am a design guru by any means but could you not just define a #top and #bottom division (or maybe even classes) with a different background image?

    34 David
    23/8/2005
  35. Wow Khaled

    You have really out done yourself buddy. Love the new look.

    35 Jennifer
    24/8/2005
  36. It’s been a little while since I stopped in, but Khaled this is a wonderful design. Your best yet! Kudos!

    36 This Is Not A Love Story
    25/8/2005