Handy tricks and thoughts on web designThis 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 if (!$con){die('Could not connect: ' . mysql_error());} // show error if not connected // create the table // put the required data into an array // add data to the db // pretend you are an image //output the image data function resizePhoto($originalImage){ // this function spits out the contents of your pixel.jpg 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]
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: 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: 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. |
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 |