How and when did you get started as a designer?

I started to paint when I was twelve years old, at a small school of arts called CANDIDO PORTINARI, named after a great Brazilian painter.

In 1992 I bought my first personal computer, with CORELDRAW 2, I already
worked as free-lance designer by that time. I took a basic course of Corel in the same
year and about two years later I began to use a program like Photoshop (I think
the name was something like GALLERY OF EFFECTS). Soon, I became interested in typography and I began to do research in books that I found at some specialized stores in material for artists.

With the birth of the internet and the improvement of the computer science
equipments, it was easier to develop some works with different typography.
But it wasn’t until that I became aware of the software FONTOGRAPHER that I began to develop some sources to use in my works.

Over time and by reading some more books on typography, I was perfecting my knowledge. Because of the growth of the internet I tended to release the fonts and see works of other typedesigners and I discovered new programs to develop fonts.

What motivates you to distribute a lot of your fonts for free?

It is an excellent way of letting people know my work, and it is also quite interesting to know that in some way you are taking part in the art of other people.

Where do you get your inspiration?

The great majority comes from old posters, the types there are more designed as an artistic work for a difference.

Other inspiration comes from the Punk age, or, as we say today, Grunge: also seeking an air of distressed style.

And finally the tattoos, which perhaps have been my first example of how the types may be us and value the work.

What software do you use to make your fonts?

I use Fontlab and FontCreator to create them.

Do you have any tips or tricks for beginning (font)designers?

Always believe that you can and must improve yourself and your talents, we never know everything about something, but we can learn and to know more above on what we think that we dominate.

I believe we can always improve like people or professionals. If we want to know how someone made something and we do’nt have the information, we must try to make something equal or even better. This way we will discover new things that make us different as professionals.

We must try to touch of the soul of the people who observe the work. It is not always possible, but that’s what makes a professional better than the others.

If I am not mistaken, Shakespeare said:

The more I think that I know, the more I know that I know nothing.

Thanks Douglas for this interview and also for all your free fonts that are available on the web! Please visit www.vtks.com.br if you want to know more about Douglas and his work.

1.DaFont

DaFont is just the best site around, if you’re looking for free fonts. They have over 8,000 fonts, organized by theme (typewriter, cartoon, western, chinese, etc.) so you can easily find the font you’re looking for. Wat are you waiting for? Go and grap some fonts over there.

2.Smashing Magazine

