Clients are usually not familiar with the complexity of certain features. Something that occupies small area on the interface — for instance, a newsletter subscription form or “send to a friend” — might be more complex than the rest of the site.

RFP full of features

When glancing over the request for a proposal that is full of tiny little add-ons, you already know — it will boost the quote up to the sky. Most of the functionalities are in their original form simple and straight-forward, but each project has it’s own twists. Ideally, each detail have to be tailored to perfectly fit the rest of the site.

When the prospect is able to bare her requirements down to absolutely essential parts, the “core”, you are half way there.

This is not a single player match. We as an experienced professionals should help and educate clients — and finally: make them confident in our abilities.

Depending on the nature of the relationship with the client, ask simple questions:

— “If you’d ask someone to create a web site as a favor, what would be the absolutely necessary parts?”.

Break it by milestones

It is a win-win situation. Quoting a Must-have list is so much easier! When you’re both settled with the features/price, call it a milestone, a phase in a process.

During the first phase, you’re about to show the client that you are worth her money. Release this first “essential” version. If she’s satisfied with the results, price and timeline, you gained the trust.

From that point on, discussing the Nice-to-have features is a breeze.

Why now?

Tin is now 4 months old and has been diagnosed dystonia. It’s nothing as fatal as it sounds, but we still need to stay focused and keep up with the physical therapy. If we do, everything should be fine by his first birthday.

Apart from being a web enthusiast, I’m also a kinesiologist. While Mrs is a genuine super-mom who handles both of our boys well, I need to help as much as I can to develop Tin’s motor abilities. And who fits better than his own father?

Going freelance will hopefully provide more schedule flexibility, in opposite to company lifestyle, where you’re expected to be available nine to five.

What’s next?

I’m not leaving Adria Media Zagreb completely, though. We managed to find a win-win relationship. I will still collaborate on a new projects to join the company blockbusters Croportal, Roditelji and Story.

If you are from Croatia and find the above sites exciting, check out the 2 new job openings.

I also have an extensive list of faithful clients from all around the globe, which should keep the cash flow steady. If you can see me helping your project, shoot me a message.

Last, but not least, I’d love to finally bring to life some of the ideas that have been laying around for a while. A couple of pro-bono PSDs are also waiting for a chop.

— Bring it on!

We weren’t aiming to teach them CSS or any coding techniques for that matter. We were after explaining technical limitations on the web. It was all about a few important points, live explained with Typetester and presented in a form of a checklist (PDF, 24KB).

The group was already familiar with the design theory. I was quite astonished how well they handle typographic vocabulary. They were, on the other hand, disappointed by the fact that there’s only quite a few fonts they can use for body copy in order to cover the majority of visitors.

The students were interested in learning about progressive enhancement of a web page with image/Flash replacement methods. Once I explained structural layers and how site mechanics work in general, they asked a couple of smart questions, which lead to an interesting discussion. Mission accomplished.

Jon Tan’s article Flipped Types was a great help to explain the major difference in approach when designing for print vs. web.

The summary of the morning is best explained by one of the students’ genuine eureka conclusion:

“Oh, God! So it basically means, we have to think about many different scenarios when designing for web?”

When I land to a site, I’m interested to first read About us section, so I can visualize author while browsing her showcase. It helps me better remember people, and more easily get back when I need to. Authentic copy helps. Photo, too. Don’t make it generic.

Don’t copy and paste sentences and phrases you found on other sites. Don’t claim you’re something, you’re not, hoping that such facts would bring you more work. Rather than that — show us what would you like to be sometimes in the future, and someone might give you a chance.

It’s okay if you don’t have experience, it stinks if you provide false or generic information.

The quantity of experience is not the essential part of your resume. It’s the progress, and the current state of you. If you have tendency to develop new professional interests and enhance personal grow over time, then you have an advantage over a person who sticks at the same level over years, just switching companies.

If you are your own copywriter, let friends and colleagues randomly describe you. You’ll have enough raw material to chop off the interesting chunks of text and spice it up with your own writing style.

