The first course we enrolled to was about handling clients and the process that should be behind it. That’s what I want to teach you today, how to build a proper process of handling clients and the project.

We will be working according to a design-line. A design-line can be used in any project and handles the whole process of any client. Let’s take a closer look at this process, because when you master it and you use it anytime you get a project, you will notice that you will create better , more beautiful and smarter products.

The design-line is split in these points:

• Research & Analyze
• Conceptualization
• Design
• Feedback
• Creation

Research & Analyze

When you have sold your services to the client and you have a description of the project, you should not immediately start with the designing phase. First, you need to research what the client wants and what’s best for the company. What the client want is not always what the client need, and it’s your job to find out what he exactly need.

Structure the information you are provided with, look at the competitors, and most important, try to get as many information from the client as possible.

There are numerous ways to get that information, but for me, the most accurate way is via a design brief or face-to-face with the client. Because face-to-face is not always possible, I use the design brief most of the time.

A design brief will ask questions that the client should answer as detailed as possible about the market, their competitors, their goals for the project and more. Do not ask for colours or design specifications, because it’s your job to design their project.

When you have all the information you need, it time to analyze them. You need to know what is important for the company and what information should be reflected into the design.

Conceptualization

After that Research & Analyze phase, it’s time to come up with some concepts to bring your ideas to life. As a designer, you should already have a basic idea of how to design the information the client has provided.

That basic idea isn’t always the best, so make sure you design multiple concepts. With 5 or 6 concepts, you have explored more ways to visualize your idea and the idea of the client. Next, you can choose which solution fits best (or choose parts of each concept that work best) and improve that one accordiacaly.

One important part is to not be satisfied with your work when you have a proper looking concept in front of you. You can get much better results when you push your concept to the limit. That’s what is going to happen in the next design phase.

Design

In this phase, you have to develop your concept to the final design. In our study, we have to build 5 variations on the concept we’ve choosen in the conceptualization phase. That way, you will explore all the possibilities of that concept, and you can better see what works and what doesn’t.

For the record, the conceptualization phase should be done on paper. When you are done and you have choosen to proceed with one concept, you have to bring it over to the computer. Usually, that happens via Adobe Photoshop or Adobe Illustrator. These programs have all the necessary tools to make your concept a real design.

In this phase, it is important to make your concept ready to show your client. Your client has to see the final outcome before their eyes, which means you have to put all the details in place. You have to put the ‘points on the I’.

When you are ready designing your concept, it’s time to proceed to the next phase.

Feedback

After the design stage, it’s time to show your client the design. You need to know if you are able to proceed to go the creation phase. The client has to provide critisicm on your work, because the client should be pleased too. They are the ones actually paying your bills, right?

When asking for feedback, make sure you use a protocol. With a protocol I mean you ‘sell’ your design in the same way every time, with every client and every design. You design such protocol once, and you’ll be able to use a good-looking and describitive way to sell your design every time. Usually, this is a PDF file that features all the qualities of your design. I will write an article about the selling protocol later on.

After you’ve sent your design, or if you have talked to the client directly, you have feedback. Make sure you go back to the conceptualization phase to implant that feedback. However, do not always implant feedback right away, because you can defend your work if you know your solutions are better for your client’s end result.

Going back to the conceptualization or design phase can happen a few times in a project. It may also happen that you have to start all over with a series of complete new concepts. When that happens, make sure you still use the design-line, or you would have a design that is not pushed to the limits.

When all the feedback is handled and the client has accepted the design, it’s time to create a live version in the next phase.

Creation

Depending on the project, you have to make a live version of your design. When you are designing a logo or identity, that is not always the case and you may be finished after the design phase. But for design projects like print or websites, there are a few things you need to do before the actual job is done.

When doing website jobs for example, you need to convert the design to a live website with XHTML & CSS. After that, you may need to implant custom PHP code or more advanced scripting. This all happends in the creation phase. You have to make things work exactly right for your client, because after this, the job should be done.

I’m looking forward to hear your comments on this method.

General Knowledge

One thing that is most important to link building is this: a few high-quality links favors numerous links of a low caliber. That means you have to search for the best links that fit the topic of your website or blog.

