I won’t go too much into that. I’m definitely pro-ban. I just want to say this:

It’s sad (not to mention pathetic) to see all grown-up people acting like my 9-month old niece when I take one of her toys from her. I’ve seen drug addicts with better attitudes than some of the smokers out there (and I mean it).

If you’re in a closed place and you smoke between non smokers, you suck. If you moan and whine about the smoking ban in everyone around, you suck and you don’t have anything exciting to do with your life. If you decide to follow the ban but light a cigarette in an enclosed place as soon as you see another one do this, you suck and you have absolutely no personality.

Will this ban have any kind of luck in Greece? Probably not, because we’re one of the most dont-fucking-care-about-others nations in the whole wide world.

But some people have got to learn to play by some rules, someday.

I will ask you, dear readers, to point your browser to an article page in Reporter.gr (say, this one), take a deep breath and count how many animated banners and paraphernalia you can find littered across the page.

I count:

• One 468x60 banner on top, accompanied by two 120x60 small banners on its right. That makes three.
• One big, 728x90 banner just above the content.
• Three 120x300 banners in its right sidebar. Not to mention the Google Ads just below them. But Google ads visual clutter is irrelevant compared to this lengthy animated behemoth.
• The obligatory 300x250 inline banner in the article text.
• Another 120x300 banner on its left sidebar, accompanied by a small 120x60 just below it.

So that makes:

3 + 1 + 3 + 1 + 2 = 10

That’s ten, my dear readers. Friggin’ ten animated banners on the same content page. Not to mention 3 revolving “New!” .gifs right there on the menu and the animated logo. Jesus web designer Christ on the advertising cross.

It’s a wonder my 2.5 years old Macbook hasn’t exploded yet with this page open in Firefox. Clearly, this is in-content advertising gone terribly wrong.

An example to steer the hell away from.

• Tastespotting.com has the most nailed-it-down interface I’ve ever seen for a food site, of course, heavily aided by its great content. I dare you to check out those photos and not drool, once.
• Not exactly news, but zen living blog powerhouse zenhabits.net posted an excellent post recently, citing 55 ways to get an energy boost. Absolutely worth reading.
• Really cool insight on how to start your own web design workshops by maratz.com. Will prove really interesting for the future (hint, hint).
• This article from sixrevisions.com really nails how difficult is to design for the worst client of all, yourself. Really helped me tying some loose ends here and there.
• I dare you to head over to Pretty Loaded and not get mesmerized by the slew of cool looking preloaders. Yum.
• I love reading case studies. An excellent case study I’ve read recently was that of Wiltshire Farm Foods by Headscape. Very inspiring.

I think I gave you enough links tonight to keep you busy for a while. Now excuse me, will have to drag my sunburnt self back to bed and try to ease my pain.

Over my (few) years of web design experience, I’ve become anal pretty worked up with what my code looks like. It must be an old trauma from my university years, where well-written code well, let’s say, wasn’t exactly the norm (.c include files - yes, I’ve seen that with my very own eyes). As a result, be it HTML or CSS or PHP or Javascript, I can now proudly say: I write girl code.

(Don’t look at this site source code - it’s not mine. It’s an adapted template - yep, don’t ask when my new template will launch).

One thing that’s pretty important while authoring CSS for relatively large projects is the way you structure it. We’ve already discussed single-line or multi-line in this blog, plus the way you define sections and so-called variables in your CSS are already known topics. But I’ve decided to beat that dead horse a bit more.

Multi-line doesn’t cut it and single-line sucks

There’s a way to structure CSS that I want to experiment with.

I think that multi-line CSS is very readable but a total waste of whitespace and bandwidth. I also think that single-line CSS can become exceptionally tedious, especially with properties like border-radius, that require at least three lines to work relatively consistently across all modern browsers. Working in multi-line CSS and converting it to single-line just before publishing sounds a bit like an overkill to me, all those back and forths!

So what do we get when we mix the best elements of both methods?

The compact multi-line CSS structure! Tada!

*crickets chirping in background*

Well yeah, lemme show you how it’s (supposed to be) done.

How it’s done

In compact multi-line CSS, you keep the multi-line-ity of it all, but you group “relevant” properties. You know which they are: margin goes hand in hand with padding, position loves top, left, right, bottom, font properties should propably go hand in hand with line-height and letter-spacing, et cetera, et cetera.

Let’s take an excerpt of my CSS3.gr CSS and try to convert it:

.about-more h4	{
	padding: 0;
	margin: 0;
	border: none;
	color: #666;
	font: 14px Georgia, "Times New Roman", serif;
	text-transform: none;
	letter-spacing: normal;
	position: relative;
}

