KISE = Keep It Simple, Everyone

While I understand and support the use of KISS for mainstream news media, where the target is pretty much everyone alive because of the general subjects they approach, when it comes to specific circles, to specialized fields, like design blogs and blogzines, KISS fails in ways I find hard to describe without getting pumped veins on my temples. How can we, as readers, take anything serious when we’re, essentially, being talked down upon? You would not take this kind of language if you were to talk face to face with someone, so why put up with it when it comes to the written word? Fine, feed my information as to a baby when I read the news, it’s for everyone, but don’t take that same language, the same pathetically recycled phrasings and use them when I’m reading about the latest developments on HTML5, for example.

Shoot the target

Let’s get back into our little design universe. First off, I’m an avid supporter for targeting your audience. With this very blog, I’ve tried to single out a certain type of individual to which I wish to address. I use a certain type of language, I stress certain words, I understand the intellectual level to which I want to address. And the key word for me here is WANT. It’s what I want to target, to whom I’m trying to talk to. Far too often it becomes apparent that a blog is created without having this idea in mind and the rational and voluntary targeting of audience becomes more of a “If you build it, they will come”. And yes, they come, and by the thousands, no less, but their value as readers is close to 0.

Finding Niche

It’s not about finding a niche, but more about finding your readers. The reason I dismiss the KISS attitude it simple: I WANT a certain type of reader and I don’t care about the people that don’t fall within the bell curve that my targeting describes. Sure, users that come for the sake of the ride pump up my page views, but they in no way help my blog grow.  For those that are now wondering if you fall within my target audience, here’s my creed and my directive:

My reader reads, he doesn’t skim. My reader writes, he doesn’t copy. My reader says I’m wrong, he doesn’t clap. My reader laughs and thinks. My reader doesn’t say First!

Alright, Mr. Smarty Pants

Sure, by now you’re positive I’m an idealistic numb nuts that doesn’t understand the real world. I do, actually, though that’s not really an argument for my cause. What is an argument is the fact that I don’t care about the profit.  I don’t care about the thousands and thousands of users that come strolling onto one of my articles, hang around for less than 30 seconds and then leave just as brain dead as they were when they first arrived. I care about the few readers that stay and digest my thoughts and ideas, that challenge me to do a better job, that contact me through whatever source they find convenient, that engage in conversation.

To me, conversation with my users is my profit. The fact that I know I’ve reached someone and I’ve made that person think twice about something, that is my win. And I don’t care about disagreeing with me, because that’s not my point, my point is to trigger thought and analysis. So what that you think one of my ideas is crap! Congratulations, half my mission is accomplished, the other half being to have you argument your position. And I do this through language first.

I don’t use easy words sometimes, I don’t explain everything about everything not because I’m a pompous, lazy bastard, but because I want an audience that knows this stuff already. I like novices, don’t get me wrong, we all were novices at one point, but it’s just not my target audience. I’m sarcastic because people with a sense of humor are more prone to open discussion. I don’t use toolbar screenshots in my tutorials because I believe in design without the restrain of a specific software.

So what’s your point

This is my corner of the web and I’ll build it as I see fit, for whom I see fit.

My point is to target your audience based on what you want. Don’t copy someone else, don’t talk to everyone, no one will listen. You’ll soon find out you don’t have the time, energy and patience to deal with users that do not interest your blog/magazine/newspaper’s needs. While we do write for the masses, that doesn’t mean the masses are right.

KIPS

I’d like to postulate that Sickdesigner.com is built not on KISS but on KIPS. KIPS = Keep It Personal & Smart. Some of you may disagree, and that’s nothing but good news to me, because that means there might be discussions about this, and even a heated debate maybe.

I’m not here to convince you to adopt the KIPS attitude, but to consider changing your attitude and your writing philosophy into something that fits your model. If you don’t have a model of your own, build one. Aimlessly writing a design blog is a waste both for your own time and the time of the community. And I’m not offering the key to success, either. Sickdesigner.com isn’t exactly the most successful blog out there. But you know what? I don’t care. Really, I don’t. Because to me, to Sickdesigner.com, the hierarchy stands:

1. The User
2. The Content
3. The Profit

Well, there you go, this is my view on my readers, the people I’ve come to hold dear and count on passing ideas back and forth, the people that drive me to write crazier, sicker articles every time. A huge thank you to all those that get involved, that take the time to say “Radu, you’re wrong” or “Radu, you’re right” and that make doing this a real and unadulterated pleasure.

So, for the purposes of this article, I shall create a distinction: designer and coder.

Here are some of the reasons most coders go bald and profanities are used in web design agencies.

01

Groups

One of the first thing a coder notices when opening a layout is the grouping, or lack thereof. When starting to develop a site most coders find themselves staring at a design and pondering “How do I set this up?”, trying to make a mental structure of what you have, graphically speaking, and how it will go in code, columns, boxes, containers, interior elements (assuming no previous wireframing and prototyping was involved). All of these have to be structurally sound and well thought of before you start doing the actual work. After this tough process, the slicing of background images starts, and this is where the first drawbacks begin. You find yourself trying to hide all the content so you’re left with just the background of a certain element, the process is easily done when the designer has an organized layout with the elements divided into groups, you just keep visible the group you want and discard the rest. Sounds easy. But when you get a disorganized layout you just have to hide all the layers you don’t need for that element, which can be time consuming when dealing with a complex layout. You’ve been there too, just admit it.

Designers might say it takes too long for them to arrange a layout, I don’t disagree, but let’s say for instance you get a set of client demands and you have to make the modifications in the layout. It takes you far less time to find layers if they are well structured and labeled, than say, if you have some of the header layers, next some of the content layers, after those a piece of the footer and so on, or maybe another system. Just…HAVE a system. Even the designer has an easier time working with such a layout.

02

Guides

Guides are very important when designing a website. The current trend is using grid systems. You can use one of the well known ones around the web or you can use one of your own making. The reasons behind this trend is efficiency and consistency:

Efficiency because the layout is organized and certain areas are well determined, you can easily arrange content when following guides: big containers, small elements; no matter what the item is, it falls into place.

Consistency because you never go wrong, you don’t make the columns different width from page to page and you keep the same page width (I wouldn’t be posting it if I wouldn’t have encountered it).

For too long coders have been playing the guessing game, all because designers don’t bother to LISTEN!

03

Shapes

I found that shapes are the way to go when designing, the main reason behind this is that they are easy to manipulate in the eventuality you have to widen or heighten an element. You can recreate elements faster and without hassle and guess work.

Let’s say that your designer supplies you with a button with rounded corners, that is 100 pixels wide and 20 pixels high, and you need the same button in another page to be 150 pixels wide and 30 pixels high, the only downside is that the designer merged the button with a different layer and the shape with all the styling options were rasterized. Had he left it as a shape (with all the styling goodness intact) you could’ve selected it with the appropriate tool, just made it bigger and the styling options would’ve changed according to the new shape while remaining consistent with the initial. On the other hand, if you have a raster layer you can’t just transform it to the new size, because if you drag it to resize, first you’ll see a change in the rounded corners’ radius (scientifically called Messedup©), the blending options would change, the border that was 1 pixel wide would become 1.whatever pixels wide, the shadow would grow and so on, resulting in inconsistency. Thus you’re left with recreating the shape, trying to guess what size the shadow was, what opacity it had, recreating the gradient and so on. This is what I call the guessing game, a time consuming, elaborate work that may not yield the same results as the initial element, all because the other guy didn’t bother to LISTEN!

04

Typography

This is where most errors are made, because for some designers, how good(to be read “pretty, colorful, awesome, genius”) layout looks takes precedence over whether it can be implemented or not.

Ever had the pleasure of hearing something like this from a designer:

Designer: But, you can’t just discard that _whatever_. It makes the design pop.
Coder: It’s impossible to do with HTML/CSS alone.
Designer: Then do it with something else, images or flash or whatever it is you guys do.
Coder: :facepalm!

