Ontem tive curiosidade de ver como estaria o projeto. Morri. Vejam por vocês.

Sem informação para quem entra, sem forma de registo, nada. E isto é só a página de entrada. Eu até tremo de pensar o que estará lá por dentro. Expresso as minhas condolências pela pobre alma que inventou o nome Zizuzi; em nada sugere “rede de procura e oferta de emprego”.

Our conclusions

The only way I’d use <br /> would be for:

• Addresses;
• Poems;
• Multiple radio buttons / checkboxes.

There was one more thing.

Then the conversation shifted towards how to include labels, inputs and paragraphs inside each other. Levi found this about labels and inputs on the HTML5 specification:

The label represents a caption in a user interface. The caption can be associated with a specific form control, known as the label element’s labeled control, either using for attribute, or by putting the form control inside the label element itself.

The idea of including an input inside a label — <label>Label: <input /></label> — didn’t convince Paulo as he thought it felt wrong. It’s not that bad if you think of this particular example, for instance. Consider a series of checkboxes for a certain field. It would be handy if people knew they can click the text and select the checkbox too, right? Like this:

Checkbox 1
Checkbox 3
Checkbox 3

If you click the labels, the checkboxes are activated. And it’s perfectly semantic as the labels work as controls alike.

Thank you, Paulo and Levi!

Take the briefing and tear it up in half!

You heard me! Excuse yourself to him and just rip it apart. Let the client watch (you might wanna tell him that the experience of working with you would be quite different).

What the hell! Are you serious?

Yes! Ask yourself: what would you feel if you started reading a pile of rubbish? What would you feel about reading dozens of pages that might not even be what the client really wants in the end? Well, you can start on the right foot and reset the entire system.

Tearing the briefing up in front of the client will force a chemical reaction inside his body. It is the perfect time for you to teach him your method: the method of emotion.

The method of emotion

Building experiences is what I want to do because it envolves passion and emotion from other people. Good emotions, that is. Bad emotions are supposed to be secondary and/or should help realize which emotions are the good ones. In the end, you should be glad for having fulfilled a client’s need.

Businesses are run by people; they are the materialization of the emotion that drives their creators to actually do it. Nothing more satisfying for a client than knowing he is being heard, not read. So why not start listening to his heart instead of both looking to a computer screen and/or a briefing? Let them explain to you the emotion they want to feel when they use what you’re about to create.

Briefings, paper, a screen, all of these limit our creativity. If you can reduce the load, do it from the very beginning.

Obviously you don’t need to tear his papers

If you’re scared of what his reaction might be, you can always pretend it. Get some bad paper the size of the brief, tear it up in front of the client, experience the feeling and then explain it was an exercise to test both yours and your client’s creativity.

• You have a user driven app on the web.
• You also provide some actions for guests.

What you would do? Either:

1. Don’t show the user only actions? (my opinion: this one reduces clutter on your interface).
2. Or do show them and when the user clicks the links/buttons, the user gets a login redirected page for every new click?

My pick would be number 1. Why?

I’d rather have a welcome page that showed you what to use in case you signed up. Actions such as creating a new item on a product list and message sending that apparently require a sign up are confusing for a guest. Besides, clicking on such an action and redirecting you to a login page several times is not that much of an engaging experience.

Feel free to add up on this thought.

Whether your website sells products / services or is just a blog with content that’s supposed to be read and not just scanned, what you write should provoke certain feelings that makes the reader want to stick around or maybe be compelled to buy something from it, if that’s the case.

How should you write then?

The gold rule applies here like a glove. Ask yourself as a regular consumer (not as the seller):

• What and how would you like to see the content in your website?
• What would you like to read to be compelled to move forward?
• What kind of speech would trigger you to act?

These are only three of the many questions you can ask yourself. If the text you’re considering doesn’t really convince you then you ought to try again.

The gold answer: Stick to real content

If your product is good, you won’t need to wrap it with shiny and colorful paper. You just need to point out the facts. Show it how good it really is and nothing more than that.

Unfortunately that’s common practice in Portugal. People mistakenly think that juggling with adverbs and adjectives makes content better and more compelling. Well, they couldn’t be more wrong. Those times are over. Now that the .com explosion is gone, filling our content with sand isn’t just unnecessary but also has the reverse effect; instead of attracting people, it repels them.

Today we don’t waste time around the web. It’s all about the juice, why waste money and time if you can just convince your audience with naked truth and facts?

Dan mentioned the principle of designing for the invisible. What this means is a designer prepares a design — generally for a web application — in order to create a clean layout and provoke the user to explore certain data, providing confort and thus a better experience.

Where to design for the invisible?

There are lots of situations where you can apply this principle. Even though it can be freshening to use, designing for the invisible has the risk of hiding data from your user, and that can be dangerous sometimes. It really depends on the kind of experience you’re trying to reach for. Situations to consider can be:

• Areas in which a user is likely to hover.
• Places with too much information that can represent a threat of not being paid due attention.
• Resources that have a main purpose (such as reading it) and also can have other secondary actions (such as admin actions).
• Certain content that can have tiny AJAX calls, like removing an item from a cart which only requires a little call to remove it.

