Archive for the ‘Articles’ Category

Listen to a Selection of Deezer Playlists for Party, Laidback, Hip Hop, Pop/Rock, Dance and Funk/Soul

Friday, November 23rd, 2007

I’ve been using Deezer since day one and it’s my favourite source #1 for music listening and discovery. After a free registration you can create and manage your own playlists.

I’m adding tracks to my Deezer playlists daily. Deezer also lets you embed your playlists in your blog. Listed below are a my playlists:

Party

free music

Laidback

free music

Hip Hop

free music

Pop/Rock

free music

Dance

free music

Funk/Soul

free music

VMWare Virtual Machine with Magento and Ubuntu Server 7.04

Saturday, October 13th, 2007

Magento is an open source ecommerce platform with complete design flexibility, modular architecture, and rich functionality. Currently the beta version is available. Try the Magento Demo Store and/or the Admin.

To get Magento installed on a server can be a challenge. That’s why I’ve created a virtual machine with Magento installed.

I used VMWare to create a virtual machine. I used the linux distribution Ubuntu Server 7.04 in VMWare. I installed and configured Ubuntu to meet the system requirements. The only thing I haven’t installed is a Sendmail-compatible Mail Transfer Agent (MTA), so you can install your own MTA.

The installation and configuration of Magento didn’t went smoothly. Eventually, after a lot of tryouts, configuration, use of the Magento forum and Googling, I managed to install it. I will soon post a guide how to create your own VMWare virtual machine with Magento and Ubuntu Server 7.04.

Download

Download from MegaUpload.
Download from The Pirate Bay.

Virtual Machine: VMWare
Magento Beta Version: 0.6.12840
Filename: Filename: vmware_magento_ubuntu_server704.zip
File size: 292.55 MB
Extracted file size: 820 MB

Using the Virtual Machine

Extract the zip file and open the vmx file in VMWare Player/VMWare Workstation/VMWare Server. VMWare Player and Server are free, except for the Workstation. For Linux all the VMWare products are free.

The virtual machine will now boot into Ubuntu Server 7.04. When you see the message “* Running local boot scripts (/etc/rc.local)” then click in e.g. VMWare Player to give it focus. Then press ENTER. Now the login screen appears. If you want to use your keyboard/mouse outside of the virtual machine, press CTRL + ALT.

Login with the following:
user: magento
password: magento

Type ifconfig to see your ip address. If e.g. your ip address is 192.168.1.64 then open http://192.168.1.64/magento in your browser. If you don’t have an ip address, then type the command dhclient and Ubuntu will give you an ip address. Magento is installed in /var/www/magento/.

I installed Magento with the static ip address 192.168.1.33. So if you’ve received the ip from dhcp 192.168.1.64 and you open it in a browser you will see the root directory of /var/www. But if you try to open /magento it won’t work because it tries to open http://192.168.1.33/magento. You have to assign Ubuntu the static ip adress 192.168.1.33.

If you want to use a sudo command, then use the password “magento”.

Assign static ip address

  • cd /etc/network
  • sudo cp interfaces interfaces.backup
  • sudo vi interfaces
  • Change iface eth1 inet dhcp to iface eth1 inet static
  • Below this line enter the following:

    address 192.168.1.33
    netmask 255.255.255.0
    network 192.168.1.0
    broadcast 192.168.1.255
    gateway 192.168.1.254
  • Save and close interfaces: escape :x
  • sudo vi /etc/resolv.conf
  • Change the code to:
    #search lan
    nameserver 192.168.1.254
  • Restart the networking service:
    sudo /etc/init.d/networking restart
  • Check if you have the static ip address 192.168.1.33:
    ifconfig eth1
  • If it worked, then go to http://192.168.1.33/magento/

MySQL

You can use mysql -u root to login to mysql. The root account has no password. I’ve created a mysql user “magentouser” with the password “magentopasswd”.

Login as a magentouser with mysql -u magentouser -p.
The database name is “magentodb”.

Magento Admin

To login to the Magento Admin go to http://192.168.1.33/magento/admin/.

Login with the following:
username: anandgraves
password: 0pzouten@ (0 is zero)

After your login you can change your username/password/email by going to System > My Account.

SSH

You can also login with SSH into Ubuntu Server 7.04 instead of using the VMWare Virtual Machine interface.

  • sudo apt-get install ssh openssh-server
  • Go to the putty download page and download PuTTY (putty.exe).
  • Start up PuTTY and choose 192.168.1.33 as the hostname
  • Choose port 22 (this is default)
  • Click open and fill in the username: “magento” and password “magento”.

Music and Video Entertainment Bookmarks

Friday, May 25th, 2007

Music

  • Deezer - This one is my favorite. Deezer lets you listen to music on demand. Search for artist, title or album and listen to it instantly for free. If you register for free you can add each track to a playlist. You can create an unlimited number of playlists. They don’t have everything, but they do have a very very big database and it’s fast. Finally a competitor for Last.FM and Pandora.
  • ShareMiner - Searches for files in Rapidshare, Megaupload, Rapidsharing and more.
  • WuZAM - A very fast mp3 search engine which lets you listen and download to tracks.
  • SkreemR Mp3 Search Engine - You can listen to tracks and download them.
  • Online MP3 Music Search Engine - Just like SkreemR you can listen to the tracks instantly and also download them..
  • AlbumWash - Download 61.000+ albums instantly. Registration is free.
  • MediaMaster - Upload an unlimited amount of music (mp3, m4a, etc.) and listen to it. You can listen to your whole collection as an internet radio station. Another feature is to put a Flash widget on your page (blog, website, etc.) and everyone can start listening to your collection.
  • Last.fm - A free service that tracks your musical taste, finds similar users, and provides musical recommendations and free personalised radio.

Software

  • musikCube - A easy and lightweight music player with an interface very similar to iTunes.
  • VLC Player - An allround cross-platform multimedia player which also can be used as a server to stream in unicast or multicast

