What? Where did you get that?

The Accessibility Superhero Detective Joe Clark was hired to discover the truth about the subject. We all hoped the situation is not so dramatic, but boy — were we wrong!?

Yea, but why exactly captioning sucks?

• Not enough of it
• They don’t listen
• It’s hard to read
• Deaf people settle for crumbs
• The wrong kind
• The fox is watching the henhouse
• There are no standards

You probably wonder about how do you clean your Inbox? Since you are asking, we intensively worked on the relaunch of Croportal last week, and as a reward, the team had a couple of days off.

At this very moment I’m writing the post in one of the 40+ tabs in Safari. And I still haven’t option-spaced NetNewsWire. There’s recent unpacked shipment from Amazon on a shelf across the table. If only days would last longer.

There was a time when web standards pioneers had all the important stuff only in the Bookmarks, because there was simply just a few resources. It was quite handy and convenient having them all in the Bookmarks bar. I sometimes miss that comfort.

Where there was just a dozen of on-topic resources to follow, now is the hundreds. Where there was 2 or three events a year, now is the ten or 20 at least.

I was introduced by 80/20 rule back in 2004. Fast-forward four years later and I wonder which ones are considered today’s 20% must-read authors? Even if I knew, one would still need considerable amount of time for all the latest stuff.

The above question applies to events, too — are there 20% events that cover 80% of the current topics?

The schedule can be occasionally a serious threat, time and budget-wise. Especially if you have to travel across the continent and have tons of work that just don’t allow frequent travel breaks.

We’ve been practicing various media diet programs. Should we also consider event diet?

How to judge which one to choose and which one to discard from the list? With media, you test it for some period and then decide is it good enough to enter reader’s A-list, but for obvious reasons, you can’t apply the same method with events.

Occasionally, people ask me to create XHTML/CSS template based on provided .PSDs. Most of the time, such projects are pretty straight-forward — I tell the hourly rate and the estimated hours. The prospective client then accepts the offer or not.

It could be zillion reasons why clients reject offers and I’m used to some neutral (read: polite) arguments, like “It exceeds our budget” or something like that. However, today I received an interesting response:

“You are a little-bit too expensive, XXX is an hourly rate for a programmer.”

Funny, huh? Or sad?

Why on Earth would anyone compare client-side coding with programming. What is it that people (or just this particular client) think some cog of the same engine should be valued more than others?

Is it because the work of accessibility consultant, CSS coder, SEO engineer or usability expert is not something you can point your finger at? Or is it ‘cause people tend to care for web standards in a way of questionably increased initial exposure on endless, but completely irrelevant CSS showcase lists?…

The first post in this year (better late, than never) and I present you 2 (that’s right: two) brand new web logs by my two fellow colleagues — Marko Kršul (the creative) and Tomaš Trkulja (the methodic).

I was more than happy to contribute in the development of these two beautiful WordPress themes, spiritually named Balance White and Balance Black. The White was deployed first on our company’s flagship project’s development blog in it’s original setup and Dudikoff and Roseanne (link removed for offending content :p) have been customized later on. (Ed’s note: Dudikoff and Roseanne is not a WordPress theme, it’s customized version of Balance White.)

Anyway, download Balance White 0r Balance Black and if you care, let us know what do you think.

Sample sites:

• Croportal Dev Blog
• Zytzagoo’s Den

• Superfast web sites in 20 minutes beginning at 19:20 and ending at 19:40 in Gray room and
• Typography for web, 10 dirty tricks from 20:00 to 20:20 in White ‘the Geekier’ room

Just a few more seats are available, so hurry up and grab yours for an intensive Wednesday afternoon.

1. users are tagging recipes
2. advertiser reserves a desired set of tags
3. in this case, the company brand “Eva sardine” reserved the following tags: fish, shrimps, main course, sea food, sea, … eva (the name of the company brand)
4. if the recipe is tagged with some of those preselected tags, there is a relevant ad displayed.

Clever, huh? But the most interesting part is the following edge case.

Update: “Eva sardine” is actually a brand, not a company. Spotted and pointed to by lekke.

The event is organized by Initium, the guys behind the successful web.start conference, held earlier this year.

