DivitoDesign

Typography Resources: The Ultimate Collection

Stefan Vervoort — Tue, 28 Apr 2009 16:34:22 +0000

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.

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.

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.

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.

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.

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

Get Premium Fonts

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.

Why I Haven’t Posted – Redesign Coming Up

Stefan Vervoort — Fri, 17 Apr 2009 13:39:03 +0000

The reason I haven’t posted in a while is a little bug I am investigating here at DivitoDesign. Every one of you that made a comment over the last month have been “redirected” to the Interesting Blogs #3 post.

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!

CSS Conditional Comments Guide

Stefan Vervoort — Mon, 16 Mar 2009 11:55:08 +0000

As you might know, Internet Explorer 6 isn’t the most modern browser out there. In fact, it is almost 8 years old, but many people are still using this un-secure access to the web. Because of this fact, webdesigners still have to worry about how their work looks in Internet Explorer 6.

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.

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

Or only to IE7:

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:

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

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.

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.

No Do-Follow on DivitoDesign Anymore

Stefan Vervoort — Tue, 10 Mar 2009 23:14:10 +0000

I am sorry to tell you all, but I stopped supporting the Do-Follow movement. Back in the day, I thought it was a great idea to stimulate the number of comments here on the blog.

It did. However, not the way I would like to increase the number of comments. I don’t want to talk to people with the name of “SEO Company London” or “Free Apple Products”. I want to talk to “Richard” and to “Michael” and to anyone out there that want to participate in the discussion. Or the people who simply want to tell another trick, or a way to do things better to myself and my readers.

I couldn’t stand the way my inbox was filled with WordPress comments moderation emails any longer, while many of them were just human “spammers”.

So, if you think you can add value to the blog by commenting on an article you think that suits your opinion or suggestion, I will be more than happy to approve and reply to your comment. I just can not stand those other people anymore.

Thank you for your understanding and happy talking to each other over comment. I will appreciate that.

Interesting Articles #17

Stefan Vervoort — Sun, 01 Mar 2009 10:51:17 +0000

Another day, another time for another Interesting Articles. Today we will be talking about WordPress hacks, some SEO advice, browser compatibility and (web)typography.

1. Latest Posts by Category Archive – Pretty awesome plugin by Alex from Blogsessive. It gives you the opportunity to display each category’s five latest posts. It is an excellent idea for your archives page!

2. The Best SEO Advice For Bloggers – is guest posts on other blogs. I am sure it works for SEO point-of-view, but what about your content on your own blogs? Why not put it up there and build your blog? Anyway, who wants to guest post on DivitoDesign?

3. WordPress 2.7 Comment Enhancements – Make your WordPress theme ready for the new comments enhancement introduced at version 2.7

4. 10 Webtypography Rules Every Designer should Know – Pretty awesome article about Typography on the Web. Definitely a must-read when you are serious about your typography on your site.

5. 40 Super Sleek Fonts for Clean Webdesign – Alright, to stay in the subject of typography, here are 40 incredible nice fonts to use in clean websites.

6. 7 Fresh And Simple Ways to Check Browser Compability – Yes, this is a great development. You can now check how your site looks in every browser by their HTML/CSS, not screenshots. Check this article, it’ll help you a lot!

7. WordPress Hack – Bulletproof Page Menu Labels – Awesome solution by Alen of CSS Globe. If you want your Navigation item different then you Page title, use this. Works pretty nice.

Building HTML/CSS Sites: Use a Template

Stefan Vervoort — Fri, 27 Feb 2009 13:04:51 +0000

If you are developing HTML/CSS websites with occasionally a little bit of JavaScript (just like myself), it can be very un-productive to write your basic codes over and over again.

For example, if you want to include a JS file for your dropdowns, a CSS framework file and print CSS files every time you start working on a new project, you better read this article for some time-solving solutions.

Create a Template for Starting From Scratch

We are going to make a Template Folder we use every time on a new project. This includes a basic index page, the JS files, the CSS files and our basic images. In my projects, I use these files almost every time:

JavaScript (folder /js/)

pngFix.js (to have transparant PNG files in IE6)
custom.js (with a search form fix + the suckerfish JS to make dropdowns work)
jQuery.js (to have a good JS library to start with)

CSS (folder /css/)