Let’s consider the example of Wordpress, for example:

This is a very basic post management page. Supposedly, such a list should have a list of repetitive actions which clutter the interface. The solution for this problem: Wordpress hid those actions. As it knew a user had to hover the respective item to do anything with it, the actions only appear when the user does hover the item.

This is one of many examples that can take advantage of this principle. According to your requirements, you can be as creative as you can. Just be careful not to overuse it, remember: the experience depends on both your product and your user. Study them well and you succeed.

What is this IE 6 phenomenon anyway??

Internet Explorer 6 is the 8-year old Microsoft browser, it comes by default in Windows XP. There are already versions 7 and 8 for this browser. Version 6 is now extremely outdated as it doesn’t offer the best experience and quality when visiting a website. Web standards have evolved since the time and so upgrade is extremely recommended for all users.

Are you a designer? An aware one?

If you are, then you know that IE 6 is a PITA when it comes to designing a website or application. Its support for CSS 2 is not perfect and thus it causes a lot of frustration. In my case, it takes double the work (and money) to support websites in IE 6.

What about “those” clients? They only use IE 6!

If you have clients that still use IE 6, it really depends on what you wrote a contract for. If you promised to support it, well… there is nothing you can do. What you can do is prepare for the future.

Paul Boag said brilliantly:

The energy we are spending in dropping IE 6 should be used to make our clients realize the truth about IE 6, providing a lesser experience.

I agree 100% with Paul. We are being plain old silly by even considering tweaking what’s good. Old browsers should have an experience of their own. In the end of it all, what matters most is the content.

So this means the problem is not the browser?

YES, the problem is NOT the browser. The problem is what people make of it, both designers and users. Designers have the responsibility to warn the user about the lesser experience and say how they can enjoy the full show. Splitting CSS apart and delivering them according to each browser’s capabilities is key. If the full means upgrading, fine. Users will be able to choose now.

If they choose to upgrade, don’t be a fool, go help the guy! You will score good points.

Today starts my 2009 and with it certain acknowledgments and decisions I’ve made. Today I want to share some these with you.

New website theme

I’ve been struggling over the very presentation of my website. After some months I guess I can settle with the 6th iteration of the Amethyst series.

Amethyst — 6th iteration

Posts in Portuguese

For the first time I am going to add some posts in portuguese to allow other audiences to visit my website. Each portuguese post will be categorized and identified as such properly.

No IE direct support

Realizing Stop Design’s wonderful approach to approach IE users, I am going to drop support for IE6 and maybe even IE7, providing a proper stylesheet complies with them. Now that IE8 is almost coming, we can —and should already do this a long time ago and— start discouraging users from using low level browsers. Besides, last time I checked, my IE audience is between 1 and 5%. Not worth the investment.

Personal bookmarking system

I don’t use delicious that much and yet I should because I have some pretty good links I wanted me and others to reach more often. That’s why I am also going to manage them bookmarks from my Drupal website. This will be implemented soon enough.

Conclusion

2009 will be a serious and decisive year in my life because it will be the year I will learn a lot on my skills and also get a lot of work to apply them skills and earn what I need to boost my life up a notch or two.

Let’s hope for the best!

This accomplishment has been unveiled to me through three of my favorite websites out there: SimpleBits, Viget and OnWired. I know a lot of other websites that use this but these really caught my special attention. If you see three homepages, all of them use full-range backgrounds and yet they use the the 960px grid. I wanted that richness in my projects and so I gave it a try. Before I deepen into the procedure, i must say it’s always good to have a container/bucket div instead of acting directly over the body element for cross-browser compatibility. I have tried it and IE 6 didn’t like it very much.

We are admitting a simple skeleton here: a simple header, a navigation bar, a main body and a footer should do the trick. So here’s my procedure:

Step 1

Create the container div around.

<div id='container'>
→ Skeleton goes here.
</div>

This is helpful as I mentioned in order to set its width to 960px right there.

#container { width: 960px; margin: X auto; }

This is a very basic approach and it’s a good one if you want to implement a 30px padded box like Paul Boag for example. That way you save further implementation and get a clean shot at the grid. However, if you plan to use full-range backgrounds like I did then you’ll have a little more work.

Step 2

Don’t set any width for the skeleton div’s so they default to 100%. Now you’re ready to set each one a background (perhaps you’ll have a repeat-x option or an attached one merging to the background color). Now each div gets it’s own background, which is what we want. For the header, it would be something like:

#header { background: #xyz url('path/to/background.png') repeat-x; }

Step 3

Place a single div child inside each skeleton div. All of the content should go inside these child div’s. Then, you can set each div child the 960px width like this: #container > div > div { width: 960px; margin: 0 auto; }This tells us the div’s inside the skeleton div’s get affected. That’s why I’m saying every piece of content should go inside the child div’s, while the background goes outside.
And you ask why not setting the default width to the skeleton div’s itself? Well, you can do that but let me show me the differences.

