Last year I have written a tutorial about sIFR. I covered a basic installation guide for sIFR version 2.0 and as of today, it is really out-dated. sIFR version 3 is out for some time now and has some more interesting and better features.

Let’s learn how to install the new sIFR 3 to your website!

Basic Information about sIFR

sIFR is the “Healthy alternative to browser text”, regarding to the authors Mike Davidson and Mark Wubben. With sIFR it is possible to display fonts on the internet that doesn’t have to be installed on the computer of the user. sIFR creates more typography options for the web!

The technique is a combination between Flash, JavaScript, CSS and HTML. Due this fact you have to remember to use sIFR only on important titles and subtitles because otherwise it might drastically slow down your site.

How does sIFR work?

sIFR has a system that really works great. The browser of your visitor (sIFR is supported by almost all browsers that support Javascript and Flash!) loads a basic web page. Javascript checks if Flash is supported and if this is the case, Javascript adds tags around the elements that will use sIFR.

Flash will now automatically load Flash movies where the new tags are located and ActionScript fills your Flash movie with the text, typeface and size. This all happens in split seconds!

What if Javascript or Flash is not supported?

If this is the case, the browser will load the web page normally, those visitors doesn’t even know they are missing the fun. That’s why sIFR is perfect: It doesn’t delete the original h1, h2, h3 or any other tag, which makes this technique pretty, accessible and search engine friendly!

Installation to your website

The installation and customization of sIFR on your website isn’t something you do in 30 seconds. Take your time and read this guide chapter by chapter and you will fly through it!

Table of Contents

1. Download The Files You Need
2. Generate The yourtypeface.swf File
3. Uploading Files
   
4. Implant sIFR Into Website
5. Configure sIFR
   
6. Style sIFR Titles
   
7. HTML Items Inside Your sIFR Title
   
8. Examples

1. Download The Files You Need

After a search for the latest version, I have found the directory where all the nightly releases are located. You should download the latest version. The version I will use in this tutorial is sifr3-r419.zip.

When you downloaded these files you should see four folders. Three of them (flash, css and js) contain the files we need to install sIFR so make sure you have a click away.

2. Generate the yourtypeface.swf file

We will use the sIFR Generator to do the job. It is also possible to use a Flash editing program like Adobe’s Flash CS, but I thought this way it is easier. You simply choose a TrueType typeface and walk through a wizard and your sIFR file is ready to go.

Walk through the Wizard

• Open the Wizard page
• Upload your TrueType (.ttf) font file – if it doesn’t select from the C:/Windows/Fonts folder, try copying it to some other folder.
• Choose sIFR version 3.419 – Maybe there are newer versions when you read this, that should be alright too!
• Choose Glyph Set - The more options to choose the bigger the sIFR file; you should select what you prefer.
• Type the Anti Spam words.
• Preview and download your sIFR file!

That’s all. You have your yourtypeface.swf sIFR file ready for use. Move on to the next step! I would like to thank sIFR Generator for this awesome tool.

3. Uploading Files

After we generated our yourtypeface.swf file, we are ready to implant sIFR into the website, but first you should upload these three files:

• js/sifr-config.js
• js/sifr.js
• yourtypeface.swf

sIFR also needs some styles to operate (sIFR-screen.css and sIFR-print.css). You can find in the css folder and you have two options to go with this. You could choose to upload these files to your webserver with the other files, or you could add these styles to your current media and print stylesheets. That saves us a couple extra miliseconds when the page loads.

4. Implant sIFR Into Website

To load sIFR to your website, we have to call for some Javascript files with these codes:

<script src="/path/sifr.js" type="text/javascript"></script>
 <script src="/path/sifr-config.js" type="text/javascript"></script>

Change path to the folder(s) where you have uploaded your files.

5. Configure sIFR

Next we will configure sIFR so it loads the correct yourtypeface.swf file. You should open up sifr-config.js located in the js folder.

sifr-config.js

