February 10, 2005

PayPal Fee Calculator

After starting a new job where I was hired to program an online photo uploading and e-commerce site, I figured it was time to learn to program in PHP. So I got a book and read it for a couple of weeks and then pieced the site together. I’m sure I made hundreds of mistakes, but I’m still not good enough to realize it yet.

But anyway, today I will tell you about a different site, that is much more simple, but was still a fun programming project for a beginner like me.

It’s called PayPal Fee Calculator and it can be used to tell you how much to charge someone thru PayPal to make sure that you get a certain amount.

For instance say you want to get $100 from someone. If you just charge them $100, you will actually only end up with $96.50 because PayPal takes out their fees first.

But, if you enter $100 into my site, it will tell you how much to charge in order to be left with $100 after PayPal’s fees are taken, which happens to be $103.29 in this case.

You can also ask how much will be taken out of a $100 transaction, which is where I got the $96.50 amount earlier.

Like I said it’s really simple and took less than a day to put together, but it was fun for a beginner programmer like me.

So bookmark it and use it the next time you need to send a PayPal money request to someone.

October 14, 2004

MT Disable Comments Automatically

I’ve just installed the CloseComments plugin for Movable Type on my blog. It will now automatically close comments on entries that haven’t been commented on in 15 days. I don’t get a lot of comments on this site, especially on older entries, so the vast majority of comments that I do get are comment spam from people trying to enlarge my organs or help me win millions at an online casino. It’s just not worth the hassle of trying to delete all of those comments every day, even with the help of the excellent MT Blacklist. So if you have something to say about an old entry, you can just email me ‘cause I’m not going to put up with all of this comment spam anymore.

July 21, 2004

Damn you, Internet Explorer, Damn you to Hell

I have all but decided not to use CSS for layouts for the next few years until IE gets its act together and actually supports half the things that other browsers like Firefox and Safari have supported for years.

Over the past couple of years I’ve tried to learn as much about web standards and CSS as I can, and have promoted it heavily to every web designer I encountered. I consider myself to be pretty knowledgeable with CSS (this site not being a great example), but I am increasingly running into more and more and more problems when trying to use CSS exclusively for laying out web sites. 99% of these problems come from Internet Explorer, but almost 99% of the internet uses that bastard of a browser, so they don’t see the site as it was intended.

Specifically I’m running into a ton of problems with 3 column layouts in CSS. It drives me nuts. Things get bumped to the bottom of the page, overflow, overlap each other, etc. This stuff just doesn’t happen with tables.

Now I’m not considering going back to 1995 and coding with all nested tables and font tags, not at all. But I am strongly considering doing all of my sites with a basic table for the layout structure, and using CSS for fonts, colors, padding, margins, etc. Especially on 3 column sites like the one that’s giving me problems now.

I know I could fix the problems I’m having, but it would take hours of research and searching for the latest hacks and IE quirks that have to be worked around. These hours could instead be spent by adding features to the site that people will actually notice, or adding more content, or doing more marketing. And really, how many users are going to care if the site is in 100% CSS, or a single table and CSS for the rest? I’m guessing the only people that care are a very small group of anal web designers who make up perhaps .3% of the entire internet population. And frankly I don’t think those people are included in the target audience for any site I’ve ever worked on.

So really, what is to be gained by wasting hours and hours of extra work by making this site work in CSS? I get to display a silly little gif badge on the page saying it’s valid xHTML Strict? Whoopdee doo! And the code size will only be increased by a few bytes. It’s not going to take that much code to make a very simple 3 column table. So instead, it frees up many hours that I can use to add new sections to the site which will generate more interest in the site, I can spend more time marketing the site, I can spend more time doing graphics for the site, I can spend more time posting content to the site, etc.

I still think CSS is great, and saves a ton of time in the long-run, but for some sites like sites with 3 column layouts, it can be more trouble than it’s worth in my opinion. For simple 2 column layouts, etc. I may still use 100% CSS because that’s a lot easier to deal with, but for complex e-commerce and informational web sites, it’s just a lot of wasted time in my opinion. Does that make me a bad web designer? Or am I just being realistic? I mean I’m not getting paid insane amounts of money like Zeldman and other web standards advocates that can spend days fixing an obscure layout bug in IE4.0. I‘m down in the trenches where price is a major selling point. Clients want their sites cheap and fast. They don’t care about web standards, and their customers don’t care about web standards. they just want you to press the buttons for them and get their site online so they can start achieving whatever the goal is for their web site. So do I choose being anal about web standards, spending much more time on development, have to charge more to the client and possibly lose the job because I’ve overcharged? Or do I swallow my pride, fire up Dreamweaver, spit out a site in a few days that still meets or exceeds client expectations, save the client some money, get paid faster, etc? The choice seems obvious to me.

May 05, 2004

Hope, Faith and Charity - Custom scenting, lotions, beauty products.

The site I’ve been working on in my spare time for the past month or so is just about finished (only needs a few more tweaks) so I’m going to go ahead and post it here.

Hope, Faith and Charity

The site is all in CSS/HTML, and to my knowledge looks good in all the new browsers. There are a few issues with IE5/5.5 I believe, but I’m willing to live with them as they are just minor cosmetic issues that don’t affect the function of the site.

Back-end

I used the ExpressionEngine for the back-end, which turned out to work extremely well. The pMachine guys have done a fantastic job with this product, and it’s worth every penny of the $200 price tag. It would be overkill for a personal blog site, but if you need a CMS of some kind, it’s fantastic. I haven’t found a better and more flexible system, as far as the template system goes, and ease of customization. The best feature in my opinion is the unlimited custom weblog entry fields, which allow you to set as many fields for an “entry” as you like. For instance on this site I have a price field, title, short description, long description, three different picture fields, a hidden keywords field, and a few others. I can then display these anywhere on the page simply by putting a variable in the template like this: {price}. Then for the Frequently Asked Questions section I have a completely different set of entry fields, post statuses, categories, and templates.

