I was invited by Ivica to participate in a panel to discuss the current state of web design in Croatia (and in the world) especially from the perspective of commercial production and mass-market trends. As the debate ensued we also discussed and touched upon the future of web / interactive design.

This topic was of specific interest to me as ever since the Biennale of Croatian Design 09/10 the previous year I have been thinking about this, occasionally discussing with peers the classification of web / interactive media design. However, until recently it is something I have never really discussed in public.

A good proportion of web design today descends from print / graphic design and these influences are becoming even more prevalent. Typography for the web is now all the rage especially as we are (finally) able to use different fonts other than the tried and tested workhorses Arial, Verdana & Georgia. A direct result of this development (coupled with newly evolving and usable CSS properties) is that once again we are seeing the realms of web design opening up right before our eyes. Therefore, solid knowledge of typography and typographic principles should really be a must for every screen designer today especially when taking into account the general intricacies involved with consumer grade computer devices and displays. Furthermore, the basic fundamentals of typography have more or less remained unchanged for decades and hence should be openly embraced.

Note: For students and novices unfamiliar with basic typographic principles there is certainly an abundance of great books and online resources available.

Despite these new exciting developments are we not possibly over-looking the bigger picture? The Internet is now no longer solely consumed within the desktop browser. The introduction of alternative, more native interaction systems such as touch screens and 3D gestures has altered the landscape and the way in which we all interact with and use the Internet. It can therefore be argued that as a result of these developments we should focus less on graphic design principles and instead focus more on specific principles of industrial / product design.

Digital space designers should attempt to re-discover philosophy, sociology, psychology, human behavior, physiology, neurology, anthropometry etc. After all, those are the fundamental disciplines of human-computer interaction and — in broader context — Human factors science.

On the one hand graphic design ergonomics are simpler to understand and apply in comparison to what has to be taken into account when designing for the digital space, simply because it is an established discipline that has been around for a lot longer.

On the other hand it can be said that the generation of technology savvy, multitaskers born about after the advent of the Internet no longer have the time nor desire to consume as much written (textual-based) content especially when up against rich multimedia content (pictures, audio, video), content that can be described as being more cognitive. Hence, for that reason such users are likely to find rich dynamic / interactive content easier to relate to as well as quicker to consume and follow. As the old saying goes ‘a picture is worth a thousand words’ and the same could possibly be said for all types of rich multimedia content!

Furthermore, multimedia content in the era of mobile publishing is much more feasible and cost-effective to produce and deliver than at any other time in the past. To a certain extent the tides have started to turn in terms of the ratio between written (textual-based) content vs. multimedia content, with a shift more towards the later, as well as the idea that what was essentially the status quo of the past within the web medium should not directly influence or hinder new developments, neither today nor in the future.

One of the guests on the panel, renowned Croatian designer Boris Ljubičić, remarked “the World needs another Gutenberg in order to make us abandon type as a primary communication interface”.

Are we ready for this?

…

Special thanks goes to @radebrujic who prettified my rather dull prose.

It was quite a challenge not to overdo it, especially when the existing design is so familiar, and both — the client and us — were so eager about the process. However, the goal was not to make something prettier or different or wild (which would result in a short-term hype), but instead to focus on tiny little details. After the last relaunch, significant number of pages were published ad hoc and that parts needed our attention the most.

The feedback from Seekandhit clients and visitors was of a great help. Not the “I wish you had…” kind of complaints, but rather relevant comments, for instance “I didn’t understand how X service works or how service Y can help me.”. Mario Frančešević, the Seekandhit CEO also delivered very useful brief based — among other things — on visitors behavior tracked by Google Analytics.

The cornerstone for this iteration were detailed screenshots of actual adverts and illustrations for the most prominent advertising features. That was especially important on Services Overview page, where some visitors had difficulties understanding the differences between various advertising platforms.

Another roadblock for visitors was Project Questionnaire, which had too many (specific) questions than is normally required for the initial contact. SeekandHit tries to custom-tailor campaigns for each client, so the obvious shift was to simplify the web form and provide the prospects with a brief overview of the process in a form of numbered steps.

Now let’s see the results with real-life users. Fingers crossed.

On the other hand, web developers and web designers are seasoned computer users, which are most of the time after the latest technology — software-wise, hardware-wise, interface-wise. This breed often has several browsers for different contexts.

Ordinary people (who are not dealing with web for money) find it hard to remember browser history stack, don’t need to learn keyboard shortcuts, they don’t know the difference between Comic Sans and Cooper Black, and they don’t know the difference between Internet Explorer and Firefox.

That is our job — we need to know those differences, and provide the best possible experience.

That’s why CSS people are called experts. They can do miracles, when everything else fails. Any fool can code for the latest browser, but experts take care of every browser with significant share.

Consider this Wikipedia article: Usage Share of Web Browsers.

