Introducing V8
If you're reading this entry through a feed aggregator or Bloglines, I highly suggest you stop reading right now and come visit the site. Yes, that's right. Stop reading and come over here. You're here on the site now? Excellent! Now go look around a bit, as much as you'd like even. When ready, please join me as I introduce you to: V8, the eighth incarnation of the KuraFire Network.
It's been six months in the making, but it's finally done: KuraFire Network V8 is online and ready!
By now, I'm sure you've noticed that things are quite a bit different than before. There are literally thousands of changes compared to version 7, but the most noticeable ones are, of course, the brand-new look and the oh-wow-what-is-that? Animations! Better yet, accessible, CSS-powered animations.
While I could go on and on about it, I'll try and keep this post short and let the site speak for itself. There really is more to see than I can remember right now, anyway. For instance, there are 21 completely unique themes scattered across the site's different areas. Twenty-one! Then there's different, unique content on the side bars on almost every theme, there's completely new content on all the pages besides the Log and Articles sections, and so forth.
So if you're curious and can't wait, just go look around for a bit and then return to continue reading. It's what I would be doing right now, if I hadn't created this site myself.
The process
Six months ago, I had an epiphany: I suddenly envisioned my new site design (the previous version was never meant to stay as long as it did, it was merely an experiment) and the Home page's animations. Then I figured out how to do generic animations via CSS, using plug-and-play JavaScript that never had to be altered, regardless of the animation's style, speed or anything. FACE, or "Faruk's Animated CSS Enhancements" was born.
However, my first version served only as proof of concept. The animation was very smooth and solid, but there was a problem when trying to animate multiple elements on the page. I called in the help of my colleague (at the time), Tim Hofman, and with his Javascript wizardry, FACE was rewritten almost entirely. By now, it is a beautiful Javascript object which is lightning fast and works great across different browsers.
When I then set out to actually create the site, I decided that it was going to be a very future-oriented site: lots of high-quality photographs, lots of content, lots of animations. The targetted audience of the site is the modern web designer / web developer, in other words: someone with a (relatively) powerful pc, a broadband connection, a good video card and a modern browser.
From an accessibility or usability perspective, you could argue that that's not optimal. However, this site will still have a state-of-the-art feel to it a few years from now, which is exactly what I was hoping to accomplish. I wanted it to be an example of what modern sites could be like, a few years down the road. Of course, they can be this way now already (this site being proof of that), but from a business point of view the very large download size of this site is reason enough to be a bit more conservative when making a new site. The entire site's layout, all 21 themes' headers and images included, is about 1 MB in total. Since it's spread across so many different areas, it isn't very noticeable, but it will be in my bandwidth stats, for instance.
Nevertheless, a lot of effort has been put into making this a highly accessible and usable site. There are some conscious choices that create some issues for some people, the most noticeable of which is that some of the themes have lower contrast for the menu links. Not an oversight, simply a conscious choice - I had to decide between fully supporting a non-targetted audience at the cost of prettiness, and simply keeping it the way I wanted it to be. Obviously, I chose the latter.
However, I'm sure that you're more interested in the animations right now. Well, for that, I will simply point you to the FACE Project page. There's a complete explanation there, as well as an example, links to other examples, and - very important - the download file for FACE!
Putting the new look and animations aside for a moment, the most important change in V8 is the structure of the site. There is now a more clear overview of what's available on the site: there are the five main areas: Log, Articles, Learn CSS, Portfolio and Projects; then there's the additional content, found on the About and More pages, as well as a contact form. Both About and More now feature four sub-pages, and no other content (like before).
The other type of structure, the XHTML markup, has also been changed: I've removed a lot of needless div and span elements, the source has been reorganized completely and everything is now much cleaner and more manageable.
The CSS has also been completely revamped. I've adopted my own initial.css approach and mixed it in with something I learned from Andy Budd's work on Rapha.cc. Together, it's become what I find to be a beautiful, elegant way of writing CSS.
The design of the site itself, the interface architecture, has been plotted quite carefully, so rather than "abusing" this entry for that, I will simply write an article on the Interface Design of V8 soon.
What I will discuss now, however, is the nature of the design. The reason my previous, version 7 design was elastic was because I wanted to work out the problems one has to face (haha, that's a pun from now on) when designing and implementing an elastic layout. It was a very successful experiment, as I learned more than enough to be able to make this site elastic as well.
I've disabled the elasticity for Internet Explorer users, though. Not out of laziness, but because I use a minimum width, a maximum width, and an elastic width in-between those two. That combination is, as far as my research and inquiries goes, completely impossible to support on Internet Explorer. If you just want a max-width, that's fine. If you just want a min-width, that's also fine, but both of these options prevent the layout from being elastic in Internet Explorer (any version). So, when it became apparent that no Javascript wizard that I knew had a solution for this, I simply dropped the elasticity for IE.
The columns on this site are all faux columns, a technique by Dan Cederholm. These are, however, elastic faux columns, using a technique for the elasticity that I designed myself. The technique requires a max-width, but it works great! I will do a proper, complete write-up about it in the near future, because this is neither the time nor place for that.
Something that's not quite as eye-catching as the animations, but nonetheless quite a big thing for me, is the Fontsize tool in the top right corner of the page. It allows any user (including Internet Explorer users) to increase their font size up to any size they want. Moreover, it comes with built-in Zoom Layout support. Zoom Layouts are popularized by Joe Clark and offer visually impaired users a large font, high contrast version of the site. On my site, I decided to offer them a theme of their own, rather than only increase the font size and change contrast.
Fontsize is, like FACE now is, a result of Tim Hofman's Javascript wizardry.
Lastly, the subscriptions to the site have also been changed. I no longer offer full posts, but all of the five primary areas of the site now come with their own RSS and Atom feeds. They all contain only the introduction, no more than that.
What's next?
I have absolutely way too many things to write articles about, now, but some of the first few will be explanations / tutorials on how I created my header images, as well as some articles on the animations and Fontsize.
Besides that, I will finally start promoting my own company now, as I am now a Design and Web Consultant for hire. It's time to create business cards, approach contacts for leads and put presentations together. Many things are going to happen in the coming months!
Drawing to an end, I must say that those past six months wherein I've created this site have been long, tiring, vastly overwhelming (for a "mere site", this has been quite an undertaking) but above all, very exciting. And right now, I'm just seriously excited about finally putting this live and letting the world respond to it.
In the truly closing words, I want to thank everyone who helped me with this site, whether it has been testing, critiqueing or just being supportive whenever I was feeling down from all the work. And to everyone: enjoy the site!
- The "internet Buzz" in regards to V8:
- Hayo Bethlehem interviewed me
- KuraFire: Fresh New Fire (Halley's Comment)
- *poof* Tada! (Sjors Rijsdam)
- 2006 predictions (Joshuaink)
- JavaScript animations (Robert Nyman)
- FACE, by 456BereaStreet (Roger Johansson)
- KuraFire Network has FACE (ThatStandardsGuy)
- FACE, by Mezzoblue (Dave Shea)
- December Randoms (Mike Davidson)
- Flash May Be Losing FACE (J. Richmonds)
- About FACE (Daniel Mall)
- Small buzz:
- Molly E. Holzschlag
- Jon Hicks
- Andy Budd
- Mozilla Webwatch
- CSS Beauty
- Stylegala
Written something about V8, FACE or Fontsize? Let me know and I'll add you to this list.
Update: Fontsize currently isn't saving your changes to other pages; this is a problem that we're aware of, and are looking into. We apologize for the inconvenience, please bear with us while we sort this out.
Bookmark: 
Newsvine 
del.icio.us 
Digg
Comments
Subscribe: atom, rss, ..what are feeds?
Archives
- Popular Posts
- Starting with CSS: revisited
- IE7 beta 1 release
- Starting with CSS-based design
- Debunking the price myth: Apple vs. Dell
- Typography: serif vs. sans-serif
- Accessibility Rules & Tips #1: simple steps to make your website more accessible
- Review: System of a Down - Hypnotize
- Announcing: Happy Clog!
- AJAX and Accessibility
- Introducing V8
- Recent Posts
- Times are changing
- A change in direction
- CSS hacks: useful, evil or …laziness?
- Updates on the web
- Pink for October
- Flickrlicious Screensavers with iPhoto 6
- On FACE updates and getting published
- Great speakers I admire
- A new passion
- Standards-senses tingling?
FlickrFire
All times are in CET. It is now 19:44.
Looking good Faruk!
Well done, Faruk! This you can call a real realign!
Very nice indeed. I particularly like the wobble on rollover of the happy clog site pics. Had me giggling away.
Wow, what fun! You didn't specifically ask for any critiques, but I thought I'd add my two cents anyway.
*First off, nice Flickr countdown tease.
*I guess the asterisks in the comment area mean that these are required fields.
*Does the archive go back any further than September?
*Are font sizes and themes supposed to be persistent across pages? They're not on my FF1.5/IE6 WinXP/Win2K.
*FACE and Snelsite are most impressive. You have indeed been busy!
*Why "about" and "more"? Just combine to one big "about".
*Can you comment on the security and design of your contact form? I haven't been able to find any simple tutorials anywhere to help me make my own. Also, out of curiousity, what's your image editor of choice?
Most excellent, milord.
Wow. Great work.
I'm really impressed by FACE. I started programming a CSS-powered animation script some weeks ago as well, but it is by far not as flexible as yours. Thumbs up.
Tom: it's both a realign and a redesign!
JJ:
Ah, I forgot to change the name to Log posts - thanks for reminding me! The actual archives link is in the side bar on every Log page.
Also, could you elaborate on the font sizes and themes not being persistent? In what way?
About my contact form, you should really use it to get in touch with me ;)
I use Photoshop CS 2 for everything.
Great site, Faruk! Also nice to see that our FACE creation really became what we hoped :). Too bad we stripped out the sepukku function :( ;).
Flash is history, FACE the future!
Finally!
I've been waiting for this since the sneak peaks.... always showing me and then taking it away before I could touch -_-
Sleek! You've done a marvelous job Faruk. I love the way you've used web standards and gone a step further by pioneering FACE.
WOW! Very nice work! I really like V8 of your site.
At the first look it reminds me a bit of Stopdesign, but having a look at it this is a great site with your very personal touch.
I look forward exploring the site and the techniques you use.
I also have to mention problems with the persistence of the fontsize tool and zoom layout. After going to another page the default settings are applied again!
The Reset Font Size button is not working at all for me (browswer version Mozilla 1.7.12) Also, it would be nice if it would actually remember the font size settings you choose. If I want to size it up 2 clicks for one part of the site, I'd like it to stay that way for the rest. Having to re-do it each time is rather annoying.
*browser
Incidentally, making it necessary to re-preview after you fix something in order to make an edit stay the same is also really annoying. I fixed that typo, but it apparently didn't stick because I didn't "re-preview." That is highly inconvenient and counterintuitive.
Looking great Faruk. I'm loving FACE. Can't wait to introduce you to my labor of love sometime after the holidays.
Wow, quite a lot of change at once indeed!
When I first saw the new design I was struck with its similarity to Stopdesign. The similarity in the header images, header font choice, diagonal lines, corner shadow effects on certain links, and the seperate design skins for each section, along with various other more subtle things. I'm surprised only one person has mentioned it. Nonetheless, it is a very nice change, and its definitely apparent that a massive amount of work went into constructing the new design.
The FACE effects are nice eyecandy, yes, although I haven't really fallen in love with them. I think you have even overused them a bit, the home page background fade-in and arrow movement just makes the page seem too busy with both effects at the same time.
Anyway, nice job on the redesign and good luck.
Yeah. When I first saw this I thought of Stopdesign too.
And, er, I still do...
Congrats Faruk, nice work! Gotta say that the font in the textarea when writing this is hideous, though... :-)
Regarding IE and elasticity: it can easily be accomplised through script, or expressions in the CSS for IE users, like this:
div#container{
width: 800px;
width: expression(document.body.clientWidth > 910? "900px" : document.body.clientWidth < 770? "760px" : "auto");
}
Just a simple example, where the width will be 800 pixels for users that have scripts disabled.
We've already talked about FACE over IM, so you got some fast feedback there. :-)
Good luck with everything!
Dylan: Stopdesign is exactly what I thought when I saw the new design, because of the header images, top navigation areas, subtle stripy background color, faux-column and footer. But I appreciate it for inspiration.
I know what's involved in an overhaul, redesign, realign or whatever, and it's a mammoth task. Nice to get it out after a 6 month time frame.
FACE worries me, quite a lot in fact. Although it's concept seems really good, the way it's been achieved is nice and it's separation is great. I don't see it as a step forward. In fact, I see it as a step back. You may say it's forward because it's unobtrusive and separated, but I think it's just going to make it easier for casual-personal developers to ruin the web, like the way JavaScript was used in the 90s.
It's like the sort of effects you get if you search Google for "JavaScript funky cool". Taken the first 20 fades/movements found, cleaned up the JS and made it incredibly easy to implement. I can see this being used for incredibly bad things. Sorry.
Also, on a similar note, it would be nice if it only showed the effect once per session or something, everytime I refresh I get distracted by that side bar movement.
I see your point. It's indeed possible to use FACE the wrong way and create all kind of annoying things. We were aware of that whilst developing the first beta.
On the other hand: you can do a lot of good things with FACE. I'm pretty sure that combining S5 with FACE can make a presentation way more attractive.
There will always be developers, or others, who will use things in a bad way. I don't think we must limit ourselfes because of those kind of developers. It would be a shame to not release FACE and to not give developers like you and me an easy way to give a static something extra.
Trovster,
If FACE worries you, then here's some thoughts:
- Flash has been around and is currently very easy to make animations with that can be infinitely more annoying than your average FACE animation.
- FACE doesn't really work on table layouts, as it's powered by CSS and sort-of requires a very clean, semantically rich markup to work well on. People who know their CSS well enough to use FACE generally also know not to ruin the Web; in fact, they're the type of people who really didn't like the old web and are now the ones promoting the new standards. Why would they suddenly drop in the habit of destroying all that they've fought for? I don't see it happen.
Sure, there will be people taking it too far (like I have in some of my pages, but this site serves as a showcase, so it's just kind of necessary) but we're going to advocate nice, subtle use.
Very nice redesign. Beautiful. My 2c about Face: Of course it can be overused. But I don't think that's a valid argument against it. That's the same as saying: don't use any pink or purple in your color-scheme, otherwise some people will start making all-pink sites. Uhh yeah.
And I'm definately looking forward to reading more about the way you handled things with the redesign.
ps. one minor thing: it would be good to know if the e-mail address I fill in here is shown or not. A small notice saying "e-mail address are never shown" would be reassuring. That's something that's missing in a lot of weblogs.
Thanks for the tip, Matthijs. Most blogs assume you know that most blogs don't publish e-mail addresses, and I guess that up till now, I fell in with that crowd.
Some little issues are improved now.
Faruk, glad the suggestion is received well and already implemented! It's true that most blogs don't publish emailaddresses. And normally I'm willing to leave a valid emailaddress in case the author would like to contact me. (you have mine now) However, sometimes the emailaddress does show up, and that's really annoying.
Anyway, keep up the great work. And thanks for the demo of FACE. Normally I hate moving flash sites or animations. But as much as I've seen now, with Face it's possible to implement small, unobtrusive effects, no plugins needed. I noticed that without Js enabled everything degrades beautiful to normal images. Very nice.
That's been our goal, basically. To add richness and interactivity to sites without need for plugins and without being obtrusive. I feel we succeeded, and I'm very glad to see others think so, too.
Oh man, I REALLY love your new design, and the little animations work for me :-)
Congratulations on an idea beautifully rendered a reality!
Hello Faruk
The new redesign is really nice: you've done a great job, and I can smell the great amount of hours you've got to have put into making it look good. I also had a flashback of stop design, but as far as that goes, I think you've developed the concept by at least a factor of three. It's truly a place to show off your scripting and styling knowledge. The animations look great.
I was wondering - have you done the blog engine by yourself as well, or is it something already finished?
Now I've got all these nice ideas about how to improve my own site, but not the time ;).
Henrik,
The engine that powers this website is something I've largely created all by myself, yes. It's a business-level CMS, which is more than flexible enough to double as a blog tool.
Congrats on all your hard work and launching so many themes with it.Any idea on when the Font size will be fixed?
Hopefully it will be fixed by tuesday, maybe earlier, maybe later. It's hard to say: it works on our own test pages, but not here. There are no Javascript errors to work with, however…
Thanks :-)
The blog looks great BUT I can't see the animations! I'm viewing from FF v 1.5.
Have I unintentionally disabled the animations?
great greater faruk-Style. 1 hit in your FACE!
@Jeremy
I'm also viewing the page with FF 1.5 without experiencing any problems. Javascript ain't disabled?
Amazing graphics.
@Tim
I don't think it is! Maybe the animations are very subtle that I don't really notice it! I can't see the animations in IE either?
@Jeremy
the animation on this page is indeed subtle. maybe you already did so, but if not, go here to see more examples:
http://kurafire.net/projects/face
Nice FACE ;-)
I am thinking now on implementing some subtle effects using FACE on unordered list (nav menu) in rock band website:)
And your website: nice design (a lot of work:)!
Yes, I can see some similarity with StopDesign, but that's very distant likeness;-)
Greetings and keep up the good work:)
Michel
Design wise I find it to be too much of a clone of Stopdesign to be honest. That did put me off quite a bit as it feels more of a clone than it feels inspired.
However, with that said, it is a great improvement to the previous design. A much more friendly information architecture. So, thumbs up from me.
Very nice work here, Faruk. For the ppl commenting about your similarities with other sites (StopDesign, et al), you can at least consider yourself in good company.
As for me, I'm looking forward to your notes on the design and creation of your header images and css.
Cheers! </bd>