The URLs are search engine friendly, since they don’t have any crazy characters in them like ? or &. Like I said the template system is really great, and you can completely change the way data is displayed just by changing the URL that you link to.

I’ve tried programming similar functions in PHP myself before and I just couldn’t get it. I’m not a programmer, don’t like programming, and don’t want to learn programming. But with EE I can for the most part do anything I like, but without writing any PHP at all. (But if you did want to add PHP, you can add it anywhere in the page, and have it processed before or after the EE codes have been processed) The EE system has some simple “if” logic, which lets you do some things like:

{if title != “hide”}

…show some html…

{/if}

So that if the title of an entry is “hide” then it won’t show up in that entry listing. You couldn’t do advanced logic with the system, but it’s not designed to do that. The logic it does provide though is easy to understand and use, even for someone that doesn’t like programming like me.

EE only recently moved to its 1.0 release, so I found 3 bugs while working on the site. However, after posting them on the pMachine support forum, they were always fixed within 24 hours, and added to the next bug fix release the following day.

Search Engines

The site is already on Yahoo somehow, probably because of a link I posted a couple of weeks ago when I had a question about the site. I was still pretty shocked that it’s already coming up as #14 on the search term “Custom Scenting” on Yahoo, which is the product the client wants to push the most. Coding sites with CSS really does seem to make them extremely indexable, as well as having good titles, which this site has, in my opinion.

Hopefully the friendly google bot will make it’s weekly visit to my site soon and head on over to the Hope, Faith and Charity site as well. ;)

Shopping Cart

The only drawback to using EE for an e-commerce site is that you are limited in the options you have for a shopping cart. Namely, you have to use an external shopping cart like PayPal or 1ShoppingCart, which open in a new window when you add something to the cart. This obviously has some usability issues, but for this particular site and budget, it was the way to go.

I decided to go with PayPal, mainly because it’s free until you sell something, and the shopping cart links are generated using a standard HTML form which makes it easy to pop-in the price and description of items from the EE back-end. With some other services like 1ShoppingCart, you have to first login to their site and create the product, then copy/paste the link into your site. This would have created a much unwanted extra step to adding every product.

However, PayPal definitely has drawbacks as well. Mainly that some people hate PayPal, and also because they don’t offer weight-based shipping. You have to either setup a flat rate for shipping each item, or charge shipping based on a range of prices in the order total. But again, because of the budget of this site, I had to make the call to live with those drawbacks in order to get the site done on budget.

According to pMachine, they will eventually add an e-commerce module to EE that will be available as a separate purchase. If it is anywhere near as well-put together as EE itself is, then it will be the killer shopping cart system in my opinion.

The reason I didn’t go with another shopping cart system like OSCommerce is because every flavor of OSC I‘ve ever tried has been a terrible pain in the butt to customize. You have to sort through pages and pages of PHP code just to change how a little box is drawn. Plus there are layers and layers of nested tables, which would have taken me ages to get rid of. Perhaps the Zen Cart will be a good option in the future, as it has a CSS based layout, but for now it seems to unstable to me, and doesn’t have all of the features and contribution add-ons that other OSC installs have. I figured the CSS layout and search engine friendliness of EE would be more important than having and internal shopping cart. Hopefully I made the right choice. I’ve never seen a OSC site come up on a search engine. I don’t think they get indexed very well at all. And I’d rather have someone find the site and be slightly confused for a second, rather than never find the site at all.

Final Thought

Overall the site was a really fun project. We did all of the photography, so there are some nice big pictures to look at, which will hopefully entice people to buy. I know I’m always reluctant to buy something I see online when the picture is so small I can’t even tell what it is. Hopefully it’ll be successful for the client, and far exceed their expectations. I think it is the best site I’ve done, and I’m pretty proud of it, so I hope they are too.

So if you need any lotions, sugar scrubs, milk baths, salt scrubs, Bella Notte linens, Burt’s Bees products, face masks, hair masks, essential oils, custom scented items, body washes, natural hand-made soaps, BedHead pajamas, etc. for your wife or girlfriend, be sure to checkout Hope, Faith and Charity. :)

April 10, 2004

Protecting pictures and other files with .htaccess

Recently people have been stealing my bandwidth by “hotlinking” ass of the week images from my site. Hotlinking means they include the pictures in their own web site, but they are actually being downloaded from my servers. So they get the pictures on their site, but are using my bandwidth.

I don’t appreciate this very much.

So, I have used .htaccess to prevent that from happening. Now if you link to my images from another web site, you are given a “broken image” instead of the picture actually showing up.

Here is the code to do it in case you have a similar problem:

RewriteEngine on
RewriteCond %{HTTP_REFERER} !^$
RewriteCond %{HTTP_REFERER} !^http://yoursite.com/.*$ [NC]
RewriteCond %{HTTP_REFERER} !^http://www.yoursite.com/.*$ [NC]
ReWriteRule .*.(gif|jpg)$ - [N,F,L]

IndexIgnore *

Just replace “yoursite.com” with your domain name and any other site you want to be able to display your images.

Copy/paste this info into a file in the directory you want to protect, and call it .htaccess (note the period before the name). You maybe have to turn on “View all hidden files” in your FTP client in order to see the file, because it is normally hidden.

The last line, “IndexIgnore *” will keep people from being able to display a directory listing, and seeing all of the images in a directory. Instead of seeing all of the AotW pictures in the whole directory, you’ll just see this.

Thanks to ScriptyGoddess for the info!

March 21, 2004

ieCapture

If you are a Macintosh based web designer like me, and need to test your sites on the terrible mess that is IE/Windows, check out ieCapture. I just sold my old 866mhz Windows machine last week to a family that needed a computer, so I don’t have anything to test my sites on in Windows anymore, except at work. But thank goodness I found Dan Vine’s ieCapture. You give it a URL, and it will send you screenshots of your site in your choice of IE6, IE5.5, IE5.01, Opera, and Firefox. And the best part is, it’s free!