1. Will we be able to make money? We’re a business. We have mortgages and tuitions to pay. Plus, if we don’t make some cash once in a while, how will we feed our habit of continually screwing around?

2. When we’re done, will we be proud of the work we’ve done? Slaving for months on a project only to not want to show it to anyone when you’re finished just plain sucks. No amount of money can make that feel better.

3. Can we learn a little something new along the way? Executing the project has to make us smarter and help satisfy our curiosity, which we think is our greatest asset.

I want to run faster.
Get brief. Set goals. Score. Get out.
Wet dreams.

Experts are cursed. In my experience — the more a person knows, the more she is unsure when asked for an approximation in terms of time for the task at hand.

This can be quite challenging situation, since the majority of clients/investors are not able to deliver fully developed specs. Most of the time, they just tell you what they envision in general, and you’ll have to figure it all out by yourself. If you are not reacting promptly, in many cases you loose a prospect.

In fact, prospects are right. They hire you to create magic from their random thoughts. The only problem is — you can’t charge your know-how separately. But I digress.

All professions on the web are infected by the correct estimate syndrome. Perhaps because I’m at the front-end side of things, I perceive back-end people are more into this epidemic than designers or front-end developers. I rarely ask front-end people, since I already know what can be done at what cost and in what time. So take my claims with a grain of salt.

Designers as a more irrational people are giving the estimate by their gut feeling or quite often already have established prices for various deliverables.

Programmers are rational and concrete, so they are always trying to give the exact estimate. I dare to send a message: we need such a precision only and exclusively in your work. The time programmer spends on discovering how things work, should be calculated in the estimate. I strongly believe that anything can be disassembled in matter of days, if not hours.

Features that clients request are almost always invented before. Clients are occasionally surprisingly informed and educated, but very rarely with a true authentic concept. My logic tells me — we are re-factoring what have already being adopted on the web. We should be familiar with 95% of the requested features or tasks.

Unless it’s something completely new. People are telling me The new things are fun to work with. I hear that all the time. So I have a second-guess that the estimate in terms of billable hours is not applicable here.

As I see it — you work repetitive tasks for money, while you innovate for fun and personal growth (and so you can make more money later, when the feature becomes popular request or part of a standard package).

For any task, there is the worst case estimate, the super-optimistic case estimate and the estimate by experience. Experienced expert should know:

• what can go wrong
• how fast she can do it, if she is in the right mood
• how much time and effort some similar task(s) took her in the past

This is, of course, my point of view. What’s your approach on this?

Addenum

Snook lists the most common tasks a true web developer has to go through in A Web Developer’s Personal Projects.

Please continue the list…

Even though it took us a decade so everyone knows there’s always a better browser, regular Joe doesn’t know a tiniest little bit about basic functionalities; how to control text size in a browser, open link in a new tab with a single mouse click or about simple technologies like RSS. Let’s face it — it’s complicated.

Usability, accessibility and web standards as a nouns, are exclusively the geek vocabulary entries, so let’s not giving it so much meaning in terms of general Earth population acceptance. Standards are here to help web workers, who are down here in a trenches — to win a battle in a never-ending vendor fight for their piece of market share.

Specs change and we have to accept that. Get through your shift and give your best. We are unknown heroes! Our time is now.

So I hope

Once vendors get across the boundaries of the current systems — by providing affordable advanced devices and then by writing more powerful software — today’s interfaces will be history. Is that possible in the next 14 years? I hope so.

If labels are properly set, user agents attach a behavior: when a label is clicked with a mouse — in most browsers — the related field gains focus. The behavior is quite useful, since it gives you possibilities to increase hit area for a field.

Gaining field focus works much like tabbing with a keyboard, but there are exceptions. When a form button (for example Submit) gains focus via keyboard navigation, naturally it is selected and ready to be stroked by Enter. But, if there’s a label assigned to it, hitting the label will also submit the form automatically.

There is many possibilities. One of them is hiding form button with CSS and style label more freely, since it is a plain inline element. Design/CSS-wise, think of it like a span but with an extra behavior built in.