1. Reciprocal Links

Explaining reciprocal links is simple: you exchange links with other websites. You link to them, they link to you.

Those websites or blogs have already build a reputation in the search engine’s eyes. The SE’s trust them. When you start a new site, your site is not yet trusted. However, if you have that website linking to you, the engine know that you offer something good too. Generally, because you have good content or if you are their friends. They will easier trust you too and list you faster and better in their results. You build on the reputation of the popular website.

However, don’t think you can scream at a few of these sites and ask them for a link. You have to build a site with a good layout and content first, before they might feel about linking to you.

Here are a few pointers that you have to remember when asking for a reciprocal link exchange:

• Place a link to their website before you ask them to put a link on their website to your website.
• Be gentle.
• Make it as easy as possible for the webmaster to add the link. Provide the URL and the anchor text.
• Give them all the information they will ever need: links page, place of link, pagerank etc.

So, where to find these sites?

Be creative, that’s the keyword. Here are a few spots to get you going:

• Look around in your niche, what blogs or websites are you reading that covers the same subjects?
• Become friends with those webmasters and bloggers. Friends will help friends, right?
• Look on the sites of your competitors: who are linking to them? Find them and contact them.
• Look for sites that have already linked to a page on your website and ask them for a reciprocal link.

2. Social Media

This is the time of Social Media and I am sure many of you have an account on Digg, Delicious, Facebook or Twitter. Great. It’s time to make use of this social media to attract loads of visitors, but it also can be used to attract a number of great one-way links.

So, how does it work?

Hundreds, if not thousands of people in your niche are interested in your articles and content. The larger the number of people that read your article, the larger the number of influential bloggers and webmasters are amongst them. Those people might enjoy your article that much, that they start linking to them. Simply because your article is interesting to their visitors. That is social media.

How can I get that number of visitors from Social Media?

• If you run a company site: start a blog.
• Start writing articles about subjects in your niche.
• Try to fill up gabs that your ‘competitors’ didn’t fill.
• Write great headlines.
• Submit your content to the major social media sites and the ones that are in your niche.

Just remember, to get on the front page of the large social media sites is very hard. With submitting your article to the social media sites in your niche, you will reach the people that are interested in your article. The people that are looking for your content. If your article is good, they will vote for it and a few of them will link to you.

3. Directory Submission

In the past, directory submission was a great and important way to get a number of links pointing to your site. However, in this media age, the search engines are much more sophisticated. They won’t fall for that.

Adding your website to a number of high-quality directories however, can help you get better rankings. Make sure you search for the correct category that your website should fit in. Here are a number of directories that I feel are from a high-quality.

• Google Directory
• Yahoo! Directory
• Web World Index
• World Wide Wub
• The Directory Site

Adding your website to any of these directories makes your website more important in the eyes of the SE’s. Those directories are known for only publishing the best websites. If you get listed, you build your website on the reputation of that directories.

4. Guest Post on Popular Blogs

A popular blog in your niche has a large number of followers and visitors. You would like to reach this people because they are interested in your articles.

One way to reach those people is to write an article on that popular blog. When your request is honoured, you let the people out there know you exists and that you have value to provide. In return, a link and a description of your website or blog is posted above or under the article. When that articles gets a PageRank (and with popular blogs, that usually happens pretty fast), you will get a quality one-way link to your website.

Also, don’t forget the number of visitors that will click your link when your article was interesting enough. It’ll get your name out.

So, anyone wants to write for DivitoDesign?

5. Forum Signatures

If you are very passionate about your niche or subject, you already know that there are a number of great forums out there that discuss everything in your niche.

In many of these forums, you can use signature links. Sometimes these link are no-follow (which means the SE’s don’t value them for the search results), but sometimes they are normal do-follow links. If you are active in that forum and post in many conversations, more and more links from different conversations are pointing to your website. This is a good thing.

Where to find those Do-Follow forums?

Here is a small number of forums related to webdesign and media that allow do-follow links in forum signatures:

• Digital Point Forums
• Sitepoint Forums
• Webmaster Talk forums
• V7n forums

