Adobe Captivate

I've recently had to do a great deal of help files for a new client. They wanted a pop-up window on every page of their website to walk a user through filling out complex forms that were required for information gathering. I quickly found that creating these pop-ups was taking me longer than completing the actual website. It is extremely difficult to document every field on the form and explain conditional fields to a user without walking through the process in great detail with screen shots and text. Our site testers hated the pop-ups. They were large and required a lot of editing of images and text.

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.

 

Posted on Mar25, 2010 in Captivate | 1 comment

IE6 is evil!!

Most UI developers consider IE6 evil. The CSS support is less than ideal. In fact it just plain sucks.

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!!

Posted on Oct16, 2009 in jQuery | Leave comment

CSS Frameworks

I've used and supported many CSS Frameworks. There are quite a few out there that have huge fan bases and very active participants.

Here are some of the more popular ones:

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".

Posted on Oct05, 2009 in css | Leave comment

Fun with Photoshop Actions

You can do just about anything to images with Photoshop. Here is a great list of Actions to make your photo manipulation a little quicker.

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

Posted on Sep13, 2009 in Photoshop | 5 comments

Web Optimization Guide

Just about everyone who surfs the web these days has a broadband connection to the Internet. So why bother spending a lot of time making an optimized web site.

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.

Posted on Aug28, 2009 in css,Optimazation | Leave comment

CSS Sprite - Revisited

I recently had to redo my CSS sprite image for links. The requirements were just a little different when it comes to the link types and the line-height was smaller too. So I used 12x12 pixel icons instead of the standard 16x16 pixel size. Here is the resulting sprinte image file.

Small Sprite icons

I created a small example site for downloading.

Hope this is useful.

Posted on Aug19, 2009 in css | Leave comment

Great jQuery Slider

I love jQuery! There are some amazing plugins that people have put together to make a website more dynamic and easy to use.

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.

Posted on Aug18, 2009 in jQuery | Leave comment

20 Great Design Sites

InspiredMag posted an article about 20 design blog sites that are looking for freelance writers. I thought it would be a great list for people to get inspiration from. I have several of these on my list of RSS feeds. But I added a few more today.

  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!

Posted on Aug14, 2009 in | 1013 comments

I love icons

I love to find new icons. I have a huge collection of icons that I have gathered over the years. Some I have bought and some I have downloaded for free.

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/

Posted on Aug12, 2009 in icons | Leave comment

CSS Sprites

I'm not going to spend a huge amount of time explaining what a CSS Sprite is and how to create them. If you have found my site via a search engine on the keyword of CSS Sprite, then you have already visited several other sites on the topic. There are a lot of sites that explain the process already. Here are a few that were helpful for me:

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.

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

sprite icons

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!

Posted on Aug11, 2009 in css | 574 comments