In the end, let me share some quick numbers from a few random high profile web sites. All of these are in the company of six- and seven-figures visitors/mth.

Impartial: unbiased, unprejudiced, neutral, nonpartisan, nondiscriminatory, disinterested, detached, dispassionate, objective, open-minded, equitable, evenhanded, fair, fair-minded, just; without favoritism, without fear or favor.

Treat your users well. Don’t underestimate anything.

I had a quest.

My Old Man asked me to find a decent mobile phone for him. He wasn’t after anything fancy — “Just to have the large letters on a display”, he requested.

My Dad doesn’t care about the model and make. His only concern is avoiding troubles he used to have when sending text messages. He is having trouble reading text on the small screen.

To make things harder, my Dad is a tiler. Tilers have enormous fists and fingers. Probably, the largest of all builders. When your hands are like paws, you’re having trouble using a small keyboard.

So I bought him a Nokia. I found a model that has both — large display with large letters and fairly large buttons.

I have two phone numbers.

The phone I use to talk to my parents is a personal one and we have cheap calls, since we’re on the same carrier. When he calls me on my business phone, they charge him much more than they should. But Dad keeps calling me on that phone. I wondered why.

When I gifted the new phone to my father, I added my business phone number, just in case.

This new phone has large letters on the large display and large buttons. The phone also has large icons which you can assign to any contact in the address book. When I added a new phone number, I automatically assigned an icon to it. Since then, my father calls me to that number.

I will have to remove the icons.

Illustration by Marko Kršul

This year the schedule is really, really promising. If you are around and you understand Croatian, you shouldn’t miss the opportunity to hear what’s going on at the local startup scene.

On the other hand, if you have an interesting project yourself, then there is a chance to meet some quality VCs to help you out.

I’ll be there both days, so drop by and say “Hi!”. If I look confused, don’t worry — that’s just me being full of excitement about my presentation ”What the users want?”. The presentation will give a short insight in user’s needs, based on our work with users and focus groups at Croportal.

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

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.

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

Good designers copy, great designers steal. Every once in a while, it’s great to take a look at what others are doing. Quite often, an interesting idea arise from such a voyeurism.

One of the most invaluable destination for every news site designer is Newsvine, a celebrity web site of the week. Their new interface deals with many tiny little details and features great balance of information blocks and interface controls. If you’re an internet professional, this site is a must see reference.

A bonus detail: charming e-mail copy

I like it when I receive an e-mail with an amusing copy. Here’s just a part of what the Newsvine team have sent me this morning:

You know how when you’re trying to make conversation with someone, you’ll often say empty things like “nice weather we’re having”? With local weather now automatically displayed on your front page, you can now be much more specific with statements like “did you know that according to my favorite site, Newsvine, it’s going to be 78 and sunny in three days?” Furthermore, since we now also display headlines from your local newspaper, you can follow up that with “Did you hear Tom from the fraternity was arrested last night?” It is important to us that you’re as well informed about your city as possible, and that you’re consistently equipped for these precious moments of idle banter.

So register at Newsvine and have fun on your front page!

Even though not the opening presentation at the conference, the things became pretty interesting after Tara Hunt from Citizen Agency talked about Building Online Communities (4,3 MB PDF). Tara covered all the general aspects of building social networking web sites, but the most significant point for me was — “it has to be fun”. Social networking sites have to be fun. Fun to use, fun to read… I encourage you to download the presentation for the examples.

Later on, at the dinner, we all had good time talking about the various industry topics. At some point we discussed about how to convince clients to provide cool, useful, fun and most of all encouraging copy on otherwise boring, but absolutely necessary error pages — 404s and/or 403s. Special care should be taken with social networking applications, where the user-generated content is very dynamic and the pages are lost more often, then anywhere else. Tara advised and I’m sharing (beware! the following is not the exact quote, it’s more what I managed to recall the morning after):

Create a portfolio of cool 404s from sites of the successful companies (Flickr, Threadless, Last.fm, Twitter and such) and also a portfolio of plain 404s of a few companies nobody ever heard of. When you do, use it as an argument when talking to the client.

Every business wants to be compared to a famous company…

Once you convince your client, go on and make the web more enjoyable place! BTW, see what Flickr says about 404s.

Every serious web portal – sooner or later – suffers from the limitations caused by predefined cover designs. Those initial designs usually work well in the beginning of the site’s life-time, but eventually as the content grows, the editorial stuff is crying for more freedom.

What to do in such situation? There are certainly a few noteworthy paths. At web.burza, we even developed a fancy drag ‘n’ drop cover management module. It gives chief editors freedom never seen before, works like a charm in your browser, the learning curve is easy and fast, it even delivers 100% valid markup, … but it has it’s drawbacks, too.

Such semi-automated systems don’t cover all the possible scenarios. The development is rather expensive for such a product. And at the end of the day, for any layout setup that’s not covered, you’ll have to contact the agency.