Video

  • Joost Flash Mashyp - View video sharing sites such as YouTube, Veoh, Google, MySpace, Digg, BlipTV, MetaCafe using the Joost interface.
  • Joost - Interactive TV. Viewing hundreds of full-screen shows with complete control. Comes with extras like a chatroom for every tv channel, instant messaging, search and more.

    You need an invitation if you want to try it out. Here you can get an instant invitation

  • TV Links - Watch entire series, movies, cartoons, music videos, manga and sports.
  • Fabchannel - Live and on demand music concert webcasts

General

  • Best Online Documentaries
  • Random live webcams from the Net - These webcams were found automatically through a variety of clever search techniques. Their owners might or might not have intended for them to be public. But they obviously are. Many of them are security cameras in companies or semi-public places.

Selection of Top Torrent Search Engines

Thursday, May 24th, 2007

BitTorrent Client

I recomment uTorrent. A very small, fast and userfriendly bittorrent client. Download the standalone version which is the smallest. Around 170 Kb.

Search in multiple Torrent Search Engines

I have created a Rollyo Search Engine for all the Torrent Search Engines mentioned above. With Rollyo you can create a custom search engine using the sources that you recommend.


Powered by Rollyo

Remove Duplicated Email Addresses

Tuesday, May 8th, 2007

Remove duplicate email addresses and sort them alphabetically. Also places all the incorrect email addresses in a separate text file.

You can also use a standalone offline version:

Last update : 03 january 2005
Author : Wilco Witte

Download unduplicate.tar (unduplicate.pl for Linux, Mac OS X and other)

Download unduplicate.zip (unduplicate.exe for Windows)

The windows executable file, unduplicate.exe, was created with TinyPerl.

Unduplicate works on a text file with email addresses. Put the text file in the same directory as unduplicate:

name1@test.comname2@test.comname3@test.com…

It removes empty lines and duplicate email addresses. After that it checks every emailaddress if they are syntactically valid. It then sorts all addresses alphabetically and writes the valid email addresses to a new text file. All the invalid email addresses are also
written to a new text file.

For example addresses.txt:

lux28@fictivedomain.comart_b1d@test.comjoshhotmail.comchris@test.com

jurgen12@whattupcomronny.dr@mywebsite.com,paul@website.comwilco_l0rd@domain.comr obbu@robbu.com

After unduplicate has finished, 2 files will have been written:

  • addresses_new.txt
  • addresses_error.txt

addresses_new.txt contains the valid emailaddresses:

lux28@fictivedomain.comart_b1d@test.comjoshhotmail.comchris@test.comwilco_l0rd@domain.com

addresses_error.txt contains the invalid emailaddresses:

jurgen12@whattupcomronny.dr@mywebsite.com,paul@website.com
r obbu@robbu.com

Web Developer and Design Reference Book

Monday, March 26th, 2007

Daily Reading

Web Design Explained

CSS

Photoshop

  • 60 Advanced Photoshop Tutorials
  • PhotoshopSupport.com - Photoshop news & tutorials
  • Photoshop User TV - Watch each week as “The Photoshop Guys” (Dave Cross, Matt Kloskowski, and Scott Kelby) share the hottest Adobe Photoshop tutorials, the latest insider tricks, and the coolest timesaving, job-saving shortcuts to make your time in Photoshop more productive, more efficient, and more fun.

Colors

JavaScript

Web Tools & Services

  • Montastic: free website monitoring - You can monitor a maximum of 100 servers.
  • Browsershots - Test your web design in different browsers, operating systems, screen sizes, color depth and the option to enable/disable java, javascript and flash.
  • MediaWiki - Watch this screencast “Explaining Wikis“. A Wiki has a lot of uses. Here is a list and here a more detailed list.
  • Convert characters to Unicode
  • Media Convert - Free online file conversion of video, sound, images, ringtones, vector documents, text documents, presentation and data. The format support is huge. For example, convert a WMV to FLV, a PDF to SWF and so on. Maximum file size is 150 Mb. Zamzar is another online file conversion service.
  • Widgetbox - Directory of web widgets
  • Add This! Social Bookmark and Feed Button - Saves the current page into your favorite bookmarking service. Also includes statistics.
  • Travlang’s Translating Dictionaries - Translate a word in more than 30 languages
  • What Search Engine Spiders See
  • HTML Email Validator - Checks for compatibility with HTML email
  • HTML Tidy
    • Online File Storage

    • MegaUpload - Upload files up to 500 MB. No registration required. At the homepage you can browse for your file, enter a description, activate option “i accept” and press “send”. After 21 days your file will be deleted. If you register for free, then your file stays for 90 days online. Download speeds are fast.
    • DivShare - Upload files up to 200MB. No registration required.
    • MediaMax - 25 GBs of free online storage. Free registration required.

eCommerce

  • Magento - Open source ecommerce platform with complete design flexibility, modular architecture, and rich functionality.
  • eCommerce Optimization - Offers a variety of helpful eBusiness resources including free articles, step-by-step guides, eCommerce industry news, paid consulting services and other useful tips and tricks to help online merchants improve store visibility and sales.

Web Analytics

PHP

Web Security

Hacking

Ebooks

  • eBookSpyder - Download and search ebooks instantly
  • Scribd - View, download and search ebooks online

Regular Expressions

(Open Source) CMS

Forums

Anonymity & Privacy

  • Will Self-Destruct - Create secure anonymous emails will self destruct in a period of time that you can edit. You can set it to be viewed one time only for a number of seconds, a number of times or a number of days. The email message will contain a link to the secured message online.
  • Hide My Ass! - An anonymous proxy which hides your IP address and bypasses web filters.

Anonymity & Privacy > Disposable email addresses

Disposable email addresses can be used to spare your real email address from spammers, when signing up for newsletters, forums and when you want to keep your identity private.

  • TempInbox - Pick any @tempinbox.com address you would like to use. For example: test@tempinbox.com. You can also add RSS feeds from a custom email address you choose. View email for example from test@testinbox.com and click on the xml file at the top. Copy the url, go in Firefox to Bookmarks > Manage Bookmarks > File > New Live Bookmark and paste the url in the field “feed location”. Now you can track all the messages that will be send to test@tempinbox.com.
  • shortMail.net - Pick any @shortmail.net address you would like to use. For example: test@shortmail.net. Forwarding mail is also possible. You can for example forward mail from test@shortmail.net to your own specified email address and tell it when to expire.
  • Wuzupmail - Pick any @wuzup.net address you would like to use. For example: test@wuzup.net