At the time of this writing, I already got a booking confirmation from EventWax and if you are coming (and I hope you are), keep an eye on the official web site.

BarCamp rules for attendees are pretty simple: all of the crowd should participate actively in some way. I’m still not quite sure about the topic which would be the most appropriate for me to join with, but I have a few dirty ones — if I am lucky enough so the others would find those interesting:

• Typography for the web
• DIY high-performance web sites
• Usability testing on a shoestring
• Bit-literacy on the web

Now, I whipped this list in hope that I will at least make myself publish an article or two in the near future about the mentioned matters.

Networking

Prior the conference every attendee was asked to sign-up to FOWA Crowdwine and choose her interests, so the organizers can help us meet more people. Those who did, received unique badges at reception with their tags, matches and opposites.

My tags were naturally: user experience, web standards, typography… and my matches were Robin Christoperson, Andrew Pendrick, Sarah Ward and George Zafirovski. I actually met George, who moved from Macedonia to London some 10 years ago, so we easily switched to Croatian (Macedonia and Croatia are both former Yugoslaw republics).

There was a couple of considerable job offers on the conference and if one was available, she could walk away with a brand new position.

Randoms bits

• Erika Hall said Users don’t complain about wording as long as you don’t change colors. (Copy is Interface)
• Matt Biddulph said Internet is small pieces loosely joined. (Coding on the Shoulders of Giants)
• If you need reliable standalone “DOMContentLoaded” JavaScript function, take a look at the shortloaded by famous Stuart Langridge.
• Identity Matcher, extracted from dopplr.com codebase, enables you to pull in social network information from sites such as GMail, Twitter, Flickr or Facebook.
• This one’s my favorite; Daniel Burka said You simply have to say ‘No’ to more features. Look at the Firefox and Mozilla Suite. Firefox would never be so popular if they didn’t decide to keep it simple.

Advanced features only make sense if they increase the accuracy and reduce time spent on a task. Advanced options made up-front, without real demand from the user-base are often only something glossy and shiny. Inviting users to learn a feature which main purpose is to be a cool widget that differentiate the application from the others — will fail for one very simple reason.

The kind of users who would appreciate such a feature are often anxiously seeking for the next gadget once the master the current one. In most cases, those visitors are not here for the content, but for the context, most notably the coolness factor. Unless the coolness itself is your product, you are probably not targeting those users.

Add advanced feature when you are absolutely sure you need it and after you have real user’s feedback.

Advanced feature should be gently introduced once the user is familiar with the basic functionality. In desktop applications such advanced options are often hidden in the ‘settings’ or ‘preferences’ panel. In web application those could be placed somewhere in ‘my profile’ area. However you decide to do it technically, don’t create the interface noise by polluting the content.

With well known web services, like Amazon, the extensive loyal user base is a good excuse to place an advanced feature right up-front. With a new project which need yet to prove its’ credibility, one has to be careful not to reject valuable first comers by unnecessary complicated interface.

Related reading

• Alertbox: Feature Richness
• Good Experience Best-of

On to presentations… or better yet, speakers

Super-optimistic Chief Performance Yahoo! Steve Sounders, the author of YSlow for Firebug, confirmed what Nate Koechley first introduced at @media this Spring about speeding-up web pages.

You can’t fight the numbers and High Performance Web Sites surely whipped some shocking ones out. I already saw some of the graphs at YUI Blog earlier, but many attendees were left surprised.

Following the High Performance directions, any site can be 50% leaner within a few hours. Given the fact that the companies/organizations invest considerable amounts of money into hardware infrastructure and/or back-end development (for instance, a development of an advanced caching system), it is just silly to skip this first and the easiest step in optimizing site’s performance.

If you’re ready to start making faster web pages, but don’t know where to start, I encourage you to buy a book.

Robin Christopherson, a Web Consultant at AbilityNet, held pretty impressive demonstration about how visually challenged people use the internet. Listening to screen reader playing the endless strings of meaningful text was scary, but at the same time enlightening experience.

The curiosity of the session was — it takes approx. 20 minutes for screen reader to start reading the main content on Amazon.co.uk, because they simply didn’t provide skip to main content link.

