Koodoz Design is chuffed to have been nominated for Australia’s biggest Web Design Industry award – The 2011 Australian Web Awards for best eCommerce Website.

After submitting the Camp Luxe website earlier this year, we were recently notified that our submission was selected in the top three Australian websites for the eCommerce category. A very exciting bit of news for the crew at Koodoz!

Sadly, we didn’t win take home the prize this year – which went to Ambrosia Candles – but we’ll definitely be giving it another crack in 2012!

A big thanks to AWIA, the judging panel and the sponsors for organising a great night and to all the other finalists for their contribution in making the web a better place!

What time of the year is it? Khristmas time!

As some of you may know, we recently relocated Koodoz HQ to the design hub of Richmond, Melbourne. Since settling in to the new office we’ve found ourselves flourishing in this incredible creative environment.

We love the energy of this great little area! Not only are we surrounded by like-minded creative types and boutique industries, but we also have a plethora of excellent eateries and coffee houses at our disposal for our morning caffeine hit. Yes, we have become self-confessed coffee snobs.

Speaking of coffee…

What better way to celebrate our ‘caw-fee’ snobbery then to spread our red-hot-love for the quintessential morning pick-me-up with a cafe style, environmentally friendly, re-usable coffee cup from Hookturn Industries. Like us, Hookturn Industries is a local company celebrating all things Melbourne and are committed to a sustainable future. To complement the festively red coffee cups, we also popped in a bag of freshly roasted Sensory Lab coffee from Melbourne’s coffee institution, St. ALi.

I think it’s fairly safe to say we’ve raised the bar (again) on our Christmas gift giving tradition :)

And finally, some housekeeping

We’ll be finishing up for the year at noon, Tuesday 21 December for a bit of R + R before re-opening on Monday 4 January.

Next year is going to be a big year for us. First on the agenda – world domination in the iPhone app development market!

Merry Christmas to you, your colleagues and your family from all of us here at team Koodoz.

See you all in 2011!

On the social…

Love it, hate it or have no clue about it, Social Media is well and truly got its claws into the backbone of the internet. Buzz words like Web 2.0 and Social Networking are now common speak for internet folk, and sites such as Facebook and Twitter are as much as household names as Hoover and Kleenex.

And it seems as though it’s here to stay. Even the naysayers, who at one time suggested that these social sites were just a fad, would have to admit that social media is still going strong and is even on the increase.

Socialholicism

Just looking at a few figures, it’s easy to understand why social media and its integration into website development is as important now to web designers as closing HTML tags. Lets take a look:

Facebook, the worlds largest social networking site has over 9 million users in Australia alone (source: Facebook Dec 2009), that’s not far from being half the population of the country. It’s even more mind-blowing when you look at the global user base of over 400 million active users as of June 2010, Crikey! Even my Dad is on Facebook!

Twitter has over 105 million users, with 1.6 million in Australia (source: Twitter April 2010). So it’s not just Facebook that’s pulling in the big numbers.

Considering 72.9% of Australian adults are active internet users (Universal McCann) and 3 out of 4 of them are members of social networking sites (Forrester Research) it’s easy to see why, according to Social Media News, Australia has one of the highest uptakes of social media in the world.

More popular than email

You may find it surprising that social networks and blogs are now more popular than email (Nielsen), but thinking about it, I can’t remember the last time I used email to get in touch with a friend, I always use Facebook.

And just take a look at how social media has been incorporated into the mainstream. Most days on the train, I (rather shamefully) have a quick browse of the celebrity gossip section of MX, which features a round of of the most interesting celebrity Twitter posts.

News broadcasts incorporate Tweets, posts on their website and information shared on Facebook into their stories to capture the public’s opinion and response to the big issues, and controversial blogs, tweets and comments are consistently making news stories. Need I mention, ahem, Perez Hilton’s blog (Hmm in that case social media wasn’t such a good idea).

You can also take note of the way in which social networkers are ’socialising’, it’s not just on the good old fashioned PC. I can’t tell you how many times a day I see someone checking their Facebook, MySpace or Twitter profile on their iPhone or Blackberry on the train, or how many ad’s I see with specialised ‘Social Networking’ phone and mobile broadband plans.

A web designers prerogative

So what does this mean for web designers? You might find it surprising that some folk in the web design world are among the most skeptical and unforgiving of sites like Facebook. When I’ve talked to other web designers some seem a little reluctant to fully embrace social media themselves, whereas some are fully integrated web socialites. And on the whole, most of us are a right old bunch of bloggers.