If you are a Windows based developer and would like to test out your site for Macintosh users, be sure to check out iCapture, which will show you screenshots of your sites on Safari, the Mac’s default browser.

Thank you so much Dan, for this invaluable service.

If you follow the links and use his service, be sure to click on the ads that you find, to try to keep the service free. If he can spend dozens of hours getting that service running, the least we can do is spend 30 seconds clicking ads. :)

March 09, 2004

Reason to shop online #11

I was recently browsing Amazon to see if there was a new book out in the series that my wife has read since she was a kid and still collects, but couldn’t remember which one she got last. So I just started browsing the most recent ones in the collection, and noticed a message up at the top of the screen from Amazon telling me that I had already purchased this book back in February.

Wow, now that is helpful. I immediately knew which one she had, and even when we purchased it. I could click a link and find out all the other details about that order, or see all of my recent order activity. Amazon of course also recommends other books to me based on the things I look at and purchase.

When was the last time you went into Wal-Mart, and were reminded by a store clerk what you purchased last time, and then recommended another book to you based on the ones you spent the most time looking at? NEVER.

Of course if Wal-Mart kept track of that kind of information I would probably call it some sort of conspiracy. But it’s cool when Amazon does it, because, you know … it’s a web site and everything.

March 08, 2004

February Version 2: My vote

Here is my vote for the Version 2 redesign competition.

Bright Corner

This is by far the best in my opinion, no contest. Many of the entries were very pretty graphically, but they basically put a new face on the old site. The didn’t adjust much of the wording, site architecture, etc. They just put pretty graphics on the old site. And while that is a definite improvement, everything about the Bright Corner entry has been improved.

• The navigation is extremely clear and helpful. They used clear labels for all of the navigation elements so that you know exactly what to expect when you click on a link

• It is immediately obvious what the site is about, and why it is there. I’ve followed links to the Gutenberg Project many times before, but I almost always left immediately because I didn’t fully understand what the site was and why I should care. Right at the top of the page it tells you in a sentence what it is and why you should care. It says how many books they have available, and gives you a way to search them. If you still don’t “get it”, there is a whole paragraph directly below describing in more detail what the site is and does.

• The news is out of the way. On many of the entries the news is large and seems to be the focus of the site. That might be great for people that are already familiar with the site, but in my opinion that turned away a lot of people. If you aren’t familiar with the project, a bunch of news about the project isn’t going to be very important or interesting to you.

• Everything else. Everything else is great too. Everything is clean and very easy to read and scan, and it’s very easy to get an idea of what the project is about at a glance.

That’s just a couple of reasons why I like the Bright Corner entry, and why I’ll be voting for it. I’d really like the see the Gutenberg Project use this one, as it would make me a lot more interested in the project. :)

Head on over to Version 2 and look at the entries to vote for your favorite!

March 05, 2004

February Version 2 entries are available

The entries are in for the February Version 2 redesign contest. The contest is to redesign a site every month using CSS and xHTML. February’s site was Project Gutenberg, the online e-library.

There are a few nice entries, but I will reserve my vote until Monday when voting is enabled after Paul gets everything straightened out.

Head on over and view the entries and be ready to vote on Monday!

February 29, 2004

10 Reasons to Shop Online

Bruce Tognazzini lists 10 Reasons to Not Shop Online on his personal site. I agree with some of the points he makes, but he seems to just be complaining about a few experiences he had at a few online stores.

Anyway, I hold the opposite view… I love shopping online, and if at all possible will shop online rather than at the store in most cases. Here’s why:

1. No Lines
We went to Target last night and bought a cartload of stuff. It was an hour before they closed, so they only had about 5 registers open. We stood in line for at least 7 minutes waiting for a free register.

2. Fast checkout
When we finally got to the checkout, it took another 5 or 8 minutes to get everything checked out and rung up. Sure online you have to enter your shipping info, credit card info, etc, but it’s still not going to take you anywhere near 5 or 8 minutes to fill out a shopping cart checkout page.

3. Little/No human error
Our cashier scanned a few items 3 or 4 times on accident during the checkout. Luckily he caught it and removed the duplicate items from the total, but what if he hadn’t? Or what if he charged twice on purpose? When you’re standing there 8 hours a day getting paid $6.00 an hour there is little motivation to take your job seriously. Online you can see exactly what you are being charged before you enter your credit card info. If there is an error, it’s most likely your own. The computers could still make mistakes due to bad programming, but I still trust a good web site more than some teenager at a checkout line.

4. Faster than going to the store
Bruce says it’s faster to drive to the store, hunt for what you want, wait in line, checkout, load your car, and drive back to your house than to just order something on a web site in your own living room. What? I don’t think so. We were gone shopping for 2 and a half hours the other night. I could have accomplished the same thing online in less than ten minutes. This isn’t counting shipping time of course, which is the only bad thing about shopping online, no instant gratification.

5. Easier to not over-spend
My wife and I got to the checkout line and decided not to get 3 of the items we had in our cart because the total was coming out to be a lot more than we anticipated. Most online shopping cart systems have a real-time total displayed showing you the total of all the items you currently have in your cart, so you know exactly how much you will be spending as you add items to your cart. Also because you’re going to have to wait at least a day to get the item, you don’t buy things on a whim as easily. For instance the candy bars, sodas, and cheap DVD’s they put at all the checkout lines at Target. If a web site offered you a similar item, you wouldn’t buy it because you might not want that item in 2 days. Now I know candy bars and sodas aren’t offered on many web site checkout systems, but similar impulse buys are easier to avoid online in my opinion.

6. No traffic
You don’t have to deal with driving through crowded streets and packed parking lots, hunting for a space, then walking half a mile to the store. Sit in your own house in your own office in your own comfortable chair and order whatever you like. Then it’s delivered right to your house in a few days. You don’t waste gas, don’t have the stress of overcrowded streets, etc. You also don’t have to walk a 5 mile marathon to find stuff like you do in any of the thousands of enormous Wal-Marts out there.

