About two months ago, I was invited by Basilis Kanonidis of creativeg.gr to speak in the second greek WordCamp, which would take place in Thessaloniki in early June.

At first, I reacted as I always react to new challenges: I won’t be good at it. I won’t know what to talk about. I will stutter and lose my train of thought. An ACME anvil will fall from the sky right on top of my head. You know, it’s a cruel thing, sabotaging yourself, but I’m trying to get over it.

Then I realised, there is something I want to talk about, something that disturbed me every time I checked the Wordpress premium themes marketplace. So I forced myself to steer clear of procrastination and work on this idea, and soon realised I really, really liked working on it after all. Plus, I’d get to visit beautiful Thessaloniki again after 11 years and have fun with some dear friends! What more to ask for?

Skip to 4th June morning.

Mild pre-presentation stress. Rehearsing the slides in my mind while brushing my teeth. Arrived early with Thanos, so we had the chance to break some glasses socialise a bit more. Marveled at the weird Thessaloniki weather – scorching heat, cloudy and then, pouring rain? Wow.

Then the event started, Basilis gave us an intro and Dimitris hopped on stage to talk about what he loves more, blogging. Since I was second in the speaking schedule, I tried to focus on what Dimitris was saying without worrying about that ACME anvil – I think I succeeded.

Then, it was my turn. And I talked about this:

(I hope it makes sense without my presenter notes. If not, leave a comment and we can discuss it over e-mail.)

Phew, done! I think it went well. Worry-free now, I sit comfortably to watch the next presentations.

Apostolos gave us some hints on good theme design practices from a blogger’s viewpoint. Thanos talked to us about typography (and his project WireframePlus – do YOU know what WireframePlus does?), Vasilis gave a very informative presentation on using Wordpress as an advanced CMS, Gerasimos introduced us to the pros and cons of Wordpress frameworks, Fotis decided that merging CodeIgniter and Wordpress would be fun so he told us to go for it, Basilis showed us how easy it’d be to setup a mini social network using BuddyPress, while George Kanellopoulos from Microsoft gave two presentations, on Wordpress & Microsoft Web Platform and on HTML 5 that I’m sure many found interesting.

It was excellent.

I love the vibe of this kind of events – many savvy people in a room, talking about what they like best and socializing, networking, having plain stupid fun. If I changed one thing, it’d be the fact that I didn’t talk with as many people as I wanted to, as I’m kinda shy – next time, if you see me around drop by and say hi!

These two days were such a welcome break from my routine – walking around the city discovering places (and ruining my feet – damn you, strappy sandals), having good food, being lazy in Navarinou Square, gazing at the lovely Roman Forum view from our hotel window, walking by the sea, all lovely and a great start to my summer.

Thanks to everyone involved and special thanks to Thanos, Yiannis, Gerasimos and Eleni for showing us around the city. You rock, peeps.

Here’s to a great third WordCamp next year!

I’m the worst freelancer in the world.

I wish I was one of those industrious web designers that can work for a focused 4 hours and produce small miracles, but alas, I am not. I never was. As I’ve already explained in My (totally) Paranoid Way of Working, design is such a heart-wrenching procedure for me, I sometimes wonder why I chose to do this for life.

For over a year, I’ve been going around claiming to be a freelance web designer and I had no real portfolio to show. Nothing. Nada. Zilch.

I worked my derrière off in numerous projects throughout 2010 and I had nowhere to showcase them. On a whim, I created a Behance.net profile and started populating it with my work, but it never felt right.

During all this time, I kept working on it, on and off, based on an elusive idea I had in early 2010, an idea that said I should divide my work into two separate fields: design & content. I liked that idea a lot, however, I never found enough time to really put my soul in it and I kept pushing this particular to-do list to the bottom of my favourite GTD app.

So my portfolio design lagged. And lagged. And lagged some more. Pressing deadlines and client projects always got in the way. My own perfectionism, always a huge problem, whispered in my ear all the time that if you gonna do it girl, you must do it well.

All in all, it got me over a year to put together something that could be done in a week or less.

But I don’t really regret it. Working on this thing for so long has given me the luxury of sweating over small details that I wouldn’t normally sweat over (for example, how to create miniature Safari, Coda and Mail.app windows for the different kinds of work I’ve done).

I can now safely say that a huge burden is off my shoulders. I have a place I can call home, where I can properly showcase the projects I work on.

In that sense, Sugarenia.com was so worth the wait.

Thanks all known (and unknown) suspects for keeping up with my whining and nagging me to finish this thing.

Hat tip to all of you for the warm welcome. Now, if you want to hire me, you know where to find me.

As I sat down on my desk to start typing the obligatory enthusiastic blog post about New Adventures in Web Design, one thing dawned to me: I really don’t know what to say.

Other than I had a terrific time, that is.

The place

Maybe I see things through the tourist’s rose-tinted glasses, and maybe I like UK a bit too much for my own good, but I loved Nottingham.