You can get more do-follow forums in this niche by visiting reading the “forums with link juice“-article.

If you are in a different niche and you wish to find do-follow forums, make sure you become active in a few forums and try it!

Any Suggestions?

As I am not the best Search Engine Optimizer there is, I am sure many of you have a lot more tips that work. I would be happy to hear them, because it will improve my own SEO-campaign, but it’ll also help the other readers.

Please leave a reply in the comment box.

For this reason, I decided to filter out the best articles and feature them for all the other readers that doesn’t check out the Community News section.

Webdesign

• 62 sites to submit your design links
  Some website links which are you can submit your art-work post/article/webs, news, for share to the world, related on web development and design.
• 40 Really Useful Photoshop Text Effect Tutorials
  This article shares the most useful Photoshop text effect tutorials with readers. A great text effect will sure attract readers’ attention and delivers a better message.
• 10 Exciting Horizontal Websites For your Inspiration
  Welcome an unbeaten compilation of the most innovative horizontally designed websites for you to stay abreast of contemporary web design trends.
• Create a nice looking travel layout with Photoshop
  In this easy to follow tutorial you will learn how to create a nice looking Travel Layout.
• 15 Essential Checks Before Launching Your Website
  In this article, we are creating a checklist of all the basic but essential tasks which should be done and tested before launching any new website.
• Free Pattern and Texture Resources For Web Designers
  W3Avenue has compiled a list of resources which will help you find high quality free patterns and textures. As an added bonus you will also find a list of useful online tools that will help you quickly create simple patterns yourself.
• 30+ Easy To Follow Photoshop Layout Design Tutorials
  This article listed out 30+ easy to follow Photoshop layout design tutorials for beginner to intermediate. These step-by-step tutorials will teach you how to design a website from scratch.
• Ten Simple Rules for Choosing the Perfect CMS + Excellent Options
  The content management system you choose can really make a huge difference in how much time you (or your clients) spend keeping a site updated and maintained.
  Below are ten useful guidelines to consider when choosing a CMS, followed by rundowns on ten great CMS options available and how they stack up based on the guidelines.
• 55 Incredible Product Ads You Haven’t Seen
  Here are 55 incredible product advertisements from deviantART that you haven’t seen, but are extraordinary examples of how creative advertising should be done.
• The Minimalist Guide To Making Minimalist Websites
  This minimalist guide about creating minimalist websites contains the most essential points about creating truly useful and beautiful minimalist web designs.
• 15 Extremely Useful CSS Grid Layout Generator For Web Designers
  CSS Grid Layout Generators are undoubtedly useful for a web designers. These generators saves designers time by generating different size grid layout that can immediately being used by designers.
• 75+ Truly Remarkable Typography Resources
  A range of articles, resources, tutorials and roundups which will inspire you to become a Typography Ninja.

JavaScript

• 9 Useful Javascript Syntax Highlighting Scripts
  Syntax highlighting is very important especially you run a tutorial blog that has a lot of code examples.
• List of Really Useful Plugins For jQuery Developers
  This is a list of jQuery plugins that jQuery Developers can utilize in development of their own jQuery components, tools and applications.
• 15 jQuery Plugins To Create A User Friendly Tooltip
  This article will shows you various jQuery plugins to implement nice tooltip.
• 30 Useful Ajax Lightbox and Modal Dialog Solutions
  Lightbox is an ajax solution for preview image, slideshow and form in a modal dialog. It significantly improve user experience as it only loads a portion of content than refreshing the whole page.

WordPress

• Best Mobile Applications To Manage Your WordPress Blog
  If you own a WordPress publication or if you are a web developer providing WordPress solutions to your clients; W3Avenue has compiled a list of best mobile applications that will help you and your clients to manage WordPress publications from anywhere anytime.
• Design a WordPress theme with Photoshop
  If you want to create your own custom blog design follow this easy tutorial to learn how to design a WordPress theme in Photoshop.
• WordPress 2.8 Resources For Developers
  Latest version of WordPress has been released. in addition to over 790 bugs fixes, there are improvements in themes, widgets, taxonomies, and overall speed. W3Avenue has compiled a list of resources for WordPress developers that will help them quickly upgrade their themes or plugins to accommodate latest features.