7. More information available on the products you are buying
Bruce says he thinks there is more information available in the store, which seems completely backwards to me. All you have in the stores is what’s printed on the box in most cases, and that is 90% marketing drivel written by the manufacturer, so how useful is that? Ask a salesman? Yeah right. 95% of the sales guys out there will just pick up the box and read you the bullet list of features if you ask them for help. Most electronics stores have a bullet list and short description of the product printed on the price tag on the shelf, but frequently these are out of date, inaccurate, or not even for the right product.

Online there is usually a similar bullet list of features, but with a quick button press or two you can search for reviews of the product in question and find dozens of objective user reviews from any number of sites. Some e-commerce sites like Amazon.com even have a review system built-in, so it’s like asking 20 other customers in the store what their experiences were with this product before you spend your money on it. You can also access the manufacturer’s site with a click or two and most likely download electronic versions of the manuals, find any support issues in their knowledgebase, etc. Look up their number if you need to call them to ask a question like Bruce says you can do with a cellphone and the number on the box.

8. Easy to find the products you want
We spent 5 minutes looking for a Bill Engvall CD last night on Target’s cluttered shelves. We looked in all the categories, under the B’s, under the E’s… etc. We asked an employee for help, and he said without looking up, “Look under the E’s. Should be there”. Gee, thanks buddy! I didn’t think to try that! Alternatively, I just found every Bill Engvall CD available on Target.com in less than 15 seconds. Sure most searches on web sites could be better, but it’s already a whole lot easier than searching high and low on shelves in different parts of a store for the item you want. And what if someone picked up the last copy of that CD you wanted, then decided they didn’t want it when they were in the clothing section, so they just threw it behind some t-shirts? Now you can’t find it or buy it, even though the store has it in-stock. Online you know if the store has something in-stock, and you know it’s sitting in a warehouse somewhere, categorized and ready to be put in a box.

9. No Salesmen to Pressure You
Every time I walk into Best Buy or Circuit City and just want to look around to kill time, I get hassled by 3 salesmen in every department asking if I need help finding something or have questions. If I stay there for 10 minutes or more, they ask me again, and again, and again. Of course if I actually have a question, they are nowhere to found. Online you can spend as much time as you want looking at things, researching them, etc. If you need help there is usually a 1-800 number you can call for the store itself or a manufacturer. Sure you might have to wait in a call queue for a few minutes, but it’s worth it to me.

10. Don’t have to deal with the other customers
Another plus of ordering online from your own home. You don’t have to dodge other customer’s buggies, listen to cellphones going off, try to tolerate some kid screaming in the next aisle because his parent wouldn’t buy him the latest Poke’mon toy, etc.

I could come up with a lot more, but I think I’ll stop at 10. :)

Now maybe some of these reasons aren’t valid for everyone, I’m aware of that. I generally don’t like crowded areas, they really stress me out and put me in a terrible mood. So perhaps the more extroverted people out there actually enjoy being out and mingling with other people. But not me.

There are definite advantages to shopping in a physical store though. Instant gratification, like I mentioned before is one. And trying items before you buy them is another. But even then I will frequently run into a Best Buy and try something out, then go back home and purchase the item online either from bestbuy.com, or from another cheaper retailer I found online.

E-commerce is not without its problems, but 9 times out of 10, I will still enjoy the online experience a lot more than the brick and mortar method.

February 25, 2004

What kind of Designer are you?

Keith has a sort-of poll on his site that asks what percentage you are of two opposing trends in web design. It’s sort of like one of those silly “What Dog food are you? What comic book character are you?” type things I guess, only this one is a bit more realistic and useful. Here are my answers:

Designer/Developer: 90% designer. I can read a little PHP and modify scripts a little, but I really have no interest in programming whatsoever.

Form/Function: 75% function. No point in having something be pretty if it doesn’t do anything. (aside from art, etc, which is all form) But at the same time, you could have the most functional site in the world, and if it’s butt ugly, people will most likely not utilize the site/thing to its full potential because it’s just so ugly or hard to use.

Front-End/Back-End: 75% front-end. This is basically the same as the first question, but in my own mind I include things like MovableType in the back-end category, and I do know a bit about MT and enjoy making it work. I just don’t like flat out programming or scripting.

Print/Web: 100% web. I don’t do any print stuff at all unless it’s my own business cards or something similar.

Web standards/Not-Web Standards: 75% web standards. I try to always do CSS layouts and make everything with standards, but I’m not a freak about validation. If the site doesn’t validate but still looks good in all the major browsers, I’ll probably not spend a ton of time making sure it validates.

Minimal/Lush: 95% minimal. This goes along with the second question a little bit. All of my designs are minimal. If it’s an e-commerce site it’s usually especially minimal, because I believe the site should focus on the product, not on the fancy graphics or animations. After all, that’s why the person is there, to buy something, not to be wowed by jpegs.

Content/Presentation: 65% content. Content is by far the most important, but presentation can have some effect on how that content is received. It can also make the content more or less trustworthy and/or interesting, depending on how it is presented.

CSS/Tables: 100% CSS is what I’d like to do, but real-world it’s probably more like 75%.

Flash/HTML: 100% HTML. I have never had a use for Flash and probably won’t any time soon. It’s great for games but I see little use for it in web sites, except as maybe an application of some sort where the Flash is tied in to a nice back-end. But I’ve only seen that done well a couple of times.

February 10, 2004

RSS Feeds

If you happen to subscribe to my RSS feeds, you will notice that I changed it to include the full entry, because it seems like the cool thing to do these days. So sorry if you just got all excited because there were suddenly a dozen new entries in your Newsreader, only to find out you’ve already read them all.

February 09, 2004

Firefox 0.8 Released

