Cambox uploads photos directly to your Dropbox. The app is stripped down default iOS camera experience, it’s simpler to use and hence more convenient. No need to launch another application to sync your photos, by the time you’re behind your main computer — they are already there in your Dropbox. Another great example of simplifying already simple experience.

Cambox is available on iTunes store

Leisa will be holding a Strategic User Experience workshop on day two. Whether you are a seasoned UX designer or just entering the field, Leisa’s workshop is a must. You will learn how to apply UX design thinking beyond web sites.

Relly will teach designers and developers about Content Strategy discipline, and provide some useful tips and tricks about how to collect content from clients (or in-house departments) before you start designing layout. We heard only great things about Relly’s competence in the field.

Paul will talk about their work on gov.uk, which is particularly interesting topic for workers in our own government online department. Paul is an ex Clearleftie and a co-developer of Silverback project, we all love and use.

See the conference schedule and grab your Early Bird ticket before May 1st.

Last September, Catalina and Bryan — nice people from BrightLounge had me for a video interview here in Zagreb. They travel around the World, enjoy local places and usually interview local creatives.

We covered topics on user experience, typography and general design thinking. In this particular episode they also presented some pretty cool web app development tips.

Watch the whole episode.

Many respected designers responded negatively — to say the least — and while I have to agree that we shouldn’t build lighter mobile web site versions, let’s go deeper and take into consideration the research results that were the foundation for Nielsen’s advice.

Yes, for many — especially the 3rd World, where education resources are limited anyway — the mobile site is the only site they’ll ever encounter and we must provide access by anyone regardless of devices they use. Yet, we are still in the experimental stage with mobile UI design (and the web in general) — that even an opposite opinion can be valuable to identify some broader challenges, for instance: Why the “full site” performance is so poor when accessed with a mobile device?

This is where Mobile First comes into play. By placing all useful content (e.g. sans a cheesy marketing blurb) into mobile context, it’s easy to establish a corner-stone for any device experience. The real question is not “separate sites vs. universal site?”, it’s “which device should be covered first?” And we already have a clear answer.

Creating different navigation system and optimized content consumption across devices can be easily accomplished with some clever CSS and JavaScript, which is basically building on top of universal HTML layer and it doesn’t require a separate site. We know that, too, for several years now.

The one category where you’d probably have to create (user-friendlier) mobile/tablet version is news sites and blogs with advertising based revenue scheme, but that’s a story for another occasion.

Usability testing is for producers and clients

Usability testing, user research and analytics are essential design tools. However, over the years it became quite obvious that the true value of UI testing is not in the actual set of findings or usability experts’ recommendations, but in the switch happening in producers’ and clients’ perception of the project.

Simply watching others struggling with your interface (and a number of users always will, no matter how good the UI is), forces you to think more about the general concept instead of the technical details. It brings up some fundamental questions about the project’s purpose, the core feature set etc. Technical problems are important, but they can be easily solved or avoided once you identify them.

Draw your own conclusions

Nielsen’s articles almost always offer an interpretation of the key findings. Still, use each just as a recommendation instead of a must-comply rule.

However, do use the numbers and facts presented (they are the most valuable take-away) and draw your own conclusions.

A few useful articles:

• Mobile Usability Update
• iPad Usability: Year One
• Success Rate: The Simplest Usability Metric

Breaks help

It turned out that this was exactly what I needed. Getting away from the project specific challenges for a while and having sub-consciousness crunch it on its own, proved to be the key to immediate creative burst once I got back to continue working on the project.

All of a sudden, massive amounts of sketches where drawn in the notebook. Once finished, the typography specimen covered all content types for the common use cases in a very obvious way. Even a few random blog posts that were kept in the Reference Bookmarks showcasing some nifty accessible CSS3 methods became relevant out of the blue.

“What was I thinking?”

Reading the internal brief we had written before the unexpected pause, turned into a merciless removal of at least a half of the “ideas” that we initially thought were fantastic. Every such edit to the project dossier felt natural and straightforward. The feeling was refreshing, because the mind was clear.

It happens to others, too

Then I have read the following quote from an American novelist Zodie Smith:

“When you finish your novel, if money is not a desperate priority, if you do not need to sell it at once or be published that very second — put it in a drawer. For as long as you can manage. A year of more is ideal — but even three months will do. Step away from the vehicle. The secret to editing your work is simple: you need to become its reader instead of its writer. I can’t tell you how many times I’ve sat backstage with a line of novelists at some festival, all of us with red pens in hand, frantically editing our published novels into fit form so that we might go on stage and read from them. It’s an unfortunate thing, but it turns out that the perfect state of mind to edit your novel is two years after it’s published, ten minutes before you go on stage at a literary festival. At that moment every redundant phrase, each show-off, pointless metaphor, all of the pieces of dead wood, stupidity, vanity, and tedium are distressingly obvious to you.”