However, considering all the above, I think there is one thing that all web designers can agree on; Social Media is big business, and you’d be a fool not to take it seriously and include it in your services.

Social media marketing is now being taken very seriously by the big companies. McDonalds, RaboBank, Telstra and CocaCola (to name a few) all have “Social Media Strategies”. Companies are even employing “Social Media Strategists“, a position that didn’t exist 5 years ago (probably even less).

This means that more and more clients are noticing Social Media and how it can really effect their marketing. If some smaller business are a little slower at jumping on the band wagon, it’s becoming necessary to inform them of it’s importance and how you can harness social media to their advantage.

So as web designers and web design companies, I think we can all safely say how pressing it is to ‘do social media’, and more importantly, that we know how to do it the right way, and the most effective way for a business to benefit from it. But perhaps that’s an issue for another post …

Anyway, I think we should all switch to FriendFace.

Another arrow for the web designers quiver…

The @font-face CSS property is a relatively new kid on the block, and it’s supported by all the major browsers, even IE7! All in all it’s a fantastic tool for web designers to embed fonts into their websites, and it out-does the aging methods of image replacement and sFIR Flash Replacement.

Even though it’s not that new, it looks like there’s still a teething problem or two out there.

Computer says no…

We stumbled upon such a problem when recently implementing @font-face across the whole Koodoz site. We’d started using it for a few of our recent websites and it’s been working perfectly, but for some weird reason, on the Koodoz site it just wouldn’t work with Firefox, although it worked perfectly in Safari and Chrome. Strange huh?

Debugging

So thus began the process of stripping the entire site piece by piece down to core, until the whole site consisted of just one title, the typography CSS and the font itself. And still it didn’t work! The code was fine, there was nothing that could be clashing, inheriting or over-riding, and we’d tried many fonts – including the ones that were already working perfectly in our other sites.

A simple solution – aren’t they always?

In the end it turned out to be a very simple path issue. The stylesheet ‘typography.css’, was being included in the header, using the WordPress global array to place the URL dynamically, like this:

href="<?php echo get_bloginfo('template_directory').'/style/css'?>"

We use this for everything on WordPress, but for some strange reason Firefox didn’t like it when we were using it to include any CSS where the @font-face property was being used. Oh Firefox, you’re usually so good to us!

So to remedy this problem, we needed to hard code the exact URL of the style sheet. So instead it looked something like this:

href="http://koodoz.com.au/exact/path/to/css/files/typography.css"

Cleaning up

It worked. But it’s not pretty, and it’s certainly not practical in such a large website. So we russelled up a good old fashioned PHP constant in the main PHP configuration file to place this in dynamically for us.

Here’s an example of the constant:

define('PATHNAME', '/path/to/css');

And here it is in action:

href="<?php echo PATHNAME ?>/typography.css"

Ah, that’s better.

Update