This file will be used to configure the options we have with sIFR at the moment. I remember the time I had written the sIFR 2.0 tutorial and the options were everywhere! It has been much more organized.

Once you’ve opened sifr-config.js and you will notice there isn’t anything in there yet. We have to add the options ourselves. Let’s say we’ve generated a .swf file with the typeface yourtypeface you will use the following codes:

var yourtypeface = {
src: '/path/yourtypeface.swf'
};
sIFR.activate(yourtypeface);
sIFR.replace(yourtypeface, {
selector: 'h2.sifr-title'
});

Explanation Javascript

As you can see, the selector (the title we will add sIFR too) is called for by this element <h2 class=”sifr-title”>. You can change that to your likings.

If you used the typeface Meta when generating your file, your .swf file is named meta.swf. You can use these codes instead:

var meta = {
src: '/path/meta.swf'
};
sIFR.activate(meta);
sIFR.replace(meta, {
selector: 'h2.sifr-title'
});

You get the picture, right? After you saved this file and uploaded it to your web-server, you will see that sIFR 3.0 is working!

6. Style sIFR Titles

But, sIFR doesn’t stop with this basic stuff, there is loads more possible. For example, we could add some CSS that makes your titles look better.

Open sIFR-screen.css (in the css folder) and add visibility:hidden; to .sIFR-active h2.sifr-title. This will hide the standard HTML text when sIFR is loading. The .sIFR-active element makes sure the HTML text does show when sIFR isn’t working.

CSS

.sIFR-active h2.sifr-title{
visibility: hidden; line-height:1em;
}

Javascript

We can change the font-size, background color and more via the Javascript string we have seen in step 5. Not every CSS rule is supported, so check out what’s possible on the Styling wiki.

var yourtypeface = {
src: '/path/yourtypeface.swf'
};
sIFR.activate(yourtypeface);
sIFR.replace(yourtypeface, {
selector: 'h2.sifr-title',
css: 'h2.sifr-title{ font-size:14px; background-color:#cccccc; }'
});

7. HTML Items Inside Your sIFR Title

sIFR has also the possibility to add em, strong or even links (or anything else) inside your title. These kind of features make sIFR really awesome in use.

Styling goes as following:

var yourtypeface = {
src: '/path/yourtypeface.swf'
};
sIFR.activate(yourtypeface);
sIFR.replace(yourtypeface, {
selector: 'h2.sifr-title',
,css: [
'h2.sifr-title{ font-size: 14px; background-color: #CCCCCC; }'
,'em { font-style:italic;; }'
,'strong { font-weight:bold; }'
,'a { text-decoration: none; }'
,'a:hover { text-decoration: underline; }'
]
});

8. Examples

Everyone would like to see some examples where sIFR is used to see how it works and looks.

• Default Demo Example
• Blitz Magazine Online
• Jindou
• Streetlamp
• Deaf Can Do
• Need more Examples?

You want more?

sIFR doesn’t stop with the information I gave you here, many more things are possible. Here are some resources that you might enjoy.

• Mike Davidson and Mark Wubben – Authors of sIFR! Keep up the good work guys!
  
• Official sIFR wiki – Includes extra information about Styling, Javascript Configuration and many more.
• sIFR Generator
• Wikipedia Page
• Forum dedicated to sIFR – Go there for your advanced questions!

Keep in mind that I am a human too, so if you have found any bug, typo or error, please let me know to make this tutorial as helpful as possible.

In the past, DivitoDesign has learned you how to start blogging and many people have learned from that. So I thought, why not give beginners some articles that help you to start with webdesign in general.I remember the time I started out and it wasn’t easy, simply because I didn’t know where to begin. It’s time to change that. Here are some of the best articles and sites from around the internet that will learn you all the basics you need.

General

• “What is Webdesign” guide
• Understanding Webdesign
• Validate HTML / CSS (Very important!)
• Why validate?

Programs

• Adobe Photoshop CS3 (Design)
  
• GIMP (Design)
• Adobe DreamWeaver (HTML/CSS/PHP editing)
• NVU (HTML/CSS editing)