Software > Security /Anti-virus / Anti-spyware / Anti-rootkit

Software > General

  • PC Decrapifier - Removes all the crap that comes by installed by default on a new computer or laptop.
  • JW MP3 Player - Supports a wide range of flashvars (settings) for tweaking both behavior and appearance and an extensive, documented javascript/actionscript API.
  • Unlocker - Unlocker deletes files/directories that can’t be deleted because they’re locked.
  • CrossLoop - Simple secure screen sharing.
  • Sandboxie - Applications which are run and installed in Sandboxie are in a secured environment. Nothing is installed or copied to your hard drive. Great for testing and installing unknown applications or for secure browsing.
  • SourceForge - The world’s largest open source software development website
  • PC Repair System (USB) - File recovery, anti-virus, anti-spyware, system info & system maintenance
  • Easy Flash Drive Data Recovery with PhotoRec
  • PortableApps.com - Portable software for USB drives
  • FileZilla - Fast and reliable FTP client
  • uTorrent - Fast and small bitTorrent client (170 kB)
  • Standalone versions of Internet Explorer
  • 7-Zip - The alternative for WinZip and WinRAR.
  • Putty - A client for SSH, Telnet and Rlogin protocols.
  • PDFCreator - Create PDFs from any application
  • InfraRecorder - A versatile open source burner application.
  • Software > Viewers

    • Jeroen Wijering’ Flash Video Player - Embed Flash video in your website with this comprehensive player
    • Zoomifyer EZ - Makes high-quality images zoom-and-pan for fast, interactive viewing
    • AirTight SimpleViewer - Customizable Flash gallery. No programming or database is required.
    • XnView - Very customizable, quick and user friendly image viewer. Choose the minimal version for speed benefits. Opens over 300 file formats. A cool feature is the possibility to use Adobe Plugins. To view PDF, install AFPL Ghostscript.

    Software > Editors

    • Aptana - Cross-platform, JavaScript-focused development environment for building Ajax applications
    • InType - A fast extensible and customizable code editor
    • PSPad - Another editor

    Software > Emulators

    • Daemon Tools - Mounts images as virtual drives (CD/DVD).
    • VMPlayer - Run any virtual machine on a Windows or Linux PC

    Miscellaneous

  • Cheat Sheet Round-Up - The most comprehensive list of cheat sheets that every web designer and developer needs.
  • Google Guide - Interactive online Google tutorial and referencese for Novices and Experts.
  • Free Online Graph Paper/Grid Paper PDFs - Generate paper as a PDF with a large variety of configurations: story boards, dots, squares, lines and more.

Firefox Security & Privacy Extensions

Monday, March 19th, 2007

KeyScrambler Personal

Encrypts your keystrokes at the kernel driver level to protect your login information from keyloggers. While installing you also have the option to install this plugin voor Internet Explorer. Once you have it running it’s difficult to see if it’s working or if it’s not working. For that you need to install one or several keyloggers. Luckily that has already been done: Protecting your login information with KeyScramble. The article shows KeyScrambler being tested against 3 keyloggers with sucess.

Dr.Web anti-virus link checker

Check any file you are about to download with the online version of Dr.Web anti-virus. Right click on a link and choose “Scan with Dr.Web”.

You can test the Dr.Web extension by opening an anti-virus or anti-malware testfile from eicar with Dr.Web.

McAfee SiteAdvisor

Warns you before you interact with a dangerous Web site. You can see this if you view the search results of a search engine. Next to each result you can see a green, yellow or red icon. Every site you visit is automatically tested for which you can view detailed reports and optional user comments.

Test this extension and visit the sites below that are marked as dangerous. Don’t forget to view the details from McAfee SiteAdvisor. Don’t view these sites with Internet Explorer unless you’re using Sandboxie! You can also test these sites with Exploit Prevention Labs.

BugMeNot

Bypass registration. Right click in a login field and choose “Login with BugMeNot”. Also have a look at Bugmenot.com

Stealther

Leaves little to no traces in your local computer by disabling:

  • Browsing History (also in Address bar)
  • Cookies
  • Downloaded Files History
  • Disk Cache
  • Saved Form Information
  • Sending of ReferrerHeader

Activate or deactivate it in the menu: Tools > Stealther.

Firefox Extensions for Web Developers and Web Designers

Thursday, July 6th, 2006

If your not familiar with testing and debugging with Firefox then read this article: Using Mozilla in testing and debugging web sites.

FireBug

FireBug takes debugging to the next level. It features a debugger, error console, command line and a variety of fun inspectors like logging (no need to use a javascript alert and logg all Ajax request traffic) and live editing (parts of the DOM can be edited). View a screencast and an article demonstrating how to use FireBug. Visit the homepage of FireBug for documentation.

Web Developer

Contains many powerful and various web developer and design tools. A few tools are Edit HTML (realtime editing a web page), Edit CSS (realtime editing style sheets), Outlining (outlining custom elements), Display Ruler (measuring pixels on a web page / also check MeasureIt) and Element Information (comprehensive information when hovering on elements). View the documentation page for all the features.

Internet Explorer Developer Toolbar

Various web developer tools for Internet Explorer.

FireFTP

A FTP client which provides easy access to FTP servers. FireFTP opens in a new tab in Firefox and resumes broken
downloads.

View Source Chart

View Source Chart clearly defines nested containers. It is an intuitive and easy way to identify structure and hierarchy. It even
shows the complete source code of a javascript generated page. You can also achieve this with Firebug:

  • Open up the javascript generated page
  • Enable Firebug
  • Click on the HTML tab
  • Click on Inspect and click the part that you would like to see the source code of

Aardvark

When Aardvark is active, move your mouse over the current page and you will see a red rectangle framing each element under the mouse cursor. Now you can adjust the framed element interactively in a number of ways with keystrokes. For example you can remove, isolate, undo, view the source and more. The extension is also available as a bookmarklet in Internet Explorer and Safari. View and try a demo on the website.