A quick update on this problem! As Daniel pointed out, the issue is caused by a possible security feature in Firefox that prevents the font from being implemented when being called from an absolute URL. For example, Firefox didn’t like it when we were calling the font from the WordPress get_bloginfo constant because it spits out the absolute URL (including the http://www….), possibly causing Firefox to think that the font is being stolen. Therefore, the new constant that we defined (PATHNAME) worked just fine because it doesn’t include the full URL.

Via Digg, I recently found a magazine scan from Wired Magazine that arranged corporate logos (I’m guessing from Fortune 500 companies) by their dominant colours. Unsurprisingly, a visible majority of those logos are blue. I’ve been wondering why people seem to like blue so much. Think about it: most operating systems are dominantly blue by default (bad ubuntu!). Heck, even denim jeans — western society’s greatest achievement — are predominantly blue!

Now I think I know why we tend to like blue so much: it’s because we’re really bad at it. Allow me to explain…

Human beings are equipped with three types of cone cells that perceive colour: (S)hort, (M)edium and (L)ong, each roughly coinciding with blue, green and red light. The wavelength range to which S-cone cells are sensitive, however, is much narrower than the other two, which in practice makes our eyes much less sensitive to blue.

Here at Koodoz, we’ve been victims of this tyranny of blue: our logo is red-ish, which means that any defects will be much more noticeable. Don’t believe me? check out some of the articles we’ve been featured on at Smashing Magazine and Noupe and compare our screenshots with any one of the fellow designers on those pages. Notice the ugly jpeg compression artifacts around our logo? Notice how most of the other screenshots “look better”, despite being compressed at the same level? We certainly did and it’s been a source of much frustration! <sarcasm>Thanks for not sucking, red cells!</sarcasm>.

If you still don’t believe me, I’ll prove it to you. First by using a CC-licensed picture of four lovely singaporean models and then by defacing our own logo (Marc won’t approve, he!).

Four lovely ladies

Consider the following picture:

Let’s decompose this image into its main channels, using Photoshop’s channel mixer tool, we get three images — red, green and blue respectively:

Finally, I’ll degrade the quality of each of the images, to simulate a low resolution jpeg, using the mosaic tool:

Not too good. Notice that the blue image is the hardest to make sense of? But what happens if we recompose the image using one degraded channel and two full-quality ones? This is where things get interesting. Take a look. All three images below have been exported with the same settings:

Degraded red channel

Degraded green channel

Degraded blue channel

Wow! The last one is almost the same, even though we completely destroyed the blue channel. Our eyes just don’t give a damn! The second one — where we altered the green channel — suffers the most. It turns out that we’re most sensitive to yellow-green light.

Defacing the Koodoz logo

To further prove my point, I will butcher our own logo, exporting it at a less-than-acceptable quality and then reproducing the results under different backgrounds. Here’s our original red logo, exported as a jpeg from Fireworks at 50% quality:

Not liking it. Jpeg artifacts all over the place.

Green background

Ouch! even worse!

Blue background

Not perfect but you can certainly get away with it!

Anyway, boys and girls, I guess it’s one of those QED moments. I’m just glad we didn’t pick green for our corporate identity!

Image Credits

Image credit for the four lovely ladies goes to Flickr User madaboutasia. The awesome picture of the dude with the shades is a self-portrait by Boris Veldhuijzen van Zanten. Thank you both for sharing your work.

Three cheers to us, for being voted Site of the Day and nominated for Site of the Week at The CSS Awards website, a site that features some of the best CSS websites in the world from the top designers, agencies and bloggers working today.

Since launching the new site, Koodoz Design has been featured in some of the industry’s most renowned and popular CSS and Web Design galleries and blogs, including Smashing Magazine, Noupe, Abduzeedo, Design Shack and CSS Mania to name a few – which, for us, is a massive nod of recognition from fellow web design professionals around the world.

We would be super chuffed if we won the award for Site of the Week as it would automatically make us a contender for Site of the Month, which would be fantastic!

So if you like our site, show us your appreciation and support by voting for our website and a big thanks to everyone who has voted so far!

One of the coolest features of CSS3 is the ability to create newspaper-like columns on your layouts without any extra markup. We always find ourselves “cheating”, using things like <div id="column-one"> which is not very good, so this property would save us a lot of time and unnecessary code.

CSS3 solves all this with the use of some really cool properties: column-width, column-gap and column-rule. I guess they’re pretty self explanatory, except for column-rule which basically behaves like a border in between columns, so it can be treated like one, using width, style, etc. If you need more details, you can go to the source.

The problem? you guessed it! It’s still not supported by some browsers, namely IE and Opera (need to check IE8 and Chrome, though). Anyway, for this blog post I decided to start testing cross-browser solutions for the problem and this is what I’ve come up with so far.

First, we use the property for the browsers that support it, so if we have something like:

<div id="content">
<p>The quick brown fox jumped over the lazy dog</p>
…
<p>And they lived happily everafter</p>
</div>

we then style it like this:

div#content {
	-moz-column-count: 4;
	-webkit-column-count: 4;
}

Notice the prefixes -moz and -webkit. The reason for their presence lies in the fact that amazingly enough, the specification is still a draft (it was originally suggested in 2004!), so we need those. They’re obviously not 100% standard but in this case I would favour common sense as opposed to standards compliance. The styles themselves can get immensely fancier, using the column-gap and column-rule properties, but let’s keep it simple for the purposes of this post.

If you use a decent browser and look at that code, you should see something like this:

Everyone else should see the style-less rendering:

Taking care of all other browsers

So, to make sure no one else misses out on the fun, we can use a little jQuery. There are many jQuery plugins to deal with multi-columns, but Systemantics’ columnize plugin was the best-suited one I could find, so cheers to them!

We don’t want to apply the columnize styles to the browsers that support column-width, so we need to serve the javascript only to those that absolutely need it. You can do so by using jQuery’s browser detection, but I would suggest using get_browser() instead. It gives you much more control:

<?php if ( ($browser != 'Firefox') && ($browser != 'Safari') ) { ?>	
	// enter columnize code here
<?php } ?>

Using columnize is pretty straightforward. You invoke jquery and the plugin, and then simply do something like:

$("#content").columnize({columns: 4});

