I was greeted with the first part of the title today when I click on a Goggle link for “Discussing: A Better Image Rotator: A List Apart”. Was it because there was a page or script error? Did someone forget to do redirects? I’m not sure, but It looks as if the content has either moved or been removed. In either case as the W3C says, “Choose URIs wisely”.

Few things are more annoying than going to your favorite shop and seeing that the shop has closed or moved without giving its new location… The shop owner may have had a lot of good reasons to do this, but invariably the cause for this unpleasant situation is lack of good planning and management.

Same goes for Web resources… “W3C Tip of the day, Choose URIs wisely”

Since I learned of the W3C from A List Apart it surprised me to see them make such a silly error. There has been much discussion of ALAs new design in the blogoshere, most of it dealing with the giant page size and the large unused space under the logo. While these design and usability issues are very important, not keeping your indexed URIs current is just bad web etiquette.

With AJAX and other asynchronous web applications right around the corner, the question we must ask ourselves as designers is – how are we going to move our interfaces towards a more user-centric paradigm (which is fully supported by these emerging technologies)?

The web is changing, and it will come in several phases. The first step is already going on with site likes Flickr, Google Maps, and Del.icio.us which offer personal and community functionality. These AJAX based web apps are some the best sites to ever hit the web. Still, as far as presentation goes, you’re still not seeing the next generation of websites. As Emily Chang from Artcodes states, “For me, the promise of a “new” web technology is the ability to 1) simplify my life as a blogger/web publisher/content producer and 2) to enable my site visitors to have greater control over the manner in which they view both my site content and the means by which the content comes to them (via my site, RSS, email newsletter, etc).”

Backbase, Protopage and Measure Map are the next generation of web apps. In these AJAX and Ruby On Rails applications, the user gains another level of control over their experience. On-the-fly personalization of your design and content layout are already here. If you want a great explanation of what the next foreseeable frontier on the web is see Richard MacManus & Joshua Porter article on Web 2.0 for Designers. Its time that web designers stop thinking about about website design and start thinking about design.

There are many CMS downloads out there however, as a designer I find many of them hard to use and sometime nearly impossible to style. Read on because relief is on the way.

MuraveyWeb is here and it’s free for the downloading. When you look at the demo it may not look like much but, it is built on the Ruby on Rails web framework, and for an early release has quite a bit of functionality. Dmitry V. Sabanin is the author of this app and his intention is a lofty one.

His aim is to develop a system where a developer can focus on information architecture, user experience and the styling of the site. Over the next week I’ll be testing the system and let you know how it goes.

Search boxes and results seem to be a natural extension of the capabilities inherent to AJAX. If your blog is running Movable Type (MT), I found a great example of how to implement an inline search using AJAX, complete with a progress bar and same page search results.

Jeff Watkins wrote a great AJAX web app to display your search box, and results in a hidden div which slides down when you hit the search button at the top of the page. I found this to be a very good use of in-page AJAX. The reader doesn’t have to go to another page to see the search results and they see the progress bar which gives them an indication that the search is taking place. Additionally, having the search box hidden at the page leaves more room for at the top of the page for other critical navigational elements. Well done!

Have you ever gone to a website from your favorite search engine looking for some information you need only to find it, and the text is unreadable? Low contrast websites have gone from the realm of art and design sites to the mainstream at an alarming rate.

As a web designer for nine years, I have seen many web design trends take off and die. I’m hoping low contrast design takes the latter path. As a designer, I never thought I would go the way of Nielsen, but readers do go to websites for the content. If they cannot read it, they will leave. Or worse yet, they have to copy the content from your webpage and paste it into a text editor so they can read it.

This construct is particularly prevalent in tableless CSS websites. My guess is this is due to Zeldman’s last redesign. He was one of the first that wrote about his low contrast design. His low contrast model worked because he had a prominent link to a style switcher for a high contrast view of the entire site. Many less experienced designers miss this simple trick which makes the site readable.

While every web designer may not have access to different platforms and browsers, they should realize that the website they see on their monitor may not be the same view that everyone has. If your design looks low contrast on your monitor, it may be unreadable on a laptop.

Fortunately, many of the best web designers are now into the new movement of large readable text. Sites like Blogger designed by Douglas Bowman and 37 Signals designed Jason Fried are two excellent examples of high contrast readable websites.

If you’re website, or a site your designing for a client contains content : ) please make it readable.

How would you like to work for several years on a volunteer basis developing an open source product only to be thrown off the project for another case of corporate greed? I recently opened an email from the Web Standards Group to find out that Mambo will have a very different face in the coming days.

Unfortunately, Miro the Australian company who holds the rights to Mambo has decided to take control of the future development goals out of the hand of the core developers and try to turn it into a profit-making venture.