HTML

• HTML Basics
• W3Schools – HTML reference
• HTML Tutorial

CSS

• CSS Basics
• Complete CSS Guide + Reference list
• W3Schools – CSS reference
• Free CSS Ebook – Need to subscribe to the RSS feed to download the Ebook!

Design

• Photoshop tutorials
• GIMP tutorials
• Photoshop Basics
• Photoshop Shortcuts
• Create a weblayout in Photoshop + Dreamweaver
• 27 “how to design a website” tutorials in one place

Site Structure

• Basic Site Structures
• From Design to HTML – Step by Step
• From PSD to HTML

Tutorial Sites

• Pixel2Life
• Good-Tutorials
• Nettuts / PSDtuts
• TutorialSphere

Colors

• ColourLovers
• Colors In Webdesign
• Color Theory
• Color Tips

Resources

• Photoshop Brushes
• Photoshop Brushes II
• Photoshop Patterns
• Photoshop Layer Styles
• WordPress Plugins
• WordPress Themes

Stock Images

• DeviantArt’s Stock images collection
• Stock Xchng (Free!)
• iStockPhoto (paid)
  
• Free Stock Images

Search Engines

• How Search Engines Work
• Search Engine Optimizing Basics
• Off-Site Search Engine Optimizing
• On-Site SEO
• Add a Sitemap to your website

Inspiration

• BestWebGallery
• StyleGala
• CSS Drive
• CSS Vault
• Web Creme
• CSSLeak

Fonts / Typography

• Wikipedia – Typography
• I love Typography
• Typography Essentials – A Getting Started Guide
• Fonts On the Internet
• DaFont

Usability and Accessibility

• Usability basics
• Accessibility basics
• Accessibility top 10 tips
• 30 Usability Issues to Be Aware Of

Blogging

• Start Blogging Guide
• Reasons Why / Why Not To blog
• WordPress
• Blogger

Suggestions?

If you think a beginner would benefit from an article you have wrote or which you have found, feel free to leave a comment with the link, or send me an email!

For more articles on webdesign, blogging, CSS or Seach engine optimizing, consider subscribing to the RSS feed. ]]> http://divitodesign.com/css/66-links-to-learn-the-webdesign-basics/feed/ 52 http://divitodesign.com/blogging/start-blogging-6-blogging-tips-and-tricks/ http://divitodesign.com/blogging/start-blogging-6-blogging-tips-and-tricks/#comments Thu, 07 Aug 2008 20:00:22 +0000 Stefan Vervoort http://www.divitodesign.com/?p=235

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... »

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

A few blogging tips and tricks

Here are a couple tips and tricks to get you going after the basic and more extensive articles. This latest post will include a couple tips about every topic around blogging.

General

• After you read this article: Don’t be afraid to make faults. Just do it.
• Focus on content because content is king.
• Use Feedburner to keep track of your subscribers and use Google Analytics as your statistics program.
• Staring at your statistics three hours a day will not get you more visitors, focus on writing and promoting.
• Tag your posts to keep things organized for your readers.

Writing

• If you aren’t familiar with the English language, learn. Writing in English will get you in potential much more exposure then all other languages together.
• Use a spell checker and a translating tool. That will improve your writing.
• Proof-read. Always remember to read your article over and over again, edit what you don’t like and read again. You will get a better article.
• Write quality headlines to get the attention from potential readers.

Search Engines

• Do not add your site to the add-your-site pages on Google, Yahoo! and MSN. Just Write quality content and get links from other sites, that will get you in the results.
• Focus on Google. Do not forget Yahoo! and MSN, but Google will bring the most traffic in, so optimize your blog for that engine.
• Install search engine optimizing (SEO) – friendly plugins to improve your visibility in the search engines.
• Try to get as many links to your blog as possible. You can do so by link-exchange with bloggers in the same niche or writing great content that people would love to link to.
• Read SEO-blogs from time to time.
• Write awesome content + do a bit search engine optimizing = #1 spot
• Optimize your URLs: we call those Permalinks.
• Use h1 tags for your article title and h2 for keyword-rich subtitles