By default, columnize adds the class .column to each of the generated columns, so be sure to style it properly. The overall width of each element should be equal to the width of the parent element, divided by the number of columns, so for instance, if your parent element is 1200px wide and you have four columns, the overall width of each .column element should be 300px. Columnize has tons of other options as well, so be sure to check them out.

You can look at the demonstration here. As usual, comments and questions are always welcome. Thanks for reading!

Don’t you just hate it when you print a website only to find out that it’s gone all wrong? Background images and colours are lost, text becomes unreadable due to lack of contrast and many elements, such as menus, are unnecessary when in paper, thus wasting precious micro-drops of the most expensive liquid in the world. Worry not, for CSS is the answer to all of these problems.

You can create a style sheet exclusively for print media

Amazingly, many people —even seasoned web professionals— don’t know this. The CSS2 standard defines ten different media types: all, braille, embossed, handheld, print, projection, screen, speech, tty and tv. I bet you didn’t know you can use CSS for braille printers or TVs!

Inserting print style sheets into your document

You can associate print styles with your documents in numerous ways. The most common one is through the use of the <link> tag. You need to use the media attribute to specify that it’s meant for print:

<link rel="stylesheet" type"text/css" 
 href="print-stylesheet.css" media="print" />

You can also use the @import rule inside style tags – notice the media specification after the parenthesis:

<style type="text/css">
  @import url("print-stylesheet.css") print;
</style>

Finally, you can even specify different media on the same css file. You can do this by using the @media rule:

<style type="text/css">
@media screen {
   body {background: magenta;}
}
@media print {
   body {background: none;}
}
</style>

Styling documents for print

Okay, so now you know how to specify your styles. You now need to tell the printer how to render the document. Let’s take our beloved Koodoz website as an example. Consider our design services page. There are tons of elements that would be useless on a piece of paper: the main menu, the RSS subscription link and the form elements, for instance, so let’s remove these:

p#eco, p#rss-info, form, ul#nav {
	display: none;
}

Also, unless you absolutely need to, do not use colour. Non-decorative images are okay, but other than that, everything else should be black and white, including links. You can, however, use shades of grey for visited and non-visited links, but be careful with the contrast. This provides a nice little usability cue:

a {
	color: #666;
}
a:visited {
	color: #999;
}

Now, for typography, you want to take this piece of advice: for the screen, sans-serif fonts are easier on the eye. For print, however, go with serif. In our case, we’ll combine both: sans-serif for the headers and serif for paragraphs and other large bits of text:

h1, h2, h3, h4, h5, h6 {
	font-family: Arial, Helvetica, sans-serif;
}
p, ul, ol {
	font-family: Georgia, "Times New Roman", serif;
}

Just the tip of the iceberg…

These are just the basic recommendations for printing. You can do many, many more interesting things: Separate content sections, format tables, use the CSS first-letter pseudo element, etc. Next thing you know, you’ll have mastered editorial design!

Well, we just installed this plugin that automatically tweets your WP posts. If you do a ‘twitter’ search on the WP plugin repository, you get zillions of them, so we just shorlisted and picked the one we thought would fit our needs best.

This post should work as a test.

The plugin is called Feed2Tweet if you’re interested :)

So, ever since IE8 was released, we’d been delaying installing and testing on it, because, you know, we’re Mac people here at the office and I’m more of a GNU/Linux person myself, so as you might expect, Microso*t does not have too many fans here. But, you know, we have to support it as it is still dominant and it will keep making us miserable for a while.

I was fairly certain most of our stuff would be OK on with IE8: I’ve been fairly careful about my conditional comments and the php get_browser() tag, making sure that all hacks were taken only by versions 7 and earlier, and since IE8 allegedly passed the Acid2 test, well, in theory everything was supposed to work.

This week we could not delay installing it and testing any more. One of our clients sent us a minor bug and we needed to fix it. So I started googling for a way to keep not two but three versions of IE on the same machine and found a wonderful little program called IETester on Lifehacker. What it does is it basically packages several versions of IE (5.5^*, 6, 7 and 8) into one convenient little frame. No researching, no hacks, no browsershots, no cookie problems. Damn awsome!

It’s made our lives so much easier … even to the point where I actually look forward to testing stuff on IE! If you’ve ever had pains getting multiple versions of your favorite browser to work on the same machine, you should definitely check it out. Right now it’s windoze only and still a little bit quirky, but I guarantee it’ll make supporting IE just a little bit easier.

]]> http://www.koodoz.com.au/klog/web-design-html-xhtml-css-cascading-style-sheets-hyper-text-markup-language-javascript-flash-php/ietester-makes-us-happy/feed/ 0