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

Now that we have web fonts available, we can avoid image replacement and apply virtually any font to a plain HTML with a little help of @font-face rule.

Another problem with HTML text is how lines of text break. If you aim to create a particular rhythm to your copy, you’d probably want to control the length of each line. Naturally, you can use <br /> to push the text into another line.

However, to enable natural flow of text on mobile screens which are narrower than the desktop horizontal text block offset, you simply add @media query to your CSS:

@media (max-width: 480px) {
    .your-particular-selector br { display:  none; }
}

Please note that you should leave an extra space behind each <br />. This way when it’s removed with CSS for mobile devices, you won’t end up with weird results, for instance Lorem ipsumdolor sit amet,consectetur:

Lorem ipsum<br /> dolor sit amet,<br /> consectetur...

Dell U2711 is significantly cheaper here in Croatia than 27-inch LED Cinema Display. It’s a smart alternative, especially if you don’t like glossy screens.

But are there any caveats?

Color-spaces for web design

Internet is all in sRGB, i.e. the relatively small color-space. This standard is brought by Microsoft and HP back in the days, to create a common denominator for consumer grade systems and it’s a default for Windows PCs.

I found this article a good starting point to understand differences between various color-spaces: Setting a Work Color Space in Digital Photo Professional.

If you are designing for the web exclusivelly, it’s best to work in sRGB. Learn how to set up Color Management for web design.

Oversaturated colors issue

Macs output colors in Apple RGB, so if a monitor can handle it, it will display colors more vivid, and somewhat truer to the real colors.

Apple is shipping displays that are not wide-gamut, but probably Apple RGB (at the time of this writing I haven’t found exact technical specs).

Apple displays are calibrated to Apple RGB and for the average PC user the picture is rich in colors. Apple’s products are also evenly calibrated to keep consistent experience across platforms, but that also gives you troubles once you pair Apple product with something else.

Dell U2711 is wide-gamut monitor, which means out-of-the-box colors will look too saturated than you probably used to using your laptop’s display or regular (lower-gammut) LCDs.

The display has quite a lot OSD controls, which was in my case miss-leading. There’s an option to set gamma for PC or Mac and also some handy color-space presets.

In Snow Leopard, default gamma is 2.2 (like the rest of the World) and not 1.8 like in Leopard (read how to make your display’s gamma in Leopard match Snow Leopard).

Setting gamma to Mac will create over-saturated picture and if you try different OSD presets, you’ll probably notice that nothing changes, even though you are switching between sRGB and Adobe RGB which are significantly different.

To make Dell U2711 display proper sRGB colors, set gamma back to PC and choose sRGB from the presets menu. This gives you the most accurate colors for web design and general use via built-in OSD.

At this point you might want to calibrate with OS X calibration software under System Preferences – Displays – Color – Calibrate. In my case Dell’s default .icc profile was a little greenish (Dell’s profile was already in there when MacBook Pro detected new display).

I was not happy with the results, so I calibrated mine using Spyder3Pro. Download .icc profile and see if this suits your particular display.

The created profile is more or less accurate. Spyder3Pro is a calibration tool for photographers and from what I learned on the internet forums not very accurate with spot colors, so I’m interested to give ColorMunki Design a try sometimes in the future, just to make sure this is true (Belgian graphic/web designer Veerle Pieters wrote a ColorMunki review back in 2009.).

Connectivity

I’m still working on a MacBook Pro with DVI port, so it was a breeze for me to connect the display with included Dual-Link DVI cable.

Newer Apple laptops are shipped with Mini DisplayPort, which leaves you with either Mini DisplayPort to Dual-Link DVI adapter or Mini DisplayPort to DisplayPort cable (both Dual-Link DVI and DisplayPort cables are included with the monitor).

However, I didn’t try any of these, so I suggest you investigate more about Dell U2711 + MacBook Mini DisplayPort.

The former is available in Apple Store, but costs $99 or $75 in OWC, and the later is $25 in OWC store (I’m not affiliated with OWC, but they ship items almost anywhere in the World).

Obviously, cable is a better option than adapters, but it might not suit your particular setup.

However, when the time comes to deliver the prototype, it’s best if you convert it to pure HTML form, especially if the backend development team works with a different programming language…

There’s a handy command line tool wget. It can mirror any live site, including your local copies — and tidy it nicely in your local folder. The command is actually quite simple:

wget -m -k -p http://www.myprototype.dev/

The only thing that’s left is to manually copy CSS images folder. At the time of this writing, wget still can’t read CSS files nor get paths to CSS background images.

Some other uses can be found in Mastering wget.

With the new age of web typography, many designers jumped into the bandwagon, using all this newly available typefaces. But the abundance of options available is actually a pitfall.

Strong sense of typography is still mandatory. Additionally, we still have a number of technical limitations in the digital space (but that’s a topic for another occasion). Let’s discuss the common mistakes and how to avoid them.

Always observe the typeface in a context

When a famous designer suggests her favorite type in a blog post or interview, almost instantly there is a flood of the suggested type on the Internet.

However, we must first understand the personal style of each web/graphic designer, so we can perceive their choice in a given context. You’ll get the most of designer’s favorites if you observe her work done with this particular typeface.

Display fonts won’t work well at small sizes

Most of the display fonts look really great at larger sizes, say 36px and up. But many Great Lookin™ typefaces can’t be used for body copy or even subheadings. You’d have to pair those with something more readable at small sizes, i.e. 12-16px.

Beautiful typeface?

Beautiful Typefaces™ usually have a personality, triggering emotional reactions by nature. Sometimes the form and style are more important than the content, but in reality this is quite rare.

Communication with a personal touch on high-profile news sites is not the best of ideas. Journalism should be neutral, but not necessary in Helvetican sense. Some smart alternatives are typefaces that are common enough to a broad audience, so they don’t distract the communication.

On choosing something different

Phantastic display font™ that is too similar to body/subheadings font — looks odd. The exception are fonts from the same type family (see further in the article). If you want Something Different™, use a contrast that’s obvious, not just a small shade.

There is a thin line between perfect balanced and saturated

Meatball Sundae: “A meatball sundae is the unfortunate result of mixing two good ideas.”

It’s still seen so often: mix and “match” of typefaces that are all fighting for their attention. The reason why type families work well is because the type designer’s intention was to create a compatible set(s).

Not all type from the same designer will work well together. Make sure you have read the manual, i.e. what a font designer had to say about each of his pieces. Designers in fact quite often explain how to combine their type with other kids and what works best.

The checklist

Because this is what you’re here for, right?

Preparation

• List all content/user interface elements, for instance: title, subheading(s), lead, egida, summary, paragraph, list, table, comment/quote, pullquote, caption, infography, link(s), buttons, input(s), textarea, …
• Design the grid: horizontal and vertical rhythm based on content elements
• Establish the baseline (common denominator) and the size hierarchy (element proportions)

by this time you’d have a pretty good idea about what you need in terms of style…

Selecting

1. Find the single type family, the one that can handle the hierarchy and support both display chunks and general readability. Some great examples of such superfamilies are Typonine Sans, Proxima Nova or Meta Serif. Test with the real content.
2. If that fails, choose two type families (one for display, another for body text), that the type designer have explained will work well together. Test with the real content.
3. If that fails, choose two type families that a savy graphic or web designer explained will work well together. Test with the real content.
4. If that fails, do some experiments yourself. Test with the real content.

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.

img { -ms-interpolation-mode: bicubic; }

Handle with care.

Download v.0.17 and as always send your feedback!

Obviously, this article is not for Terminal savvy programmers, but rather for the rest of us who are using drag and drop web server packages such as MAMP.

I guess you already have MAMP installed on your local computer, most likely in /Applications/MAMP. If not, install it before you move on to the next step.

First, download ImageMagick for Mac OS X and unarchive it to /Applications/MAMP/bin/ImageMagick.

Next, open up Terminal.app (don’t be afraid, it won’t bite you), and enter line by line:

$yourmacname> export MAGICK_HOME="/Applications/MAMP/bin/ImageMagick/ImageMagick-6.6.1"
$yourmacname> export PATH="$MAGICK_HOME/bin:$PATH"
$yourmacname> export DYLD_LIBRARY_PATH="$MAGICK_HOME/lib"

Test if everything works up to this point:

$yourmacname> cd /Applications/MAMP/bin/ImageMagick/ImageMagick-6.6.1
$yourmacname> convert logo: logo.gif
$yourmacname> identify logo.gif
$yourmacname> display logo.gif

Last: browse to /Applications/MAMP/Library/bin and open envvars file with your text editor. Change the two uncommented lines, i.e. DYLD_LIBRARY_PATH="... and export... to following:

DYLD_LIBRARY_PATH="/Applications/MAMP/bin/ImageMagick/ImageMagick-6.6.1/lib:/Applications/MAMP/Library/lib:$DYLD_LIBRARY_PATH"
export DYLD_LIBRARY_PATH

If you are using ImageMagick in your server-side application, be sure to set the correct path, for instance in PHP:

define('MAGICK_PATH', '/Applications/MAMP/bin/ImageMagick/ImageMagick-6.6.1/bin/convert');

Restart Apache in MAMP and you’re done.

Due to the nature of the Internet and a broad range of possibilities for any given project, it’s impossible to provide the clients with a fixed quote based on an e-mail with five bullets.

What can you do?

Respond with the best guess estimates instead of proposals, simply to encourage agile development and deal with unavoidable scope changes up-front.

Tip for the clients: unavoidable scope changes develop frustrations on both ends. The frustration is caused by fixed contract or limited budget. Consequently — production delays occur and the quality of work suffers.

With estimates clients get better picture about how overall scope and tight deadline affect the budget and can plan costs for each step accordingly. I found it that for clients it’s easier to decide about the priorities when they have better picture about what they really need.

The benefit of abstract estimates is that you usually end up doing the essential features first, and rethinking add-ons later.

Essentials vs. Add-ons

The best possible investment for clients is to hire pro photographer and/or copywriter to take care of the essential content first. Products, services and about information is a must.

Office photo gallery or office furniture, newsletter system or custom made contact form, blog or forum is an add-on. User comments might be essential, but user registration or activity log is an add-on. Simple send video link form is essential, but custom made video uploader is an add-on (the later will also produce hosting/bandwidth costs, since you have to store those uploads somewhere).

Tip for web producers: The quickest way to filter serious projects is to simply reply with a ballpark costs, for instance:

“Such sites usually cost between X and Y hundreds, thousands or millions <insert prefered currency here>.”

Production of community based interactive web site with file uploads based on WordPress can indeed take from a week to a couple of months. And if it’s urgent, that means doubling the agency staff and raising overall costs.

Web design packages

But don’t offer packages, that’s irresponsible. We are not in a car industry. You don’t manufacture 1000 pieces of the same model each year, so you can’t create equipment packages. You couldn’t possibly analyze the costs of every single optional feature with a dozen (or two) projects a year. The sample is too small and the variety of options is too wide.

When buying a car you don’t go to a car factory and negotiate about wether the logo should be bigger or a little bit more on the left. You only get what’s offered. That’s unless you are a buyer who’s not asking about the price.

With cars it’s easy to create packages and set the prices, but with web sites virtually everything is an option. Except the domain name, of course.

What makes it different from other web events?

We are keeping it small. Only 60 seats on the first day, and a small workshops groups of 10 or 20. We have a strange habit of asking each participant to introduce themselves to everyone in the room the first thing in the morning.

We are there for you the entire day, so whatever question you ask, we’ll be able to answer. There is plenty of time for every participant. We want you to wake up the day after full of new ideas.

When, where?

WMD Center in Zagreb, Croatia on 25 + 26th May 2010.
(International visitors, please contact us at info@webradionice.com)

The greatest collective experience

The day one brings you names with the strongest portfolios in this part of the planet. Genuine producers dealing with real projects, real clients and real deadlines:

• Vanja Bertalan, Co-founder & CEO, Web.burza
• Alen Grakalić, Founder, CSS Globe
• Vedran Gulin, Creative Director, Proximity
• Goran Peuc, Senior Designer, Nivas
• Marko Prljić, Creative Director, Freelance
• Marko Dugonjić, Creative Director, Creative Nights

Expect nothing less than topics about inside agency life, what affects pricing, what percentage of work is actually showcased in portfolios, what can go wrong with the project and how to deal with that… or simply how much time does it take to create an extraordinary web site.

No theory bullshit, only pragmatic experience.

Interactive intimate workshops

Interactive workshops are held in two parallel tracks with tiny groups of 10 for Usability Testing Basics or 20 for Pro jQuery.

Bring your laptops and load your own project or current client work in a browser and update it instantly with what you’ll see and learn on the spot. We will be able to conduct mini usability testing sessions for a participants’ selected projects on the day or suggest user interface improvements with jQuery.

In a mean time, become a fan on Facebook or subscribe to our newsletter.