One of the most common things I’ve seen is using Anti-Aliasing on type that isn’t going to be used as an image . You can say I want that paragraph to be crisp, browsers only render fonts one way (normal) and though it may look good in the design, it won’t look the same in the browser, resulting in long conversations with the client explaining that it’s impossible to do that, hurting the team and the agency’s image, because of one thing the designer didn’t think of. Sure, there are cases where the client knows this, but still requires Anti-Aliased text, and that’s hunky dory as long as that’s the case, or until he decides he wants font replacement for an Arial heading. Read that last part twice. Wonder. Awe. True story.

Playing with text tracking is another setback and will make WYSIWYG impossible. Sure, a -25 value in Photoshop makes fonts like Verdana look more solid. But letter-spacing (the CSS selector) works in a different way, and a -1px for letter-spacing scrunches your text to the point where it’s absolutely illegible. This isn’t such a big deal, though, if we’re talking about, say, an H1 – large text with some tracking can be achieved accurately and legible on the web. But it has to be BIG. 12px Verdana with negative letter-spacing isn’t going to work.

Try not to rasterize text layers. It’s easier to just select the whole text and put it into code than waste time looking at the image and typing it, or copy/paste-ing from a document.

05

Links

When designing include at least the normal and over states of a button, coders don’t always realize what feel you wanted from a design. The same goes for normal links, set the over color somewhere in the design, it’s your view see it through.

06

Images

Manipulate all the images in your design, don’t just put them in and think the coder will figure it out, we waste valuable time doing that. And if you do manipulate the please try masking, avoid chopping images, because you never know when you might have to make modifications.

Whatever the differences in skill or opinion between designers and coders or even programmers, we’re all working together to create something that is, truly, beyond our individual selfs. If anything, this post illustrates the inherent connection and interdependece between code and design and the minds behind them.

To all designers and coders alike: “Remember you’re on the same team, you work together, you have the same goal: deliver a worthwhile product. Don’t ignore your part.”

It’s clear that designers, especially web designers, are expected to work like creative machines, spewing out great work day after day. Which, of course, is a lot of horse shit. We’re not superhuman. No one designer can say otherwise, lest he become a complete hypocrite and a condescending asshole. In this context, checking for inspiration, and I mean REAL inspiration, not stealing of copying, is more than acceptable, it’s a time-saver and a way to keep doing what you do.

Here’s something a bunch of the great designer bloggers forget about: most designers work in the corporate world, not freelance. According to the awesome survey by A List Apart, in 2008 71.7% of us work corporate versus the 28.3 % freelance. What matters to employers of the 71.7 % aforementioned is time. We all know time is money, but in the freelance world, this applies less than in the corporate sphere. And this time translates to us, designers, into 8-16 hours for each design. That may seem enormously little time for a full time freelancer, and I agree, it’s not fair, not for the client and not for the designer, but it is fair to the company you work for. So we make due with what we have.

In those 8-16 hours we manage to research the scope of the design, find inspiration, gather resources, plan the look and feel, behavior and experience of the website. Oh, yeah, and also to actually design the thing! In these situations, I forgive no man telling me that checking out design galleries is bad for your mojo. Screw you, freelance boy! When did you have 5 hours for an entire design? Mind you, one that came with acclaim from both peers and client? I have as little respect for these self-righteous, head-in-the-clouds freelancers as I have for “designers” that work 2 hours/design. You read it right. I know of such a situation. That’s 4 websites a day. Do I agree with this kind of practice? No.

I don’t even agree with the 8-16 hours designs, but I look at those as a challenge. A sort of 100m sprint for an athlete. Can I do it? Sometimes I fail and the design comes out less than awesome, sure, but don’t we all, sometimes? The point of the exercise is to be able to spark that creative fire at command and at lightning speed. It’s an exercise that has helped me as a designer more than anything. And I can take this work-horse exercise to the freelance part of my job and fire up that creative storm in my head whenever it is needed.

Stealing, copying? No. Of course nobody agrees to this and the article on Webdesignerdepot nails that proper.

But what about being inspired by others? That’s a way of passively bouncing ideas from one to another, as long as you keep this in mind: bring your own addition, your input and ideas to the object of your inspiration. Inspiration is not another word for Copy/Paste. It’s a way to create a better designed web, a tool which, if used properly, can and will advance you as a designer, as an artist and ultimately, as a human being.