If you’ve seen the Corporation you’ll know this is because corporations only exist to make a profit and this is what drives all of their decisions. This is a classic case of corporate greed.

What can you do about this injustice? Stop using Mambo and stop suggesting it to your clients. Don’t support corporate takeovers of open source software. For further information visit The Death of Mambo Article.

For an example of good uses of open source, see Emily’s post on open source software.

How would you like to automatically ping 49 services from your blog’s control panel with one click? I found a new ping service today will do just that.

I was searching Technorati this morning for ways to ping more sites, and came across an article at Web Traffic Ideas on a new ping service called Pingoat. I did a post and received almost all of the pings immediately.

King Ping and Pingomatic are great services for blog promotion however, the new kid on the block is Pingoat and they will increase your pings by over fifty percent if you currently use King Ping or Pingomatic. While Ping-O-Matic and King Ping only cover 20 and 18 services respectively, Pingoat will ping 49 services at one time! Pingoat also makes your posting easier by supporting XML-RPC pings. This means you can add Pingoat’s link to your blog applicaitions control panel and ping 49 services with one click.

Also, don’t miss their resources section with a long list of blog search engine submission links.

How would you like to decrease the load time of your bloated CSS file by up to 85% in less than five minutes?”

I recently found a link to fiftyfoureleven.com and their great article, ”The Definitive Post on Gzipping your CSS. When I saw this the first time I almost fell out of my chair with excitement. The dream is real — you really can cut the load time of your CSS file by more than half with just a few lines of code — and you don’t need a computer science degree to do it. What do you need?  Either PHP or Apache. If PHP and Apache don’t make any sense to you then hang on for a few days as I’ll be posting a how-to of my own that expands on these for newbies.  If PHP and Apache aren’t greek to you, then read on.

Before implementing it, please refer to the original article listed above. This is just a short how-to. There are many implications so please read the source article.

There are basically two methods to accomplish this amazing feat. The first involves two simple steps.

Method 1

Step 1Include the following piece of code at the top of your CSS page.

Step 2Rename your .css page .php. That’s it — you’re done!

Method 2

Step 1Create a .php file with the name “gzip-css.php” with the following code in it.

Step 2Create a .htaccess file with the following code in it.

Now just upload these two files to your CSS directory. That’s it, you’re done!

As stated above this is just a primer.  Please refer to the original authors’ sites for a more complete understanding of this complex subject.

I’ve tried both of these methods out on our own site and they both worked. Since I’m using a CSS filtering system to filter for rogue browsers the second method worked best as I have multiple style sheets in my CSS directory.

The Proof is in the Load Time

I implemented this on our site and was amazed with the results. Before compression, our main stylesheet was 23,656 k and after the five minute compression process our stylesheet was 3,269 k for an original file size reduction of 86.26%.

From a user experience standpoint this may be one of the least talked about and most important implementations any web designer/developer can do for his or her website or clients’ website. After all, your CSS and your site content are a great portion or your overall load time.

Please check back as I have several articles planned for this subject. Next up is compressing all of the content from your website or blog.

Special thanks to the original author

Have you ever wondered how websites change the color of their input fields when you click on them? Here is an easy to use method you can implement in less than Five Minutes!

All you need to do is add the following code to your style sheet and change the colors to match your what ever you what.

That’s it!

input:focus, textarea:focus, select:focus {

border: 1px solid #666;

background:#ff9;

color:black;

}

Have you been trying to add a progress bar to your contact form? Me too. After several days of searching Google and trying several different solutions, I finally found a great AJAX contact form that anyone can implement.

If I were a javascript and ruby expert I’m sure this would have been easy however, at this point these are not my areas of expertise. There are several solutions available if you have more programming experience but, the one I used was done by Jeff Pipas and his well explained example can be found here. He has all of the files you need to do this yourself and a very detailed explanation of all of the parts.

The only problem I ran into was in the sendmail.php file. In the send mail function the first two variables were using single quotes. My server needed all of them to be in double quotes. Beyond that the script worked perfectly. Big thanks to Jeff for his great AJAX contact form! : )

I’ve always loved the page transitions in flash but, being a devotee of tableless CSS, I’ve never used them in my own, or my client’s sites. In steps AJAX. There are many ways to fade object in AJAX, but how do you apply that to your web page? Here is a simple technique that anyone can use.

To illustrate the concept, click on any link on my site and go to the next page. The idea is a simple ul li hover class on the link going to the next page, which uses a simple AJAX fade technique. The key is to use the same color for the rollover and the incoming page fade.