Search Engine Optimizing

• How to achieve high search engine rankings through existing page rank ?
  The article is a must read for all the SEO’s and for all the people who wish to achieve online success. The article gives insights in detail regarding the ways to get high page rank for the newly introduced page on the website.
• 10 WordPress Plugins That Will Increase Your Search Engine Ranking
  Search Engine Optimization is the most important aspects of a successful online business. In this article, we are going to see 10 WordPress plugins that will help to gain higher search engine ranking.

But where do you start? What are the most important factors? Today, you will learn how to kickstart your new website or blog using a few very important Search Engine Optimizing techniques.

Today, we will start with the optimizing you can do on your webpages yourself. Please subscribe to the RSS feed to get the next part on link-building.

1. Structure

Search engines follow links. Links to other sites, but also when you link to your own pages or articles, the search engines follow them. That’s how they notice and index new pages on your site.

This is one reason to organize your articles, categories and pages in a structural way. A search engine (and even more important, your visitor) needs to know how to navigate through your website. It needs to know where to find the information they want to find. If they can’t, the search engine won’t index your page correctly.

That’s why you should make the structure and the navigation on your website as logic and organized as possible.

2. Title

The title of your site is very important for multiple reasons. A good title gives a visitor a clue where he’s located, but the most important value of your title tag is the search engine purpose.

The search engines put a lot of value in these titles. The first words in your title are the most important for ranking higher, but it is also important to grab the attention of the visitor when he is scanning the search engine results. It’s therefore important to put your most important keywords as far upfront as possible, followed by your company/blog name.

My titles usually look like this:

Article title – DivitoDesign
Category “Search Engine Optimizing” – DivitoDesign
Archives “2009″ – DivitoDesign

You can read more on effectively building your title tag structures on SEOmoz’ “Best practices for Title Tags“.

3. Headings

To make your article or website readable and scan-able for your visitors, you should use headings to separate different parts of your content. Headings have the same purpose for the search engines: they need to know what’s on the page too. When using heading tags effectively, you build structure in your article and you put more value on the most important keywords.

There are a number of important heading tags in HTML ranging from very important (<h1>) to not very important (<h6>):

• <h1>
• <h2>
• <h3>
• <h4>
• <h5>
• <h6>

Don’t underestimate the effect of even the <h5> and <h6> tags when you use them correctly (see point 7 for more.)

On my homepage (with multiple rotating article titles) I use the <h1> for my logo. On a single page however, I change the <h1> to a <h2> for the logo, and the article title (which is most important here) gets the <h1> tag.

You can read more on using heading tags on the HTML heading tags guide.

4. Images

Images are a great way to create a better looking article or website. Fortunately, we can also use images to help us in our search engine optimizing strategy.

A <img /> tag has a number of options to describe the image:

• Alt=”"
• title=”"

You have to remember that a search engine is not a visitor, they can’t read the pixels. That’s why we have to describe the image to make sure the search engine knows what the image means. And if we do that correctly, the search engine will display your images in image search queries too.

Here’s how the tag from a picture of a brown bear should look:

<img title="Brown Bear Example" src="/images/brown-bear.jpg" alt="Brown Bear Example" />

5. URL’s

When people scan the search engine results pages, they always notice three things. The title, the description and the URL. The position of your result combined with those three factors make the user decide to click the link. It’s important to let the visitor understand where he is going to.

Which URL would you visit when you were searching for a Nokia n73?

/reviews/nokia/n73
/?id=34o323&p=2123&product=9238923

I think that’s a clear choice. Depending on which Content Management System (CMS) you use, you will have to options to optimize the URL’s of your content. Here is a tutorial for WordPress and Joomla.

6. Anchor Text

A very important part of linking to other sites and to your own articles is the use of anchor text. If you build a link, they text the visitor has to click is the anchor text.

You can optimize your anchor text so that your visitor and the search engine know where the link is leading to. You have to do that with the use of keywords. Here are two examples:

• To visit the article, click here.
• Click here to visit the article on Search Engine Optimizing

