Kai Chan Vong's blog Head to my Tumblr site

I’ve released 2 scripts which aren’t amazing but they’re the start of what can be really useful.

They can be found:- http://www.kaivong.com/scripts/

The first is a css diagnostic trick which looks if images are missing alt tags, inline styling is present and so fourth.  I recommend you use this with Stylish (a Firefox plugin), but you’ll have to tweak it a bit to do that.

Second off is a javaScript domain look up aid.  It simply looks what domain you’re at and then spits it into the top of the rendered page.  When you click it, it disappears.  The colour could be nicer… but it’s just to grab your eye for the time being.  You could use this with GreaseMonkey if you wanna be really cool!

They’re both first drafts so please no “omg n00b script.”  Some friends asked me to share it and so I am.  Because sharing is caring.

Back in the good ol’ days of uni, I used to find time to spout out lots of thoughts and ideas into blogs and get challenged by the wonderful people of SoGamed.com, ESReality.com and even on Shroet.com.  These days, I’m constantly battling the poor implementation of the DOM on various browsers.  When I say battling, I mean there are magical lame bugs (hasLayout), random invisible variables of no obvious reason and then the differing of standards from one to another.  Oh and just to point it’s not just me, Mozilla in a recent blog had to use 4 hacks (that’s right… one of the corps. that develop browsers) to get a single property to have the right outcome in 4 rogue browsers.  Lame huh?

But that isn’t it, it’s not just browsers that suck, it tends to be so much stuff.  Which got me thinking that we just expect everything to be right, it’s in our human nature.  Well actually it’s not in our nature, we simply don’t consider that things which are man made are so much more flawed than outside of that realm.

Having seen the recession hit the world today we’re just such naive creatures often using ignorance as bliss or not collaborating properly and believing our way is the right way.  You just have to look at two programming languages such as JavaScript and CSS… which both arrogantly ignored their crossover and each used their own terminology for the same word:- Background-color and BgColor.  It gets worse when you add Microsoft into the mix too for JavaScript and CSS.

To sum this up… it’s late and I’m tired and this is an excuse to blog about something I consider important ;).  We need to stop having this riduciously naive perspective on life that we know best.  Because in the end, collaberation will be the key.  As designers, developers or anything in our life we need to look out from our small little box to things like TED, such as: conferences, meetups, talks and blogs more than ever.  It’s something that’s far bigger than just you or I.  It’s us.

Today I’m back at work in Justgiving, que moment of insomnia (it’s 0:30am).  This is partly down to my own silly fault of becoming so nocturnal these past few months.

But thinking about work and all this vaction period I’ve spent has been relaxing watching TV shows and one sprang to mind as I was watching it to be a real eye opener.  There aren’t many tv shows that show such a diverse group of acting, storyline, good, bad, ugly and confused.  In it there are three goups - the enemy, the army and the president & the normal people (okay so that was kind of 4).

So whilst the enemy is out there trying to debate which is the right course of action, kill or live in harmony they begin to rip themselves apart and thus factions break off to rebel against them and offer some kind of unholy alliance.  Hopefully your career doesn’t involve robots learning to trust in god and deal with emotions but if it does… damn I’m good.

Now back to where you fit in.  The real eye opener was that amongst the army and the people there were some arguments with one side being right, another wrong and then plain unfixable.  This got me thinking, an army is kind of like your development team (dear god I hope have one else TV wont save your job)… they’re pretty hard as nails and they go in fighting right?  Your president is the CEO and the people are marketing, community focus etc - all the other people in the company.  This analogy could stem to other things so try as ever and be open and creative in your mind.

If you’ve never seen Battlestar Galactica then you probably need to read a synopsis… but the overall thing to think about is that as a viewer you can understand everyone’s point of view.  So now my question to you out there who think you know what’s best for your company is this… do you honestly have a full understanding of the picture?  ‘Cos there’s a lot of blog posts and people in the world commenting about developers not being good enough and this and that.  At the end of the day will we always have developers who want to spend every waking hour thinking about code?  Maybe not.  Will they work hard for us and will we sometimes thing the worst of them for the wrong reason?  Maybe.

So there you have it… watch Battlestar Galactica or ask someone about it.

CSS3 is exciting, fun and pure exciting.  Yet, every time I used to see it I would say to myself, “What about Internet Explorer?  The majority of the market use IE6 and will continue to.”

However, I’ve started veer from that opinion.  If you’re confident about your user base being a solid geeky niche then focus purely for tomorrow.  Go all out with the Xpath style selectors, don’t worry or bother about that small percentage of users who run on IE.  But make sure you’re using analytics software to determine and discover it, not alone on gut feeling.

For sites that have an IE base be intelligent and imagine how things will be affected (progressive enhancement).  My rule of thumb is this, does it break the following (in order of most important):-

• navigation
• layout
• experience