Blueprint CSS Framework
- screen.css
- print.css
- ie.css
custom.css (for all my custom styles)

Images (folder /images/)

RSS icon

I suggest you take a look at some of these links I provided in the list and check out what you need yourself in a regular project. If you need other JavaScript fixes or basic CSS code, be sure to use them instead and add them in the same way I will describe below.

Let’s build our Template’s Index page

I hope you have placed all the files you need in an appropriated folder. For example, I have placed my images in /images/, my CSS files in /css/ and my JavaScript files in /js/. This will make things look pretty structured.

Alright, Let’s start with a standard HTML page:


"http://www.w3.org/1999/xhtml">

"Content-Type" content="text/html; charset=utf-8" />
</span>Untitled Document<span class="htmlOtherTag">

Description + Keywords + Robots

Any site needs a proper description and maybe some keywords. They won’t do much to your SEO rankings, but they will help you displaying your search engine results in a proper way. It could also be a good idea to add a meta tag for robots, so your search engine knows they can index your site.

Here is what I have added to my standard META tags. You should add all the following codes + inclusions between the tags in your HTML page.

    "description" content="" />
    "keywords" content="" />
    "robots" content="index,follow" />

CSS Framework

We have to add our CSS Framework first. Depending on the way your framework needs inclusion, here is the Blueprint way:


    "stylesheet" href="css/screen.css" type="text/css" media="screen, projection" />
    "stylesheet" href="css/print.css" type="text/css" media="print" />

Custom Styles

Next, I think it’s important to have a custom stylesheet at hand, so let’s add our custom.css stylesheet.


    "stylesheet" type="text/css" media="all" href="css/custom.css" />

JavaScript files

Now we have added style to our template, let’s add some JavaScript. I suggest you include jQuery first, because if you include jQuery plugins before the original library, they won’t work. So, here’s how I include my JavaScript files:

Everything we needed to include is done right now. We can now start adding some more code to our template’s Index file.

Structuring codes

Depending on your framework, you could add a basic structure between your tags. Most sites I developed have this structure:

Container
- Header
- Content
  - Content
  - Sidebar 1
  - Sidebar 2
- Footer

That’s why I have already created the structure so I can start right away.

"container" id="container">
    "span-24" id="header">
    "span-24" id="content">
       "">
       "">

    
    "span-24" id="footer">

As you can see, I haven’t given my DIV’s inside my Content DIV any ID and I even commented one of them. This is for the simple reason I don’t know what I will be adding to the content area yet. Every project is different, however, I usually choose two or three DIV’s inside the content.

Our Custom CSS Files

Next thing we will do is creating some basic CSS styles.

For example, it is important to structure your codes pretty well. When you need to work fast, you often work less structured and nice. With the use of a template, the structure is already there. You only need to fill it up.

Comments

I am not going to teach you how to write structured code as Woork has some great tutorials on them. You should always start with the basics details on your project. You can add more or less details in here, that’s up to you.

/*
Author:           Stefan Vervoort
Author URI:       http://www.divitomedia.com/
Version:	   0.9
Project:
Description:
*/

I think next, a table of contents is appropriated:

/*
---------------------------------------------------------------------------------------
TABLE OF CONTENTS
	-- RESETS
	-- BASICS
	-- CUSTOM
---------------------------------------------------------------------------------------
*/

You should add a heading above each section of your stylesheet. For example, when styling basic stylesheet attributes, you can do it like this:

/*---------------------------------------------------------------------------------------
--- BASICS
---------------------------------------------------------------------------------------*/
body { }
a { }
a:visited{ }
...

And, next, you add this section to your table of contents. I suggest you only place only your larger sections in your table of contents. This is just a basic lesson in structuring your CSS file.

CSS Resets

First, I have added a Reset. My personal favorite is the Eric Meijers’ Reset Reloaded.