If there’s one reason why Smashing Magazine has grown so big (#11 in the Technorati Top 100), it’s because of their high quality freebies. Beside fonts, you can also find wordpress themes and photoshop brushes over there. They even have a special Font Category.

3.Fonts500

Fonts500 is a website with a overview of the best 500 free fonts, available on the web. For less than 3 dollars, you can even download all the fonts in one package. Visit the site.

4.Woork/The Daily Inspired

The Daily Inspired (formerly Woork) is also a really good place to look for free fonts. In the freebies section, Antionio Lupetti reviews a lot of fonts and het makes some good selections. See woork.blogspot.com.

5. Bittbox

Last but definately not least: bittbox. Jay Hilgerts spends a lot of time reviewing and making freebies and bittbox is the splendid result of that work. On this blog you can find every kind of freebie and it’s a good resource for every (web)designer. Visit the site.

If you know..

…another great site that should definately be in this list, don’t hesitate and post a comment.

Donate Now Buttons

The website should be one of the places where visitors can easily donate to the charities. So there should be a “donate now”-button somewhere on the homepage. Obvious, but not too obtrusive. Some designs have the buttons inside the menu, making them to stand out by giving them another colour. Other sites have the buttons under the first paragraph, or somewhere in the side bar. Every way is good. As long as the buttons stand out and call for action.

Flash for showing Photographs

A lot of flash is used in charity websites. For showing the photographs Flash is indeed a good choice and I saw some nice examples in the websites I reviewed. I think photographs really work when it comes to generating sympathy for the people that need to be helped. Using nice photographs in the webdesign is therefore a good choice and a good presentation with flash makes it even better.

Conclusion

The average website of a charity organisation is really good. These organisations spend a lot of time on good websites, which is also expactable, because the internet is so popular nowadays, that a lot of money can be gain with good use of it.

Let this blogging action day be a day to start the conversation about poverty and do something about it!

Visit the website: www.how2launch.biz

Developing the custom Wordpress theme from scratch was the main part of this website. Adobe Photoshop was used to make the design, which was cut into smaller pieces and coded into the final Wordpress theme, which is completely XHTML valid.

Visit the website:www.gluten-vrij.nl

1. CSSGlobe

Icons for Digg, StumbleUpon, Reddit and DesignFloat. Unobtrusive and stylish.

2. Snook

These two buttons got a nice place in the article footer. The ma.gnolia icon fits great with the green colour.

3. Webdesigner Wall

The social media buttons are placed well and fit great in the design. The handdrawn ‘Digger’ makes the standard digg widget a great design element.

4. Woork

Woork has an ‘Add to delicious’ button in a nice, handwritten font combined with a speech bubble with the count. The compact digg button is more standard, but it looks good in this lay-out.

5. Ars Technica

Ars Technica uses a nice homemade digg button with counter.

6. I Can Has Cheeseburger

A few cartoony buttons in a own style. Very creative!

7. I love Typography

Four small black and white buttons with smooth rounded corners. Nonobstrusive and stylish.

8. Noupe

Noupe uses three small icons. The look good, but it bothers me a bit that they aren’t transparent.

9. Lifehacker

A few really small social icons.

10. Problogger

The icons themself are not special, but the list fits great in the columned design of the article footer.

Other Examples:

Ask the Css Guy

Blogstorm

Boing Boing

Copyblogger

Daily Blog Tips

Design Reviver

Opera Development Blog

Divito Design

Fuel your creativity

machinist.salon.com

Problogdesign

Shapeshed

Spoongraphics

The Code Central

The Watchmaker Project

TutorialBlog

TutorialSphere

VideoJug

Youtube

The Trend

The most common place for the social media buttons is the footer. However, some designers are experimenting with other places like the post title or first paragraph. Plain text links are getting more popular too. There are still a lot of standard buttons out there, but the small icons (16×16 pixels or a bit larger) are getting more common, which I think is a good development.

I hope you got some inspiration and if you have encountered other creative and nonobtrusive examples, leave a comment and tell it and I will add it to the article.

He who is not contented with what he has, would not be contented with what he would like to have.
- Socrates

Try to be satisfied with what you’ve achieved with your blog. If you are focusing too much on your goals, you forget to enjoy blogging. And we’re all blogging because we like it, don’t we?

Pay attention to the young and make them just as good as possible
- Socrates

If you have a lot of experience, share it. Once you were the newbie and you really appreciated the help of the guru’s. It was your time to learn then, now it’s your time to teach. Do not feel afraid to share your (secret) techniques. Show them to the world and let others learn from it.

As the builders say, the larger stones do not lie well without the lesser
- Plato

Don’t feel discouraged if you don’t have 100,000 visits a day on your blog. Maybe your niche is just less popular than others. Not being the best doesn’t mean that you’re not good.

No one is a friend to his friend who does not love in return.
- Plato

You don’t have to expect that everyone will link to your blog if you don’t do anything in return. If you are afraid of linking to other sites, don’t expect people to do otherwise. On the other hand, if you show link love, people will do something in return.

One man cannot practice many arts with success.
- Plato

If you want your blog to be successful, you have to know where you’re going. You just can’t write about anything. Choose a niche and try to become the best in that niche.

The beginning is the chiefest part of any work.
- Plato

Starting with something new is always difficult. If you have just started with your blog, don’t expect 10,000 visitors every day. But don’t give up and keep writing good articles. Good content will always be found.

Pleasure in the job puts perfection in the work.
- Aristotle

If you really enjoy blogging and you put a lot of effort in it, it will show. You can’t be a successful blogger if you don’t like blogging in the first place.

Conclusion

Despite the fact that these philosophers lived more than 2000 years ago, their wisdom can be still be a lesson for us. The one-liners can remind you of the reasons for you to blog. If you know other words of wisdom, leave a comment and share it!

What are Divitis and Classitis?

The terms Divitis and Classitis were first coined by Jeffrey Zeldman, in his book “Designing With Web Standards” (thanks reader John). There is a pretty good explanation of what it is at Tyssen Design:

‘Divitis’ is a term used to describe an error common amongst newcomers to building CSS-based sites whereby they use too many divs for everything. Divitis is related to ‘classitis’ and ’span mania’, both terms used to describe the practise of combining spans with a class to style content when a more appropriate tag is available

Why is it wrong?

Here are three reasons, why you shouldn’t use too much divs or spans:

• It is not semantic
  Semantic coding, is using an element the way it’s meant to be used. For example: using tables for a design is wrong. Tables are meant for structuring tabular data only.
• It is bad for SEO
  Search engines pay attention to certain elements, like <h#>. If you not specify the content by using a neutral element like <div>, the search engines don’t know whether that content is important.
• It is superfluous
  Using unnecessary tags means more code, more code means a larger file and a larger file means more bandwith use and slower pageloads.

Examples

Header

On a lot of site’s the following code is used for the header of the page:

<div id="header>
<img src="logo.jpg" alt="My site name" />
</div>


But it’s more semantic to use a <h1>-tag like this:

<h1>My site name</h1>

And the following CSS code:

h1 {
background:url(logo.jpg);
text-indent:-9999px; /*(that will remove the text from the page)*/
width:800px;
height:150px;
}

We just changed the <div> into a <h1>. This is good for SEO, for the search engine now sees that header image is the most important part of the page. And it’s more semantic to: the <h1> is meant for the most important header of the page, in this case the site name.

Navigation

I often see divs and spans used for navigation, while using a list is much easier. For example:

HTML:
<div id="menu">
<span class="menu_item">Menu Item</span>
<span class="menu_item">Menu Item</span>
<span class="menu_item">Menu Item</span>
<span class="menu_item">Menu Item</span>
</div>

CSS:
#menu {
/* your style*/
}
.menu_item {
/* your style */
}

