Dear Wikipedia,

don’t do that.

Users act by habit. Yours is a search-based service. You moved the search box (the single most-used element of your design) from the center left to the top right. You have a fluid design. People love 24” or even 30” monitors.

Do the math.

It’s a wonder users haven’t started a riot yet. If I were a hardcore Wikipedia user, I’d have started one for sure.

Tabs (earlier) and overlays (later) are two of the most widely used web interface patterns. By using them, one can organize a complex user interface in seconds, guiding the user to see what he’s meant to see and not get confused by other modules of the application.

When combined though, an interesting little beast emerges: the tabbed overlay.

A service that uses this kind of overlays is Google Docs. I use Google Docs often, mainly to collaborate with greek bloggers on interviews that consist a part of my monthly columns at PC Magazine.

The tabbed overlay is used when you try to invite other people to your document. You try it with me: head to Google Docs and click on Share > Invite people. You add an e-mail address or two in the invite textarea, you add a message, you click send and invitations go their merry way. You can also change permissions by clicking on the Advanced permissions tab and making the necessary changes.

But what if you want to invite people and change permissions, all in one step?

Unfortunately, Google Docs does not support that. You can either do one or another, since when you click on the Advanced permissions tab, the submit button changes from Send to Save & close. This led to an interesting error by my part, the other day.

I’ve filled in some e-mail addresses and then clicked on Advanced permissions. I then clicked on Save & close, thinking that the invitations will be sent anyway, since I’ve filled in the relevant details in the previous tab. Alas! Save & close just saved my permission settings and never sent my invitations.

Needless to say, I was kinda confused when I was informed that my invitation hasn’t been received. After tinkering a bit with the interface, I got it: I was wrong. The form does not “remember” my data from another tab and submits it all together. I must first invite people, then change the permissions. However, strictly from a user point of view, it would make sense if I could just enter my data in all tabs, hit one submit button and be done with, no?

This is one of the cases that the use of this UI module is not optimal. It’s not a major faux pas on Google’s part, but the fact that it even got me, a web designer who’s dabbling into UI design daily, is quite interesting. What about users that do not know about the form submission mechanics?

Maybe a different kind of UI magic should be in place there – for example, I’d move the two checkboxes from the Advanced permissions tab under a More options header on the Invite people tab, which would be hidden by default and visible on demand. Something like this: (expanded view)

I think it makes more sense that way – and we could skip the underwater usability reef that’s lurking there.

You may or may not know this, but I’m a terrible wannabe overachiever.

When I start working on a project, I don’t just want it to succeed, I want it to be the best. I have visions of extended A+ reviews from fellow web designers and enthusiastic phone calls from clients, analytics pages that go really over the top and thousands millions of happy users.

Of course, all this fantasy gets me in trouble more often than not. I bet you know why: creative procrastination.

What does it mean, in a nutshell? I’ll visualize it for you: me, staring at the screen, pen & paper in hand, designing in my mind, laying out HTML snippets, styling with CSS, solving complex design problems, conducting usability reports and studying ROI analyses.

All. In. My. Head.

That’s a bit too much, as you know. It usually means that by the time I lay down a single line of CSS I’m so tired and confused it’s not even fun anymore. But I love my work, so it should be fun right? Right. That’s why you just need to keep going.

Every time you stumble upon a web design roadblock and lose two minutes of your precious time thinking of how to overcome it, stop and run in the opposite direction, immediately.

If you’re pondering too much over a design problem, do a bit of brain-dead form coding. If you’re totally bored of coding HTML, stop and sprinkle a bit of CSS magic to your project. If you feel confined in your browser window, fire up Photoshop and start designing out of the box. Most important: never stop working on your project. Less thought, more work.

I guarantee, a moment’s gonna come that your project will just look at you, shiny, finished, and you’ll marvel at how streamlined your process was this time.

