Archive for the ‘Website Design’ Category
IE Changes EPS to PS Files when Downloading
Monday, November 19th, 2007
If you plan to link directly to an .EPS or .AI file for downloading (e.g. logos, vector art, etc.) on a website, you should note that Internet Explorer doesn’t correctly handle these postscript files. If you attempt to download an .eps file with IE it will save it as a .ps file and it will save an .ai file as a .pdf. This is not a problem in Firefox or Opera.
The simple solution is to zip these types of files so IE doesn’t change the file extension, and your visitors can download them without problems.
Posted in Website Design. ⋅ Tags: eps, IE, Internet-Explorer
PayPal Buttons; Hide Email Addresses from Spam Bots
Saturday, November 10th, 2007
Lately I’ve been creating a lot of PayPal “Buy Now” and “Add to Cart” buttons for a few of my customer’s websites. The problem with creating these buttons is that they require an email address to be added to the HTML code, which in turn gets easily harvested by spam-bots.
A simple alternative to using an email address is to use a “referral code” instead. To get the referral code login to PayPal and click on “Referrals” located near the footer of the page. On that page you will find a link like: https://www.paypal.com/us/mrb/pal=VXDE78NC4F3K2. Copy the “VXDE78NC4F3K2″ part of the code and replace the hidden input value of “business” with it in your button code.
Original Code:
<input type="hidden" name="business" value="name@example.com" />
Revised Code:
<input type="hidden" name="business" value="VXDE78NC4F3K2" />
You may ask why I wouldn’t just use PayPal’s encrypted payment buttons. Well, By creating non-encrypted buttons you can easily edit them (e.g. change Price, Item Name, etc.), create new ones fast and dynamically input values via PHP.
Posted in Website Design. ⋅ Tags: ecommerce, email, HTML, PayPal, spam
Top 10 Free Online Website Design Tools
Monday, September 10th, 2007
The following is a list of my top 10 favorite online website design tools. Best of all, they are all free services. Let me know if I’m missing something special here.
Note: I intentionally left-out validation and testing type services. They will be covered in another post later.
- Em Calculator
Converts pixels to ems. Great for converting fonts from px to ems without reducing the base font size to 62.5%. - Lorem Ipsum Generator
Generate paragraphs of classical Latin literature from 45 for use as “dummy text” for your mock-ups and layouts. - The Hivelogic Enkoder
The Enkoder helps protect email addresses by converting them into encrypted JavaScript code, hiding them from email-harvesting robots while revealing them to people. - Kuler
Color inspiration from Adobe Labs. Quickly find, create or share harmonious color themes online, then download the colors as swatches to be used in PhotoShop. - XML Sitemap Generator
A fast and easy to use online sitemap generator that creates not only an XML sitemap (to be submitted to Google), but also a sitemap in text format (to be submited to Yahoo!). - FavIcon Generator
Easily create a favicon (favorites icon) form most image formats. A favicon is a small, 16×16 image that is shown inside the browser’s location bar and bookmark menu and is a good way to brand your site and increase it’s prominence in your visitor’s bookmark menu. This generator by Dynamic Drive even supports transparency when using a gif or png. - hCard Creator
A simple form from Microformats.org to create hCards. hCards are a type of vCard in semantic XHTML that enables applications to retrieve its information directly from web pages without having to reference a separate file. - StatCounter
A reliable, invisible and highly configurable hit counter that offers tons of real-time detailed web stats. Through your own profile, manage all the sites you create and setup profiles/permissions so your clients so they can analyze and monitor their own stats too. I find this to be even more informative then Google Analytics! - IconFinder
A search engine that queries icons to use on your website with “Creative Commons” or similar type licenses. Not sure if this constitutes as a tool but it sure is a handy time saver. - TypeTester
A tool for selecting type primarily for screen as PhotoShop mockups are rendered somewhat different when you slice your PSD into a HTML/CSS layout. TypeTester enables you to see how type will look in its’ natural environment – a web browser.
Posted in Website Design. ⋅ Tags: tools, Website Design
Gaps Under Images in IE6
Sunday, June 24th, 2007
In IE6 and below, images within a div will have a gap or space below them. This is caused by the fact that images are not block elements; they’re inline. The pixels at the bottom are the space below the baseline where text descenders would go (tails on letters like g, j, p, q and y).
The Fix:
Using CSS, set display:block; on the img.
This is not a problem in IE7.
Posted in CSS. ⋅ Tags: bugs, CSS, IE, Internet-Explorer