Mozilla Firebird has been renamed to Firefox, due to trademark conflicts, and updated to version 0.8. They’ve filed their own trademark however, so hopefully this will be the last name for the browser. I downloaded it for OSX and am quite impressed. The new theme is beautiful, very minimal and it really looks like a real Mac application now. It seems a little slower to me than Safari, but is still quite speedy. The download manager is nice, as is the bookmark manager.

The Windows version also now has an installer, which should help a lot with people switching to Firefox from IE. Before you had to manually unzip all the files into a directory, find that icon, make your own shortcuts, etc. Now that it has an installer it will be a lot easier for newbies to switch over. Firefox still looks the same on Windows though. I much prefer the OSX version.

Though a very nice browser and much better than IE, I will still be sticking with Safari on OSX for my browser of choice. The main reason being the Bookmark syncing with my .Mac account. I have an eMac and a 12” Powerbook, and use both quite a bit. With iSync and .Mac I can sync my bookmarks, address book, calendars and todo lists, etc with a single click. Before this I never really even bookmarked anything because I would end up reinstalling Windows or use another browser, and I could never keep track of them. But now I always have my bookmarks with me, so I bookmark everything I think I might want in the future. I can even access the bookmarks from any computer with web access by going to mac.com and logging in (though they aren’t integrated into the browser like with Safari, I just see them on the screen like a web page when I view it from a different browser). If there was a method of bookmark syncing that was that easy with Firefox, I might be more inclined to switch, but for now this feature alone will keep me using and loving Safari.

However if you are using Windows, be sure to download Firefox as it is easily the best browser for that operating system.

January 05, 2004

Fontifier

From the creators of the always helpful IdentiFont comes Fontifier, a web site that allows you to upload a sample of your handwriting, which is then turned into a Win/Mac compatible system font for use in your favorite graphics app!

You just download the template, print it out, write in the letters in your own handwriting, upload it to the site, and then you’re sent back a free font file made out of your own handwriting. If you don’t have a printer/scanner you can just draw in the letters with a mouse or wacom. I’ll be trying it later today most likely, and will post my results.

Here is my first quick attempt… I’ll probably do another one later and spend more time on it so all the baselines align and stuff. Strangely this doesn’t really look like my handwriting… Mostly because when you do the template you have to write each letter individually, whereas my natural writing all flows together into a big mess. My wife didn’t even believe it was my hand writing, except for the numbers, which do look like my numbers. Still, I wrote it with my own hand and now I can type with it, which is pretty cool! I did this one with my Wacom, Photoshop, and one of the default caligraphy brushes. I’ll probably experiment with different brushes and sizes later.

January 02, 2004

Email links on web sites

I’ve recently been noticing quite a few sites that are no longer using mailto: links to allow people to email them with a single click, like it has always been. The obvious reason for this is the insane amount of spam that can be generated by a single Mailto: link on a site that has been spidered by one of the email harvesting bots that spammers send out.

Some of them have just been putting the email address in the HTML without actually making it a link, like this:

john@somesite.com

Others take it a step further, and don’t even use the “@” sign, which means you have to not only copy/paste their address into your email app, but then you have to add the @ sign yourself. They’ll usually put something like this on the page instead of the @ sign:

john{AT}somesite.com or john(at)somesite.com

This prevents the spambots from harvesting the address, but it also seems like a big pain for the person that wants to email the owner of the site. Normally this doesn’t bother me at all if it is on a messageboard or some other site like that, but I’ve been seeing it on some commercial sites recently, and even on some sites by people that are normally all about usability and accessibility on their sites.

Is it just my imagination that this technique is really less usable, or are these people sacrificing usability just to save themselves the trouble of deleting a few (hundred) emails? It almost seems hypocritical to me… These people can preach usability from the rooftops, until it inconveniences them by opening up their email address to the possibility of spammers. Now I’m not naming names and don’t mean to say that it is wrong to do this, I’m just really wondering if this is becoming the new norm or if it is just happening on a few sites. I did a quick search on Google and found that even “Mr. Usability Guru Himself”, Jakob Nielsen does not use a mailto: link on his web site. He even admits that it is a “sub-optimal design” but then says that he omits the mailto: link anyway basically because he doesn’t want to get any spam. And he also basically implies that unless you will go to the trouble of copy/pasting his email address, he doesn’t want to hear from you in the first place because he already “gets several hundred email messages per day”. Again, this really just makes it look to me like once usability inconveniences the “usability guru”, he suddenly doesn’t care about it anymore or makes up some half-assed excuse as to why he goes with the less-usable method.

This could especially be a problem with new web users. I still talk to a lot of people that ask if my email address starts with “www.” when I give my email address to them over the phone. Or they will start their own email address with “www.” (and normally when this happens, their address also ends with aol.com). Obviously these people are having a hard enough time learning what the “@” sign is in the first place, let alone knowing that {AT} means to delete the two letters between the curly braces, and then replace it with the @ sign. Hell a lot of people don’t even know how to copy/paste. So you can bet that a lot of people will be trying to send an email directly to john{at}somesite.com which will of course bounce back or not go out at all, totally frustrating the user and keeping them from emailing you. Even people that do know how to copy/paste and know to put in the @ sign may find this irritating. Most of the time I just won’t write the person/company if they do this. If they want my money/attention the least they could do is make it easy for me to contact them, not have to jump through hoops by copy/pasting and decyphering some email code just to make sure they don’t receive any offers to enlarge their penises.

There are several other options to allow people to still easily email you without opening up your inbox to spammers.

Use an HTML form
You could write an email contact form that sends you an email from your web site. This is good because spambots can’t harvest your address, and it allows people to contact you directly from your web site without having to launch their email app.

However, you can’t easily attach a file to the email (unless you set that up in the form), and the sender may want to add HTML or other email options like CC or BCC to the email as well, which wouldn’t be easy (again, unless you added all that to the form, which would likely make it too complicated to be useful).

