If you are reading this, please get modern browser.
skip to main content | skip to main navigation | skip to secondary content

Captioning Sucks

~ 1st April 2008. · 08:19 CET · permanent link · printer friendly ~

Captioning Sucks! No shit, Sherlock! Now let’s fix it!

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?

Don’t create features for yourself.

~ 8th September 2007. · 14:14 CET · permanent link · printer friendly ~

Creating features based on a personal preference is wrong

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

Bit Literacy Review

~ 31st August 2007. · 22:08 CET · permanent link · printer friendly ~

Bit Literacy User Experience Lord, Mark Hurst wrote Bit Literacy, possibly the second most valuable book anyone who wants to catch-up with this computer thing should read and learn. Right after the Computers for Dummies.

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.

Krop Newsletter

~ 24th May 2007. · 11:23 CET · permanent link · printer friendly ~

Krop Newsletter screen shot

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).

24sata.hr goes non-standards

~ 18th May 2007. · 15:45 CET · permanent link · printer friendly ~

24sata, the first Croatian news portal ever designed with web standards was moved from carefully structured, web standards compliant to a non-valid inaccessible web site. Unfortunately, it does happen.

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

24sata homepage
24sata article
24sata gallery view

New site

24sata new homepage
24sata new article
24sata new gallery view

New Newsvine UI options

~ 10th May 2007. · 14:31 CET · permanent link · printer friendly ~

Newsvine screenshot

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!

How to convince a client they need cool 404s

~ 24th April 2007. · 09:28 CET · permanent link · printer friendly ~

It’s been a while since we’ve been at FOWA London. The personal highlight of the event was Geek Dinner in “Bear”, the pub placed somewhere in the London down-town. The pub’s name was a curiosity for the Croatian team — here in Zagreb we also have a chain of popular pubs all under the same name “Medvjed” which literally means Bear…

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.

Return of Webmasters?

~ 22nd April 2007. · 09:31 CET · permanent link · printer friendly ~

If someone would told me a year ago, that webmasters are going to return big style, I’d say – that’s crazy. But now, with a portal or two under my belt, the idea doesn’t seems so funny anymore. I wrote about new Nacional.hr and how bringing the right person for the job lifted the site from the ground.

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?

Net Konferenca 2007: “Social Networking”

~ 2nd February 2007. · 14:39 CET · permanent link · printer friendly ~

I was honored to be invited by Vuk Ćosić (the founder of Case Sensitive) to Net Konferenca 2007 in Slovenia on January 31.

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.

@media 2007 unleashed!

~ 18th January 2007. · 13:36 CET · permanent link · printer friendly ~

@media 2007 logo

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.

And the next living room chair is…

~ 5th January 2007. · 02:03 CET · permanent link · printer friendly ~

skruvsta chair

Nacional.hr has a standards aware chief editor

~ 30th December 2006. · 23:06 CET · permanent link · printer friendly ~

Screen shot of Nacional.hr

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.

Future of Web Apps

~ 16th December 2006. · 16:00 CET · permanent link · printer friendly ~

Future of Web Apps 07 logotype

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.

Detect visitor’s fonts with Flash

~ 18th August 2006. · 14:45 CET · permanent link · printer friendly ~

get font list preview

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… Continue reading ›

Don’t use Trebuchet in your body text

~ 2nd August 2006. · 02:20 CET · permanent link · printer friendly ~

Nothing more, nothing less. Thanks.

Pocket PC apps recommendations?

~ 11th July 2006. · 17:07 CET · permanent link · printer friendly ~

Fujitsu Siemens n500

The time has come for me to spend some time around the Pocket PC. I have already learned that the CSS media type theory (see W3C Mobile Web Initiative) is not what one should rely on when developing for full user agents range (sad, but true – the only way your web site knows a visitor came with a Pocket PC is by detecting its’ user agent string).

Nevertheless, I’d like to learn more about the general experience with these devices. If you have a story, please, do share.

Anyway, what are your favorite Pocket PC applications and why?

Smart ‘back to top’ link

~ 22nd May 2006. · 13:55 CET · permanent link · printer friendly ~

Back to top link’s purpose is to quickly position the viewport back to a beginning of a web page. Sometimes you have a variable height of the content and this link is unnecessary if a particular page is shorter than viewport height. With this simple JavaScript, you can hide it depending on page’s height. See the example web site.

var d = document;
onload = function() {
    var viewport_height = (self.innerHeight) ? self.innerHeight : (document.documentElement && document.documentElement.clientHeight) ? document.documentElement.clientHeight : (document.body) ? document.body.clientHeight : 0;
    var page_height = d.getElementsByTagName('body')[0].offsetHeight;
    var ttl = d.getElementById('to_top_link');
    if (page_height < viewport_height) ttl.style.visibility = 'hidden';
};

Why AJAX forms need an explanation?

~ 3rd February 2006. · 10:06 CET · permanent link · printer friendly ~

Web 2.0 is currently all over the Internet. Web based applications are popping up on a weekly basis. The first contact with the future interface is usually a notification form with AJAX. Predictable or not, it has its’ reasons.

Most of the time, in spreading-the-word phase, an application’s homepage (teaser page) gives you short and sweet – a paragraph or two – overview of what it’s gonna do for you and why it’s cool. And a notification form. Nothing else, nothing more. Subscribe or not. Simple as that.

But lately, I found some of such pages too complicated for a visitor. They require guessing. And therefor they possibly fail. Continue reading ›

Instant messenger for Mac recommendations?

~ 11th October 2005. · 10:39 CET · permanent link · printer friendly ~

So far, I never had a need to chat via Mac, since the Skype covers it both – Win and Mac systems alike. What would be your Mac messenger of choice and why? Do Mac people generally practice instant messaging, or are they more the e-mail type?

* Please keep in mind that this is a personal web site and it does not reflect the position or opinion of my respective employers, organizations or partners.

Typetester – compare screen type Supported by Veer.

What is this?

A web log of Marko Dugonjić, web professional from Croatia. Topics covered:

Translate this site

German, Spanish, Italian, French or Japanese (via).

See you there!

Feel like buying a book?

Try with maratz.com aStore

Worth visiting

top of the page | skip to main content | skip to main navigation | skip to secondary content