The first link doesn’t have anything specific that describe the page you are heading when you click the link. The second one explains your visitor and the search engine what happens: you will visit a page on Search Engine Optimizing.

You get the point, try using as many keywords when linking as possible. Click to read more about Keywords & Anchor text.

7. Mark Important Keywords

If you have written an article or your site’s content, you are not done. You have to optimize your text for your visitors and for the search engines. Visitors scan your text and read the piece of content that grabs their attention. How can you grab the attention? By using italic text, strong and bold text, underlined text, images, blockquotes and more.

The search engines use some of these attention-grabbers to get the most accurate results for all the keywords. That’s why it is important to highlight the most important keywords. You can use a number of attention-grabbers that serve search engine optimizing purpose too:

• italic text
• bold & strong text

You can also delete all the style declarations from the <h5> or <h6> tag, so that you can use these tags in your content. After you’ve did that, you can use these <h5> or <h6> tags to highlight the keywords in your content, and the visitor doesn’t even notice!

h6{    padding:0; margin:0; line-height:0; font-weight:normal; }

8. Meta Tags

Meta tags are not very important for search engines to rank your website. It is however very important to get good results from the search engine results pages once you are listed. These visitors needs to be pulled in via three things: your page’s title (point 2), the URL (point 5) and your page’s description (this point!).

That’s why I suggest adding the following keywords to all your webpages on your site.

<meta name="description" content="The brief description of your site. This will be displayed in the search engine results pages. 150 CHARACTERS " />
<meta name="keywords" content="maximal, ten, important, keywords, here" />

Next Part: On Linkbuilding

Not only the search engine optimizing techniques on your own site are important, there is a lot more. We will be discussing many: link-building, keyword-research and a lot more. Please subscribe to our RSS feed to keep updated.

Thanks Nick, for answering these questions with such insight full answers!

How are you, Nick? Could you tell us something about yourself, who you are, what you do, etc?

Well, first off, thank you for the interview! I feel very honored .

My name is Nick Pagano, and I’m a young graphic/web designer from beautiful Houston, Texas. I graduated in 2005 from The Art Institute of Houston, but have been designing (both professionally and for fun) since I was in my early teens. I love all things design, and especially really dig the graphic design community! When I’m not being a design nerd, I’m normally spending quality (relaxing) time with my Fiancée, family or friends.

You run the Think Design Blog. What is that blog about and what are your plans with it 2009?

I started Think Design Blog in October 2008. Since then, it has really taken off! It is a blog dedicated to graphic design freebies, resources, and inspiration. I offer high-quality textures, Photoshop brushes, vectors, icons, WordPress themes and much more.

2008 was a GREAT year for the blog, even though it was launched so late in the year. So for 2009, I have a lot planned! I just hosted out first contest, and have several more planned for throughout the year. I also
have TONS of freebies to unleash, all of which I hope to be pretty original. I also have some very, very cool WordPress themes in the works, which I will be releasing throughout the year. I also have some super-secret ideas that may materialize in 2009

I see you are running a design firm called Think Four. How is that going?

Thank you very much for asking! I do run a small design company called Think Four Graphic Design. I actually just launched our new website: www.thinkfourdesign.com.

We create beautiful, usable websites, as well as just about anything else graphic design related. Our client’s range from small local businesses to nationally recognized performers.

We’ve been open for a bit over a year, with no signs of slowing down! Mainly, due to our wonderful customers that continue to provide us with quality referrals. I also have never had as much fun working as I do now!

You like WordPress too, right? How do you think WordPress will develop next year?

You are correct, I do love WordPress! It is a wonderful system, and the basis for all of my Web projects. As far as development, I see this year being big for WordPress. Though that’s not really groundbreaking commentary, as it seems every year is bigger than the last for WordPress!

The release of 2.7 was a big step as far as features, and I think these big leaps of improvement will continue to happen this year.

I also think there will be more companies like WooThemes coming out selling quality premium themes. The whole “premium” market is fairly new, and it will be interesting to see how it grows in 2009.

Do you have big plans next year?