Network

• Try to network with bloggers in your niche. They are people just like you and me who need to focus as well. If they get a nice appreciation comment from time to time, they are happy. They might link to your blog or a blog post.
• Make friends. Friends will help each other if things do not run smooth.

Comments

• Reply to the comments you get. Remember those people have busy days and they took the time to reply to your article; make sure you pay them to back to answer their question or by saying thanks.
• Comment on other blogs with a constructive and on-topic reply. You network, you might get a link to your blog (DO-follow blogs) and you will get some visitors as well. What do you want more?
• You should install a do-follow plugin yourself and post about it. You will get more quality comments because people get something back for their efforts.

WordPress Theme

• Install a search-engine friendly theme.
• If you installed WordPress (Ofcourse you did!), search the themes directory of WordPress. Or get the best themes from wpthemez.
• Don’t forget accessibility and usability.
• Keep your sidebar clean. Remove what doesn’t add any value to your readers.

Promotion

• Try to reach the Digg homepage with your articles. This will send in a lot of traffic.
• Promote web-related tutorials on Pixel2life and Good-Tutorials.
• Add your articles to Article Directories.

End of Lesson #6

You are ready for the stage. You have learned the basics of blogging and you are ready to start your own blog in a very interesting niche. I hope to see many new blogs out there and make sure you send me the link over!!

I hope everyone has enjoyed the series and there will be more good content on the way! Subscribe to our RSS feed and get that great content in your RSS reader, or in your mailbox (click the link and look in the upper left corner of your screen!).

Thanks for reading and see you next time!

]]>

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

Blogging Software: Pick one!

Blogging software takes all the hard work out of your hands. The only thing you have to do is write your articles, the software will take care of the rest: posts, comments, structure etc. There are many blogging software engines out there but I will only talk about four because they are in my opinion the best around.

Hosted solutions

WordPress.com – This system is the hosted based version of WordPress. When you sign up you get a subdomain (divitodesign.WordPress.com) and the powerful WordPress engine. You can choose from free themes and you are set up in a minute. This is my recommendation for the hosted-based solutions.

Blogger – The leading free hosted-based blogging solutions. It currently is the biggest free online blogging services and you can choose from many free blog templates for your blog along with other free services and features.

Host your own blog

WordPress.org – I love WordPress. WordPress is free, has a real powerful engine and has an active community. It is the leading software out there with thousands of themes and plugins available to make your blogging experience as smooth as possible. This is my recommendation for the self-hosted solutions. Later on in this guide I will provide you with resources for your WordPress installation.

MovableType – I have never used this software personally because you have to pay for it, but there are a many people swearing to this piece of software. For those who want to pay for your blogging software, this is the best available.

End of lesson #5

We are almost finished with the guide as lesson #5 ends now. Tomorrow you will get blogging tips and tricks. Tips and tricks everyone could use, even more experienced bloggers. Make sure you don’t miss that chapter.

If you want to start blogging and you haven’t read the whole guide, browse the table of content below.

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

Store your blog

You need a place on the internet where everyone that is interested could reach your blog. Your blog should have a great up-time and be fast. If a visitor want to visit a blog that is constantly not available, he will leave and never come back. The same goes with the speed of your blog, the dial-up users out there would like to visit your blog as well. They will simply leave if the loading time is five minutes and never come back.

Two Options

What do you mean two options?

Well, there are two options available to store your blog. If you have any money to spend you should be buying some quality webhosting. That is your best option because compared to a free service, you will have more freedom, usually a better speed and your own domain name. We will talk about that later.

The other option is a free one. If you just want to try blogging and you don’t want to invest in a proper home for your blog, you could use one of the hosted solutions. They provide you with webhosting that has usually great up-time (because they run a whole network of thousands of blogs, they can’t risk their client-base) and a subdomain.

