There has to be an easier way!!!

In walks Adobe Captivate. I know this is not a new product. It has been around a while and has had several names through the years. I've used it for personal projects. A company I worked for in the past used it to create testing for their classroom training. It is a slick little product.

But I have never used it on a client site and never to the scale required for this project. So I decided to do a little training over the weekend on Captivate to see if I could convince the client to change the help pop-up format.

I used a Lynda.com training session that literally took a few hours of time to go through. There were so many features of the software that I didn't know about. Features that would have taken weeks to learn through trial and error. Talk about money well spent.

Now I knew the best way to approach the process. Prior to starting the help files I created a custom skin, a layout template and a common library of items to use on every help file. Then in a matter of 30 minutes or so I was able to create my first help file. I choose a complex form that had a lot of conditional form fields, just to see if I could do it. Not only was it an easy process, but I was able to visually show a user all of the possibilities that would happen depending on how they filled out the form. The end product was a three minute flash file that was easy to add in a pop-up.

Monday came and I was able to demo it in the morning status meeting. So did they like it? Hell ya they did! Some poor sap lost their "Employee of the Month" rockstar parking place. Ok.... slight exaggeration.

I ended up training a few of the client's employees on the product. Soon they were handing us completed Captivate files for all of the pages of the site that had been completed and signed off on. Which reduced the work of the high dollar programmers and involved the client more in the project.

The next round of site testing went much smoother. The testers loved them.

Overall it was an easy, inexpensive solution to a difficult problem that everyone was happy with.

So there are all kinds of sites dedicated to IE hacks and Microsoft bashing. But since 2001 (when IE6 came out) Microsoft has improved their browser. In fact the current version 8 actually supports all of the CSS that 6 was supposed to. Oh wait that was a little Microsoft bashing. Sorry.

IE6 is still being used by a huge percentage of people. It varies depending on the audience of your site. But as much as 40% is not that unusual. This is just crazy. The problem is that the average computer user doesn't know how to update it to a new modern browser. In fact they don't even know that what they are using is "old and busted".

So as a UI developer there are several things that you can do to combat IE6.

1. You can code a site to use CSS that was only supported by IE6 and forget about all the cool new innovations over the years since 2001.
2. You can create different CSS for IE6 and use JavaScript to detect the browser and load whatever is required to display your site properly.
3. You can hope some rouge developer out there creates a virus that goes and deletes IE6 from all the computers around the world.
4. You can educate the users that come to your site that they are using an old browser.

Here at UIFreak we have decided to take the higher road and just do number four.

To assist with this we use an out of the box jQuery plug-in that was created for just this one purpose. It is called jReject.

The plug-in took a total of 5 minutes to implement, like most jQuery plug-ins. The hard part was finding a computer that still had IE6 on it to test the site. The average computer geek hasn't used IE6 in years. So we ended up having to create a clean Windows XP virtual to do the testing. But now we have a nice solution to tell the person that they are using a really old browser and provides links to several modern browsers to let them upgrade.

Now if every site had a similar solution in place, we could rid the Internet of this obvious evil!!

Here are some of the more popular ones:

• 960
• Blueprint
• BlueTrip
• Tripoli
• YAML
• YUI

All of them have good and bad points in my opinion. I think for a programmer who isn't familiar with CSS, a web shop that cranks out sites and wants to insure consistancy between them or just someone in a hurry, then they are a great idea. But for a serious UI designer/developer i think they are overkill.

The typical structure of a CSS framework is:

1. CSS reset - resetting every HTML tag (or using Eric Meyer's reset) to basically zero out everything.
2. Typography - Setting every HTML tag that you just zeroed out to something specific.
3. Grid - a series of classes that can be used to create a newspaper-like structure for layout.
4. Forms - defines classes or resets the basic HTML form tags to have a specific look.
5. Extras - Framework specific styles.
6. Plugins - Themes, icons, fancy text .... etc.

I'm a much bigger fan of the 1KB CSS Grid or the Malo framework. Honestly I just want to have some reusable layout classes. I will adjust other things as needed instead of doing everything upfront. I don't want to scan through 100's of CSS classes trying to figure out what is messing up my design. I believe "Less is More".

50 Time Saving Photoshop Actions for Enhancing Photos | Web Design Ledger

Is the page size really important? So what if my web page is 250k instead of 50k. That is only a few seconds difference on a good connection. Right?!

I hate it when web programmers think this way. WAY back in the old days a boss of mine handed me a 16 page document that explained the concept of this new thing called HTML. This "company" called NCSA just put out a product called Mosaic and wanted everyone to download it. They changed the Internet as we know it. At the time 14.4 baud modems were new and getting a PC to connect to the Internet usually required a call to tech support.

A lot has changed since then that is for sure. There are a lot of languages you can use to create a website (ASP.Net, PHP, Ruby on Rails and many more) but the final output is HTML.

The big sites like Google spend as much time optimizing their sites as the do actually creating the code to render them. It saves them millions of dollars. What you didn't know it could save a company money? Well lets think about that a minute. The main Google web page is under 30k and millions of people hit that site every day. So they have to have the severs and the bandwidth to handle that. Imagine if the site was a monster 150k in size and had all kinds of bells and whistles. Every person who comes to the site to search would have to download that page prior to doing anything. Which means that Google would have to have extra servers and bandwidth to handle this traffic. Which costs a lot of money. By making a their main page smaller they are saving a lot of money. So by saving money, they make more money. Basic business concept.

Now Google is kind of extreme. Very few website have that kind of traffic. But every business owner would like that kind of traffic. So why not spend the extra effort when building a site to make it as fast as possible.

Here are a few links to help out.

• Ultimate Guide To Web Optimization (Tips & Best Practices)
• Let's make the web faster

I created a small example site for downloading.

Hope this is useful.

Sliders are very popular right now. Most are made for HTML or for Images. But this slider allows you to put anything in the content area. So they called it the AnythingSlider.

Here is a list of features:

• Slides are HTML Content (can be anything)
• Next Slide / Previous Slide Arrows
• Navigation tabs are built and added dynamically (any number of slides)
• Optional custom function for formatting navigation text
• Auto-playing (optional feature, can start playing or stopped)
• Each slide has a hashtag (can link directly to specific slides)
• Infinite/Continuous sliding (always slides in the direction you are going, even at "last" slide)
• Multiple sliders allowable per-page (hashtags only work on first)
• Pauses autoPlay on hover (option)
• Link to specific slides from static text links

Well worth the download.

1. Web Design Ledger
2. Theme Forest
3. AE tuts+
4. Fuel Your Creativity
5. Fuel Your Writing
6. Tutorial 9
7. Design Reviver
8. Color Burned
9. Inspired Magazine
10. UX Booth
11. The Floating Frog
12. Freelance Switch
13. Freelance Folder
14. Make Use Of
15. Mashable
16. Think Vitamin
17. Smashing Magazine
18. 1st Web Designer

A few of the sites shared a URL. So I only list 18 URLs.

Enjoy!

I think that making an amazing image at such a small size is an art in itself. A skill that even the most acomplished designers don't always have.

I recently found a link from one of my RSS feeds that has a massive collection of icons. Here it is:

http://webdesigntuts.com/resources/the-icon-directory-for-designers/

• A List Apart: Articles: CSS Sprites: Image Slicing's Kiss of Death
• CSS Sprites: What They Are, Why They're Cool, and How To Use Them | CSS-Tricks
• CSS Sprites: How Yahoo.com and AOL.com Improve Web Performance
• Creating easy and useful CSS Sprites | Css Globe

But what I like to do is provide CSS and files that are useful to everyone immediately. So here is my most used CSS Sprite project. It basically adds a small icon beside different types of links. Here is an example of the ten different type of supported icons.

• word.doc
• excel.xls
• powerpoint.pps
• adobe.pdf
• file.zip
• RSS
• External Link
• Contact
• VCF
• Site Map

Here is the image. It is a small 4k file:

Here is the CSS:

/* Links with icons */
.noicon {background:none;}
.rss {background:transparent url(images/sprite.png) no-repeat right -40px;padding-right:20px;}
a[href ^="http://"], a[href ^="https://"] {background:transparent url(images/sprite.png) no-repeat right -140px;padding-right:20px;}
a[href ^="mailto:"] {background:transparent url(images/sprite.png) no-repeat right -1px;padding-right:20px;height:16px;}
a[href $='.zip'] {background:transparent url(images/sprite.png) no-repeat right -120px;padding-right:20px;}
a[href $='.pdf'] {background:transparent url(images/sprite.png) no-repeat right -60px;padding-right:20px;}
a[href $='.doc'], a[href $='.docx'] {background:transparent url(images/sprite.png) no-repeat right -100px;padding-right:20px;}
a[href $='.xls'], a[href $='.xlsx'] {background:transparent url(images/sprite.png) no-repeat right -20px;padding-right:20px;}
a[href $='.pps'], a[href $='.ppsx'], a[href $='.ppt'], a[href $='.pptx'] {background:transparent url(images/sprite.png) no-repeat right -80px;padding-right:20px;}
a[href $='vcf'] {background:transparent url(images/sprite.png) no-repeat right -154px;padding-right:20px;}
.sitemap {background:transparent url(images/sprite.png) no-repeat right -170px;padding-right:20px;}

You should be able to save the image and copy the CSS and use it immediately.

I've also created a small demo HTML page that you can download and see in action. The .zip file also includes the Photoshop file I used to create the final image.

Feel free to use where ever you want. If you want to create a link back to this page or my site, I'd appreciate it. But certainly not required.

FYI - The icons are the standard 16x16 pixel size. So your line height must be set to be at least that size. Also The CSS selector used in most of these links, is only supported on "modern" browsers. IE6 is not modern!