Absolutely brilliant!

Taken from Reading yourself via @cameronmoll

Update

Download Take a Break PDF and print it

Goran Peuc and yours truly were invited to talk about web design on “Prozor u digitalno”, a Croatian Radio Channel 3 weekly show about everything digital.

We discussed about the required skill-set for a modern-day web designer, about some deeper specialities within the web design profession, education systems and industry’s future.

Near the end of the show we elaborated great design outside the web itself and mentioned two bright examples — Nest, the learning thermostat and Lytro, the light field camera.

If you understand Croatian you can listen to it in your browser (32 min) or Download episode as MP3 (15 MB).

Join us at FFWD.PRO, a micro-conference and workshops for web designers and developers right here in Zagreb, Croatia on June 11–12, 2012.

We are extremely happy to host the extraordinary line-up of industry leaders, from user experience directors, to user interface designers, to front-end developers, to technology experts.

The conference has come about due to increased demand within the region for more specialized events for internet professionals. It is also a natural progression for us here at Creative Nights by carrying on from where we left off with our very successful series of web workshops which we have been organizing since 2009.

But see for yourself and be sure to grab your super affordable Early Bird ticket.

If you’d like to see me talk, here’s my speaking calendar. As always, for any additional questions feel free to ping me on Twitter

Add this to .htaccess file

AddType video/ogg   .ogv
AddType video/mp4   .mp4
AddType video/webm  .webm

Update

Safari (and possibly any other browser) hangs when trying to download .mp4 file from password protected directory (for instance, on a test web site). Perfect occasion for a CDN management exercise.

<?php
if (current_user_can('edit_posts')) {
    $output = '<a href="' . get_edit_post_link($post->ID) . '">Edit this post</a>';
}
echo $output;
?>

Last spring we printed a limited edition of The Crane tees to show support for Japan earthquake victims. On that occasion we learned about the tee printing process in detail and the idea of designing non-digital products was born. Putting up the online store was the natural next step and I’m very curious to see how this side project grows.

Apart from T-shirts, we are planning to develop and release some other (physical) products for designers and developers, but I don’t want to spoil the surprise just yet.

The shop itself runs at Big Cartel, a simple shopping system for artists and designers. It’s super easy to customize, (if you don’t mind the basic Django/Python syntax).

Typetester Tee is now available for all screen type geeks.

It takes time to educate companies. Even if you could educate them, that will not change the company culture. In most companies even the in-house web experts are fighting against windmills most of the time.

We, the people in web industry are extremely passionate. That’s why we are pushing so hard to bring the best possible results to our employers or clients.

However, if we didn’t receive enough affection and recognition back, we would feel exhausted and tired. Of course, a pat on the back is not enough. We really need to see the result of our effort. If we had done our part the best we could, we would have expected no less from other parties involved in the process.

I’m just speculating here, but it could be that the primary reason for leaving companies and client work has something to do with the outcomes that — despite all our efforts — didn’t turn exactly as we planned.

Being your own boss means having the whole process under your control and opportunity to apply an insane level of obsession over the tiniest details, a typical tendency of top experts in the field. I wonder what would happen if all the best of breed experts started building their own brands.

A major shift perhaps?

Collect and understand content

Content-out approach requires from designer to first obtain some texts, pictures, video or audio also known as content type. Since I want to keep it simple, I’ll stick to text as a primary content type in this article.

After collecting all your content, the obvious next step is to actually read it and understand it. The more you learn about what you are trying to give a meaningful form to, the better the result. If you can’t understand the content you are working with — the design will be too generic. That’s simply because you can’t typographically pronounce particular ideas and images if you don’t get them.

Once you get to know the content you are designing, you can better determine the context — time, place, concurrent activities, people and devices.

Letters

Now that you know your copy, you can start choosing typeface(s) that support it. At this point, it is wise to learn more about the author(s) of the text and use their personal attributes such as educational background, narration style or sound of voice. Use information about the author as an additional reference for the typeface selection.

Create a list of the most important terms or phrases from the text and use those in a typeface preview panel. Check for weird kerning if any and avoid typefaces that technically don’t support your text (At the time of this writing, kerning is not conveniently supported in CSS). Rinse, repeat.