Greasemonkey

Greasemonkey is a Firefox extension which allows you to customize the a web page displays using JavaScript. It lets you easily
take control of any aspect of a web page’s design or interaction. View a list of Greasemonkey examples and a repository at userscripts.org wich contains over 900,000 Greasemonkey scripts. It you want to write your own Greasemonkey scripts, read the online book Dive Into
Greasemonkey
.

Codetch

A WYSIWYG editor with features like advanced search and replace, sidebar file list, launch previews of your document in
other browsers, open multiple files with tabbed editing.

X-Ray

View HTML tags on a page without viewing the source code.

IEView

Allows the current page or a selected link to be opened in Internet Explorer.

IE Tab

Open pages in Internet Explorer in tabs of Mozilla Firefox.

Selenium IDE

Selenium is a test tool for web applications which runs directly in a browser. Selenium IDE is a Firefox extension and allows you to record, edit, and debug tests. Selenium IDE is a complete IDE (Integrated Development Environment) and contains the entire Selenium Core. To get started here is a good introduction article followed by a tutorial which also includes a screencast.

Tamper Data

A handy tool for debugging and security testing of web applications. Tamper Data  is based upon LiveHTTPHeaders and lets you amongst other things view and modify HTTP/HTTPS headers and post parameters. In addition Tamper Data uses a more user friendly data presentation than LiveHTTPHeaders.

Link Checker

Check all links on a web page. After checking, each link gets a color wich explains the status of a link.

ColorZilla

Get a color reading from any point in your browser and easily copy the RGB or HEX values. With this extension you won’t have to start Photoshop to read colors from a picture or website (after a print screen). You can easily adjust the selected colors with the advanced color picker wich looks like the color picker from Photoshop.

HTML Email Guide

Thursday, June 29th, 2006

This HTML Email Guide contains tips and tools on how to create compatible HTML email which will display correctly on most webmail and email clients.

HTML email or HTML newsletters have advantages and disadvantages. But your clients (recipients) decide if you will send them a HTML email or a plain text email. For example if they specifically sign up for a HTML newsletter.

The following have been tested on Windows:

  • Webmail - Hotmail, Windows Live Hotmail, Gmail, Yahoo! Mail, Lycos Mail
  • Email clients - Outlook 2003, Thunderbird 1.5
  • Browsers - Internet Explorer 6 and 7, Mozilla Firefox 2

Testing for Mac will be added soon (Apple Mail, Entourage, Hotmail, Gmail, Yahoo! Mail, Lycos Mail, Firefox, Safari).

It’s recommended to have a look at the Email Standards Project who strive for standards support in email clients. You can find extensive and thorough tests for popular email clients.

Translations

Software for creating HTML email

There are a lot of editors available you can use. Here are a few tools you can use to create HTML email and websites:

  • Codetch (WYSIWYG editor / free / Firefox extension)
  • PSPad (universal editor, alternative for UltraEdit / free)
  • Intype (source code editor / free)
  • NVU (open source WYSIWYG editor / free)
  • Macromedia Dreamweaver (WYSIWYG editor / not free)

To upload your files you can use FireFTP (Firefox extension) and/or FileZilla.

Don’t use Microsoft Word to create HTML pages or HTML email

The reason is Word will write a whole lot of garbage when you create HTML pages with it. For example, I created a HTML page in Word and only put this line of text in it: “Don’t use Word to create HTML files”. Then I saved it as a HTML file. Show/Hide the HTML that Word 2003 created.

Other versions of Microsoft Word also create garbage. But all you need is:

<p>Don't use Microsoft Word to create HTML files</p>

Don’t copy/paste from Microsoft Word

Microsoft Word uses a different kind of formatting of the text than for example Notepad, Notepad++, PSPad and Dreamweaver. These programs all work in text mode without formatting.

Software for sending HTML email

Zookoda

Zookoda enables you to:

  • Manage email newsletter subscribers.
  • Create custom newsletter subscription forms.
  • Schedule recurring broadcasts for each day, week or month.
  • View real-time open, bounce, click and unsubscribe reports.
  • Access mobile users by emailing content in text format.

Just register for free and get started. You can find a step by step tutorial (flash) which guides you to create and send a HTML newsletter. Unfortunately the tutorial goes very fast and there are no controls.

As part of Zookoda’s anti-spam commitment, to comply with the CAN SPAM Acts of 2003/2004, all new members are restricted from sending emails until each account’s details are manually verified. Once your logged in, go to Account > Sender Details > New Sender. Here you can fill in your address information. You can also view here if your email address and address information are verified. If it’s rejected, you will receive an email. For more information, have a look at Zookoda Verifications.

poMMo

poMMo is a versatile mass mailing application for Linux which is written in PHP. I haven’t tested it out yet, but it looks very promising. Have a look at the poMMo screenshots (Flickr slideshow).

PHPlist

PHPlist is an open source newsletter manager. It is highly configurable and offers a lot of features such as click-tracking, templates, subscribe/unsubscribe, user management, advanced bounce handling, scheduling, throttling and a lot more.

No knowledge of PHP is required to install PHPlist. The most important thing is to configure config.php.

Dada Mail - Mailing List Manager

Dada Mail is very customizable, easy to use and contains a lot of features like unlimited number of mailing lists, templates, archives including search engine, control panel for each mailing list and administration. Dadamail can be given extra functionality by using extensions such as the Mystery Girl - Bounce Handler. No knowledge of Perl/CGI is required to install DadaMail. Some extensions require knowledge of using Linux.

MailList Controller

Arclab Maillist Controller manages email lists and sends out (personalized) bulk email in html, plain text or html and plain text. Contains a WYSIWYG editor, customizable returned mail detection and a comprehensive control panel. This is a free application for which you can use one mailinglist only and a maximum up to 100 recipients.

Thunderbird

Mozilla Thunderbird is an email application which is able to send messages as plain text, HTML email and a combination of HTML email and plain text. Create a new message, click in the body field and choose Insert > HTML…