Other than the above-mentioned goals for my blog, the goal is to continue to grow my company Think Four. We have some cool projects in the works, and are just generally looking forward to creating some very cool website and design for companies in 2009. As far as non-design-related plans, I’m getting married this April, so that will be very exciting!

And I cannot end this without saying one more time, thank you to Stefan for interviewing me! It’s been my pleasure. I wish you the best of luck in 2009!

The idea

In your browser, you can push the print button, which will give the command to print the page you are visiting. That page has information that your visitor doesn’t want to appear on the printed version. That’s why it is possible to specify different stylesheets for different mediums.

When you link to a stylesheet suitable to all devices, you will use  the following line between your <head> tags.

<LINK REL="stylesheet" TYPE="text/css" MEDIA="all" HREF="all.css" />

However, if you would like to specify different stylesheets for the print situation and the normal situation, you will use the following HTML lines:

<LINK REL="stylesheet" TYPE="text/css" MEDIA="all" HREF="all.css" />
<LINK REL="stylesheet" TYPE="text/css" MEDIA="print" HREF="print.css" />

Styling your different CSS

You now have 2 different stylesheets you can use for style. As you can see, one stylesheet is for both the mediums, one is for the print medium only. That means you can easily change the CSS for the printed version.

What Do We Need In Printed Copies of a Page?

An important thing you need to consider is what we exactly want to be printed and what not. Here are a number of things I find important about a printed version of a certain article or website.

Important:

• Black & White copy
• Readable text
• The Article + Images

Not Important & Not Needed

• Advertisements
• Images
• Menus
• Sidebars
• Footer

Let’s start hiding the things we don’t need and make the printed version focus on those things we do need.

Font Sizes

Not all the copy on the internet has the same size; some webdesigners prefer very large sized content, some very small font-sizes. Please specify a font size that you feel is realistic for everyone’s eyes once printed. I think that’s somewhere around 12 pixels.

body{ font-size:12px; }

Padding & Margin

If you delete all your sidebars, headers, footers and menus, you might come to the conclusion that your printed version is strangely located on your paper. You have to make sure you keep enough space around the text.  You can do that like this:

#content{ margin:5%; width:100%; }

Now you keep a 5% margin between the #content div and your whole printing layout. That means the space between the content and the border of your paper is 5% of the width of the article.

Un-needed Areas

Like I specified before, there are a number of areas you don’t need in the printed version. You can hide them in your print stylesheet:

#header, #footer, #sidebar, #menu { display:none; }

If you need other areas you need to hide, you get the point.

Images

We are going to hide and position things a little bit differently than when the article is written online. We want to show the image(s) inside the article, but get ride of images outside the article.

When you have wrapped your article inside the #content div, this is what happens inside your print.css file.

img{ display:none; margin:0; padding:0;  }
#content img{ display:inline; }

Colors

Your design usually uses a number of colors in the typography, but also in the backgrounds. Those colors are not needed in a printed version of an article. That’s why we are going to change the colors to fit the paper.

#content{ color:#000; background:#fff;  }

In this case, your whole article will have a white background with black text on it. This makes the article a bit more readable on the paper. You can also change the color of the text to make it a little less dark, but that’s totally up to you.

Links

In your design, you might have specified strange (hover)effects to your links. In the printed version, these effects aren’t appropriated and people might not recognize a link as a link.

Depending on how many style declarations you have given your links, the following style declarations are usually enough to make them look like links. If you have more things specified in your original stylesheet, don’t hesitate to change them back to a more general look in the print stylesheet.

a:link, a:active, a:visited{ color:blue; text-decoration: underline; padding:0; margin:0; line-height:1 }

Admin Specific Content

When you are using a content management system (CMS), you will most likely have the option to change articles or pages from inside your own site. That means that there is somewhere a link to the edit the page. That is a nice and time-saving touch for the online world, but when an administrator is printing a page, you don’t want to have an “edit page” link between the content. It’s time to hide that.

Depending on which class your “edit page” link has (in my case its class is .edit-link) you can hide that link like this:

a.edit-link{ display:none; }

Good to see you are still there. This is a not an excuse-me post, but a post to clear a few things up about the last couple months when I was gone. But first something about the redesign!

Redesign