In compact multi-line, that would be:

.about-more h4	{
	margin: 0; padding: 0;
	font: 14px Georgia, "Times New Roman", serif; text-transform: none; letter-spacing: normal;
	border: none;
	color: #666;
	position: relative;
}

We’ve gone from 8 lines to 5, without sacrificing readability much. How about:

#footer-disclaimer	{
	text-align: center;
	font: 10px Georgia, "Times New Roman", serif;
	text-transform: uppercase;
	background: url(./themes/site_themes/css3/skeleton/disclaimer-bg.png) no-repeat top;
	color: #97ACA3;
	letter-spacing: 1.2px;
	padding: 20px 0 10px;
	margin-top: -10px;
}

…which gets the short treatment to…

#footer-disclaimer	{
	font: 10px Georgia, "Times New Roman", serif; text-align: center; text-transform: uppercase; letter-spacing: 1.2px;
	background: url(./themes/site_themes/css3/skeleton/disclaimer-bg.png) no-repeat top; color: #97ACA3;
	margin-top: -10px; padding: 20px 0 10px;
}

That’s 8 lines to 3! Quite a score, innit?

Of course, your mileage may vary and benefits won’t always be that obvious. Nevertheless, nothing restricts you from further improving this method, by alphabetizing your inline properties or put them in the order that just feels logical for you (for me, width is always before height and margin before padding).

I haven’t used it (yet), but I think I’ll try it in the FancyCage CSS I’m putting together. Well it’s no Typekit, but it may help you a bit while structuring CSS.

Hey, at least I tried.

If you’re one of the few people that grace my Adium contact list pretending to be away, you should have observed it so far: I gave up on IM. I just had to.

It wasn’t that hard, I just stopped using this means of communication. Nowadays, I mainly use Twitter and e-mail to get in touch with people, the former more so than the latter. OK, I do use IM, but just for intranet purposes at work, using our homemade Pathfinder Instant Messenger. And that’s about it.

Why, I can hear you ask. I’ll tell you why. Because it’s so damn time-consuming I couldn’t do anything with Adium in the background anymore. It was the feeling that I cheated on people and made them feel bad when I wasn’t promptly replying to their messages. That’s why I found Twitter so liberating: noone expects you to be there and reply to every given moment. Well, noone should anyway.

So at first was productivity. I found myself more productive and efficient while at home. I wrote more, designed more and learned more. I learned to manage Twitter distractions and incorporate it in my workflow without serious drawbacks. And everything was fine for a while.

But I lacked something, and that was real-time human communication. And for that, I decided to take my Friday (traditionally at home) nights on IM. Just to keep in touch with friends and add to the overall relaxing feeling. Some light gossip, some link exchanging and that’s it. You give a little but you gain a sense of social satisfaction.

So I was wondering, am I the only one that declared IM bankruptcy? Surely there are more of you that just stopped using it at some point.

Do you still keep tabs on IM friends by logging in every once in a while? Or you just use Twitter and Facebook to communicate with people?

Do share your opinions in the comments.

Today was a different day. Everyone was rambling about some missing feature on Twitter, tagging their blazing tweets with #fixreplies. I didn’t realize what the fuss was, until I read an insightful comment at some blog: Twitter has removed the option to get replies from people you know to people you don’t, making users’ streams a far quieter place.

Following me so far? Good.

You know why I didn’t realize what’s the problem? Because I had that friggin’ option turned off.

It was the only way I could take control of my buzzing Twitter stream and keep it (relatively) noise-free. And I wonder, seriously, how can people cope with all the noise coming from their chatty followers. But choices are choices, I won’t judge.

So all of a sudden, there’s a Twitter revolt.

Don’t get me wrong, I’m all for user rights and all. But I think the whole #fixreplies thing has gone (already!) too far. Why?

People adding stuff in front of their @replies to get them public.

Seriously, people. Don’t. Why?

1. It breaks conversations. Twitter (and other relevant applications) cannot track conversations (in reply to) between users if you keep adding nonsense in front of your @replies. So we lose in context.
2. It obliges us, Twitter users that had this option turned off, to see each and every one reply of yours, even if we don’t. Frigging. Care.
3. It makes you look like a spoilt brat. Even if you’re papa Meyer or my beloved Andy.
4. It’s utterly spammy for no reason and all.

So the problem is, people: You’re getting the whole issue to other users and NOT Twitter. Don’t blame us. Don’t flood us. Follow proper online policy, breathe deeply, shut down your machine and get a drink.

Then come back and forget all about it in, like, two days. You’ve done this before.

Disclaimer: If this ridiculousness goes on, I’ll start unfollowing people. Not that you care, but I thought I should share the thought.