First of all, there is no need to add a class to the span tags. You can easily target the <span> with CSS without a class. Like this:

HTML:
<div id="menu">
<span>Menu Item</span>
<span>Menu Item</span>
<span>Menu Item</span>
<span>Menu Item</span>
</div>

CSS:
#menu {
/* your style*/
}
#menu span {
/* your style */
}

But it would be more appropriate to use an unordered list (ul). You can see that you can very easily decrease the amount of code you use on your page.

HTML:
<ul id="menu">
<li>Menu Item</li>
<li>Menu Item</li>
<li>Menu Item</li>
<li>Menu Item</li>
</ul>

CSS:
#menu {
/* your style*/
}
#menu li {
/* your style */
}

Other elements

The previous examples are very basic, but even advanced CSS users don’t always use the right elements. Do you use <adress> for your contact data? Or <abbr> for you abbrevations?

Conclusion

Divitis, Classitis and over-using of spans are some of the most common CSS mistakes, but they are also easy to cure. Think a bit further that divs and spans and you’re almost there!

Further Reading

• CSS Adjacent Sibling Selector; this CSS selector is not well known but can be used to target some specific elements, and you don’t have to give them a class if you use this CSS selector.
• CSS Creator Divitis: What It Is And How To Cure It
• What is Divitis? - Tyssen Design

Reset your CSS

All browsers have default styles applied to certain HTML elements. For example, a h1 element is bold and larger by default, and has some margin too. The problem is that all browsers have different default styles so your h1 won’t look the same in every browser. The font-size isn’t really

The solution is to reset the default styles of each browser and build it up again with your own styles. Because you’ve removed the standard browser styles, there won’t be any difference between the browsers. It’s like starting on a clean sheet.

There are a lot of CSS Resets available but Eric Meyer’s CSS Reset is the most popular, according to a poll on CSS-Tricks. A round up of the most used CSS Resets can be found on here.

The disadvantage of a CSS reset is that you have to write a lot more code. Every element you reset, has to be build up again. That’s the reason why a lot of designers use a custom CSS Reset (13% according to the CSS-Tricks poll) or no CSS reset at all. Veerle Pieters showed her limited CSS Reset in a reply to a question of mine.

A CSS Reset is important for cross browser compatibility, but you have to decide for yourself how far you must go when resetting your CSS file.

Using supported techniques

CSS offers a lot of techniques, but not all of them are good supported by every browser. For example the :before and :after pseudo selectors, which don’t work in any version of Internet Explorer, shouldn’t be used.

Nor should the attribute selectors (like a[href $='.pdf']), for their bad browser support. If you want to use the attribute selectors, use jQuery instead of CSS. jQuery is a good way to imitate CSS selectors. It can be downloaded here.

A good overview of CSS Selectors and their browser support can be found here.

Validate

I think this one is obvious: Take the time to validate your CSS styles. Cross browser compatibility is way easier with good and valid CSS. You can validate your CSS file using the W3 CSS Validator.

Summary

Follow these three guidelines and your CSS file will have a lot more browser support:

• Reset your CSS,
• Use only supported techniques and…
• Validate!

What are the techniques that you use to assure cross browser compatibility? Please leave a comment and share your thoughts.

Further Reading

• Make your site cross browser compatible in 5 steps
• CSS hacks inside CSS

This photo was taken in Venice, Italy.