If not, then brilliant go with it.

Corners in IE are a great example of developing for the future, Gecko browsers like Firefox, Safari, Chrome will display them as curved using CSS3 moz & webkit corners.  As professionals we need to find a balance and think of the future.  It’ll cost us more money to remove that extra markup in the future.  It’ll also be faster to scale and reuse with CSS code rather than markup.

That’s all very well but why is this so?  Well years ago Internet Browsers were built and they were designed to render pages almost as word documents but to be available on the web.  We’ve come a long way but there still areas of browser style rendering which fully correct and corners are one of them.  Injecting mark-up (eg. div tags to display corners) to style a page is not appropriate for commercial styling, just in the same way that F1 motor cars get their sponsor logos sprayed rather than doing DIY work with a sticker on the car.  Why?  Because you’re doing it properly and making sure it’ll last and can be changed over properly.

Well… as designers it’s really easy to fall into perfect on visual looks.  However if you start to take programmer seriously too, you’ll begin to love visual semantic code.  Where everything looks beautiful and there is a reason for every back-slash, chevron and semi-colon.  In the same way that every mark on a painting is.

Being a web designer has changed and will continue to change in the coming years… we’ve seen an industry not entirely sure what to do with these art-farty types for some time and I honestly don’t believe the situation has changed nor will change for a long while.

Designing for the web is something so different and unique to print, we work with living and breathing content is something that is totally out of our control. Yet I see working with markup (XHTML… the same as HTML, but without the hippy attitude) being something so neglected for a long time. The problem lies with the current mainstream sites which lots of people will continue to learn from. Amazon.com is a huge example where lots of people could go wrong.

Perhaps it’s down to hiring people and not having a full understanding/appreciation of how skill is involved in design/development or maybe the size of the team restricts being able to use a wide diversity of skills. Either way, the cost in the long run can be reduced we do things right first time around…

When I started out as a web designer I pounded away at both design and development with little appreciation for either. It came down luck and repetition that I became okay. Oh and a keen appreciation for art, comics, icons and layout.

Web design/development falls into the following categories prior to deployment:

1. Understanding - Discover your goals and focus: what are you trying to achieve?
2. Interaction - Via clicks + pages: How will your user reach their goal?
3. Experience - Review the above with peers/refresh and see areas are weak / can sparkle
4. Visualisation - Sketch & then render your master piece
5. Markup/SEO/Accessibility - Think about how your page will look without styling
6. Styling - begin the fun of transforming a word document to a Mona Lisa

Problems will rise if not everyone starts at phase 1 and works through the steps from their own point of view, with everyone having different opinions on what is the key focus/goal and it will change.

Visualisation could go a bit in it’s own direction, and SEO/accessibility will be invisible to everyone but the front-end developer and the other people with this 6th sense.

That’s not neccisarily a bad thing and could be seen as just a different way of working. Everyone having their own belief and then meeting in the middle.

So glad I got back in time to watch Match of the Day (football summary tv show) yesterday night after some fun with the family.  Robbie Keane is an absolute legend of a football player and I’m glad he’s putting his critics to shame.

I’ve been off work now for around 2 weeks now (I’m losing track what day it is) and it’s been so great to finally have time off.  A few months ago we were all expecting to be pulling all the stops to complete our current project.  I was told by someone, that regardless of what happens in life, that you should look at the experience and be grateful for.  An almost kind of, ride the roller coaster kind of philosophy.  I don’t fully agree with that perspective on life… it’s all well and good letting things happen around you and grinning with a naive look some of the time, but sometimes you have to pull all the stops to change what’s happening around you to improve things. As a very wise Jedi once said, “Do or do not.  There is no try.”

Lately I’ve been wondering what should blog about or should I even blog at all?  I could express my opinions on design, front-end development and the web/semantics all the time, but I’m still at a young stage in my career to make that the soul of this blog.  Plus there are other great bloggers who do that.

I could talk about my life outside of work, which at the moment is non-existent.  It’s normally the odd drink with friends, socialising or travelling from work whilst doing research and reading about stuff for work.  Which brings me on to how scared I am to write down my thoughts… because… I don’t actually want to hurt people’s feelings by getting things wrong or saying the wrong thing.  Which leads me on to bloggers under aliases, I could never do that.  I just think if I’m going to say something, I say it and apologise later if at all.

In the past I blogged to express my silly side, being interested in people’s reactions and as release of my thoughts.  Truth is, I didn’t care and I still don’t care what people know, but I do hate opinions.  Opinions can brood from misunderstandings, poor communication and result in the de-humanising individuals to the point that you don’t value them as people.  It happens lots in the media and turns into a form of entertainment that stems back to the time when kids picked on other kids.  Sucked then, sucks now.