Daniel Burka, a lead creative behind Digg and Pownce was a true refreshment. His presentation about community feedback was honest and authentic. He was surprisingly patient to rivers of attendees, without a blink of celebrity pretending. Thanks to his feet standing firmly on the ground, we’ve collected some pretty valuable tips & tricks during the informal discussions afterwards.

Erika Hall from Mule Design in her Copy is Interface gave a bunch of great examples of how careless choice of copy used on the site’s interface can make a site either miss-interpreted or completely blunt. She also pointed out that without knowing your users/audience, it’s difficult to come with the right choice.

The sweet desert of the second day was a survival/essential startup session by Feedburner co-founder Dick Costolo. He extended the presentation well over his minutes, but with a good reason and greatly approved by the crowd.

Launch Late to Iterate Often provided a great insight in common pitfalls in the first year or so of a projects life-span. Pointers like Ask for money when you have it, There’s no such thing as a Standard Deal and Flat Organization are just a few of 14 selected bullets I wrote down; and there was even more… What’s more important — he covered every thesis with a valid example.

All in all, many bits collected and a few randoms I will hopefully post in the next couple of days. In a mean-time, check out the available presentations at SlideShare.

On almost every development team meeting somebody brings a new idea about how to ‘improve’ already adopted feature set.

Naturally, every person involved in the project development has her own opinion about how the things should work on a web site. Most of the time, it’s based on her personal taste and preference. That’s wrong. That is not user-centered design.

You are not creating a feature set for yourself, you are creating it for a thousands of users you’ve never met… and if you are serious about the web site, that’s a millions of users you’ve never met. Always keep in mind: You are not a typical user of a web site you are developing.

First person view, third person view

If you are usually explaining a feature by I would never use this feature… or If I would like to do something on this page… (note the I pronoun), it’s a good sign you’re thinking of yourself, not the users.

Creating personas is a good way to start asking What would Janet, the office manager, like to accomplish on this web site? or How would James, the insurance agent, use this feature?. This way, you are focusing on users, not yourself.

Resources

• Boxes and Arrows: on Personas
• The origin of Personas
• Adaptive Path: A little thing about personas
• Adaptive Path: Persona Non Grata

In his book, Mark Hurst gives you easy to follow how-to for the most common everyday scenarios as well as the best practice tips for maintaining the digital discipline on a daily basis.

In a nutshell, a bit-literate user is more productive. By letting the bits go, information overload can be avoided.

Probably, the most significant chapter is Other Essentials, where the author reveals the inevitable truth — bit literacy is going to be the digital age standard. Sooner than anyone expects.

I only wish this book was shipped as a part of an operating system installation guide when I bought the first computer.

AMZ is a joint venture of Sanoma Magazines International B.V. and Gruner + Jahr AG & Co. AMZ is also partially owned by Styria Medien AG. Those three companies are already having a few significant web projects in the local markets around Europe. As such, AMZ is very ambitious about being a top player in the Croatian internet space, so they were determined to secure the productive environment for a team of in-house experts.

Kristijan Soldo, the Manager of the Internet Department, approached Tomaš, Marko and me and since we set conditions and met each other’s expectations surprisingly early, we all accepted the offer very quickly.

Working on one project at the time without insane deadlines and demanding clients on a budget made a switch for me, as well as the opportunity to fully focus on a limited number of specialized internet destinations from the grounds up. To prune such a project, twist it and help it grow without lengthy presentations, argumentations or technical debates was another plus. Kristijan is a long-time internet professional with clear goals, fully confident in his team members capabilities.

Web.burza was an extraordinary place to work in, participate in handful of diverse projects, learn about new technologies and experiment with various new media concepts. My work in web.burza resulted in tremendous hands-on experience with front-end development and resulted in a few popular client-side development methods. I had a chance to deploy web standards in a real-life scenarios and practice modern web design on a dozen of high-profile projects — once again proving that there is a place for accessible CSS-based layouts beyond blogs and personal web pages.

Even though the three of us are leaving to AMZ, web.burza still has a bags of young talents fully capable to keep its position as a most awarded and innovative web agency in Croatia. With the extensive portfolio of pieces released in the last two years being visually extraordinary, yet fully standards compliant web sites/applications, web.burza set the standards for all the other local and world-wide agencies to follow.