Encode the Mailto: link
Use something like the Hivelogic Email Enkoder to encode your mailto: link in a piece of Javascript code. It works exactly like a Mailto: link in most browsers, but is just gibberish to harvest bots. However, if the visitor has Javascript disabled they won’t see the link and won’t be able to email you without copy/pasting and all of that business. But at least this method would make it easy for 95% of your audience to email you with a click. And if someone has a reason to turn Javascript off, they most likely also know how to copy/paste, which would mean they would probably realize that they had to use that method since they had chosen to disable Javascript.

Has anyone else noticed this? Is it bad? Is it just something that web users are going to have to deal with as Spam becomes an increasingly uncontrollable problem? Are there any other methods than the ones I’ve mentioned above to still provide an easy way for visitors to contact a site owner, without opening that site owner up to every spammer on the ‘net?

November 06, 2003

CSS Vault

Paul Scrivens has just launched a new CSS resource and gallery site, called CSS Vault. It’s only been online for a few days, but is quickly growing with lots of links to great information on CSS, as well as a gallery of the very best CSS based designs on the web. If you see something missing, feel free to submit a new link to a resource or particularly inspired site design. While you’re over there, be sure to check out his blog, Whitespace for some well-written thoughts on web design in general.

October 22, 2003

Mozilla.org Redesign Beta

While I’m talking about web site redesigns I may as well post my thoughts on the new Mozilla beta site which was redesigned by Dave Shea of Mezzoblue.

Overall I think it is terrific. Finally they’ll have a site that is good looking and easy to use for the user, rather than having the whole thing focused on the developers. There are now clearly labeled download links, support links, and products links. Along with one link for developers, which takes you to all the nerdy information you could ever want. Now if they could just get rid of any mention of nightly builds and all that crap off the front page they would be doing pretty good.

It would also be nice to see an installer for Firebird and Thunderbird soon, since right now you just have to unzip the files to a directory somewhere which is not the way you normally install something on Windows and probably confuses quite a few people. The default home page on Firebird is also really bad. The last time I installed it it brought up a page saying “HEY! You’re using a build of Mozilla that is older than 6 weeks” or something like that, and told me to upgrade. First of all don’t say “HEY!” to someone that just downloaded your product, even if you aren’t getting paid for it. Second, don’t tell me to upgrade after I just downloaded and installed your product. The homepage should just point to Yahoo or something and get rid of all this technical stuff altogether. The technical people know how to find the technical information, but the newbie computers users don’t care about it, and don’t need to know about it. They just need to know that they can use this browser just like IE, only without all the pop-ups, security flaws, and completely stagnant feature set.

New A List Apart

A List Apart has completely redesigned, front and back-end they tell us. I have mixed feelings on it though…

Good things…

It doesn’t have that terrible orange/green color scheme anymore. Hooray! Seriously, Zeldman is a very smart guy, I just really don’t know what his deal is with orange…

The discussion portions of each article are nice, giving people a way to post feedback and further tips on a particular technique.

Bad things…

They use a bunch of catchy phrases to name parts of the site instead of just using clear, usable labels. Like “Up Front” instead of just saying “Home”. And “Departments” to lable the contact, credits, permissions part of the navbar. I wouldn’t call that Departments personally. Though at the moment I can’t think of anything better. I probably wouldn’t have labeled it at all actually. Another one is “Hot Topics” instead of just labeling it “Articles” or something to that effect.

The entire “about ala” page is filled with little catchy phrases that make no sense at all…

“Who made the salad?
Like Soylent Green, ALA is people. Visit the Credits page to find out about them.”

What? Soylent Green? What the fuck are you talking about?

Overall the site just looks like a blog now. Before it had more of a magazine feel to it, but now it just screams blog, while also trying to be a magazine.

And like someone on YayHooray said, the whole ISSN thing is just about the most pretentious thing I’ve seen on a web page… I mean, sure, put it on the about page or something, but plastering it all over the front page, everywhere the title of the site is mentioned, and beneath every article is way too much. To me it makes the site look less professional. Like it has to hold a big sign in your face “Look at me! Look at me! I’m a legitimate magazine! See!? I have an ISSN number just like real magazines you see in the grocery store! We are legit! Still don’t believe me? Then scroll to the bottom of the page and see that our whole site validates in XHTML, CSS and Section 508!! Aren’t we awesome????”

It’s also kind of funny how they say they spent a long time redesigning their custom CMS back-end, when it ends up looking exactly like a blog in the end. They could have just used MovableType and saved themselves a ton of time and trouble. But Zeldman still hand codes his own personal blog for some reason, so I guess it was to be expected.

I know all of this sounds pretty negative, but to be honest I was a little disappointed. I just thought it would be something new and interesting, not just another blog.

But all of those minor complaints aside, the new articles are great. Extremely well written and helpful articles about CSS navbars, random image replacement, etc. Be sure to give them a thorough read.

October 05, 2003

Through the eyes of a Mac Browser

Here’s a thing called Through the eyes of a Mac Browser that allows you to enter a page and see how it looks in Safari, Netscape, IE, and Lynx on the Mac. And apparently it is free, as opposed to the $40 a month BrowserCam. Hopefully it will stay free!

September 26, 2003

Even more CSS news

The CSS news is coming fast and furious these days…

Layout-O-Matic is a tool for making layout templates in CSS. You just enter the type of layout (2 column, 3 column, fluid, etc), the size, some padding measurements, and press submit and the site generates all the necessary code for you. Pretty great!

StyleMaster 3 is out for Windows and MacOSX, and is looking quite good. I will probably use it when I get a Mac, since Topstyle is not available on the Mac yet.

There is a List-O-Matic Dreamweaver Extension available now which lets you easily create CSS based menus right in Dreamweaver with only a few clicks. Nice!

Thanks to Zeldman for the links.

September 24, 2003

CSS List-O-Matic