So here I am… putting all my critics to shame.  I’m just me, I’m a young designer who loves the web, design, front-end developing and how things work (You, code and the future).  It might take me a bit of time, but eventually this blog will be something more… than just ramblings.

Oh and sushi.  Don’t forget the sushi.

It’s now been a year since I moved up in my company to be given the freedom to breathe more air into the design, markup and CSS  of where I work - Justgiving.com.  Before then learning about semantics, css and markup day to day wasn’t within my grasp… I’d be working on client sites and just smashing them out, leaving the sites in my wake to be retaining their original table structure (which is now 5 years old - Just Tables est. 2003).

So why is it so important to move away from tables for layout?

• Tables are layout through markup, yet CSS is layout through stylesheets (we can have 20 different stylesheets - yet they’ll only ever be the need for 1 form of markup)
• It’s bad for SEO / Accessibility / data and info spiders (A layout should not determine the priority of which content should be displayed first)
• Maintaining the markup is much like minesweeper on expert

During this week, I gave my first talk the other day to explain to some of the other designers the fundamentals of markup, css and why it’s important for all of us to have a grasp.  Which was fantastic… and we’ll be doing the same with some of the developers in the coming week also.

HTML as we know it, was never built in mind to display information as art or graphic design, if you went back and told a bunch of geeks in the 80’s we would be using amazing layouts the looked like magazines spread out wide and interactive they would probably have pictured some form of ASCII art.  What we now have is a quickly adapted language that is being pushed into doing something pretty awesome.

CSS Zen Garden is a great example of how sites should markup - this form of markup is essentially the way that browsers were designed to render text… and tables were the first evolution of hacking a page to make it look how you want it to.  Even today some sites still use tables… and the worrying thing is that so many people are going out into the industry without a real grasp of why things are the way they are.

Information being so easily and well packaged when written up is important so that in the future it will adapt quickly and easily to whatever medium or shape or form this maybe.  It could be for a blind user - listening to text, a web spider crawling for data and turning it in for search, data mining etc.  It’s important we take care with markup and enable it to be shared in the best fashion!

During my years at college and university, there never seemed to be designers who were passionate about front-end side of design.  And always more inclined  to the technical side of things (hardware/software as a systems admin) or over the top excited about graphic design/art (Flash).  Don’t get me wrong… I’ve gained a lot of understanding through both skill sets - it allows me to grasp the number of servers we use in our company and have a really strong grasp of different job roles.

Recently, we I got to chat to some of the guys over at Pentagram, Clearleft, Folk and a few other agencies and it got me to realize that all these designers are amazing at what they do… but we have this divider graphic designers and front-end designer being worlds apart.  In time I hope this will change more and more.  I’ve been lucky enough to be paired up with a super graphic designer (William Colley) and we’re working outside of Justgiving on a small freelance company called Volley (Vong and Colley), helping people out and trying to learn even more.

So we all need to understand the vehicle that transforms and renders pages into what they are now (in my case the DOM).  Because with this understanding, you’ll know the easiest and  most cost effective way design/developing awesome sites at low cost.

Whilst Flash is great for animating movies and games… whole sites in Flash are overkill.  Lots of graphic designers use it because it’s the easiest and quickest way for them to do WYSIWYG design, but then they need to learn and understand action script.  So why not just HTML, CSS and Javascript in the first place?  If need be, drop in a CMS and it’ll help you with the rest.

Lots of people think that working in markup and CSS is difficult due to the number of  different types of browsers.  But that isn’t the problem, the actual problem is that some of those browsers interpret atrributes and variables of markup (one fix to help is Eric Meyer’s CSS reset - understanding it is really a good idea) and the overall physics.

I’ve gotten to the point where lots of stuff makes sense if you try to understand it, one example with IE6 was that I couldn’t set a height on a position absolute element… there reason being was that I was trying to implement a 4px high border corner, but it was still rendering out as 12px no matter what I tried.  Then it dawned on me that IE6 was catering for the event of text being put inside that element.  So… changing the font-size to 4px or less solved the issue.

This isn’t always the case, but I really believe it’s important to try and understand things rather than just blaming someone else’s inefficiency to do something.  Looking outside of the box and trying to comprehend something is always far better in the long run!

So that’s my tip for the day, try to understand browsers and play about with them more.

PS.  I really hate minesweeper markup!

Around 8 months ago we started working agile.  When I say we worked agile, it was more of a buzzword that didn’t really mean anything to any of us.  The idea of agile is that you work faster and get things in a short space of time.  However the interpretations of it are varied and sometimes conflict with one another.  Being agile and practising agile are two different things in my opinion.

We could compare it to the marketing firms that heard twitter was great for marketing and PR.  20,000 followers and 500 updates in the space of 3 hours.  They’re practising using a new form of social marketing, but they don’t understand it.  Which to me is pretty hilarious.  There isn’t anything to understand in this new age, it’s pretty simple.  Be true and be honest.

