Tips and tricks for web developers

Handy tricks and thoughts on web design

This page is just like a bit of a memo for myself, but feel free to help yourself if you see anything useful.

Track you email campaign

So you've got a big mailing list and send out regular emails. But how do you track how many have been opened, and from which email?

Here is an idea: disguise a php script as an image. The mail client will request the image from the server and execute the script which will log the email address, unix timestamp, ip address, referrer and user agent.

what you will need is a website with a mysql database, dummy 1 pixel image and the php script below:

$con = mysql_connect ('localhost', 'user', 'pass');  // database login

  $db_name = 'db name'; // database name

  $table_name = 'statistics'; // table name
if (!$con){die('Could not connect: ' . mysql_error());} // show error if not connected

  $db_selected = @mysql_select_db($db_name, $con); // select the database

  date_default_timezone_set('Europe/London'); // set time base
// create the table

  mysql_query("CREATE TABLE `$db_name`.`$table_name` (`email` TEXT NOT NULL, `timestamp` INT(18), `ip` VARCHAR(20), `referrer` varchar(255), `user_agent` TEXT NOT NULL)",$con);
// put the required data into an array

  $fvlist['email'] = mysql_real_escape_string($_GET['email'],$con);

  $fvlist['timestamp'] = time();

  $fvlist['ip'] = mysql_real_escape_string($_SERVER['REMOTE_ADDR'],$con);

  $fvlist['referrer'] = mysql_real_escape_string($_SERVER['HTTP_REFERER'],$con);

  $fvlist['user_agent'] = mysql_real_escape_string($_SERVER['HTTP_USER_AGENT'],$con);
// add data to the db

  mysql_query("INSERT INTO `$db_name`.`$table_name` (`email`, `timestamp`, `ip`, `referrer`, `user_agent`) VALUES ('".$fvlist['email']."','".$fvlist['timestamp']."','".$fvlist['ip']."','".$fvlist['referrer']."','".$fvlist['user_agent']."') ",$con);
// pretend you are an image

  Header("Content-type: image/jpeg");
//output the image data

  imagejpeg(resizePhoto('pixel.jpg'),null, 80);
function resizePhoto($originalImage){ // this function spits out the contents of your pixel.jpg

  $imageResized = imagecreatetruecolor(1, 1);

  $imageTmp = imagecreatefromjpeg ($originalImage);

  imagecopyresampled($imageResized, $imageTmp, 0, 0, 0, 0, 1, 1, 1, 1); // resize

  return $imageResized;

  }

To get this working, you need to add your database login details at the top of the file. It will create table called "statistics" automatically. Then place the php file and pixel.jpg on the server and link to it from your emails like so:

<img src="http://yourwebsite.com/[email protected]" />

You can also use apache mod_rewrite to get a link like this:

http://yourwebsite.com/email_tracker/[email protected]/pixel.jpg

Just add this rule to the .htaccess

RewriteRule ^email_tracker/([^/]+)/pixel.jpg/?$ /email_tracker.php?email=$1 [L]

Links
Links must always be underlined. If you don’t believe me, then here is what the WWW Consortium website says about underlining links: one, two.

CSS

position:relative; will fix the overflow bug in ie7, ie8

Did you know that if you set margin-top of a child div as a percentage, it will be calculated based on the width of the parent div?

property {#attribute:value;} /* hash sign prior to the attribute will make it render in ie only. Also I think an underscore will make it render in ie6 only */

/* Render styles in opera and safari */
@media screen and (-webkit-min-device-pixel-ratio:0){ /* safari & opera */
                /*css as usual...*/
display */
}

body:first-of-type #crop {properties} /* safari only, pre-css3 */

opacity:.85;filter:alpha(opacity=85) /* .0-1, 0-100 (makes objects transparent)*/

Thoughts on CSS3
W3C are making excellent effort to develop this new standard, but at the moment, CSS3 is more of a gimmick for web designers and should be avoided in websites aimed at general public.
Currently CSS3 properties inconsistently behave in different browsers. This makes the website impossible to use in browsers that offer partial or no support of CSS3 properties. As an example I’ve been asked to fix a website which had some webkit css properties used on the menu, which of course did not work in IE and instead rendered a gap between menu items causing the mouse-out event on the menu; subsequently hiding it when the visitor tried to move the mouse over the dropdown.

However there already are some brilliant CSS3 tricks like Google web fonts which have predictable behavior in older browsers (font-family:"New Font“, “Fall-back font”;)

Colour profiles and images on the web
Every web designer will come across the problem when the colour in an image will look slightly different to that very same colour assigned using CSS.

Here is an example of the email sent by Hotfrog that has this problem: Hotfrog email colour mismatch

To understand the problem, one needs to recognise that html pages don’t have embedded colour profiles, while images generally do (sRGB profile is embedded by default in the Shotoshop “Save for web” function). The difference occurs when the image colour profile is different from the operating system’s default profile that is used to render non colour-managed graphics.

When you open up the images used in the email, you will see that there is an sRGB profile embedded:
photoshop profile mismatch warning

To avoid this problem, one needs to disable colour management when working with web graphics, and if using save for web, make sure to untick the “Convert to sRGB” setting.
Untick sRGB

TOOLS

mailer.ilyatitov.com — create html emails with embedded images.

Google web fonts — free cross-browser web fonts

Google analytics

Google webmaster tools

denwer.ru/denwer.net — local web server

artlebedev.ru/tools/typograf/ — tool for html formatting

Firefox+Firebug are indispensable tools in web design especially if you have to work a lot with someone-else’s programming