Here’s another nice CSS resource: The List-O-Matic It allows you to easily specify the names of buttons in your navbar, then it generates a CSS file for you that formats an unordered HTML list into one of several different styles of CSS navbars. You can then take that CSS and customize it with your own colors, etc, to match your site.

There’s also a gallery of sorts of CSS navbars at Listamatic

And the CSS tutorials at Listutorials will teach you how to make your own fancy CSS navbars, without the help of the List-O-Matic.

The CSS Matrix Has You

If you haven’t yet taken the plunge into at least trying to learn CSS, this article is a pretty good place to start. I didn’t get to read the whole thing because the server started timing out, but when it comes back up I’ll finish it. It’s a good intro to CSS and why you should use it, with a little of the Matrix thrown in for good measure.

Automatic Labs

Dan Benjamin of Hivelogic has launched a new site for his design/development company: automatic labs. It’s super clean, beautiful, functional, simple and standards compliant. Definitely one of my favorite sites in a while. Looks like he has a new CMS system called Turbine as well. He doesn’t say how much it costs though, you have to contact him for more details. Which makes me think it is expensive, whether it is or not. But he just left a note on Hivelogic saying that his upcoming free CMS/blog tool is not Turbine, and I guess it will be called Grendel and still be free or cheap.

September 22, 2003

Freaking Great® Flash Site

I don’t say any Flash site is any good very often, but I love this one: Evolution Bureau. It’s fast, super clean, and oh-so-minimal. I love the way it resizes smoothly while it’s loading, and especially the sounds. A nice ocean sound on the front page, and little clicks and other fun noises as the site resizes or changes pages. If I ever make a Flash site, I hope it is like this one.

September 11, 2003

Natural Color Selection

I just had to post something other than a girl picture to keep my blog nerdy enough for my tastes…

Found this article on YayHooray about how to use natural color palettes as the basis for your designs and interfaces. It’s a really helpful article, and the samples they show that have used a natural color palette are quite good. It really makes the site look more warm and friendly, compared to the cold “corporate blue” of most big-name sites. It also shows a very interesting way to choose your palette, by choosing a few shades from a photograph, rather than choosing colors at random in Photoshop or by using a color program like ColorSchemer. Most colors in nature are automatically complimentary and look great together, (God is the master artist after all, I suppose) so it’s a really good technique to use to find interesting color combinations.

A couple of other color picking ideas/resources:

QuickColor
This YayHooray Thread
Colorwhore
Colormatch
Pretty much any of these books
Lots more color picker links here with reviews as well

September 05, 2003

After Life

I’m normally not a big fan of Flash, but this is a really well put together Flash image gallery. It’s extremely well done, and has a really great atmosphere. Plus the Flash is very subtle, not in your face with flashing lights and rotating objects. Be sure to move your mouse around on the pictures, some of them are interactive. And start with spring, progressing to winter. The music and everything go from happy spring sounds, to more atmospheric and “cold” sounds in Winter. And if you really want to “experience” it, hit F11 to put (most) browsers into full screen mode.

After Life

September 03, 2003

Web site speed analyzer

Zeldman linked to a pretty slick web site speed analyzer thingy over at websiteoptimization.com.

It seems to work quite well, but it’s also pretty damn strict! Yahoo.com failed two of the tests, and got a “caution” diagnosis on 4 others (out of 6 areas). Google passed with flying colors, and supposedly loads in 3 seconds on 56k, whereas Yahoo loads in 15.

I ran this site through, And it got a few things right, but quite a few warnings. Mainly because of too many pictures, resulting from all those buttons on the left over there. I guess it takes about 30 seconds for 56kers to view. Sorry about that! Hopefully since the layout is CSS you can see the actual content and start reading before all the pictures load.

However a new site I am currently working on that uses total CSS got a “congratulations” rating on every criteria except the size of my CSS file. I think he should allow for a little more room in the CSS though. They can get a little big when you are setting rules for your entire site in one document, plus they are cached, so you will only have to load the HTML on subsequent pages.

Anyway the site is a companion the book which looks like a pretty informative read. I might pick it up to see what his tips and tricks are for reducing file size.

August 27, 2003

Apple.com Redesign in the works

Zeldman and Douglas Bowman of StopDesign are teaming up to redesign the Apple.com web site. I can’t wait to see what they come up with. Douglas is an excellent designer and has worked on Wired.com among many other large sites. And of course Zeldman is Mr. standards compliance. I can’t say I really enjoy all of Zeldman’s designs, but his coding is top-notch. Anyway, it will be interesting to see if they are going to stick with the basic aqua-tab design of the current Apple site and just tweak it a little and code it in support of standards, or if they are going to completely overhaul the whole thing. Either way I’m sure there will be a lot to learn from the design decisions they made and I hope they both are able to talk a little about the process on their blogs during or after the redesign.

August 06, 2003

Free Web Style Guide

Silverorange has released a copy of their web style guide on their site for free. It’s pretty good and could be a good starting point for styleguides used in other projects. However it seems pretty technical to me… I can’t imagine many content creators understanding much of what is presented in the guide. But I guess if they are trained how to do things, and have the style guide as a reference, it would be a little better.

Check out their Labs section on their site too, it has some other good design tips. Hopefully they’ll start updating it more often soon. Right now it seems to be every week or two that they post something.

August 03, 2003

Home-Epicurean.com Launched

I’ve been working on Home-Epicurean for the last month or so. I used OSCommerce for the shopping cart script, and an existing logo and identity that the client had for the design. It’s not the most original design in the world, but it’s clean and attractive in my (and the client’s) opinion, and I think it serves its purpose well. The site only has 3 products right now, because my client is just starting the business, and it takes a lot of money to launch a new product, so it will grow slowly after he starts getting some orders.

The site is for selling gourmet foods online. When you order he ships you a box full of frozen gourmet food that you can then cook at your own home. Everything is individually bagged and labeled, and comes with cooking directions so you can feel like your very own gourmet chef. I don’t eat meat so I probably won’t be trying any of his dishes, until he gets the vegetarian and dessert menus full anyway.