So I say stop stealing, stop copying and be inspired. BY EVERYTHING!!!

@Font-face

When it comes to @font-face I know most designers out there know that there will still be only a handful of fonts that are proper for web use, especially if the end user doesn’t have ClearType enabled.

But. Oh, yes, the ever so present but. You do realize that there will be a mass of designers that will be so overcome with the new found wealth of opentype and truetype fonts readily available to them for free and so bewildered by this that they will forget, if they ever had, any design common sense and start using 14px italic Papyrus for headings.

Wait a second.

Ok, I’m back, I had to go vomit a bit.

But bad designers are not the biggest concern I’m having with @font-face. What is, though, is the fact that clients are going to start having typographic demands spreading beyond the usual “could the heading be in the same font as my logo? what’s that? I suppose it’s called Comic Sans.” and take that extra step to push us [web designers] over the hill and then perhaps we’ll see the first case of a web designer brutally slaughtering a client with a copy of “Helvetica: Homage to a Typeface“.

And it’s not going to be just silly small in-the-dark clients that are going to get behind @font-face. You can see how sites like The Times are going to want to implement the same body font that they use in the printed version of their newspaper. Ok, maybe not The Times but most any other company that primarily uses print as their medium will. With total disregard to the fact that fonts render differently on screens than paper [duh!].

Font replacement methods

Cúfon, FLIR, sIFR, Typeface are just some of the methods some designers use to apply non-standard font on the web. I could go on telling you why they all fail immensly but since you read this far I imagine you already know about the inevitable pitfalls these systems encounter. Instead here’s, probably, a new perspective on these methods: why would anyone use a system that is sluggish, fails in older browsers, fails on some mobile devices, is a pain to implement [rather than using regular images to which you would keep your source files] and most importantly does not allow for any non css styling [like you would use with a picture]? I have not, will not, cannot use such a system and still call myself a real web designer. To me this is close to using 2001 style DHTML on a table structure.

Remember when i said these do not grind my gears as bad as other things? They don’t because the logic and genius behind implementing the font-replacement methods is just that: genius. I tip my hat with great respect to the likes of Simo Kinnunen, Mike Davidson or Cory Mawhorter for their wit and smarts.

And just before I go, here’s a little something I found for all you Comic Sans haters out there. Including me.

I said users, not developers because we [developers] understand the differences, the quirks, the bugs and out of place behavior these pieces of cr.. software display everyday.

But users have no idea why Opera is showing scroll bars when neither one of the other browsers does. It’s a lack of respect to assume a certain type of behavior from your user. Now don’t get me wrong, I’m not absurd. If browsers were clearly labeled as to what type of user they want to cater to then everything would be each. Like if, say, Firefox would have a subtitle in the lines of: “to be used with a lot of add-ons for developing websites” then this post would not exist. Anyway here’s a list of major browsers and what grinds my gears about them:

Internet Explorer

version: 6 – countless bugs and quirks, behavior that seems to come from an alternate Universe where LOLCats have taken over the world and browse the web standing up side down; as most of you, I have the least amount of respect for this browser and consider it to be nothing more than a relic that somehow made to a time when most developers are getting spiffy with such developments as CSS3.

version: 7 – this is by far the biggest screw-up in this family. It’s a futile try at making a standards compliant software than turned out like something from a Hitchcock movie. What’s even scarier is that most home users use it. Hopefully with the rise of Windows7, which should, rightfully so, be labeled as Microsoft biggest achievement, IE8 will be dragged into users’ lives thus leaving old 007 in the dust and burying IE666.

version: 8 – the browser wars, this childish, stupid, unreasonable fight has pushed Microsoft into releasing v.8 of their beloved browser ahead of time. This one is so bug-ridden right now that I am not even going to go there. I’ll just wait for 8.1 which is said to be something of a redeemer of the entire family. I doubt it but, hey, it really can’t be worse than it’s older siblings.

Firefox

version: 2 – We all trusted the old v.2 of that faithful Fox and while it wasn’t perfect, we all forgave its tiny imperfections when we saw a float:left, margin:left element wouldn’t fly out the window. And then