After a number of weeks working on a redesign of DivitoDesign, it is finally live. The magazine look has not disappeared, but has greatly improved. DivitoDesign has now a much cleaner homepage (with more color!), a better Community News section, better subscribing options and a better looking advertising section. I have also better structured the permalinks, categories and comments section.

You should definitely check out this new version of DivitoDesign with your own eyes. Maybe you have a few suggestions to make the blog better or if you would like to give your opinion about the redesign in the poll, don’t hesitate! I am very option for criticism.

The Lack of Posts

And than now, the reason why I haven’t posted for such long time. My life has been pretty hectic the last 3 months as I had a number of things I had to finish. After my knee injury, I had to do a 3 time a week physiotherapy schedule, which was pretty intensive. On top of that, I had to do exams for my pre-university eduction and I had to learn driving the car as well. Fortunately, I succeeded in all of these projects.

The Future?

A few of you might remember the fact that I was going to study Physiotheraphy. Unfortunately, I was not elected for that study. Right now, I am thinking to do an education about the field I am really interested in, something with the web, graphic design, web design or advertising. I will let you know what I have choosen as soon as possible.

The Blog

The blog will pick up speed in the number of posts. You can definitely expect one high-quality article per week, supplemented with some extra interesting posts. Those articles will include subjects as Typography, CSS, webdesign, SEO or blogging in general.

Thanks for your understanding and if you would like to contribute by adding a comment, please head over to the comment section.

Greetings from your blogger,

Stefan Vervoort
DivitoDesign

Welcome to The Ultimate Collection series. Today I have compiled all the tools, blogs and resources regarding Typography. Typography is often overlooked by the webdesigner, but fortunately, that trend is changing a bit!

I might have forget a resource I definitely HAVE to include so please comment if you have that resource. I am happy to learn and add it to the collection.

Typography Blogs

My RSS feed reader includes a number of typography related blogs and if you are seriously about typography, you should be reading these blogs too.

• Speak Up (sad to see you shut up..)
• FontLover
• Typographica
• I Love Typography
• Typographer
• TypeOff
• TypeFoundry
• Jon Tan

Books

There has been written an immense number of books on typography, which I unfortunately don’t all have in my collection. However, here are a few I think are great.

• Typography Workbook: A Real-World Guide to Using Type in Graphic Design
• The Elements of Typographic Style
• Designing with Type: The Essential Guide to Typography
• The Complete Manual of Typography

Create Fonts

I have been thinking about building a professional font for a while too, but I don’t have the time. You might have the time and if you are interested in building a font yourself, these articles are must-reads.

• So You Want To Create a Font pt 1.
• So You Want To Create a Font pt 2.
• How to Design a Font (2) (3) (4)

Typography Tools

With more and more people getting interested in Typography a lot more tools gets developed.  Here are a number of typography tools I use from time to time.

• EM Calculator
• Lorum2 (Get dummy text for your new site.)
• TypeChart (See how fonts are used > grab the CSS)
• CSS Type Set (Customize your typography and grab the CSS right away.)
• TypeTester (Compare Screen Text > grab CSS)

Inspiration

Getting inspiration is not only important with webdesign in general, but with Typography too. When I build a site based on typography, I always find inspiration in the following sources.

• Typography Served
• Use Typography
• I love Typography Flickr Pool

Large Companies Typography Sections

I didn’t know that large companies usually have a large section of typography related information on their sites. Here are some of the largest.

• Microsoft Typography
• Adobe Typography (shop + information)
• Apple Fonts Section

Download Fonts

There are thousands of font designers out there that offer their fonts for free or for money. Take a look on the following sites that provide these downloads.

Get Free Fonts

• DaFont
• 1001 Free Fonts
• Font Post
• Search Free Fonts
• Jos Buivenga

Get Premium Fonts

• Font Shop
• Process Type Foundry
• LinoType
• MyFonts

Typography Options on the Web

It’s hard to implant great typography on the world wide web because only a few fonts are fully supported. That’s why we sometimes have to improvise.

• sIFR3 (tutorial)
• FLIR (tutorial)
• Typeface.js (tutorial)