PHPMailer

PHPMailer is a full featured email application for PHP.

  • HTML email
  • Embedded image support
  • Multipart/alternative emails for mail clients that do not read HTML email
  • Can send emails with multiple TOs, CCs, BCCs and REPLY-TOs
  • Works on any platform
  • Go to the website of PHPMailer for more features

Get several webmail accounts for testing

Testing, testing and testing. Before sending out your HTML email, you have to make sure it looks good on several webmail clients. Get yourself several webmail accounts:

Besides webmail accounts you also need to have email clients to test your HTML email:

  • Mozilla Thunderbird (PC, Mac)
  • Microsoft Outlook 2003, 2007 (PC)
  • Entourage (Mac)
  • Apple Mail (Mac)

Create an effective layout

The layout of the HTML email and the writing style are very important. You want people to read your newsletter, not to scan it. You want to draw their attention to headlines, etc. EyeTrackIII deals with online news consumer behavior in the age of multimedia. On their website you can find an incredible load of information about Article page design, Writing style, Eyetracking, how to create hot spots and many many more.

Remove unnecessary HTML tags

The following HTML tags should be removed from your HTML email, because several webmail applications and email clients are removing or ignoring these tags.

  • DOCTYPE
  • HTML tag <HTML></HTML>
  • BODY tag <BODY></BODY>
  • All Meta tags <META>
  • Head tag <HEAD></HEAD>
  • Base tag <BASE>
  • Link tag <LINK>
  • Script tag <SCRIPT></SCRIPT>
  • Title tag <TITLE></TITLE>
  • Applet tag <APPLET></APPLET>
  • Frameset tag <FRAMESET></FRAMESET>
  • Frame tag <FRAME>
  • IFrame tag <IFRAME></IFRAME>
  • Comments <!-- comments -->

Use tables for layout

Because of the very limited support of style sheets in webmail clients, the best and safe way to layout your HTML email is to use tables.

Put all images online

In your HTML email you can use embedded images or remote images.

Embedded images are attached with the email itself and are shown immediately.

Remote images are images which are located on a remote website, but are not displayed at first. In today’s webmail and email clients you have to click on a link to display the remote images. If the email address of the sender is in the address book of the recipient, then the images in the HTML email will be shown.

Images from an unknown sender aren’t displayed at first because they are considered unsafe because of several security issues (e.g. spammers can validate your email address, hijack your email account, etc.). The HTML email should be as small as possible in size (KB’s). Using remote images results in very few KB’s and therefore less bandwidth when sending it.

Hide the image toolbar

If you put your mouse over an image in Internet Explorer, the image toolbar appears. This only occurs if your image is larger than 200 x 200 pixels and when it’s not a background image.

Most people find the image toolbar annoying, but it also distracts the reader from your content. To hide the image toolbar for an image, use the galleryimg attribute in the <IMG> tag:

<img src="cd.gif" width="20" height="30" galleryimg="no" alt="CD of group X" title="Order this CD">

Use absolute urls

Use absolute urls for all your images and links, for example:

<img src="http://www.example.com/images/head.gif" width="20" height="60">
<a href="http://www.example.com/products/shoes/tiger.html">Tiger</a>

Use short urls

When using long urls you risk getting broken links or broken images. Your email program or the email program of your recipient could wrap the long URL along several lines. This can cause part of the url to be clickable instead of the whole url:

http://www.example.com/very_long_name/5r6t/2003fd544/3553ag
dkgj3d/a453b96/g5?a=36hd27hdh48f27dh

Webmail clients can also add a space (%20) when a url is too long:

<img src="http://www.example.com/mailings/2005/april/17/header_top_disc%20ount.jpg" width="230" height="45" title="Discount at ...">

To avoid this use short urls:

<img src="http://www.example.com/2004/11/images/1.jpg" width="10" height="60">
<a href="http://www.example.com/2004/11/index.html">Go to discounts</a>

This code can be rewritten to:

<img src="http://www.example.com/2004/11/1.jpg" width="10" height="60">
<a href="http://www.example.com/2004/11/">Go to discounts</a>

Keep the following in mind when you want to use a short url:

  • Don’t use an images directory. Place the images in the same directory as the index.html (newsletter); /images/1.jpg becomes /1.jpg
  • Use numbers as names for pictures; header_cd.jpg becomes 1.jpg.
  • Rename spacer.gif to s.gif
  • If you use a link in your newsletter to refer to an online version of your newsletter, then you will mostlikely use a tracking variable in the url. For example: http://www.example.com/2004/11/index.html?trck=nov1104.
    You can rewrite this to for example http://www.example.com/2004/11/?trck=nov1104

Snipurl can also help by shortening your url. Just enter a url and Snipurl will shorten it by given you a new url that will never expire. There are
several services like this (tinyurl and Make A Shorter Link), but Snipurl can do a lot more. Take a look at what you can do with Snipurl.

Use simple inline style sheets

Use simple style sheets, that means not to use absolute or relative positioning. This is bad supported by most webmail. Don’t use external or embedded style sheets, because email programs are removing or ignoring everything between the <HEAD></HEAD>. That means the <LINK> tag won’t work if you want to define external style sheets.

Use inline stylesheets for fonts, font colors, links, background colors, etc. For example:

<table width="400" cellspacing="0" cellpadding="0">
<tr>
<td style=”font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; line-height: 150%; color: red”>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
<p>Vivamus ut sem. Fusce aliquam nunc vitae purus.</p>
</td>
<td style=”font-family: Verdana, Helvetica, sans-serif; font-size: 10px; text-transform: uppercase; color: black”>
Vivamus ut sem. Fusce aliquam nunc vitae purus.</td>
</tr>
</table>

Create your design with a white background color

Most webmail and email clients use a white background color to display messages. Often webmail clients ignore or remove the <BODY> tag, which is why background colors often don’t work.

When you do use a diferent background color than white you could mess up your design. This could for example happen if you create your design for a red background. Images may have a red background. When viewed in a webmail client, you mostlikely will see a white background and images with a red background that doesn’t seamlessly integrate with the background color.