Of course there were ways, but I couldn’t sympathise with any of them. I, for example, always stumbled upon this problem while styling pagination links for galleries and image carousels.

Then came the day when display: inline-block became famous and, as by magic, everything changed. After a bit of tinkering, I found an efficient and (mostly) cross-browser way to center elements, without resolving to floats.

You can follow the technique below or skip directly to the witty, quick & dirty demo I’ve come up with. Go on, I dare you.

T3h HTML

So what do we have here? Nothing too fancy, just a simple unordered list:

‹ Previous
1
2
3
4
5
Next ›

T3h CSS, take #1

So we want this list centered, with each element neatly next to its previous. OK, let’s get down to business:

ul	{
	margin: 20px;
	padding: 0;
	list-style-type: none;
	text-align: center;
}

li	{
	display: inline-block;
	margin: 0;
	padding: 0;
	list-style-type: none;
}

li a	{
	text-decoration: none;
	color: #555;
	padding: 4px 6px;
	border: 1px solid #ccc;
	margin: 0 4px;
}

li a:hover	{
	border: 1px solid #999;
	color: #333;
	background-color: #f2f2f2;
}

Wee! Looks cool. Now the tricky part: let’s start the browser testing…

(5 minutes later)

Phew! Firefox, Safari, Opera and Internet Explorer 8 seem to be working fine with it!

And Internet Explorer 6 and 7… Well…

Let’s say they don’t love inline-block to bits.

T3h CSS, take #2

Hmmm… How about turning display: inline-block to display: inline? Internet Explorer loves display: inline! And maybe a little of this trusty ole jar of hasLayout cream we always have available on our web-des shelf. Let’s add a zoom: 1 declaration to li as and see what happens (I used the star and the star-plus hack to target IE6 and IE7 only, but in real life designs, you really should use conditional stylesheets):

* html li	{ display: inline; }
*+html li	{ display: inline; }

li a	{
	text-decoration: none;
	color: #555;
	padding: 4px 6px;
	border: 1px solid #ccc;
	margin: 0 4px;
	zoom: 1;
}

Tada! Mission accomplished. Pat yourself at the back and go get a cup of tea, you’ve deserved it.

Disclaimer: I don’t claim this will work in older versions of proper browsers (namely, Firefox 2 or Safari 2 or yada yada). Frankly, I don’t care, and neither should you. It works fine for the occasion here and there when you want to center stuff. If you have a better / cleaner solution, I’d be glad to hear all about it in the comments.

I blame my university years for my procrastination curse.

Not that anything (much) was wrong with my academic studies, but the whole mentality of (greek) university oozes procrastination: most of the time, there’s not an everyday reason for you to do stuff. There were projects and exercises, yes, but those could be easily (?) tackled the last two or three days of the deadline. Or not.

Since I’m trying hard to face this aspect of myself, I’ve given a chance to time tracking software. I found that I focus more easily on a task if there’s a visible timer around the screen, ticking away, measuring my attention time. Believe it or not!

My first try was something in the lines of Billings and On The Job for Mac OS X. They’re clearly an overkill since I don’t use the invoicing features for my personal projects (or maybe I should) but I like the fact that I can set timers for tasks and group them into projects. But I’m still on the lookout for a better, more effective, less bloated solution.

So my questions are: Do you use some kind of time tracking device or application? Is it online or offline? Digital or analog?

Do share your experience in the comments.

Spring comes and passes by with some interesting free-time projects.

Stelios and me started working on a simple thingy, just because. It’s called FancyCage and it’s fun.
If you’re curious about what-the-heck this is, just look around the landing page. There’s gotta be a comment hint somewhere!

You can subscribe and keep in contact with FancyCage by filling in your e-mail address in its brand-new landing page. Or just follow the #fancycage Twitter stream for real-time updates.

Keep posted for more!

It’s only normal that I’ve tried a dozen of Twitter clients during those years, both for the Mac and the iPhone. I liked some, I loved a few, but I keep going back to my initial choice: Twitterrific, for both environments.

I really cannot get the whole fuss about feature-rich clients, to be frank. User lists and the whole hullaballo spoil big time the direct effect of Twitter I love so much. I suspect that people use lists to avoid the noise from particularly vocal Twitters, but if you never check someone’s tweets, why have him in the follow list anyway?

From time to time I go to un-follow sprees - but they’re short. I think my list now is noise-less enough and I intend to keep it that way. And I tweet mostly in afternoons and weekends, when I supposedly have more time to spare, I guess.

So my question is: How do you Twitter? What do you use? When do you tweet the most?

I’d be fascinated to learn about your tweeting schemes. Shoot me.