I wouldn’t recommend this option if you are completely serious about your blog and you want to reach the big public. Your subdomain doesn’t look as good as your own dot com domain name. Why is that domain name so important?

Your own domain name

When you first start blogging you have to choose a name for your blog. This name should be used in your own domain name: www.yourblog.com. You should make sure you have a name that people remember.

It goes like this: people find an interesting article they would like to read again. After a while they’d like to visit the article and blog again, but.. they forget about the name and domain name. That visitor is lost to that blog.

You don’t need that yourself, you want those people to be able to find and remember your blog as easy as possible. Especially in the beginning should you try to bind people to your blog and a good domain name could improve your chances.

I recommend my own webhost

DivitoDesign (and so do my other blogs) are hosted with WPwebhost. They sponsor this blog, but that’s not why I am still hosted with them. They provided excellent support and quality hosting.

Another thing that is great from WPwebhost is that their servers are optimized for WordPress hosting. You can install WordPress in just one click and if you need support, the support team knows everything about WordPress.

Ready to take a shot at their hosting?

Because you are a reader of DivitoDesign you can get a coupon code to enjoy their hosting even cheaper. Enter this coupon code to gain an amazing 30% of any plan!

Coupon code: DIVITO30

End of lesson #4

I didn’t discuss the hosted-solutions in this chapter because they are usually coupled to some kind of blogging software. The next chapter will be full of them!

See you tomorrow.

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

Choose your Niche

It is important to know where you actually want to write about on your blog. You need to know what you want to tell your crowd and to choose that subject of your blog isn’t the most easy part. You have to choose a so-called niche.

With choosing your niche, you have to remember you need enough content to write about. If you choose a niche that doesn’t update as many as you would like, you don’t have stuff to write about and your choice has been wrong.

You should try to keep your niche in an area you know everything about. Do not choose it too large because if you don’t do this full-time but only as a hobby, you simply don’t have the time to write about everything you wish. Keep it simple, but not too simple. To make things a bit more understandable, read the example:

Example

If you are a political blogger ready for a large audience, you could choose the political part of your local town as niche. You could also choose the world politics or the politic center of a country. Which one do you think has the greatest potential and should be do-able as a one-man-show? I think the politics on country scale is the best option here. The other choices are simply too small, or too big.

You should always make that weigh between what is do-able on your own (you don’t have a whole team ready to help you) and what has the greatest potential. If you make the right decision here, you have a long way to go, but if you choose wrong, your blogging career might not work out as you wished.

End of lesson #3

It isn’t easy to choose your niche and sometimes you have to think about it over and over again. Before you start writing, read this post again and think your niche through! See you tomorrow.

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

What pages should a blog have?

As you might have read before in lesson #1, a blog is a website with a couple extra features. Because a blog is a website as well, we need some default pages. Pages that should keep your visitors happy, because they create some recognition; people know what to do when they see the default pages on your blog. Here we go:

Homepage

The homepage can be found on any blog you visit. It is the page you land on when you type in the address of the blog and it is where you can find the latest blog posts.

Contact page

It is important to have a contact page. As you are running a blog you must be able to communicate with your readers. The contact page makes this possible and there you go; the communication with your readers is a fact.

About page

The about page is there to tell your users who the author of a blog really is and what he is about. By adding as much details to that page as possible you gather trust of your readers. The readers notice there is a real person with a real job behind the blog and that is important to keep and extend your readers-base.

Archives

The blog posts you have written before are stored in the archives, everything you have ever written on the blog can be found there. It isn’t that important to have them because you will usually have a plugin who do the ’sidemapping’ for you. See the next default page.

Sitemap

The sitemap of your blog is a page where is listed everything you have ever written for the blog, just like your archives. The difference with your archives is that in a sitemap only post-titles are listed. The biggest advantage of a sitemap is the ability of search engines to crawl your blog better and faster. A sitemap isn’t available by default but there are plugins to do the job for you.

End of lesson #2