I don’t know what’s causing that. However because of this fact, I finally decided to make a new version for DivitoDesign. The magazine and clean look stays as I like that, only I will optimize the grid, make the blog browser-compatible and implant some other tricks I have learnt since the latest redesign.

If you have any questions; please head over to the contact page and let me know as the comment system is currently disabled.

Stay tuned for the redesign!

When CSS Frameworks & Templates came around, some layout problems have been fixed, but definitely not all. These problems can usually be solved via normal CSS, but sometimes it is better to only display some (style)information to Internet Explorer users only.

That is possible with conditional comments. Conditional comments are only supported by Internet Explorer versions on a Windows machine. With these ‘tricks’, we can add special behavior to Windows based versions of Internet Explorer 5, 6, 7 and 8. The good thing is that this HTML code validates as well.

The Form of a Conditional Comment

All the conditional comment tags available are based on the same principle. This conditional comment is for all Internet Explorer versions.

<!--[if IE]>
If user browse with an Internet Browser, let's display this.
<![endif]-->

Depending on the situation you need to add a version number. Maybe you want to show a different stylesheet to Internet Explorer 5.5:

<!--[if IE 5.5]>
	<link rel="stylesheet" href="css/ie5.css" mce_href="css/ie5.css" href="css/ie5.css" mce_href="css/ie5.css" href="css/ie5.css" mce_href="css/ie5.css" href="css/ie5.css" mce_href="css/ie5.css" type="text/css" media="screen, projection" /><![endif]-->

Or only to IE7:

<!--[if IE 7]>
	<link rel="stylesheet" href="css/ie.css" mce_href="css/ie.css" href="css/ie.css" mce_href="css/ie.css" href="css/ie.css" mce_href="css/ie.css" href="css/ie.css" mce_href="css/ie.css" type="text/css" media="screen, projection" /><![endif]-->

You get the point, right?

What Else Can We Do?

Microsoft have added a couple parameters to these conditional comments too. For example, we can add “version Greater Than or Equal to” and “version Less Than or Equal to“. And that’s pretty handy.

Let’s say we want to add a different stylesheet for the Internet Explorer version 7 and below. We can do that like this:

<!--[if lte IE 7]>
	<link rel="stylesheet" href="css/ie.css" mce_href="css/ie.css" href="css/ie.css" mce_href="css/ie.css" href="css/ie.css" mce_href="css/ie.css" href="css/ie.css" mce_href="css/ie.css" type="text/css" media="screen, projection" /><![endif]-->

Or if we want to create a different stylesheet for version 6 or higher:

<!--[if gte IE 6]>
	<link rel="stylesheet" href="css/ie.css" mce_href="css/ie.css" href="css/ie.css" mce_href="css/ie.css" href="css/ie.css" mce_href="css/ie.css" href="css/ie.css" mce_href="css/ie.css" type="text/css" media="screen, projection" /><![endif]-->

We can any of these parameters in our conditional comment:

• lte – less than or equal
• lt – less than
• gte – greater than or equal
• gt – great than
• (IE6)|(IE7) – if Internet Explorer 6 OR Internet Explorer 7
• (IE6)&(IE7) – if Internet Explorer 6 AND Internet Explorer 7
• For more examples click here

Conditional Comments to Ask People to Upgrade Their Out-dated Browser

I usually don’t use conditional comments to fix browser bugs. The way I use them is to tell people they have an out-dated browser. In that message, I tell them they should upgrade their browser for more security and features.

<!--[if lt IE 7]>
<p class="error">Warning! You are using an out-dated version of Internet Explorer. This version has less features than alternatives and is <b>not secure</b> to use on the Internet anymore. Please upgrade your browser to <a href="http://getfirefox.org/" mce_href="http://getfirefox.org/">Get Firefox</a> or <a href="http://www.microsoft.com/downloads/en/default.aspx" mce_href="http://www.microsoft.com/downloads/en/default.aspx">Internet Explorer 7+.</p>
<![endif]-->

Via this way, you can tell people they shouldn’t be using this version and when they read it, they might upgrade to a more modern browser. As you can see, these conditional tags have many advantages to use in your next website.