The most noticeable projects web.burza produced in the last couple of years include web.burza.hr, www.hellgatelondon.com, www.coolinarika.com, www.vegeta.com, www.nacional.hr, www.oktal-pharma.hr, www.rtl.hr, www.borja.org, www.groovecaffe.com… as well as a dozens of small and medium business web sites…

But, the true heartbreaker is leaving web.burza people… I will miss morning coffee in the office kitchen, Mac evangelism and random photo shootings. “What if… ?” meetings and deadline overnights in the office (well, at least the social aspect of these…).

I’m not only leaving a bunch of gifted colleagues, but also a group of great friends. This is by no means a “Good bye.”, more like “See you around!”.

Sessions

Sessions were held in two tracks, so unfortunately one couldn’t catch up on everything.

I went to see more of the design-oriented talks, while Tomaš, our lead developer, was more interested in technical topics. Vanja (web.burza CEO) and Daniel (our personal paparazzo) visited a little bit of both.

The most inspiring presentation was Jon Hicks’ How to be a creative sponge, after which I couldn’t resist to photographing every single street sign and shop display on the way back to our appartment.

All other sessions were quite interesting, although not revolutionary. We were happy to get the confirmation that we were already following advices given as “best practice”, with one little exception — the eye-opening session High Performance Web Pages by Nate Koechley. At the conference, Nate offered 12 rules for speeding up your pages, but added two missing rules later on in his slides, which can be downloaded from his site.

Special thanks goes to Malarkey for mentioning Croatian design a few times in his presentation Royale with Cheese (slides can be found at his pages, under the events, right-hand column).

People met

Quite oddish, we mostly mingled with Croatian people while we were in London!

We met Danijela Nađ, the head of design at Croatian T-Portal. T-Portal is one of the top five most visited web sites in Croatia, and despite the fact that it’s under the roof of the local T-Com branch (the site is made with frames!), it’s nice to see that the guys behind it care about the standards and are trying to make it better. Baby steps, I guess…

The social aspect of the conference (soundly named @media Europe) was a little bit disappointing. There was a number of “closed” groups (for instance, The Brit Pack) that we did not approach because interrupting “internal” conversations is considered rude back from where I come from. Funny or sad, we had to introduce ourselves to a certain group of individuals for the second time now, but I guess that’s the way it goes when someone is a celebrity and you’re not…

Back in Februray at FOWA, the conference host Ryan Carson and his team made an extra effort it this area, which resulted in boosting a number of everyone’s industry connections. Nevertheless, I strongly believe that the crew behind @media did everything to make the conference as successful as possible. After all — 700 attendees is not easy to handle. (Note to self: visit smaller conferences.)

Despite my ramblings not everything was so dark — we had a few nice little chats with Mr. Joe Clark (he is Canadian, so no wonder), whom we hopefully taught a few lessons about Croatian recent history, even though the man is a walking encyclopedia and you can hardly impress him… Joe briefly introduced me to Richard Ishida, the Internationalization Activity Lead at the W3C, who was quite a pleasant company, too.

The highlight of the trip was finally meeting Rade Brujiæ (a.k.a. Medo), a long time online friend who was born and lives in London. Medo works for Kingston University London as a web designer/developer in a small, but dedicated web team which is behind some of the great Kingston University subdomains, like the recent International Conference: Excellence in Concrete Construction - through Innovation…

Anyway, Medo was our guide most of the time and thanks to him we spent three nice days hanging out in London’s restaurants and pubs. Hope to see you soon in Zagreb, buddy!

Off conference activities

We had a chance to take a walk around the central London, do some stunts at Traffalgar square and to visit the (unmarked) Abercrombie & Fitch store (where we almost left our life savings). All the cutest chicks work there, so if you are a tourist from Croatia wondering about the lack of cute British ladies on the streets of UK’s capital — the answer is: cuties have to work, too!

Addenum

Podcasts and presenatations from @media 2007. are available for download.

Virtualization software

Parallels is complete and stable, but a piece of software you will have to pay for. The price of 80 USD per license isn’t unacceptably high for an average web developer, but if you’re cutting your expenses, this might turn you down. In any case, you can download trial and evaluate if it’s worth the price. Anyway… from the version 3.0, the application supports 3D graphics and various USB devices, but it also has a set of supplementary tools, such as Transporter, which helps you migrate your existing Windows PC to a Parallels Virtual Machine. Parallels support bunch of OSes.