/*---------------------------------------------------------------------------------------
--- RESETS
---------------------------------------------------------------------------------------*/
html, body, div, span, applet, object, iframe,
	p, blockquote, pre,
	a, abbr, acronym, address, big, cite, code,
	del, dfn, em, font, img, ins, kbd, q, s, samp,
	small, strike, strong, sub, sup, tt, var,
	b, u, i, center,
	dl, dt, dd, ol, ul, li,
	fieldset, form, label, legend,
	table, caption, tbody, tfoot, thead, tr, th, td {
		margin: 0;
		padding: 0;
		border: 0;
		outline: 0;
		font-size: 100%;
		vertical-align: baseline;
		background: transparent;
	}
	body {
		line-height: 1;
	}
	ol, ul {
		list-style: none;
	}
	blockquote, q {
		quotes: none;
	}
	blockquote:before, blockquote:after,
	q:before, q:after {
		content: '';
		content: none;
	}
	:focus {
		outline: 0;
	}
	ins {
		text-decoration: none;
	}
	del {
		text-decoration: line-through;
	}
	table {
		border-collapse: collapse;
		border-spacing: 0;
	}

The basics

The next thing I have added are a couple basic styles, without adding to much behavior. I have added default font sizes, some classes I always use (like .left, .right, .clear, .padding) and some image styles. Be sure to include your own preference in there too.