The combination makes for a smooth webpage transition, and gives a clear indication to the reader that the link connects to the content. This could be a very valuable navigational tool, whether used as a page-to-page link or as an internal link.

On a recent project I found a need to apply a single style rule to Safari. Initially I turned up a great link to dithered.com which has all known CSS filters. Unfortunately, I could not locate one that filtered for Safari only.

After quite a bit of searching all I turned up were several posts looking for the same thing or even a few that said filtering for Safari was impossible. After a few more pages of search results I came upon a link to gunlaug.no which had an article titled ”CSS Filters – not recommended but…”. This turned out to be an excellent system (hats off to the author) which isolated Safari perfectly!

Be sure to read the article carefully as the entire top of the hack needs to be there to filter for Safari and not affect other browsers. This progressive filtering system must also be sequenced exactly as laid out in the article.

The only issue I found was that the @media all and (min-width: 0px) line caused a problem with CSS validation. I took the entire Opera hack out and it still worked fine for Safari without affecting other browsers.

The Code (please visit the above listed link before using)

In the city, who doesn’t love their corner store? For me it’s Pops, or as it’s officially known, “The Moscone Deli”. I seem to stop in there every day or so for something I desire for that evening. When I first moved into this space in SOMA, I wandered out of the back of my building looking for some food. Right around the corner I happened onto the Moscone Deli. I was looking for some bread and cheese, and their selection was rather small by my former suburban supermarket standards, but I found what I wanted and headed to the counter.

There stands the original Pops or, as he was later dubbed, “Cool Pops”. Why so cool you ask? Well let me tell you, this cat was cool – mid sixties, black wrap-around shades, Armani Exchange jacket, small driving hat and a warm smile to die for. As we both stood there in our black sun glasses and Armani we gave each other one of those cool movie nods, like “hey you’re cool too” – and I exited.

The next day I came by with my girlfriend and Pops perked up even more. Putting on the charm and giving us some free candy as we left. Over the course of the next few months we frequented Pops often. One day he told us, “you are my favorite couple”. I’m not sure whether or not that was true, but we always enjoyed the great smile and the free candy : )