July 17, 2003

2advanced launch party coverage

Schavitz.net has hilarious coverage of the 2advanced launch party (which didn’t really happen). Definitely not funny to non-web designers. But if you are one, it’s pretty darn funny.

I have been bored with 2advanced for quite a while now myself. They were “cutting edge” about 3 years ago, but unfortunately they have not changed since then. At all. Sure their style has been very influential and is probably one of the most ripped/copied on the internet, but that should encourage them to do something even more new and groundbreaking, not just the same old thing over and over again.

Like I said I would be impressed by this if it was the first flash site of this caliber I had seen, but even though the site is technologically advanced (2advanced?) it still comes off feeling like the same old thing.

The site is very difficult to navigate in my opinion. Instead of labeling things clearly they come up with clever codenames for everything like sub-system, auxillary-system, feature-system, etc. Also since nearly everything is constantly blinking, it makes it difficult to actually concentrate on anything. I guess you could say 2advanced is the MTV of the web design community, sticking to the same old formula but slightly changing every couple of months to keep kids interested.

I really don’t mean to sound so critical of the design, it is definitely very polished and I’m sure they put tons and tons of work into it. Plus their clients must still be buying it like crazy, or they might have done something different by now. People that don’t look at web sites and designer’s portfolios all day are probably still impressed by all the blinky lights and moving pictures and buttons. But it’s not like I have any better ideas, I can’t use Flash at all. I just think a lot of people are moving beyond the trendwhore phase, and it would be nice to see pioneers like 2advanced continue to innovate rather than just sticking with what made them famous.

But, if they hadn’t hyped up the launch so much with a count-down timer and everything, people would not be being so skeptical and critical. If they had instead chosen to just quietly redesign and relaunch the site, you wouldn’t see every design related messageboard lighting up with flames right now. A victim of their own success perhaps.

July 16, 2003

More than blogging

Matt Haughey has posted an article with some good tips for using MovableType as more than just a blogging tool. (Be sure to follow the links at the bottom to more articles on the same topic from other authors like Brad Choate and Douglas Bowman)

I’ve been planning to use MovableType for two future sites of my own as well, that are not blogs, so these articles couldn’t have come at a better time. I’ve also been looking into the MTExtraFields plug-in a little, though it looks like there may be more downsides than upsides right now. I’ll really be looking forward to MovableType Pro which will feature custom entry fields so you could make much more flexible database applications right in MovableType.

When I have time to work on those other two sites I will definitely explain how I used MovableType to create them, even though it’ll probably be using the methods outlined in the articles linked above.

July 10, 2003

Pixar.com

It’s pretty surprising how bad the Pixar web site is as far as standards, accessibility, and even general usefulness are concerned… Nearly every word is in an image, and only about half of the images have alt text. Most pages are made up of a row of word-images across the top for navigation, followed by a large 3d generated picture that is sliced up and features a lot of javascript rollovers. There is no secondary navigation to use if your browser doesn’t support javascript or you have it turned off. Font tags are used on the pages that do contain actual HTML wording, everything is in tables to control margins, padding, etc. They even use the standard Dreamweaver javascript code for the image rollovers and other functions.

Now of course you could argue that Pixar is a very visual company, and seeing the hi-res graphics and clever image rollovers are just part of their brand and image, but those features could all be easily accomplished while still making the text in HTML and make the site standards compliant. There really isn’t anything complex about the layout and there isn’t a lot of content, so it would be a pretty easy task to tune up the site and make it more useful. I was just surprised to see a site like that in use by a company that’s about to bring in $300 million from its latest movie.

July 04, 2003

Designing with Web Standards - Jeffrey Zeldman

I just finished reading Zeldman’s new book Designing with Web Standards this morning. It was a really informative read that I recommend to any web designer with even a slight interest in improving their skills with CSS, standards based web design, or web site accessibility.

The first couple of chapters use real-world examples to show why designing without any concern for web standards can be very bad for your client, and for you when they fire your ass because no one can use their site in a year. He also uses the first few chapters to provide examples of web standards success stories to show the benefits of designing sites with standards. Even though these first few chapters could be called “evangelizing” or something like that, he never becomes preachy and never condemns people that use table based layouts, etc. The first site example he uses is even based on a transitional table-based layout using XHTML for the table and other mark-up, and CSS for everything else.

The book assumes you have a previous knowledge of at least some HTML and CSS, as it is really more of a “best practices guide” than a technical CSS or XHTML reference. (For technical references see Eric Meyer’s Pocket CSS Reference or the mammoth Eric Meyer on CSS)

The writing is non-technical and he tries to make the boring stuff like DOCTYPE switching and browser bug workarounds as interesting and short as possible while still giving you the info you need. There are even a few smile-worthy jokes springled throughout the chapters to keep you from falling asleep.

Personally I found the examples of him building the real web sites to be the most helpful, as they helped me to fix some specific problems I have had with CSS in the past, and taught me quite a few techniques to use in the future to make my sites more streamlined and easy to edit, not to mention all of the other benefits that come with having a standards compatible web site.

Though the book is focused mainly on XHTML and CSS, he also devotes a chapter to making your site accessible to non-standard browsers like PDA’s and cell phones, screen readers, search engines, etc. Though a lot of accessibility is gained by simply coding your site properly with XHTML and CSS in the first place. He also covers the main compatibility problems between browsers and platforms, and provides the workarounds to fix the problems.

Overall this book was extremely helpful to me, and has really encouraged me to code all of my future sites with XHTML and CSS to the best of my ability. If you are a web designer, you owe it to yourself to purchase this book.

July 03, 2003

MT-Textile and SmartyPants

Just installed MT-Textile and SmartyPants for MovableType, and it looks pretty great so far. I was already getting annoyed at having to type out complete link tags and such, so this should help out immensely once I get used to the new syntax.

Testing:

©
®
™
strong
emphasis
citation
inserted text