<label for="send"
	style="background-image: url(send-button.gif);">
	<input type="submit" id="send" value="Send"
		style="position: absolute; left: -9999px;" />
</label>

You can nest fields inside labels and increase hit area, which many people do by default with checkboxes and radio buttons.

<label for="sure">
	<input type="checkbox" value="1" id="sure" name="sure" />
	Are you sure?
</label>

Another interesting application is adding multiple labels for the same field — for instance, one right next to checkbox, and another one in a supporting paragraph where you can contextually anchor keywords directly to that checkbox.

<p>If you are absolutely sure, then
	<label for="sure">confirm it</label> in the form.</p>

<label for="sure">
	<input type="checkbox" value="1" id="sure" name="sure" />
	Are you sure?
</label>

Last, but not least, labels provide valuable connection between two elements, which gives you opportunity for a unique interface designs.

On the other hand, web developers and web designers are seasoned computer users, which are most of the time after the latest technology — software-wise, hardware-wise, interface-wise. This breed often has several browsers for different contexts.

Ordinary people (who are not dealing with web for money) find it hard to remember browser history stack, don’t need to learn keyboard shortcuts, they don’t know the difference between Comic Sans and Cooper Black, and they don’t know the difference between Internet Explorer and Firefox.

That is our job — we need to know those differences, and provide the best possible experience.

That’s why CSS people are called experts. They can do miracles, when everything else fails. Any fool can code for the latest browser, but experts take care of every browser with significant share.

Consider this Wikipedia article: Usage Share of Web Browsers.

In the end, let me share some quick numbers from a few random high profile web sites. All of these are in the company of six- and seven-figures visitors/mth.

CSS level: beginner/intermediate

Background-position CSS property allows us to position background image starting from top left corner of a HTML element.

We are able to position either with some numeric values such as 100% and10px, or with keywords such as left and bottom. Either way, you always have to offset it from the top left corner.

If the design dictates positioning background image to bottom right corner, obviously we would use background-position: 100% 100%;

But sometimes we need an offset from the bottom right. And if you also have expanding box, it doesn’t come by default in CSS.

We are all aware that fixed height layouts are matter of history, but bare with me for a moment — with fixed width/height layouts background positioning is fairly easy. You always know where the background image will end, thus you can make it a little bit smaller in size than the element itself.

For example: if a paragraph is 300px wide, we can set the background-image in a way to leave a 10px wide empty area on the right.

First, let’s see the rule:

p {
    width: 260px;
    height: 260px;
    padding: 20px;
    background: url(image.gif) no-repeat 0 0;
}

Figure 1. Background image is cropped to 290 x 290px

In this example, if we crop the background image to be 290 x 290px, you can easily achieve an effect of background image being 10px shorter and 10px thiner than the paragraph.

I agree, it’s no brainer. But keep reading.

Flexible is new fixed

With liquid or flexible layouts, dimensions of HTML elements are variable (different screen resolutions, window resizing, etc.). Say we have:

p {
    width: 100%;
    height: 100%;
    background: url(image.gif) no-repeat 100% 100%;
}

I’ve seen developers reach for another element to achieve the offset. And really, if you’re in a hurry, add a child element, offset it with a margin, and then paste the background to that inner element.

Naturally, there is a better way.

Open the background image with Photoshop, and choose Image → Canvas Size (or Command/Ctrl + Alt/Option + C)

Figure 2. Resizing canvas

Enter the values as shown on the Figure 2. (tip: if you check Relative, you can use mathematical operands). When you’re done, hit OK.

You should have some empty space on the right and bottom.

Figure 3. Empty space after Canvas Resize

Save image as a GIF with transparency on and voilá – it’s always shifted 10px from the bottom and 10px from the right (resize your browser window or increase font size when you are checking the example).

At first, you might wonder where you should use this technique, but once you get your fingers on flexible layouts, you might find this useful.

If you are still running XP, download PowerPoint 2007 Viewer and you’ll have these on your system.