version: 3 – v.3 came and surprise surprise: same bugs, more system requirements, some computers seem to hang endlessly when you’re watching something on youtube, oh yeah, and we’ve got a shiny green Back button. Just what I needed.

version: 3.5 – Just like IE 8.1 this one is going for the title. Sure, 90 something percent coverage of CSS3 selectors, all of the pseudo-classes and whatnot is all great but I betcha they are still not going to solve the rendering issue for background-attachment on large scale images. I suppose the good folks of Mozilla are concerned with bandwidths, right?

Opera

version: <=9.6 – The speed on this thing is enough to drop any jaw, as well as the stability and resource management. But the lack of respect to the user boggles the friggin’ mind! And these guys think they’re doing it to show that they care about the user. I don’t want to see scrollbars on motherfriggin’ Lightboxes you idiot, nor do I think overflow-x or overflow-y are selectors that were put there for you to ignore! Oh, yeah, and this is the only other browser (that I know, so correct me if I’m wrong, please), other than IE 666 that ignores :hover on anything other than an <a>. Are you retarded? Have these guys ever heard of an <input type=”button”/>. Oh, of course, you probably expect developers and designers to leave them to their default states. And you know what grinds my gears even more? That this could have been my browser of choice, the one to back up in front of all the FF & Safari & Chrome lovers out there. It’s just a damn shame.

version: 10 – This version is in beta mode now so not much to say. The preliminary ACID 3 test has some huge results, so perhaps this will be the one browser to rule them all? I hope so.

Chrome

version: 1.0 bla bla – Another promising young lad came to the games not long ago, considering the other competitors’ longevity, but hey, this one was backed up by Big Daddy Google so you know there are perks in it. Anyway, disregarding the early issues, this one’s made for netbooks and fashion models checking their bank account or perverts in the park watching online porn while gazing at…you get the picture. It’s just not that awesome unless you’re into a stripped down, however fast, almost reliable (crashed on me a few times) page opener.

Safari

version: <=3 – What an awesomely trendy, cool, beautiful browser. Oh, and it opens up pages pretty fast. What? You’re already 3 levels down the website? I’m still loading the home page. Ok, I’ll just close it. Why is it taking so long to close?

version: 4 – NO, I don’t want to see my favorite websites in friggin’ 3D! Oh, great, now it’s slower than the older version. Great job guys!

Well folks, there you have it, that’s what grinded my gears this week. See you again next time when I dump my payload of anger on the ever unsuspecting interwebs.

You know you have and no matter how good your educational skills are you can never explain to these annoying conglomerates of crap why they’re wrong and you are not.

So, this is what grinds my gears this week:

Clients:

1 ) - that don’t know WHY they want a website; someone told them it was trendy or some shit like that. I hate that.

2 ) - that can’t make up their minds about something. they want this, no they don’t, they do, they don’t. It drives me bonkers.

3 ) - that approve a design and when the site is at 90% they want to change something radical. I know it’s your money, but don’t waste my friggin’ time!

4 ) - that settle for less than great work; “oh, so this feature is going to cost me extra…well, I guess it’s not that important, even though earlier I said it was”. Are you guys insane? Are you marketing-suicidal? Do you not care for your own image?

5 ) - that think they know better; you don’t, you self indulgent corporate bitches! That’s why we’re designers and you’re clients.

6 ) - that ask for a quote and then bail. That’s not only messed up, it’s a waste of my time and a lack of respect. I am not an automated quote machine readily available 24/7to serve you.

7 ) - that get served a proper, modern, friggin’ gallery worthy design and bunk it because they really really want that .gif with the dancing monkey in the middle of the header.

8 ) - that send briefs incompletely or with inconsistencies. I’m assuming that you guys can at least read/write and understand basic linguistic logic. Apparently this is a fallacy.

Granted, not all clients fall within these few lines. There are exceptions. I was fortunate to have such a client. Once. Mostly I tango with these idiots until at one point one of us just can’t take it anymore and gives in. I’m sad to say that I’m mostly “it”.

So, there you have it. This is what grinds my gears. So far