The best thing to do is to create your design with a white background color. If you must use a different background color than white, you can use a table with a 100% width and perhaps 100% height to simulate the background color:

<table width="100%" height="100%">
<tr>
<td bgcolor=”#FF0000″>
<table width=”400″ align=”center”>
<tr>
<td>Lorem ipsum dolor sit amet consectetuer</td>
</tr>
</table>
</td>
</tr>
</table>

Unless you know for sure your target audience is using an email client such as Outlook or Thunderbird, a background color can be used without problems. For example if your sending HTML email to employers within a company who all use the same email client.

Avoid background images defined on the body

As already mentioned webmail clients often ignore or remove the <BODY> tag, which is why background images often don’t work.

Unless you know for sure your target audience is using an email client such as Outlook or Thunderbird, a background image can be used without problems. For example if your sending HTML email to employers within a company who all use the same email client.

All text and links must have a style

You have to specify the font, font color and the font size for all the text and links in every table cell
(create your design with tables). If you don’t specify a style, then most webmail clients will use their own style sheets. This could result in displaying different fonts, font colors and sizes and could also mess up your design.

Hotmail and Yahoo display Arial as the default font if you don’t specify a font. Gmail uses Verdana. Hotmail uses a 11px
as the default font size, Yahoo uses 12px and Gmail uses 16px.

Below is an example. This is the minimum of style sheets required to style text and links.

<table width="400" cellspacing="0" cellpadding="0">
<tr>
<td style=”font-family: Verdana, sans-serif; font-size: 11px; color: black”>
<p><a href=”http://www.website.com/030205/” style=”font-family: Verdana, font-size: 11px; color: blue”>Lorem</a>
ipsum dolor sit amet, consectetuer adipiscing elit.</p></td>
<td style=”font-family: Verdana, sans-serif; font-size: 10px; color: black”>Vivamus ut sem. Fusce aliquam nunc vitae purus.</td>
</tr>
</table>

I always use text-decoration: underline to make it clear to
the reader that it’s a link:

<a href="http://www.website.com/030205/" style="font-family: Verdana, font-size: 11px; color: blue; text-decoration: underline">Lorem</a>

Email addresses and URLs as text

In most cases when using an email address or an URL as text it will be given a default style. For example:

Send all your questions to contact@example.com
Go to http://www.example.com for more information
Go to www.example.com for more information
Go to sub.example.com for more information

Gmail and Yahoo give all the above text a default style even though they aren’t links. Hotmail and Windows Live Hotmail don’t give default styles to URLs without http://.

Use the title and alt attribute

Use the alt attribute to describe your images except spacers. The alt text is displayed when images aren’t being displayed. Image aren’t displayed by default by most webmail and email clients.

The title attribute can be just for almost any element (links, images, tables, etc.). Use the title attribute if you want to display a tooltip to describe the element. It is recommended to use it for links and images. For example:

<img src="cd.jpg" width="170" height="230" alt="Kool Keith CD - black elvis" title="The new Kool Keith CD>
<a href=”http://www.website.com/order.php?id=23″ title=”Order the new Kool Keith CD”>Order CD</a>

Move your mouse over this link to view a tooltip.

Use <BR> instead of <P>

The <P> tag in Internet Explorer uses more space (margin-top and margin-bottom) than in Gecko-based browsers. This could lead to layout problems.

For example, if you’re using a table width a fixed width and height and your design is based upon these dimensions. If you have content in the table within <P> tags, than the height of the table could increase in Internet Explorer which could lead to gaps in your design.

To prevent layout problems use the <BR> tag instead of the <P> tag as it renders the same in all browsers. If you still have troubles with the layout you can also use spacers instead of the <P> and the <BR> tag.

Another problem with <P> tags is in Windows Live Hotmail. <P> tags are removed. So the safest way is to use the <BR> tag.

Use spacers

Use 1×1 transparent images (spacers) to force tables to display the correct width and height. For example:

<table width="200">
<tr>
<td width=”50″>&nbsp;</td>
<td width=”150″>Lorem ipsum dolor sit amet adipiscing.</td>
</tr>
</table>

The table cell with a width of 50 pixels only has a space as content. This doesn’t mean the specified width will be displayed correctly. If the width of the first table cell isn’t displayed
correctly, than this is mostlikey also the case width the second table cell.

You have to force the width to be displayed correctly:

<table width="200">
<tr>
<td><img src=”http://www.yourwebsite.com/images/spacer.gif” width=”50″ height=”1″></td>
<td><img src=”http://www.yourwebsite.com/images/spacer.gif” width=”150″ height=”1″></td>
</tr>
<tr>
<td>&nbsp;</td>
<td>Lorem ipsum dolor sit amet adipiscing.</td>
</tr>
</table>

Choosing a maximum width

Choosing a width mostly applies to webmail clients. When you double click on an email in Outlook or Thunderbird, you can almost view it full screen.

With a resolution at 1024×768 you can use a maximum width of 750px. But you can also use a higher width. If you use a higher width (for example 800px) at 1024×768 a horizontal scrollbar could appear in your webmail client. But this doesn’t have to be a problem, because all of your content is still visible. Perhaps you have to scroll a little in horizontal direction.

With a resolution at 800×600 you can use a maximum width of 580px. But again, you can also use a higher width which could show a horizontal scrollbar. If you open your Hotmail account at 800×600 a horizontal scrollbar will appear no matter wich width you use. I guess
this is because of the ad banner (sky scraper, 160×600px) on the right and the large banner (super banner, 728×90) at the top.

Le cool magazine demonstrates this with an horizontal design of their weekly newsletter.

Don’t use forms

Hotmail ignores forms in HTML email to ensure that messages do not contain malicious scripts. Other webmail services (Gmail and Yahoo) and email clients support the use of forms.

If you intend on sending HTML emails with a form and amongst your recipients are also people with a Hotmail email address, than I would recommend not using a form. Instead use a link to refer to a form on a HTML page.

Don’t use JavaScript

JavaScript in HTML email is never a good idea because of all the dangerous scripting (for example XSS attacks) that can be executed. For this reason most webmail and email clients disable JavaScript by removing or ignoring it.