The information you’ve so generously shared with A List Apart will help us form a picture of the ways web design is practiced around the globe. We hope that making this data available will have a positive effect on best practices and employment, and will enhance public understanding of, and respect for, our profession.

Take the survey or see last year’s results.

Mr. Allevato developed donationware piece of software to enhance your Mail.app Dock icon with extra counters: MailBadger 0.3.

Quick Tip!

The default set of rules in MailBadger allow you to only specify per account and/or per folder condition.

However, there’s built-in conditions editor that allows you to include all unread messages if From field doesn’t contain a specified string.

Type non-existing e-mail address and voilà!

Figure 1. Select “messages satisfying condition” and hit “Edit Conditions”.

Figure 2. Select “Does not contain” and add fake sender.

The whole family is super-euphoric. We all know what to do.

We named Tin after Tin Ujević, the famous Croatian poet. When I was a high-school graduate, I took classes on Croatian poetry and choose Tin Ujević’s opus as a theme for my final exam. Now you know.

The Christian name of Tin Ujević was Augustin (or Augustine) after St. Augustine. And one of St. Augustine’s influential quotes particularly matches certain modern pedagogy rule:

Cum dilectione hominum et odio vitiorum
(Love the sinner and hate the sin)

Don’t judge the person, judge the act.

Instead of
— “You are bad (correct yourself)”
we should communicate
— “That behavior was bad (I love you, but please don’t do that again)”.

Move focus from the child itself to her undesired behavior. This way, the kid is not offended, and she has a chance to re-think her acts.

I hope I’ll remember this next time they cross my boundaries. Kids are adorable.

The script can now be tested without the Cron, prior to moving it to its permanent location.

First, download the .ZIP, unpack it, and change configuration settings.

Upload folder in your public web folder to test it. Open the file in your browser.

If you see the black page with green letters and there’s no errors, you are good to go. Move it to protected area (that means delete from public folder).

Have a nice backup.

Impartial: unbiased, unprejudiced, neutral, nonpartisan, nondiscriminatory, disinterested, detached, dispassionate, objective, open-minded, equitable, evenhanded, fair, fair-minded, just; without favoritism, without fear or favor.

Treat your users well. Don’t underestimate anything.

Men are basically smart or dumb and lazy or ambitious. The dumb and ambitious ones are dangerous and I get rid of them. The dumb and lazy ones I give mundane duties. The smart ambitious ones I put on my staff. The smart and lazy ones I make my commanders.

Every human has the optimal role within its little ecosystems — family, friends, sports team, interest groups, workplace.

Unfortunately, one’s virtues and vices can’t be always recognized early.

Gathering the team is like solving a puzzle. Each piece has the exactly right spot in a picture that no other piece could replace.

They are showing off their grid and maratz.com joins the party.

For the geek in you, turn off JavaScript and reload the Ezadar cover.

HRT robbed BBC.

This is the embarrassment of the decade for the Croatian web community.

Follow the original thread at mi3dot.org. It is a Google’s translation from Croatian to English, but you’ll get the picture.

If you care, please let us know.

More voices:

• zytzagoo: HRT vs BBC
• Marketing Servis: HRT.hr i BBC.co.uk ko brata dva!
• T-portal: HRT ‘posudio’ dizajn od BBC-ja?
• Davor Peić Gavran: Croatian HRT vs BBC.co.uk, totally rip off
• Index: Iz koda HRT-ove stranice najednom nestalo ime tvrtke koja ju je radila
• Index: HRT-ova nova web stranica besramni plagijat bbc.co.uk
• Index: Hašim Bahtijari: Pitat ću na Vijeću koliko je novaca utrošeno na izradu novih stranica HRT-a
• Index: Dizajneri složni: HRT je pokrao BBC, i to loše
• Marko Mihelčić: Croatian national television website (HRT) fancy’s BBC website.
• Nivas Blog: How HRT failed in their intention to become Croatian BBC
• Wolfwood’s Crowd: Ripanje i ripersko prigovaranje