The city is pretty and clean and friendly. People were eager to help and cheerful. Everything was just a walk around the centre – none of the usual London hustle. It was cold but not too cold – even though the temperature dropped below zero at nights, I felt quite nice for the exotic bird I am.

It was a great place to host a conference – not too big, not too small, just perfect.

The talks

I spent a full day hearing web design supernovas talking about new ideas and perspectives. What’s not to love?

Each and every presentation had its unique charm. If I had to choose one as a highlight, that’d be the one lovely Ms. Veerle Pieters gave. Not that it was the most innovative, but because it felt like it was made directly for me, procrastinating little me that always struggles to find inspiration and turn it to something useful. It’s good to see that people as insanely creative as Veerle is face the same dilemmas and anxiety as everyone else.

The people

Conferences should be all about the people though. And what matters the most to me is that this particular conference was a terrific chance to see Yiannis again (and share a room, school excursion style) and finally (emphasis please) meet Maria, aka acidsmile, aka one of my favourite people on the webs since time immemorial.

I also had the chance to talk briefly with Mitul, who I’ve only met through Twitter (cheers friend!). Being an introvert person, I really didn’t jump at the chance to start talking to other attendees and I now regret it. Maybe I should. Maybe it’s a goal for the next conference.

The host

I’ll bow towards the general direction of Nottingham, because Mr. Collison has done a great job in making us all feel warm and welcome. He really looks like a sweet, humble person, instantly likeable. A terrific host. The standing O at the end of the conference didn’t do him justice.

The outcome

Please, mr. Collison, can we have another? People seem to have liked it a lot.

I have a love/hate relationship with web design.

It’s what I like to do. When I first coded a website, looked at it and thought “hey, that’s nice”, I decided that’s what I wanted to do for a living. Even though I have a Computer Science degree and I’m lacking in graphic skills, I love learning about the basics of design through trial & error.

On the other hand, empty Photoshop documents scare me to death. When a project starts and I have to start thinking out of the box, my mind shuts down. For a person as dependent on method and rules as I am, creativity is a huge struggle sometimes. I can prototype and wireframe a project’s ass off, but when it comes to design, I feel like a rabbit in front of headlights. So many possibilities!

Long story short, I get quite paranoid while designing a website. And I thought I should share it with you, dear readers.

Here are the phases I’m going through while designing:

1st phase: Fear of the dark blank slate

Launch Photoshop. File > New. Stare at the screen till eyes feel tingly. Shut down Photoshop and open WoW. Play till eyes bleed.

2nd phase: GTD

I’m feeling quite guilty at the moment, so I usually break up the design process in itsy little steps and enter them in OmniFocus. I start working on the first todo, typically “Launch Photoshop”. Something fancy gets my attention on Twitter. 90 minutes and 12 clicks later, I launch Photoshop and create a new document.

3rd phase: Procrastination

I start translating my wireframes to .psd talk. Typically, that means that I just copy my wireframe to Photoshop, trying as hard as possible to avoid any kind of creative thinking at this point. I obsess over grey boxes and alignment, till I remind myself the finished result will hopefully not look anything like it. I try to switch my mind to creative mode.

4rd phase: Guilt

By now, quite some time has passed and I’ve got nothing to show. I turn to the web for inspiration. It dawns to me: every web designer out there is more productive and creative than me! Every single link I click on is a nightmare. There’s a devil on my shoulder whispering “See how well she’s done it? And in so little time? Try to beat THAT”.

5rd phase: Denial

This is the worst phase, both for me and the people around me. I become moody and unapproachable. I answer to questions with grunts. I mope around the house, wearing pj’s and eating trash food. I’m convinced I’m a fraud, that I somehow managed to cheat people into thinking I’m a designer. No colour scheme works, Photoshop tools give me hell, I can’t even draw a straight line. I sometimes cry. I sometimes have fits. All in all, I behave like a brat.

6th phase: Spark

While browsing every website from Dribbble to Youporn [NSFW obviously / but safe for MY work / mwahahaha / yeah.] and squeezing my mind trying to come up with something, I see it. My spark. My inspiration igniter. It doesn’t have to be a full website, it can be a background or a button or a textured line. The world shifts, everything clicks into place, a feeling of warmth inside me tells me: Everything’s gonna be alright.

7th phase: Execution

That’s where the real design happens. I form a bubble around my design. I’ve been known to talk to myself during this phase – things like “Oh I know! It’ll look exactly like this” are occasionally heard in Casa Sugar. I design like there’s Devil hot on my tail. Sometimes I forget to breathe. Double rainbows all across the sky, unicorns fetch me sandwiches and I keep wondering “Gee, how could I question myself? I’m a great designer”. Yeah, modesty doesn’t really work in this phase.

8th phase: Delivery

[Save for Web|Archive]. Fire up Gmail. Attach & send.

And this happens every. Single. Time.

If that’s not a love/hate relationship, I don’t know what is.

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.