You could have more specific pages on your blog, but these are the ones that your really should have. Don’t hesitate to add your own pages to your blog. If you have a question, I will listen.

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

What is a blog? That is an important question if you would like to start one. Most of you’ve heard something about the phenomenon of blogging. Some things like publishing thoughts or writing articles for a crowd. That is true, but there is a lot more.

A blog or weblog is a web-based journal where people like me and you can publish their thoughts. It is a dynamic website where the author and readers can communicate and discuss about the articles. A blog is a website, but it is a dynamic website that changes all the time.

Subject of blogs

Around the blog-o-sphere (that’s the name they gave the world of blogging) there are blogs of all kinds. The number of subjects of those blogs are uncountable, people write about everything! There are absolutely no barriers and here are some examples: Food, Webdesign, Politics and even Golf or Wrestling; everything is present!

Blog or Website? What’s the difference?

The most important difference between a blog and a website is the interactivity and the updates. A blog should keep updated with the latest news and information from that niche, or it isn’t called a blog. A website doesn’t have to do this and can contain information that is timeless. It doesn’t have to update in a regular way.

Another difference between a blog and a website is the interactivity possibilities. A website is static and doesn’t allow visitors to give their opinion on the information the website provides. When you read a blog, you can tell everything you want to tell in the comments. You can actually discuss with the author and other readers. Due this fact some blogs have developed a large community around their blog.

The power of a blog

The hardest part for a blog author is to keep the blog updated. You have to make sure you stay on top of all the new information out there. You can’t say for four weeks, ‘I don’t want to write!’ or ‘I don’t have time’, because your blog will only suffer from that and eventually, die. You will loose a lot of your visitor-base and those visitors you ‘abandoned’ are hard to get back.

You are their source of news in that niche and after you left them they will visit another blog, your competitor, and they will not come back. The power of a blog is to keep updated, but it’s also their weakness if you can’t update all the time.

End of lesson #1

That’s the end of lesson #1. See you tomorrow when we are learning which pages a blog should include!

This guide will tell you exactly what HTML emails are, how to make them and how to design your HTML emails.

What are HTML emails?

HTML emails are emails send with mark-up. Most of the time, an email just contains letters and words to bring over a message to the recipient. It doesn’t need any fancy colors or tables. HTML emails can be used to make the user experience more entertaining and can be used to focus the visitors’ attention to the most important parts.

Why should you use HTML emails?

When you are in the blogging or publishing industry you might want to send a newsletter to inform your regular visitors of new articles, updates and/or news. Most of the time, to keep your subscribers entertained, a more professional look is required. Or you want to point visitors in the direction of a great headline. This all can be achieved by using HTML emails with CSS in a proper way.

Do HTML emails always look good?

To give your HTML email a proper look, we should watch out for a couple points. As you might know, HTML and CSS are rendered slightly different by different browsers. Email clients have this problem as well. All Web-based (Gmail, Hotmail) and standalone clients (Outlook, Thunderbird) will react different.

When you have designed a website, you have to check for browser-compability by simple checking your webpage in different browsers. What we are going to with HTML has the same principle. We will test the email in different clients.

Designing HTML emails

Designing emails has the same principles as designing websites. You should grab the users’ attention, without loosing accessibility and usability out of sight.

To make sure your email looks as good as possible in as many clients as possible, it is advised to use the simplest elements. Validating your email is a good step in the right position!

Simple elements

Some elements are used for a longer time, and usually an email client will have a better support for those elements. For example, Div’s will not get supported by most clients, but tables are supported much better. The reason is simple; div’s are relative new compared to tables.

<table border="0">
<tbody>
<tr>
<td></td>
</tr>
</tbody></table>

Stylesheets

Because we are using CSS to style our HTML elements, we have to add style declarations. Strangely, his is not possible in the regular way. Extern stylesheets are ignored by most of the email clients. Extern stylesheets are stylesheets called for via a tag in the HTML, or via the @import attribute. We have to use inline CSS to style our elements.

