The first step in the design process of any website is to mockup the design in Photoshop. One of the most frustrating parts of the design process can be converting your mockup into image slices whose colors mix well with native CSS styles. Mark Edwards, over at Bjango, has a great writeup on color profile management and UI design. The basic tenants are: don’t color manage, use native monitor color profile, use RGB, and do not attach color profiles to JPG or PNG images.
However, in my senario, I often work with graphics that have been designed by people who work in print and don’t understand web image generation in the slightest. Often I’ll receive unoptimized PNGs, JPGs in CMYK, images with color profiles, etc. This can cause image display issues in IE, color shifting, and generally hurt the performance of a website.
In order to help myself optimize images for the web I created a small tool with an associated BASH script to convert CYMK images to RGB, strip color profiles, and optimize image file size.
This tool arose from noticing that Preview.app seems to optimize file size pretty well for PNG and JPEG. I tried to mimick the Preview.app export and while looking through the NSImage APIs noticed you could pretty easily strip color profiles and convert CMYK to RGB.
I’ve been throwing a decent amount of code on GitHub + Gist recently; I wanted to highlight a couple of the projects that the community might find useful.
eBay PHP Framework Wrapper
There isn’t a ton of documentation or examples around the eBay PHP Accelerator toolkit. Actually, I think it has been a couple years since the framework itself has been updated. I’ve put together a small eBay PHP library with some generic posting and searching wrapper functions. The code was pulled out of an active project and still has some references to the context in which it was situated, but it should provide a good starting point to anyone looking to work with the eBay PHP framework. In additional to providing some wrapper functions, it also has some fixes to the underlying eBat NS framework.
NetSuite PHP Framework Wrapper
Similar to the eBay wrapper library, I’ve made a wrapper around the PHP NetSuite framework. Although the library is structured as a Kohana 2 library, it would be fairly easily to rearrange the library for use in another PHP framework or as a standalone library. The wrapper provides some useful information about working with custom record types (reading + writing) and some wrappers around some trickier NetSuite functionality. The library also provides fixes to the underlying netsuite PHP framework . If you have been having trouble with the NetSuite framework throwing errors when returning a valid SOAP response, take a look through the commit log and pull out the patches.
Tumblr + Kohana
If you are looking to integrate a Tumblr blog with a custom design take a look the phumblr library which provides an easy way to integrate Tumblr via a PHP interface.
I’ve had to do quite a bit of email newsletter design recently and I’ve become very familiar with premailer, an awesome open source email preprocessing library that makes developing emails a little more sane.
My workflow is a bit different than what premailer expects out of the box, and there are a couple of improvements that I wanted to add to the project. I’ve forked the project, merged in some other users’ improvements, and made a couple customizations:
- In plain text mode, links and the parentheses surrounded the links, will not be broken up onto separate lines
- Images will be replaced by their alt text
- Instead of using the remote CSS file <link />ed in the HTML when using –base-path premailer will search for the local CSS file based on the path of the input file and use that if available. This is helpful when you have a local CSS file that you want to use to ‘compile’ the email newsletter HTML but have a different CSS file on the server that you want to use to display the email on your website.
- Unmergable styles will be written into the body (makes a little easier for copying output into iContact and other ESPs)
- The MailChimp reset styles will be preserved
Just an FYI for anyone looking for similar modifications to the default premailer.
Another day, another Internet Explorer bug. I was using MooTool’s Request.HTML to load some AJAX content to display within an inline popup and IE kept throwing the classic “Object doesn’t support this property or method” error. The error was occurring inside document.id (i.e. the dollar function) which made the issue even stranger. Looking at the dollar function’s source code, it seems as though methods are copied from Element.prototype to the element being retrieved.
The AJAX content I was loading contained a form which had a form element with ID “position”. When the Request.HTML receives html content it retrieves a list of all elements contained with the AJAX response using getElements(“*”). This caused the document.id method to be called with the form element of ID “position” contained within the HTML response as its argument, which caused the following assignment to be made:
theFormElement["position"] = Element.prototype["position"];
Which then triggered the above mentioned IE error. Since theFormElement["position"] is a read-only reference to the input element contained within the form IE threw an error. Be aware of the ID / name you assign to input elements when debugging obscure bugs in internet explorer!
Step 1: Retrieve Emulator’s Gateway IP Address
Grab the inet number resulting from
Step 2: Add Test Site’s Local Hostname to Window’s Host File
For each site I develop I setup a new Apache virtual host (some info on apache virtual hosts here). For instance, the local domain / hostname for a website could be
. When developing locally there are some hardlinks to the local development hostname, for this reason the it isn’t enough to use the inet vmnet1 address retrieved above when debugging in VMWare / Parallels; the local hostname must be added to the Windows host file.
Wikipedia has an extensive listing of the location of the host file on various systems, on Windows XP it is located here:
Open up the file in notepad and add your host entry, for example:
Step 3: Add Emulator’s Gateway IP Address to Your VirtualHost
In order for apache to properly handle the request coming from the emulator gateway you have to add the emulator gateway IP to the VirtualHost statement.
<virtualhost 127.0.0.1 172.16.232.1>
Recently I’ve made some minor adjustments on newsletter bound HTML documents. One particular document was made in the iContact WYSIWYG editor and as you can expect the HTML markup was horrendous. Even worse than the markup was the various ways the email displayed in different email viewing environments. Hotmail, Outlook, and Gmail all displayed this same email differently.
The main issue I was experiencing was a mysterious 3px bottom ‘padding’ given to all img elements wrapped in an anchor tag and lined up horizontally using tds (apparently tables are still the norm for email marketing). No actual CSS padding or margin was being applied to the img or any of its container elements. I’m still not entirely sure what was causing the 3px ‘padding’ but adding style=”display:block” to each img element fixed the problem.