At the time of this writing, VMware Fusion is in its’ beta 4 version and is free to download. So far, it works pretty stable on my MacBook Pro, even in situations when both Vista + IE7 and XP + IE6 virtual machines are up. If you opt to use Fusion, there’s over 450 preconfigured virtual machines that can be found at Virtual Appliance Marketplace.

Virtual PC can’t be run on Intel-based Mac, but if you’re on PowerPC, it will cost you 129 USD for standalone or 219 USD for VPC7 + Windows XP Home. VirtualPC for Windows is free. The advantage of VirtualPC are preconfigured time-bombed ISO images available from Microsoft. There are WindowsXP + IE6 and Windows XP + IE7 installations currently available and those will run till August 17, 2007.

Boot Camp is really not a virtualization application. What it does is lets you boot to either Mac OS or Windows installation and it is obvious that it’s impossible to test web pages in such an environment. Boot Camp will be shipped with Mac OS X Leopard, but until then, if you want to, you can download Boot Camp from Apple.com.

Operating Systems

We’re currently testing pages in the following virtual setups (note that besides virtualization app of your choice, you’ll probably have to purchase a license for each of your separate OS installations):

• Windows XP SP2 + IE6, Firefox 1.5.x and Opera 8.5
• Windows Vista + IE7, Firefox 2.x and Opera 9.x
• Suse 10 + Konqueror and Firefox

Browsers

Older browsers can be found at evolt.org, the latest at download.com. Opera keeps browser archive and so does Netscape. If needed, download Firefox 1.5.

What more to say? Have a happy cross-browser testing!

The Principles of Beautiful Web Design is a great introductory book for every future web professional. Even if you already have a couple of web sites under your belt, you could still learn a bit or two.

Jason Beaird brings the overview of design basics. He covers the theory of layout, color, texture, typography and imagery, but not only that. The book explains the origins of some widely used terms, for example a comp. Not being a native English speaker, I used to think that this is short for (layout) composition, but it’s actually short for comprehensive artwork (or dummy). Another “A-ha” moment was the advice on pressing Alt + PrintScrn for taking a screen shot of the selected window in MS Windows.

I love how Jason explains things. For instance, he shows that the style is something easily accomplished by choosing an appropriate texture. And if you thought that repeating background patterns were unfortunate 1990’s trend, you’d be surprised to find that some of the leading industry creatives, for instance Veerle Pieters and Jason Santa Maria use them on their awarded personal sites. With his examples, the author teaches that in web design — the line between horrible and beautiful is sometimes very, very thin.

Still not sure? Read sample chapter.

I’m honored to present the latest project we did with Patrick Riley from Vantageous. These guys are doing some really cool stuff at the moment (shhh… I’m not allowed to say a word about anything) and while Patrick and Jason Kristofer are delivering mind-blowing designs, Beau Hartshorne is dealing with the back-ends and the databases. In the last few projects, we helped with markup and CSS.

So far, in Vantageous related projects we worked exclusively with tableless layouts (in fact, I dont’t think I can count more then five table based sites I’ve been working on in my entire life), but now we have something that simply wouldn’t work without tables — the Krop HTML newsletter (see screen shot).

All you need to know about developing HTML newsletters, can be found at Campaign Monitor Blog. I highly recommend the article Optimizing CSS presentation in HTML emails.

We could have deliver fully blown colorful and semantically correct newsletter to CSS capable clients only (and a crippled version for everyone else), but we instead decided to create layout with tables which work in almost all the clients on the market with basic HTML support (if interested in the code view source).

When we were developing the first incarnation, we learned a lot about Mac browsers and also introduced Faux borders, the advanced CSS positioning concept, which after that became widely recognized. When the original version of the site was launched back in March 2005, we already had significant amount of CSS trials, errors and solutions for future projects development. Working on such a project was invaluable experience.

I won’t comment on the new design, interface, IA or user experience in general. Instead, we’ve snapped a few screen shots for the archive. If you care, take a look at high-resolution shots. See the new site.

Old site

New site