Again, this is a very simple example. You can try lots of other stuff like positioning only some of the div’s, background different settings, anything. I hope you learned something from this example.

Even though Drupal is the best CMS in the world – which I subscribe with pride -, there’s one thing I’ve been noticing: it has a load of attributes within elements, particularly classes and id’s (not to mention sometimes it seems there are loads of div’s that look rather unnecessary until certain point). This is good and bad for some reasons, and I’ll explain why the Drupal team proceeds that way.

Good stuff

1. It allows better comprehension of both structure and semantics of the platform’s output. Structure stands for the content you have in it (the What question), semantics stands for its meaning (the Why question).
2. As you know, Drupal has a steep learning curve and as I started stumbling over it I realized certain concepts that Drupal has inherent like delta attribution for blocks, their proper identification and helper class attributes built in, etc. And through this identification system the theming process became much easier because I already knew what and where things were.
3. If you need to style/change behaviour to a certain block or node for any reason (i.e. accessibility, Javascript enhancement…), you can easily select groups individual chunks of markup or even groups of them with Drupal class/id patterned attribution.

Bad stuff

1. Too much of a mess with all the nested div’s. I put this one on the top because it’s complicated for a rookie to make himself confortable with the output he wants to generate and also because I just hate unnecessary markup. I only need extra div’s if I’m going to turn the CSS up one and only one notch. If I fall with more than one notch, then it’s time for a design check.
2. On top of extra div’s, extra id’s and classes in them. I have a really hard time finding the right rules in CSS to actually hit the element I want. It’s a real PITA. And most of the times it’s actually not necessary to have some of the classes because the parent div already has an id and thus a meaning is already set to its children.

Drupal is designed in this way so you can choose between theming from scratch and have full control of whatever you might like or not bother and just let Drupal do its job. It’s up to your will and your needs to decide wether you choose one or another or even both — like I do —.

End of story

I picked on Drupal for this entry for the reasons I just showed. Speaking more generally, make sure your markup is valid and accurate. If you accomplish this, your design will better and easier, not to mention your javascripting will be smoother and less painful.

Accessibility 1

Accessibility 2

The first shot says where the price is and you can actually can read something with little effor while in the last you can’t even tell where the price is…!

What better example than this one to show that important content must be well represented through appropriate style and positioning. Show your “price tags” big!

I met a client a couple days ago. He asked me to retake on a project that used a very strange platform. “Please take a look at the current launch, José”. What do I do? I browse CSS, accessibility, usability and source code. The apparently awarded CMS was built on a table based layout and it didn’t show the same results over different browsers. And you say: “OK, so what’s the problem with designing on top of a table layout ?” If it works on many browsers and you can’t afford web standards, well… keep it! But if it comes out as a complete junk like this, I would be ashamed of myself. The website looks like this in Internet Explorer, Firefox and Safari.

Any napoleon with this level of costumer fidelity – yea, the costumers say they have really great products! my gosh… — ought to be better prepared to face the real challenge, when users start to realize there are many browsers to choose from, new technologies improve user experience and designers and developers create the web differently with more care for performance, beauty and usability. Are you a designer reading this? Take a look at web standards and cross-browser experience. I’m sure you’ll like it.

Imagine you care about content already, but in what way? Do you design for the content or the other way around? Do you create a layout based on the information/content you have or do you try and generate content based on the lovely yet empty work of art you’ve created with Photoshop?

Every piece of content has its weight inside a website, acknowledging that is a major step towards balance and success. I took this into consideration when building my last project with a local client, in which he asked for many many chunks of information all organized across pages. Measuring each chunk of information takes credit in the definition of a proper layout in which each portion can be more relevant or not through width, height, color, typography, everything.

Content, not data! It is our job as designers/engineers to make content out of data that a client gives us. No matter how much a client sees their content, it’s still data for us and it’s also our job to help the client understand what data should be like in a website and what importance it should have to achieve better results. I’m not saying we should override their needs, we actually need to listen to what they want, we’re not wizards We can even pretend we’re a regular user of theirs and play the game, a lot of results come from such an approach concerning usability and accesibility.

End of story

Content is what grabs people’s attention on a website and the way it’s explicit. You can even have a beautiful background and today’s grungy trends and everything, but if your content is not meaningful and well marked up then something’s definitely wrong.

Oh and forgot to mention, it’s open source based! This means low expense and good results as usual in the FOSS group. Will be posting some results with my experience on it, now that I’m almost to embrace photography more seriously. If you don’t have the money nor the mad genius to get Photoshop, this is a real good way to start!

1. The code stays organized, which means the result document stays organized.
2. No templates; or in other words, one single template.
3. Want to pass the document through the network? Just a few KB instead of almost 1MB…!

Despite the LaTeX distribution being larger than a CD (at least for Mac OS, the Windows version is slightly smaller), it’s worth it, especially if you’re in a team in which everyone has to write a piece of a written delivery. I remember I had to spend almost two hours to format every piece into one big furball. Sounds kind of messy, huh? Try gathering up a team, each one writes a piece of the document at their own way and then try using LaTeX. Your conclusions should be the same as mine.