For example, this code:

<a href="javascript://" onclick="window.open('http://www.website.com/cd.html','','width=500,height=400')">View tracklisting</a>

would be rewritten to:

<a href="#">View tracklisting</a>

The solution is to refer to the tracklisting without JavaScript.

<a href="http://www.yourwebsite.com/discount/cd.html">View tracklisting</a>

Provide an unsubscribe link

At the bottom of every HTML email you should provide an unsubscribe link. After clicking on this link (mailto:) the recipient only has to press on the send button to remove their email address from a list, for example:

mailto:unsubscribe@domain.com?subject=unsubscribe

You can also let people unsubscribe from your website. But doing so gives people the possibility to unsubscribe other people. If you only provide this functionality from your HTML email, then you have less chance that unsubscribing will be misused.

Provide a link for an online version

Although you test your HTML email with different webmail and email clients, you never can be sure how it will display in your recipients email program. In case it doens’t display correctly provide a link at the top of every HTML email to view your HTML email in the browser for an online version, for example:

if this email doesn't display correctly, view the online version

The example link used here is http://www.example.com/mailings/2005/01/. Use structured directories, so you can archive all your HTML emails easily.

Use the <TITLE> tag in the online version. If you omit the tag in the online version, Internet Explorer will show the url as the title.

Provide extra functionality for the online version

The HTML email is put online so that the online version can be viewed when it doesn’t display correctly in webmail or an email clients. But you can also change your design and put the content online. You then have for example a design with a graphic and text link. The text link is in case the images won’t load. When the link is clicked the viewer will end up in the online version.

Now you have different possibilities. You can use hover (mouseover) for all the links, (streaming) video/audio, you can use advanced CSS to easily create complex designs and afcourse scripting (PHP, JavaScript, AJAX, etc.) and database access.

This way you don’t have the limitations of HTML email in webmail and email clients but the unlimited possibilities of HTML email in the browser.

Test your design in multiple browsers

Check the statistics for your website so you can see which browsers are the most popular among your visitors. If you want to test your design in multiple browsers on a Windows machine then you have several options.

Standalone browsers

The easiest options are to use standalone browsers like Mozilla Firefox and Opera. With Firefox you can easily test simultaneously in Internet Explorer 6 or 7 with the Firefox extensions IE Tab and IEView. Here is a huge list of browsers you can download at the Browser archive.

Standalone versions of Internet Explorer

With Windows XP as the most popular operating system, so is Internet Explorer 6 and 7. The problem is if you want to use older versions of Internet Explorer (4.0 and 5.0) then you also have to install the older Windows versions. Luckily there is a workaround for this, standalone versions of Internet Explorer.

Mac browsers

Most people don’t have a Mac to test their design on. You can use the Safari Compatibility Test. Just enter a url and the Safaritest will return a screenshot of your page as viewed with Safari.

Linux browsers

Testing your design in a Linux browser can be done with a Linux LiveCD. A Linux LiveCD is Linux installed on a bootable CD-ROM or DVD-ROM. When booting from a Linux LiveCD you can start applications, create documents, etc. without anything being written or saved to the hard disk.

The most popular LiveCDs are Ubuntu and Knoppix. Download the LiveCD (ISO), burn it on a CD-ROM (with Infrarecorder), put it in your CD/DVD player and reboot. Here is a list of available Linux LiveCDs.

Avoid your HTML Email being marked as spam

A substantial part of your subscribers are probably still using Hotmail or Windows Live Mail. To get your newsletter arrive in the inbox of your Hotmail/Windows Live Mail subscribers is still the hardest thing to accomplish. Read this document from Microsoft titled “Improving E-mail Deliverability into Windows Live Hotmail” (26 pages, 1,02 MB).

Don’t use DHTML

Dynamic HTML uses a combination of Javascript, HTML and CSS. It is not recommended to use DHTML because JavaScript is disabled by most webmail clients and email clients.

Don’t use Flash

When you try to use Flash in your HTML email the HTML code gets removed or ignored by webmail and email clients.

The best thing to do is to put your Flash movie online. Then in your HTML email create an attractive clickable image that refers to the Flash movie online. Also put above or under the clickable image a text link with text from the image. Because images are not displayed by
default, the recipient will see the text first. Unless your address is in the address book of the recipient.

Use HTML Email Validator

Use the HTML Email Validator to see if your HTML is compatible for HTML email. Just copy and paste your HTML into the validator and it will report if there are any errors. Each error will refer to a section in
this article that will explain the error.

Use HTML Tidy Online

Use HTML Tidy Online to clean up your HTML code. This decreases the incorrect display of your HTML email. Click on the advanced
link
on the right to use advanced HTML Tidy options. View a quick reference of the configuration options.

Now you can choose your settings to optimize your HTML email code. Unfortunately there isn’t an option to save your settings. You have to manually set them each time you visit HTML Tidy Online.

HTML Tidy Settings

You can download a extension that automatically loads settings to optimize HTML email at HTML Tidy Online. This extension was created with Greasemonkey compiler. Install HTML Tidy Settings

GreaseMonkey user script

You could also use a GreaseMonkey user script. I have written a GreaseMonkey user script that will automatically load settings to optimize HTML email at HTML Tidy Online. Greasemonkey is a Firefox extension that allows you to write scripts that alter the web pages you
visit. To load the HTML Tidy settings first install GreaseMonkey. View this page for instructions. After you’ve installed GreaseMonkey you can install the user script that loads the HTML Tidy settings.

  1. Click on this link to view the user script in Firefox
  2. Go to Tools > Install User Script …
  3. A dialog will pop up with the name of the script
  4. Click OK to install the user script
  5. Go to HTML Tidy Online and the settings will be automatically loaded

Count the number of clicks in your HTML email with tracking

Usually an url will be opened when recipients click on a link in your HTML email. When a HTML page (or an image, js file, css file, etc.) on your website is requested, information about this request will be logged in a logfile called Access_log.

Statistic programs use your Acces_log to show information about visitors of your website. An typical line in the Access_log looks like the following:

63.203.109.38 - - [02/Sep/2003:09:51:09 -0700] "GET /custer HTTP/1.1"
301 248 “http://search.msn.com/results.asp?RS=CHECKED&FORM=MSNH&
v=1&q=%22little+big+Horn%22″ “Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.0)”

You can use the Acces_log to determine how many times there has been clicked on a specific link in a specific HTML email. This can be done with variables. If you have the following link in your HTML email that refers to a page with products:

http://www.example.com/products/shoes/page.html

You can add variables to this url. The first variable is separated with a ?-character. If you want to add variables then you need a variable name and a value. I’m going to add a variable name track with the value shoes20050411 (you can use whatever name and value you prefer):

http://www.example.com/products/shoes/page.html?track=shoes20050411

If you have shell access (command line) and access to the Access_log, then you can count for example how many times there has been clicked on the above link. You can do this with Linux commands like grep, sort, uniq, etc. If you wanted to track more variables, then you use the &-character:

http://www.example.com/products/shoes/page.html?track=shoes20050411&color=blue

Another useful function is to track how many recipients clicked on the link to display the HTML email in the browser. Which means it didn’t display correctly in their webmail client or email
program. Then you can measure how many people didn’t see it correctly:

http://www.example.com/mailings/2005/01/index.html?track=online200501

It doesn’t matter what variable name or value you use. Just as long as you know what it stands for.

Remove duplicated email addresses

You can find it here.

Send HTML email with PHPMailer

  1. Go to the website of PHPMailer and download the latest version.
  2. Unpack PHPMailer and upload it to your website.
  3. Copy and paste the following code in a php file (e.g. test.php) and upload it to your website:
    <?php
    require(”class.phpmailer.php”);
    $mail = new PHPMailer();
    $mail->From = “namesender@name.com”;
    $mail->FromName = “Firstname Lastname”;
    $mail->AddBCC(’namerecipient1@name.com’, ‘John Doe1′);
    $mail->AddBCC(’namerecipient2@name.com’, ‘John Doe2′);
    $mail->AddBCC(’namerecipient3@name.com’, ‘John Doe3′);
    $mail->WordWrap = 50;
    $mail->IsHTML(true);
    $mail->Subject = “Here is the subject”;
    $mail->Body = “<<<HTMLCODE
    <p>Copy and paste your <b>HTML code</b> here</p>
    HTMLCODE;
    
    if(!$mail->Send())
    {
    echo “Message could not be sent. <p>”;
    echo “Mailer Error: ” . $mail->ErrorInfo;
    exit;
    }
    echo “Message has been sent”;
    ?>
  4. Open the php file online, e.g.:http://www.website.com/phpmailer/test.php
  5. You should see “Message has been sent”.

Send your email as multipart/alternative

If you send a HTML email to people with a webmail or email client who can’t read HTML email, they will only see the HTML code. If you don’t know what your recipients use, send your email as multipart/alternative. This is the HTML version and the plain text version.

The email program of the recipient decides which version it will show. If it doesn’t support HTML email, it will show the plain text version. If it does support HTML email, it will show the HTML version.

Send multipart/alternative email with PHPMailer

Follow the same steps as Send HTML email with PHPMailer. The only difference is one line of code. Add the following code after $mail->Body:

$mail->AltBody = "This is the body in plain text for non-HTML mail clients";

Email clients are more flexible

If you know for sure your target audience uses a standalone email program such as Outlook or Thunderbird (or another) than it’s easier to create a HTML email.

You have far less limitations than a webmail client:

  • you can use embedded style sheets (css in the head)
  • you can use forms (not recommended)
  • you can use a background color
  • you can use a background image
  • you can use absolute positioning
  • you can use meta tags

Forwarding HTML email

When people receive a email they like they’ll usually forward it to a friend. So when your HTML formatted email is forwarded it is important that it still looks the same.

Forwarding HTML email works with Gmail, Yahoo, Hotmail, Lycos and SquirrelMail. To make it work you have to forward it as an attachment or just forward the HTML email.

Read More

Firefox Extensions To Optimize Your Productivity

Monday, June 12th, 2006

Also have a look at 20 Firefox Extensions That Will Save You Money which can improve your productivity.

Docufarm

View online documents (pdf, ppt, doc, rtf, ps) directly in Firefox with preservation of formatting. The firefox extension can be installed/downloaded from the homepage of Docufarm.

GTDInbox

Integrates the highly effective methodology of “Gettings Things Done” into Gmail. GTD rests on the principle that a person needs to move tasks out of the mind by recording them somewhere. That way, the mind is freed from the job of remembering everything that needs to be done, and can concentrate on actually performing those tasks [Wikipedia].

Folder4Gmail can arrange your labels as a hierarchy. You need to install Greasemonkey and a Greasemonkey script to get it working.

Check out the Ultimate Getting Things Done Index for more information about GTD.

DownThemAll!

Lets you download all the links or images contained in a webpage and much more: you can refine your downloads by fully customizable criteria to get only what you really want.

CustomizeGoogle

Enhances the Google result pages in various ways. On the top of the page it adds links to other web search sites, Google Suggest, sites can be filtered, commercial adds can be removed and a lot more. Every features is optional. At www.customizegoogle.com you can view an introduction video and a list of all the features.

BugMeNot

Bypass registration. Right click in a login field and choose “Login with BugMeNot”. Also have a look at Bugmenot.com

Linky

It will let you open or download all or selected links, image links and even web addresses found in the text in separate or different tabs or windows.You can access Linky from the context menu when you right click in a web page.

Gmail Space

Uses your Gmail account for remote file storage. You can transfer files with the builtin FTP client between your hard drive and your Gmail account which acts like a FTP host. After you’ve uploaded a file into your Gmail account you will receive an email which contains the attachment(s).

Resizable Form Fields

Resize HTML form fields, including textareas, select boxes, text fields and iframes.

Menu Editor

Rearrange or remove menuitems from the main context menu (right-click menu) and main menubar (File Edit View etc.).

Options Menu

Provides quick access to the options dialogs of installed extensions.

Xinha Here!

A WYSIWYG editor to use in any HTML textarea and text input elements.