Most of the time agencies have an expert who can full-fill an editor’s vision, but the procedure is rather slowish. For a breaking news scenario, a response time of an hour or two can make a difference between the winner and the last one in the race.

At portals which are taken care of by a full-time employed webmaster, such inconvenience can be minimized, if not avoided altogether. Webmaster who is a jack-of-all-trades and a problem solver, could replace all the custom cover management systems, no doubt. However, employing such a savvy guy raises the general costs of the web site.

The question remains – is the ability to create custom covers fast worth enough having another employee on a payroll every month?

The main topic of the conference was Social Networking and my fellow colleague Vanja Bertalan was invited along with Mrs. Tanja Gligorović (project supervisor from Podravka d.d.) to speak about Coolinarika.com, a web site developed for Podravka in 2006.

Vanja offers his PowerPoint presentation for download (3.6MB ZIP) at web.burza site (the presentation is in Croatian – nevertheless, numbers and graphs are quite impressive).

Even though it was sometimes difficult for me to understand speakers talking in Slovenian, all presenters were quite interesting and we both went back to Zagreb with quite a few new ideas.

Net Konferenca is a regional event I could visit next year, too. And if they would invite more world-class speakers (like excellent hats-off Daniel Heaf from BBC Radio 1) in the future, I envisage this could be the relevant conference in South-East Europe.

FOWA tickets bougth, hotel reservations made. The next target: same city, four months after… @media Europe 2007.

If you’re local designer/developer and you are interested in visiting the event, please contact me regarding the possible group discount arrangements.

The recent redesign of Nacional.hr was interested for a few reasons – we spent reasonable amount of time realigning all the site page types and during the process, we developed a 5-column grid system, which opened some new ideas for creating bullet-proof multi-column CSS layouts. The home page currently features much more content than in the previous versions, but most of the feedback we received suggests that it’s now much easier to scan and read all the headlines and texts on the site… but I digress.

All those little joys, like the ones just mentioned, bring a smile to a designer’s face. However, the idea to bring a web standards practitioner, an experienced web author and a SEO expert – Goran Jurić – on a position chief online editor, was the winner for this project (Goran runs the local forum Webote, which is devoted to programming for the web).

Due to my knowledge, it’s the first such case here in Croatia, and for that reason such move is even more significant. Let’s just hope it’s not the last one here in the local media organizations.

In a meantime, I can’t wait to see how the site will develop under the guidance of the new online editorial stuff.

A small Croatian/Slovenian expedition is preparing to experience three days of inspiration & insight at Future of Web Apps 07 summit, the biggest Web 2.0 conference in the UK. The event is held in London, 20-22 Feb 2007. in organisation of Carson Workshops.

Note: Parties from the region interested in joining the trip, may do so via contact form.

Typetester knows which fonts are installed on your local system with a little help of Flash. Flash can detect your font list and pass it to a JavaScript function. Here’s how it’s done…

ActionScript & getFontList()

Typetester’s flash does just that – detects fonts, so the ActionScript snippet is very simple (no wonder, since it’s brought by pepa, the man behind the Multi color sIFR).

Down to business – create new Flash doc, click on the layer and expand Actions panel.

First, you fill the variable user_fonts with the following…

var user_fonts = TextField.getFontList();

… and sort it alphabetically:

user_fonts.sort();

Next, you call JavaScript function from Flash:

getURL('javascript:fontList("' + escape(user_fonts) + '")', '_self');

Save all as font_getter.swf and include it somewhere in your HTML document with the following (valid) markup:

<object id="font_getter" name="font_getter" type="application/x-shockwave-flash" data="font_getter.swf" width="1" height="1">
    <param name="movie" value="font_getter.swf" />
</object>

The above method of embedding Flash movies is my favorite whenever the appearance of Flash isn’t crucial (which is almost always the case – Flash shouldn’t carry the main functionality. Generally, I see Flash more as an added value).

This method will not bug visitor to upgrade to a newer version. If she wanted to, she’d already upgrade, right?

Some alternative approaches can be found in Microsoft, ActiveX and noscript article.

JavaScript & fontList()

Now that you have your font list in the JavaScript environment, just split the string and make it an array:

var fontList = function(user_fonts) {
    var obj = document.getElementById('font_getter'),
        fonts;
    if (typeof(user_fonts) != 'undefined') {
        /* getURL works well in Safari, Opera nad Firefox, but poorly in IE */
        fonts = unescape(user_fonts);
    } else if (typeof(obj.GetVariable) != 'undefined') {
        /* element.GetVariable doesn't work in Opera and Safari,
        but works well in IE where JavaScript directly speaks with Flash */
        fonts = obj.GetVariable('/:user_fonts');
    };
    if(typeof(fonts) == 'string') {
        /* convert string to array */
        fonts = fonts.split(',');
    };
    return fonts;
};

Use the fontList() array further in a way that’s best suitable for the task at hand.