After you selected the typeface (even if you’re still not quite okay with it), deal with font-size and micro white space, i.e. leading and margins. Up to this point you’re designing for the full range, so it is very important to have these common design elements covered.

Basic layout

Responsive design methodology (which I’m sure you have heard of by now) introduced breakpoints — resolution increments based on the most popular screen resolutions. Breakpoints are fundamental to creating master layouts.

The easiest approach to build responsive layouts is to first design a common denominator content unit, for instance a paragraph, a list, a table or an image. Whichever you chose, be sure it covers the most important content on a page. If you are confident enough, add a headline to that list and design the whole group.

If you’re targeting the 320 pixels as the lowest value (Apple iPhone portrait orientation), your content unit should be then designed to fit such a tiny space. White space around the text column serves two purposes. The first role is pure typographical — to provide a rest-place for readers’ eyes and the fingers that are holding a device. Secondly, it helps you establish the gutter — an empty space that shapes columns — which you’d use later on with wider layouts.

My personal favorite 320 vertical grid is 20 + 280 + 20 pixels for text pages (or 10 + 300 + 10 for applications, but I digress)

Grouping content

It is wise to group similar content into a few major groups in HTML, for instance: the page specific content + the site-wide content. Then branch the page specific content into the primary and the supplementary content, and so on.

Here’s an example: If the primary content in a news article, then the page specific content are headlines and the leading image, the article text and (pull)quotes. In that case, the supplementary content is meta-data (author, publishing/modification date, categories, tags etc.), a list of comments (with authors, gravatars, comment bodies etc.), rating tools, sharing tools, a list of related articles (with or without image thumbnails).

You can easily see from the list how easy it is to create semantic groups. Use those groups as a building elements of your master layouts.

Both on smart-phones and tablets, the secondary content would probably fall “under” the primary content. But instead of linear image positioning inside the text in the primary content area on the smart-phones layout, you can float images left and right on the tablets layout to create more interesting flow.

On each next layout, place sideways the portion of the page that was formerly pushed “under” and reuse the left and right page margins as new gutters.

On simple vs. rich designed

There are a number of differences between mobile and desktop layout, but the one rarely considered is that mobile screen provides a better focus once your attention is inside the screen. In mobile browser, you can’t tell anything about the content of pages in other “tabs”. There’s no room for such information, because every pixel counts.

On small screens, the currently watched content doesn’t have to fight for a reader’s attention by unnecessary decorations. On desktop screens, we’re able to multi-task and hence we unconsciously compare things and shift focus. On tiny screens we can’t do that. That’s why we can get away with less rich visuals on mobile in favor of clarity and simplicity.

On divitis

Sadly, I have seen many inexperienced developers (even the famous ones) using pretty harsh language against their peers using non-semantic markup. I can remember I did that more than once in my early days.

Only hand-curated design/developer’s blogs work well with very little backward compatible markup for layout. The rest of the World, especially sites we build for clients — not to mention heavy-weight database driven systems — would simply break without a help of some extra markup here and there.

You are allowed to use as many non-semantic divs as you need, but always question yourself whether you really need it, or is there a better solution.

…

If you happen to be in Zagreb on Thursday, January 19th 2012. I’m giving a 15-minutes presentation on this topic; More info about the event.

Here’s an example of what comes out from these sessions.

If you like it, here’s wallpaper in two sizes 2560×1440 or 1440×900

If you missed the Zürich conference, there are still some tickets for Paris Web in October 2011., where I’ll hold a Typography for Programmers workshop.

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.

We recently made an internal study about difference between hand-picked vs. automatic related articles, and as you can already guess — when an article has a hand-picked related content, there’s a greater chance that the visitor will stay, instead of bouncing off to the next Google search result.

This function works with Custom Fields in WordPress, i.e. you’d create Custom Field with “hand_picked_article” for meta name and put the post ID of the content you wan’t to display as a meta value. For more related articles simply add more Custom Fields with the same meta name.

If there’s no hand picked articles, the function will return tag or category related list.

Download cn-related-articles.php

The workaround is easy, but it’s not well documented. It’s done by Fancybox’s own callback options.

$('a[href$=".jpg"]').fancybox({
    onStart: function() { $('.banner object, .banner embed').hide(); },
    onClosed: function() { $('.banner object, .banner embed').show(); }
});

Other Fancybox callback options:
onStart, onCancel, onComplete, onCleanup and onClosed.

See it in action at Gadgeterija.net.