“But, Sug, what about the correct way of web designing?”, I hear you thinking. As with most design workflows, there is really no spoon. No panacea, no proper way of doing stuff. Hell, I always say “HTML first, CSS second” yet I always start coding CSS as soon as I get a vague idea of the site. Nasty, nasty Sug.

Learn your way of working and try to live with it. Don’t fret over the little things, they will eventually get ironed out before launch, promise.

Just don’t stop working.

One of the most common questions I get over e-mail & twitter is the infamous “Do you have any good design books to suggest?” one. I wouldn’t blame those people – there is an abundance of books (even good ones) out there and it’s really difficult to read between the lines, Amazon reviews or not Amazon reviews.

Due to this, I’ve decided to mark the first week of my #p52 project with this blog post. Without further ado, here are my favourite web design books of all time, in the order I’ve read them:

1. 

   Designing with Web Standards (3rd Edition)

   By Jeffrey Zeldman

   The second version (the orange one) of this book is one of the first books I’ve been fortunate to read on web design. And believe me, it’s a hell of a starter on proper web design, and by proper I mean standards-based.

   This book is not a technical one – eventhough its second part gets into the nitty-gritty of stuff. Its value lies in the background information on standards, the definition of things like the browser wars, and the arguments pro and against standards.

   It’s a great book to read if you don’t have a clue what the heck is web standards in the first place, and an awesome book to return to when all hope withers and clients are raving on your phone about scrolling marquees and animated .gifs.

2. 

   Don’t Make Me Think: A Common Sense Approach to Web Usability, 2nd Edition

   By Steve Krug

   What? I hear you say. Is she for real? A book from the *gasp* 2005?

   I know, 2005 feels like an eon away in web years, but believe me, those 4,5 Amazon stars are not there just for show. Krug managed to pack a great deal of insight in a lightweight and funny book you could read on a plane trip.

   Don’t Make Me Think, as Designing with Web Standards, does not focus on the technical aspect. Krug explains in simple terms why we must stop placing hurdles in front of our users (and potential clients) and demystifies some of the most common web faux pas.

   If you could only get one book on web design, this should be it. Witty and to-the-point, Don’t Make Me Think is an essential book for all designers, developers and front-end magicians.

3. 

   Transcending CSS: The Fine Art of Web Design

   By Andy Clarke

   If Designing with Web Standards was the book that got me into the whole hullaballoo, it was Transcending CSS by famous web trickster Andy Clarke that guided me to the light.

   Hyperbole? Probably. What I know is that Transcending CSS proved itself more useful than I’ve ever imagined and changed the way I wrote HTML & CSS forever. Gone are the usual code listings and “Reminder!” footnotes; Andy takes us into a wild ride around semantic code in a really, really handsome book you just love to flick through.

   If you already have a solid grasp of CSS but you need that extra something that eludes you, try this book. I guarantee you will write better code, right after you flip that last page.

4. 

   Designing the Moment: Web Interface Design Concepts in Action & Designing the Obvious: A Common Sense Approach to Web Application Design

   By Robert Hoekman Jr.

   Those two little books by Robert Hoekman Jr. were two very pleasant suprises. I really didn’t know what to expect when I bought them, but they proved really valuable and informative.

   Reading them, you’ll stumble upon concepts like kaizen and the 5S approach, while you’ll learn (using real-life examples, I always love those) how to chisel those interfaces of yours into UX masterpieces.

   If you love application design and feel you can do better in keeping your interfaces lean and mean, these two books will help a ton, I can vouch for them.

5. 

   Handcrafted CSS: More Bulletproof Web Design

   By Dan Cederholm

   This is one of my latest favs. I happen to love the way mr. Cederholm writes – he seriously makes me feel calmer, more confident and a little bit zen about web design.

   Handcrafted CSS is a pretty recent book, so expect extended coverage of all the latest and greatest CSS techniques and a thousand and one reasons why you should use them, right now. I bought the DVD version, in which mr. Cederholm offers face-to-face advice about advances in CSS design and gives real-life examples of forward thinking in web design.

   If you have any doubts concerning CSS3 techniques, if you still cling to IE6 with a vengeance and firmly believe that every design must look pixel-perfect in all browsers, do us all a favour and get this book. Like a cup of good green tea, this book will make you feel more balanced, instantly.