Firms will start to pick up on true and honest in months to come and hopefully, rather than trying to fake it - they’ll employ people who simply practice it.  Because we all know what happens to people who aren’t really true and honest.  Think Have I got News for You and you’ll recall the demise of Charles Kennedy and possibly next Borris Johnson?

So what does agile mean to me?  Well after watching the movie Waltz with Bashir, I decided that agile is simply knowing what is going on around you, being fairly adaptable and being proactive rather than reactive. The movie made me realise that waterfall stems back to generations of people going to war without consideration of the bigger picture.  If we all rely just on one individual, then the chances of failure will be far greater.  Relying on an individual to know everything is just plain stupid.

Agile should be about just doing it and not being afraid of failure.  Agile should be about it being done, because you’ve asked the right questions to various people within and outside of your team.  You see the bigger picture and the pitfall.  I keep hearing the words of waterfall being totally dead, but I don’t believe that.  Because we cant be experts in every area and it needs a combination of the two.  Experts and jack of all trades to unite the loose ends.

Most of all, you absolutely, must positively love what you do. Now watch this.

So simple is the Nintendo Wii that they’ve totally out done all their rivals.  Why is this?  Well look at the design of the Xbox 360’s user interface and think about the learning curve required in comparison.  With 5 things along the X axis and another 5 on the Y, even just describing it to you is painful.

Now compare this to the Wii on the right with it’s great interaction design.  It’s so stupidly simply yet acheiving the same thing.  My dad, mom, grandma and grandpa could easily use the Wii yet if I passed them the Xbox 360, not to mention the controller and it’s 8 different buttons.  This doesn’t include the other three controller sticks for you to twiddle if you’re inhuman!

I’ve lately been reading tons of blogs and talking to other designers on their opinions on improving interaction design.  One of the common opinions is that design in websites is so bad because developers have been the ones primarily pushing sites out the door.

And this isn’t all…itt seems that in general we’re surrounded by really bad habbits of web design… just look at Amazon’s homepage.  It’s super intimidating.  Yet we use it becuase we have nothing better, the prices are good and the delivery is outstanding.  Watching on the BBC a UK designer helping to redesign clothes shops around the UK really made me think more about how bad web design is and should improve.  On a side note I just realised that I used to watch the Clothes Show as a child.  I’m sure I was waiting for some other TV programme after it

Some people have started cottoning on to simple design and how it will improve your ROI.  Others continue to pour out a complicated layout that will baffel people.  But I have hope… and here is why.

When I was watching my little cousin using the iPhone I figured he is learning how to be amazingly kick ass at understanding it’s mechanics from a young age and with poor design and awful layouts, things like GreaseMonkey and Firefox have ways to fix awful design.  Look how popular the gMail redesign plug in for firefox is.  So as we design badly, the future will simply be able to remold our rubbish into ways that are awesome.

We’ve just now got about 20 years to wait before we get good design, browser compatibility and our rocket fueled jet packs.  Mind you, by then we’ll use the net with telepathically with Web 9.0

Ever sat at your desk and wondered where you’d left that ruler?  A couple of minutes later you find someone had borrowed it and not told you.  The first time it happens is slightly annoying.  Then the second and third time you begin to get peeved off.

“Gosh darn it!  Why can’t it just have be put back so that when I need to use it I don’t have to go looking for it?”
to
Well that’s how change can be and it’s not a nice experience. However, if the void where what you were looking for is filled with a little dinky note saying, “Hey… hope you don’t mind but I took your ruler for a project. Jessica. x.”

This can result in a user experience of to
Oh and Jessica doesn’t exist, so don’t go asking me for photos. On a serious note, this theory accounts for many different situation and it sure as hell isn’t rocket science.  If you’re changing a site that people use or have used before… coming back to something different sucks.  This week I joined a forum and wanted to add a signature to all my posts.  After 5 minutes, I couldn’t find the option anywhere.  All because, by default a new user doesn’t have permissions to create one, let alone edit it.   That sucked and I lost about 5 minutes of my life to it.

My user experience went from :)  to
Change also happens at work and with your job and it’s role and relation to other roles.  When someone starts doing something similar to you, it’s easy to become defensive or frustrated.  With that change you have to start to learn differently and it slows you down or stifles you a bit.  Maybe you’re the object that was there on the desk and now you’re not. Perhaps you start to wonder you should give the ruler up and move desks… and do people not really value your use with the ruler?

So yeah, change sucks and yet it’s inevitable, but that’s why if we’re a catalyst in that change, we need to help ease the pain and make it a transition.  This way, the experience of that change is not going to be like a sharp and quick blow to the face with a sledge hammer.

From to to %(

As people, we simply need to communicate better, making that change transitional wherever possible and improving it all round.  And yes I did just create an emoticon which has been hit in the face.