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, 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

New site

The Tech day of Web.start conference went really well. Apart from being a pioneer conference in Croatia, once again I’ve witnessed the importance of the networking aspect of such an event.

Today, I met guys who I knew only over the internet, so I’ll have to update my XFN relations for the following people: Siniša Dukarić, Stjepan Zlodi, Nikola Plejić, Nikola Denić and Marko Bijelić.

All in all, presentations were quite interesting, especially Joel Spolsky’s The Joel Test: 12 Steps to Better Code and Marko Bijelić’s Information Architecture — mostly because of the presenters’ entertaining style.

Hope to se more of such happenings in our corner of the world.

Update: Vanja and me are not visiting the second conference day. However, in Friday you can meet our fellow developers — Tomaš and Marijo.

Creating the perfect vertical space on the screen is easy. With a few lines of CSS, you’ll have a great typography foundation for your web site. Let’s begin…

Global line height is usually set to html or body element. In this quick lesson, we’ll use a line height of 1.5.

* { margin: 0; padding: 0; }
html { font: 62.5%/1.5 "Lucida Grande", Verdana, sans-serif; }

You’ll also notice that we reset margins and paddings globally with the universal selector.

Since the paragraphs and lists (and their child elements, too) inherit the line height value, setting margin bottom equal to element’s line height ensures correct vertical rhythm.

ul, ol, dl, p { margin-bottom: 1.5em; font-size: 1.2em; }

Most often—for various reasons—you don’t want to set font size of a block-level element that by default must have block-level children, like for instance unordered list must have. You would instead specify font size for list items, definition terms and definition descriptions:

li, dt, dd, p { font-size: 1.2em; }
ul, ol, dl, p { margin-bottom: 1.5em; }

Now we only have to redefine bottom margin of lists to 1.8em. It is calculated by simply multiplying element’s line-height by child element’s font size (1.5 × 1.2em = 1.8em)

li, dt, dd, p { font-size: 1.2em; }
ul, ol, dl { margin-bottom: 1.8em; }
p { margin-bottom: 1.5em; }

Use the same principle when dealing with other elements: headings, tables etc., and within a minutes a sound vertical spacing will be accomplished. Still hungry? Head on to Compose to a Vertical Rhythm.

Addenum

This article is also available in Russian. Big thanks goes to Errant.

Got it directly from Malarkey’s referrer logs — Transcending CSS iPod shuffle. BTW, have you Spotted the diffrence?

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!

Not long ago I became a proud owner of a MacBook, which created a need for a home network setup. Since the comfortable dimensions of the computer allow for working on a different places inside the apartement, I went for the wireless LAN.

Zeldman’s recent trouble with his DSL line encouraged me not to pull all my hair off. Luckily, my dilemma was somewhat of a different nature. Since we live in a rented flat plus the local branch of T-com won’t sell you a DSL line separated from a phone line (and the phone line owner, which I’m not in this case), the default modem/router they’d provide along with a two year contract was not an option.

For the last few weeks I spent some time learning how to match PCs and Mac on the same network—you know: manually et all. In fact I always wanted to learn more about this area, but never had a need for it… We have almost five years old XP Pro installation on my main PC and only God knows what ports and sockets I blocked back then when it was the only machine in the house. With PC being such a fortress, traditional Windows Network Setup Wizard wasn’t very helpful, so I had to buy some extra hardware to handle all the traffic. When I purchased it, the super quiet MacBook Pro was meant to be the only machine still awake and working in those late evenings when the family is in bed.

Router, DHCP and network setup

The real trouble was the original modem provided by the ISP, which was connected to the PC with USB cable. Needless to say, that particular model is absolutely useless with Mac OS, but the local telecom supports Windows OS only. Thanks for nothing… Finally, I bought D-link DSL-G684T DSL Wireless Router (Download manual & latest firmware in Croatian). I’d go for LinkSys, but unfortunately they don’t have wireless routers with DSL modem built-in.

Anyway, if you want’t to do it right, you have to do it yourself. Automatic DHCP didn’t last long, ‘cause with every restart of any of the network devices all the IP’s messed up. At the end all the relations had to be set manually, so now the router is 192.168.1.1, PC is 192.168.1.2, Mac 192.168.1.3 and so on…

In the router interface, which is by the way rich with options, but ugly as hell—I set a range of static IPs, with MAC/IP pairs, so now there is no IP hijacking when some of the machines is pulled out. All the non-assigned IPs are disabled, which is additional security layer (at least that’s what they told me).

On to DSL setup…

The thing which caused me the most headache were VPI and VCI numbers, which were predefined for the German market. Fortunately (or sadly), I was not the first one with such a trouble, so I found a valuable forum post, where I found correct VPI and VCI values along with solutions for other possible causes that are on your way when establishing ADSL connection.

A few additional home networking security tips

WEP security protocol is easy to crack—you probably wouldn’t want to support all the neighborhood kids hanging on your line. WPA/WPA2 Personal is much more secure, but some older devices won’t work with it. Read very brief Configure Wireless Security for small Network.

Another security layer is limiting your antenna transmit power to as low as possible. For my needs I lowered it all the way down to 6% (the lowest value router allows) and it still gives me great performance anywhere in the condo. Naturally, if you keep your signal down, less network scanners would notice your presence.

Blackduke, portfolio of Tin Kadoić in its’ 12^th incarnation goes web standards. And now with a blog. Site is developed by Unpljugged.

Don’t miss the finest print and screen projects. The personal fav is Fresh Air (see picture below).