Styles can be declared as <style> in the <head></head> area as well. Some email clients doesn’t read those, so it is advised to use inline styles.

<a style="color: #333; text-decoration: none;"></a>

Images

Images aren’t something that you should use to show important information in your email. Spammers abuse images to bring over the spam message and as a result, email clients usually give the recipient the choice to show images. Therefore, always add an ALT tag so people can recognize what the image is about, and so does the email client. Otherwise your email might get flagged as spam and will not get to your receiver.

The fold

The fold in websites is the area of that website you can view without scrolling. In email messages, a fold area is important as well, and you have to make sure the most important information and headlines are above the fold. Remember an email client (especially web-based) has a lot of buttons above your email, which makes the fold higher as a website. Remember to place the most important information as high as possible in your email to make sure people sees the important parts first by using contrast!

All points in a list

You should…

1. Validate your email
2. Use inline styles
3. Use tables
4. Test your email in different email clients (Web-based + Standalone)
5. Place the most important information as high as possible.

You should not…

1. Use external or embedded stylesheets
2. Use to many images (Don’t display your whole email in images)
3. Make your email to hard to read (contrast should be alright)
4. Use div’s with style declaration ‘float’.
5. Put headlines and important information under the fold.

Questions?

If you have any questions regarding this article or if you don’t understand a tip I gave, please let me know. I will answer your questions and help you out! Please post a comment or contact me

Via this guide, you will learn what a Z-Index is and how to use this property to overlap HTML elements with CSS.

What is a Z-Index

Z-index is an property in CSS and has been included in CSS because people asked for an property with the possibility to make HTML elements overlap. Overlapping HTML elements can have a lot of advantages. You can make the important parts of your website fall out from the background some more.

How to use Z-Index?

Z-index uses values to identify which element is more important then the other. The default value is 0. Usually, I give the item that should be on top value 20, the less important 10 and the least important item 1.

It doesn’t really matter which numbers you give to the Z-index. The only thing you should remember is that your top item should have to highest value. But adding Z-index to items isn’t enough to make things work.

For our example, we will use the following HTML structure. Those boxes should get ‘Z-indexed’ later on!

<div class="box1">Blue = Div #1 </div>
<div class="box2">Pink = Div #2 </div>
<div class="box3">Yellow = Div #3 </div>

Click here to take a look at an example I made. The item that should be on top (because of the Z-index value) is not on top: the boxes are displayed under each other instead of on top of each other. It looks like the Z-index is not working in this example, right?

The codes I have used in this example. It should work was my first guess as well.

div.box1 {
height: 250px;
width: 250px;
background-color: blue;
z-index: 1;
}
div.box2 {
height: 100px;
width: 300px;
background-color: pink;
z-index: 20;
}
div.box3 {
height: 125px;
width: 125px;
background-color: yellow;
z-index: 10;
}

What’s up?

The Z-index requires an other property to style the elements that should get ‘Z-indexed’. Our element requires the position property is set to absolute to make things works. Otherwise our Z-index won’t work, as can be seen in the example above.

It’s now time for an example that works. The boxes has been styled with the right properties and is ready to be used. A working Z-index example can be found here.

These are the codes I used here. I simply added an position:absolute; and a couple placement values (top, left) to the boxes. It works!

div.box1 {
	position: absolute;
 	top: 20px; left: 20px;
 	height: 250px; width: 250px;
 	color: white;
 	background-color: blue;
 	z-index: 1;
}
div.box2 {
	position: absolute;
 	top: 150px; left: 10px;
 	height: 100px; width: 300px;
 	background-color: pink;
 	z-index: 20;
}
div.box3 {
	position: absolute;
	 top: 15px; left: 175px;
 	height: 125px; width: 125px;
 	background-color: yellow;
 	z-index: 10;
}

We are done

I hope you now have fully understood the Z-index principle. You should always remember to add a position:absolute; property, or your Z-index will not work! If you have any questions regarding this subject, contact me or leave a comment.