/*---------------------------------------------------------------------------------------
--- BASICS
---------------------------------------------------------------------------------------*/
html{		font-size:100%;	min-height:101%;}
body{		font-size:62.5%; color:#666;}
a{		}
a:hover{	}
a:active{	}
a:visited{	}
.left{		float:left; }
.right{	float:right; }
.clear{	clear:both; }
img.left{	margin:0 1em 1em 0; }
img.right{	margin:0 0 1em 1em; }
.padding{	padding:10px; }
#content p{	margin:1.1em 0; }

Dropdown Menu

Because I tend to use a dropdown menu in all my latest projects, I have all the styles added to my stylesheet to make the dropdown menu work proper, just without color styles. This makes it easy for me to style these menu’s easily.

If you want to use the suckerfish dropdown menu and want to add some basic behavior to your stylesheet, here are my codes. I always place my navigation menu inside a DIV with ID navigation.

/* ------------------------------------------------------------------------------------
NAVIGATION MENU				 */
#navigation, #navigation ul {		padding:0;	margin:0; list-style:none; line-height:1; float:left;	}
#navigation a {			display:block; padding:6px 10px; text-decoration:none;	}
#navigation a:hover{			text-decoration:underline; padding:6px 10px;}
#navigation li { 			float:left; width:auto;	}
#navigation li{			padding:0; margin:0; }
#navigation li ul li{			padding:1px 0px;}
#navigation li ul li a{		padding:6px 10px; width:110px; }
#navigation li ul { 			position:absolute; padding-top:1px; width:130px; left:-999em; }
#navigation li ul ul {			margin: -1.5em 0 0 130px;	}
#navigation li:hover ul ul, #navigation li:hover ul ul ul, #navigation li.sfhover ul ul, #navigation li.sfhover ul ul ul {	left: -999em;}
#navigation li:hover ul, #navigation li li:hover ul, #navigation li li li:hover ul,
#navigation li.sfhover ul, #navigation li li.sfhover ul, #navigation li li li.sfhover ul { left: auto;	}

Site Structure

It’s easy to gather all your structure DIV’s and put their ID’s under each other. This way you always know where to look when something isn’t right in your structure.

/* ------------------------------------------------------------------------------------
STRUCTURE					 */
#container{	overflow:hidden; border:solid #000; border-width:0 2px; font-size:1.5em; }
#header{}
#footer{	clear:both; }
#content{}
#right{}
#left{		}

Time for the custom code

My default styles I use in any project are in my stylesheet now. One thing I do next is adding this comment:

/* ------------------------------------------------------------------------------------
CUSTOM				 */

Which means, we are ready to start.

Template Done

We are ready to start developing with our new template system. Remember to always make a copy of your template before you start editing there. If you don’t do that you will loose your basic template, because you’ll save custom files over your original.

One tip I can give you is to email your template to your own email address. Once you, accidentally, lost your original template, you will be able to retrieve your original one! A backup is a live saver.

Download my Template

I can give you my template to use on your own projects and you will have everything all together. I hope you see the advantages of this way of starting on a project and I hope it’ll save you some time.

Download HTML-CSS-Template.

Any Tips?

If you spot any faults in the code, or if you think some code can be optimized, or if you have some tips to add to the template, don’t hesitate to leave a comment!

WordPress Resources: The Ultimate Collection

Stefan Vervoort — Sun, 08 Feb 2009 17:50:17 +0000

As I am a WordPress user by heart, I have a large list of WordPress related bookmarks. Many of these bookmarks have proven their value over time and I am pretty sure they will be helpful for you too. Welcome to the Ultimate Collection of WordPress Resources.

If I haven’t included a resource I definitely had to include, leave a comment and I will be happy to add it to the article.

General

Here are some general resources on WordPress.

Beginners

There are always people who would like to get into the game. Here are a couple tutorials that learned me developing WordPress themes.

Developing your Theme on your Local Computer

A great way to develop WordPress themes is to have a local server on your computer. A server that runs PHP and MySQL allows you to test WordPress themes without uploading to your online server. It isn’t hard to set up such server:

Codex

The WordPress Codex is the official documentation for WordPress. It has a huge number of content and you can find almost anything about WordPress There. Here are most important resources.

Theme Starting Points

When you are just starting out (or if you don’t want to start from scratch) you can use so-called “WordPress Frameworks”. Check of the most popular below:

WordPress Hacks

Because WordPress is so popular, many people use it. All these people have different requirements and WordPress can’t support them all. So, whoever needs more functionality experimented and hacked away. Here are a few WP hacks you can incorporate into your theme.

WordPress Tutorials

Hundreds of tutorials have been written about WordPress and theme development. Here is a small section of the best tutorials out there.

WordPress & SEO

By default, WordPress is a search engine friendly blogging platform. However, you can enhance your themes much further with the following SEO techniques.

CheatSheets

Cheatsheets can be very handy when you need to reference to a WordPress tag or function. You can print them and put them up your wall for quick referencing!

Promote your WordPress Theme

If you want to release your theme for free to the public, you can add your theme to these sites to get more attention.

WordPress Community

The people around WordPress are great: the community is much alive. Check out these forums to discuss anything WordPress related.

WordPress Blogs

Many people write about WordPress to teach other WordPress enthusiasts about their findings and tricks. Here are a few blogs on the subject.

Plugins

One great advantage of WordPress is the great plugin support. With thousands of plugins available, there’s almost a fix for anything.

More plugins? Check out these links:

WordPress Inspiration

It’s important to get inspiration from time to time, it can give you many idea’s for your themes. Here are some WordPress related showcase sites.

Interesting Blogs #3

Stefan Vervoort — Thu, 05 Feb 2009 22:29:44 +0000

Getting more information on subjects you are interested in is always a pleasure. Today, I have compiled a list of interesting blogs that I subscribed to recently because the content is pretty awesome.

Maybe you have an interest in the subjects in these particular blogs too. If that’s the case, be sure to check out all of them, because you might miss a few life-saving posts, if you don’t!

1. Darren Hoyt – Darren Hoyt is the lead designer over at Category4 and is in love with WordPress. His popular Mimbo theme (and Mimbo Pro) are awesome! The articles he is producing are of a high quality as well, so be sure to check his blog out.

2. WordPress Modder – Tips, tricks, hacks and lots of customizations for WordPress themes. I found this blog recently via twitter.

3. Hongkait – This blog gives you tips and resources for the blogger and webdesigner. It features some interesting resources lists I have enjoyed (which I usually don’t enjoy.).

4. PerishablePress – I have been subscribed to this blog for some time and Jeff Star is really picking up speed now. I see his articles everywhere lately!

5. WPtavern – WP tavern is started by WordPress-Weekly host Jeff Chandler and is ment to be a blog about WordPress. However, the main idea behind WPtavern is to create a enthusiast WordPress community in the forums. Check it out! You know I’m visiting because the beers are on the house!

If you have any suggestions with blogs I should be visiting, please don’t hesitate to comment. Enjoy the shitload of new and fresh content!

Blueprint CSS Framework – Learn The Basics

Stefan Vervoort — Sun, 01 Feb 2009 18:17:56 +0000

Because of the success of the latest “Learn the Basics” article about the 960 CSS Framework, I feel there is a need for detailed tutorials on how to start with CSS Frameworks. It’s not uncommon that people don’t know the basics before they start. It’s time to change that.

In the mentioned article, many people commented they like the Blueprint CSS framework more than the 960.gs. They feel it gives them more flexibility and works easier. That’s why I took a better look at this CSS framework and decided to teach you exactly how the basics work.

This tutorial will only gives you the basics of the Blueprint CSS framework. You need to understand CSS before you should be using CSS frameworks.

The Basic Principles

Before you can really develop with this framework you need a few things up-front.

Which files do you need

We need to download the CSS framework first. You can download the files here. Once you have opened your .zip/.rar, you will notice a lot of files. That’s because this isn’t your basic CSS framework alone, there are many other features we won’t discuss today.

We only need screen.css, print and ie.css, which you can find in the blueprint folder.

Do not edit templates

I suggest you don’t edit these CSS files, because they are part of a template. A template that might gets a few updates in the future and if you add customizations there, you won’t have an easy updating procedure.

How to add Blueprint to your site

Adding Blueprint only requires these lines of codes. You need to insert these between the tags of your site.

"stylesheet" href="screen.css" type="text/css" media="screen, projection">
"stylesheet" href="print.css" type="text/css" media="print">

But, of course, you want to add some custom styles too. We have to create another separated CSS file that does that. For example, you can call that file style.css. Use this line of codes to add this file to your site.

"stylesheet" href="style.css" type="text/css">

What Can Blueprint Do?

We have a number of classes in the blueprint stylesheets we can use. I will explain the most important ones for our grid layout first.

Container

We have to start with a container. By default, this container is 950px width and is centered in the middle of your screen. You can add 24 columns in this container, with a width of 30px per column. A margin of 10px is added to the right side of the column.

"container">

Columns

There are 24 columns you can choose from. For example, you can choose a layout with 4 boxes with boxes composed of 4, 12, 4 and 4 columns. Here’s the structure:

"container">
"span-4">Sidebar
"span-12">Content
"span-4">Photos
"span-4">Sponsors

As you can see, blueprint uses the span-x class to determine how many columns you need to add.

Margins.

As you all know, every column in blueprint has a margin-right of 10px. When we leave the structure this way, the last column in the layout will have that margin as well. We don’t need it there because it’ll break our layout.

Blueprint has a solution for that in the form of the .last class. Where you add that like this, your layout will render perfectly.

"container">
"span-4">Sidebar
"span-12">Content
"span-4">Photos
"span-4 last">Sponsors

Styling Your Columns

Now that you know how to build your structure with Blueprint, it’s time to add some padding and maybe a background color. So how are we going to do that when we can’t touch the original screen.css and print.css? Simple. Remember the style.css file I asked you to make?

First we have to do something about our structure. Due CSS specificity an ID is more important than a Class and we are going to add ID’s to all our boxes. When we style ID’s, we will overrule the styles the classes give.

"container">
"sidebar" class="span-4">Sidebar
"content" class="span-12">Content
"photos" class="span-4">Photos
"sponsors" class="span-4 last">Sponsors

We can now open up our custom stylesheet (style.css or any other name) and style the ID’s we have given here. If you don’t understand what I mean, I suggest you start learning CSS from scratch first.

As an example, I have made a small layout and added some style myself, check it out.

More Practices

Blueprint is much more than all the above. For example, you can add classes like .hide (to hide an element), .highlight (to give an element a specific background and highlight the text), add borders, and the default styles for typography and forms are pretty nice as well.

Position classes are added as well, but I haven’t really worked with that yet. I will post a follow-up article on the Blueprint CSS framework once I have experienced to this CSS framework’s full potential. You can get a message when this article arrives by subscribing to the RSS feed or via email.

Start Blogging Guide

Stefan Vervoort — Tue, 27 Jan 2009 14:42:50 +0000

Illustration by cambodia4kidsorg definite

Blogging

So you want to start blogging, right? That is great news, we never have too many blogs on the internet! Welcome to the new blogging guide written with one goal in mind: help you to start blogging. This guide will tell you exactly how you prepare before beginning with blogging and what points you need to consider before you make the start.

I guess you all have read blogs from time to time. Maybe you already have checked some blogs to see how things work in this world. That is only great but it’s not everything you need to know, there is more. You will learn all those things in this guide.

This guide include six chapters till date and in the future I might write some other chapters that might help the beginner out. What there’s written now is enough for a starter to become a beginning blogger.

You can’t learn everything just from reading, there comes a time you have to take that write-page and write your first article. Remember that.

When the time comes, enter the game.

Content Table

0. Welcome to the Guide
1. What is a blog
2. What pages should a blog have
3. Choose a Niche
4. Store your blog
5. Blogging software
6. Blogging Tips and Tricks