Disclaimer: All title links above contain my Amazon associate ID, so if you buy something by following one of the links, a little bit of shiny gratitude will come my way. Glee!

This WGSS will be really, really short. I promise.

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.

Ah, the smell of freshly written CSS code on Friday nights. What’s not to love.

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.

Up till (relatively) recently, I had a major gripe with HTML & CSS. I couldn’t find a proper, efficient, semantic way to center align left floated elements.
Gee, what a mouthful, even writing about it gets me edgy.

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.

Hear that? No? It’s the huge web design uproar, caused by a (relatively) innocent post down there at Carsonified blog. It’s the sound of designers clashing their lightsabers mice tablets, asking for blood, waiting for revenge, twisting their thumbs pointing down.

Ok, I do kid, but seriously people, what’s the whole fuss?

For those oblivious, Keir Whitaker of Carsonified posted a blog post, calling designers to well, design a holding slide for the upcoming FOWA event, without being paid of course but earning your place on the screen, complete with URL or Twitter username. It was supposed to be an innocent design competition, supposed to be fun.

It’s not anymore.

Web-des superstars like Paul Boag and Mark Boulton cried foul at this contest. Along with other designers, they insist that this is spec work and people should not invest time at it, if they’re not getting paid. I’d say, alright, I’m the first one to claim that free is dead, but seriously…

Is it so important?

It’s supposed to be a simple design competition, the likes of which we’ve seen countless times on the interwebs so far. Why the revolution? Why demand money for such a simple (in my simple eyes) task? Either you like the idea and you do it, or you don’t like it and you don’t. Is this whole 130 comments thing really necessary?

I’d be more critical on Carsonified for their latest spamming failure, but this? Come on people. Where’s the fun in being a web designer anymore?

I absolutely love most of the work of Squared Eye. So much attention to detail and lovely designs, I always love that. They even went as far as to provide us with two awesome looking case studies based on two of their works – lovely, lovely.

I often use one of their sites, PatternTap.com, to find design tidbits and get inspiration when designing a widget (since I don’t have my LittleSnapper library with me when at work). Most often than once, I found myself trying to search / browse among the stored screenshots for a specific style.

PatternTap provides two ways of filtering images: by tags and collections. I haven’t had much luck using both. Let me explain why.

Are those all?

First of all, when clicking on one of the options above, you get a nice sum of relevant keywords. I always find myself wondering, what, that’s all? Are those all the possible tags that people used? Are those all the possible collections of all users? For some weird reason, this way of showing stuff does not convince me that it’s accurate.

Alphabetical? Reverse Alphabetical?

Are those tags / collection names sorted? If yes, how? I’d prefer it if they were presented in an alphabetical order, I wouldn’t have to scan the whole list to make sure the tag I look for is not included.

Collections without Images?

Some collections I’ve tried (namely Borders) yielded zero images in expected results. How can that be? Why is the collection there anyway if it’s empty?

Dude… wait, what?

Users are notorious of their short memory. Then how come there’s no indication whatsoever of the sorting filters I’ve used in the next page? The breadcrumbs only say, Collection / Sort. Yes, sort, but sort by what? There is a (wise) Reset button, but no obvious way to see what you’re resetting. You have to re-open the Tags or Collections menu to see what’s selected and what’s not.

Plus, uhm…

A tiny “no results” bug!

I may be nitpicking there, I don’t design better than those people but I found those flaws while using their site, not while admiring their work. It’s just some issues that could be easily resolved, in my humble opinion, leading to an even better service.