One day about four months ago Cool Pops was gone. We went in there day after day and he was nowhere to be found. We were sad. Even worse though, Cool Pops was replaced by Shaky Pops. He might have also been called, Suspicious Pops, Pops From Another Plant, or We Don’t Give Change Pops. Don’t get me wrong, Shaky Pops is a great guy. As with any place you frequent in the city people warm up to you over time. No free candy though. : (

Chapter three started about a month ago. The reign of Colonel Pops. Imagine a grey balding military haircut on a five foot two frame and no tolerance for anything. He looks as if he just stepped off of a tank in the desert somewhere. He also triages customers. On more than one occasion I’ve heard him mutter something like, “get this measly lottery ticket out of my face” to the sandwich guy. Who by the way executes this order, immediately whenever he hears it. Anyway, as with all of the other Pops, Colonel Pops has also warmed up to us.

Do you see a pattern emerging here? What’s next? Crazy Pops, Sarcastic Pops or something so weird that I can’t even imagine it? Personally, I’m hoping the rule of threes applies here and the Pops curve will start heading back up again.

I hope one day, Emily and I are sitting on the beach in the Greek Islands, and we look over next to us we see Cool Pops basking in the sun he deserves. Good guys are hard to find in this world, and I’d love to buy this one a drink!

When I first moved to the heart of the web world in SOMA a year ago today I wasn’t really thinking too much about the boom and the bust that had gone on out a few years ago. I was fresh from freelancing in New York, and as an independent had not suffered the bust. I had several contracts with bigger firms and the work just kept coming.

From my eleventh floor perch I can see Organic, Six Apart, Adaptive Path and Frog Design out my live/work loft window. When I walk outside it’s a different world. My neighborhood and most of San Francisco has a very large population of homeless. There are over 14,000 on any given day, so it’s a very common occurrence to run into a lot of homeless on a daily basis.

On my first morning in my new place I walked across the street to Lee’s Deli to grab a cup of coffee. There is a small square there with fountains, trees and places to sit. At ten in the morning the sun hits the square perfectly between the buildings, so it’s a great place for a morning cup of love.

As I was sitting there that first morning in San Francisco I noticed many cool, normal and unusual people walking past me on their morning routine. One guy really caught my eye though. As he scurried by me in his classic geek outfit, complete with: oversized brown plastic glasses; a blue blazer which didn’t match his shirt; pocket protector; and a laptop bag, he made a bee line to the building’s public ashtray. As he put on the brakes from his mad scurry, he quickly reached down into the ashtray and start filling up his laptop bag. I thought to myself, “whoa dude, watch the hardware”. Then I started to notice the context clues and realized he too was homeless. Wow a homeless geek right in the heart of SOMA.

I’ve spent most of my adult life around homeless people, and have risen from a similar place myself, but this was a new sight to me. That’s when I really realized the havoc that the bust must have been.

Over the course of the next few months I would see this guy all of the time. Checking phone booths for change, emptying the ashtrays and sleeping in the sun by the SBC building. Always a stark reminder of what could be right around the corner for any of us.

He never panhandled or spoke. This guy was on a daily mission, going from one location to the other. He was always on the same route and would check the same newspaper stands and phone booths sequentially.

One day about a month ago he disappeared, and I haven’t seen him since however, he’s never too far from my mind. I hope he’s back in the work force and I run into him at a client meeting one day.

It resizes, it transitions, it fades in and out and it’s not flash! The new AJAX slideshow on the homepage of my site comes to you courtesy of Scott Upton at Uptonic. This smooth, easy to use delight, is a great toolbox addition, for anyone who considers themselves part of the new breed of AJAX designers and developers.

Download the slideshow here.

This outstanding AJAX script was originally coded by, Travis Beckham of Squidfingers. Updates were made by Scott, and made available to us all via his example at Couloir. I’ve found it very easy to use however, at this point I don’t have it hooked up to my blog for auto-updates. I’m working on this now, and will post when it is done.

This is one of those AJAX apps that clients will love and it is very easy to implement. Give it a try! Feel free to take it from my site or from Scotts.

As a web designer I sometimes work with bad photographs (from clients) every day. After doing this for nine years I’ve come up with three simple suggestions that someone who wants to shoot photographs can try.

• The Rule of Thirds – This technique is popular amongst photographers and artists. It works like this: Imaginary lines are drawn dividing the image into thirds both horizontally and vertically. You place important elements of your composition where these lines intersect.
• Find different heights to shoot from
• Make sure the sun is at your back

These suggestions are not end-alls, and many great photographs are taken that completely ignore one or more of these techniques, but if you haven’t given them a try yet, why not?

Remember the page curl? How about graphical rounded corners, and of course the current omni-present background gradient? Well, here comes the fade. While this is not a new subject since Basecamp came out but, the The Fade Anything Technique (FAT) will make this very interesting technique accessible to everyone who designs websites.

While Jason Fried of 37 Signals came up with The Yellow Fade Technique (YFT) my new favorite is FAT. This great app was developed by Adam Michela of Axentric. You can read his great post about it here. I’ve started using the technique on my own site and it is currently being used on several of my client’s beta projects. So far we have had great feedback from our clients and beta testers. Give it a try and enjoy!

Whether your cabbie has a shaved head and is playing loud smooth jazz, or he just came back from Greece and is giving you a diatribe on the Iranian nuclear issue from the European perspective, you must love SF cabbies.

As a transplanted New Yorker the cabbies in San Francisco are a breed among themselves. In New York, most of my day time cab drivers never spoke to me at all, almost as if it was an unwritten rule note to speak to busy looking patrons during sun-time. Except of course if you found yourself going from Manhattan to Brooklyn in a Yellow Cab. In that case you had better have your own detailed instructions on how to get to your designation, or you will find a very chatty driver.

San Francisco cabbies are the polar opposites. I’ve rarely had a silent cab ride here, in fact sometimes I truly miss the peaceful long, “I’m moving but I don’t have the think about anything experience”. You can’t really count on that here.

Don’t get me wrong though, they are friendly. From what I’ve been told tips here are not very good so, they may be so chatty so there connection factor goes up and thus their gratuity. OK, maybe I’m a cynical New Yorker and the cabbies here have just chilled out as much as I have since arriving in the idyllic mental and physical space of California. 

By far the most interesting current cab story in San Francisco is the mystery cabbie. Who is the mystery cabbie? The police have been looking for her/him for months. Apparently, they have a master key to all of the Yellow Cabs in the city. Are they stealing them? Have they been wreaking havoc? No, they take a Yellow Cab and drive patrons around for a few hours and then drop it off somewhere. No complaints by customers, they just pick up passengers and drop them off. Mellow right?

Back to my Greek driver/friend from this afternoon, when the ride started, I really just want a quiet ride over to Height. What I got was a very intelligent talk about what the U.S. was doing with Iran. He said, “why will the U.S. not let Iran have nuclear power when we are on great terms and just signed a pack with India, which has many nuclear weapons”. Just as we were really getting into it the ride was over. Haight and Cole was the end of that discussion. Instead of being upset that I didn’t get my quite ride, I almost felt cheated that the discussion came to no conclusion.

That’s a great experience for nine bucks, considering I’ve been to movies recently that I felt totally empty from after exiting.