WebGyver Revisited

Interesting & Unusual Design Resources

Posted by admin on July 28, 2010  |  No Comments

The following links are simply meant to remind me (or you) of some great web resources. Take it or leave it, and if you have any additional links, ideas or suggestions, please let me know.

Web Site Design

Web Site Template – Walk With You
http://www.walkwithyou.me/

ClassiPress – WordPress | Premium Classified Ads Theme
http://wpclassipress.com/demo/

365 Days of Astronomy (unique design approach)
http://365daysofastronomy.org/

AdFlavor (advertising network with a sleek web site)
http://www.adflavor.net/

Blue Sky Resumes (incredibly slick and one-of-a-kind web design)
http://www.blueskyresumes.com/

User Experience & User Interface

Catalyst Resources – Commercial UX Outfit
http://catalystresources.com/

Backgrounds in Web Design: Examples and Best Practices – Smashing Magazine
http://www.smashingmagazine.com/2009/03/31/backgrounds-in-web-design-examples-and-best-practices-2/

Freelance Web Designer: Serj Kozlov (you have to see this…beautiful)
http://www.serj.ca/

Prototyping & Wireframes

iPlotz – Web Application
http://iplotz.com/

FlairBuilder – Windows Desktop Application
http://www.flairbuilder.com/

Axure – Mac & Windows Desktop Application
http://www.axure.com/default.aspx

JavaScript & jQuery

jQuery Tools
http://flowplayer.org/tools/index.html

Animated background Image with jQuery
http://www.catswhocode.com/blog/animated-background-image-with-jquery

Animated Landscape Header with jQuery
http://buildinternet.com/live/landscape-header/landscape-header.htm

Spritely – Dynamic Character and Background Animation with jQuery
http://www.spritely.net/

Photoshop & Graphics

600+ Photoshop Gradients to Download – Best Design Options Blog
http://bestdesignoptions.com/?p=2314

71 Gradient Resources for Web Design – Vandelay Design Blog
http://vandelaydesign.com/blog/tools/gradient-resources/

Textures, Wallpapers and Backgrounds – Desktop Nexus Abstract (p. 4)
http://abstract.desktopnexus.com/cat/textures/4

Free Graphics: Badges and Seals

Posted by admin on January 27, 2009  |  1 Comment

Sometimes you just need a good graphics badge or seal, right? And usually, it’s just a starting point for something you will finish in Photoshop or Illustrator anyway, so you need it for free.

Obviously, when you generate a graphic, it’s up to you to import them into Photoshop or Illustrator and use them as templates or elements of a collage. Or, if you’re totally gung-ho, you could transfer your customized seals and badges to iron-on paper and create your own T-shirts.

Head on over to the WORDPLAY blog, where you can find good summaries of what the Official Badge Generator and the Official Seal Generator at says-it.com (where you can also find the famous Church Sign Generator, the Concert Ticket Generator and the Soft Drink Generator that lets you design graphics of soft drink cans).

Badges: Currently, you can choose from six (6) different badge designs. Once you’ve selected a badge design, you can then customize the text that shows up on the badge, fine-tune the colors and adjust the overall size of the badge.

Seals: Currently, they have 10 different seal shapes to choose from — and since I hate to end a sentence with a preposition, let me just point out that the customization settings for seals also include emblem choices and broder settings.

One word of warning: Once you start playing around with those graphics generators, it’s hard to stop. So if you end up spending an hour or more generating badges and seals for office pranks and humorous fake IDs, don’t blame me.

jQuery 1.3.1 to the Rescue — Thank You!

Posted by admin on January 22, 2009  |  No Comments

jQuery 1.3.1 has been released about 11 hours ago, and it has resolved all of the previously encountered 1.3 issues (see my previous entry).

Having installed and tested this latest release, I’m happy to say that all of the IE7 JavaScript issues my clients were reporting a few days ago have gone away. Apparently, there was a problem when end users accessed web sites that had their domains forwarded & masked. Since doing so will basically place the web sites into an HTML frame environment, a portion of jQuery, specifically dealing with frames, was encountering problems.

At any rate, all is well, the clients are happy, and I want to thank John Resig and the jQuery team for all of their hard work.

jQuery 1.3 not ready for production

Posted by admin on January 21, 2009  |  3 Comments

Editor’s Note: Corrections added (Jan. 21, 2009 / 2:00 p.m. MST).

jQuery 1.3 will throw several errors in Internet Explorer 7 if you are:

1) forwarding a web site and

2) masking the URL.

The jQuery team has acknowledged several bugs and stated on their web site that an updated version (1.3.1) will be released some time this week. As of this morning (January 21, 2009), no updates have been made available yet.

Just in case you’re Google-ing this issue — and you can’t find much, and you think you’’re going crazy — the following JavaScript errors has have occurred on one of my client’s web sites.

1. Access is denied

In the debugger, the following jQuery 1.3 syntax is highlighted:

Here’s the text:

if(document.documentElement.doScroll&&!l.frameElement)

Summary: This is obviously not a big deal, as long as you don’t have picky clients. And as long as your clients don’t forward and mask existing web sites to different domain names.

Solution: For the time being, revert to jQuery 1.2.6 and wait for the jQuery 1.3.1 release.

The following error disappeared after I had stripped the page down to its bare minimum and disabled various IE7 add-ons.

It seems that this particular started disappearing when I disabled the add-ons from GrabNet (which, I believe, are a result of installing the free Orbit file download utility).

Let me make this clear: Although there seems to be a conflict with jQuery 1.3, this particular error went away after I disabled the GrabNet add-ons. However, for reference purposes, I’m leaving the error description in this article. Thanks to John Resig (!) for helping me figure this out.

‘n.props’ is null or not an object

And the debugger highlights the following jQuery 1.3 syntax:

And here is the text:

F=G&&n.props[F]||F;

Floating Menu in JavaScript

Posted by admin on October 10, 2008  |  No Comments

Today, I was searching for some glass scratch remover and came across this little web site. The web site in and of itself is OK, but the implementation of the floating menu is marvelous. Here’s a screenshot of this floating menu in Firefox:

The idea is simple but surprisingly, only few web developers employ it: Provide always-available access to frequently used portions of the web site or the web page. That prevents the web design from getting cluttered with “BACK TO TOP” and/or duplicate link buttons.

And because I was in a good mood, I took a 15–second screencast as well, using the free software Jing from TechSmith.

JavaScript For Validation can be (almost) painless

Posted by admin on September 29, 2008  |  No Comments

Any web developer who gathers information from actual human beings knows that there is always somebody who

• a) might be new to the whole Internet thing and doesn’t understand what they need to enter on web forms,
• b) likes entering weird stuff just because they can, or
• c) thinks they can exploit some kind of vulnerability on your web site by attempting to enter SQL or XSS injection code.

Obviously, the best and final defense (in my somewhat biased opinion) takes place on the back-end in your ASP, PHP, Java or .NET code.

However, the folks at JavaScript Coder and I believe that you can save a lot of time and trouble for about 90 percent of your end-users by helping them along with a little bit of front-end, client-side form validation.

Aside from jQuery (written by John Resig), the form validation script from JavaScript Coder is is probably the other JavaScript library I wish I had written myself. However, this script library does such a great job at validating form input, I simply keep re-using it from one project to the next.

They have excellent examples and documentation for this form validation script, and so I’ll restrain myself from repeating that. Let me just note that this script considers numerous real-world scenarios AND allows you to append your own custom validations (e.g., matching passwords).

In a nutshell, with this form validation script, you can check the following:

• required fields have a value (other than blank spaces)
• the maximum and minimum lengths of text input fields are enforced
• only specific types of characters are entered (alphabetic, numeric, alphanumeric, with & without spaces)
• the input matches your regular expression pattern
• at least one radio buttons is selected
• a specific OPTION from a SELECT element is not selected
• e-mail addresses are in the correct format

Considering the price of this JavaScript library ($0), this is an awesome bargain.

Make PHP select the correct Select option

Posted by admin on September 25, 2008  |  No Comments

Sometimes you just want to select the correct option from a drop-down field (aka Select element in an HTML form).

If you have a Preferences or Account Setting page in your web application, or something similar, chances are you sometimes need to display the correct option in an HTML form Select element. For example, if the end-user selected a specific country during the original registration process, you want to make sure that the correct country gets displayed in the Account Settings page, right?

And sometimes, you just have a pre-determined number of options in a select (or drop-down) field. For example, countries, states, regions or products. Not everyone has all of those option values and descriptions (i.e., text) in a database, and so you end up having to select the correct option as soon as the page has loaded.

The solution that I have used in this situation works really well if you get the value (for example, the name of the country) from PHP or ASP and want to plug it into your JavaScript code. We are using getElementById(), so your form elements need to have an ID tag with a value.

Obviously, this also requires a modern web browser that can handle the associated JavaScript. Unless you’re several years behind updating your web browser, however, you should have no problems.

The approach is fairly simple, and the only tricky thing is to remember the proper syntax. Here is an example with PHP and JavaScript:

That’s it.

Does the Search feature need a button?

Posted by admin on September 9, 2008  |  No Comments

Perhaps most of you learned readers consider yourselves Internet savvy. When you end up at a web site with way too much content — or if you simply want to fnd something quickly — you look for the Search box, enter your search term, press ENTER and off you go. No worries, and probably 90 percent of the time, no second thoughts either.

Now consider this conundrum: Surrounded by people who think that being able to find stuff on Google should be a manadatory job skill, I was tasked with revising the search feature for a human resouces (HR) related web application.

What’s the big deal? Well, for starters, the typical end user is not too computer literate, aged somewhere between their late 30s and 50s, and eight out of 10 are female HR directors.*

* Before you complain to me and accuse me of being a completely biased male chauvinist, let me make absolutely clear that I, as a person, have nothing negative to say about the demographic sampling I just described. And I am in no way insinuating that everyone who falls into this category is experiencing technical difficulties. However, as several years on the job have taught me and my fellow-workers (the majority of whom are female, by the way), seven out of 10 clients who call in about technical issues a) fall into the category I just described and b) are having “higher than usual” technophobia. That, however, is another story altogether.

Back to the subject at hand: How do you revise a web application’s search function without intimidating the people who pay to use your product? We used to have a straightforward and simple process to search either by first or last name. You enter the name, then you select one of two radio buttons (first or last), and then you click Search.

However, as people progressed in their use of the web application, they also realized that this was limiting their abilities to search for specific employees in other departments or locations.

So in the process of re-designing and re-programming the entire web application, I came up with something relatively Web 2.0 (see screenshot below). The idea was to provide an extended set of search options (first name, last name, department, division and location) into one compact search box.

Those end users who aren’t too familiar with this kind of approach are supposed to click the info icon for more information. And if you’ve changed your mind about doing a search, you can close the search box by clicking the “X” in the upper right. (By the way, simply clicking anywhere outside the search box will hide the search box, too.)

So far so good: It’s a great improvement over the previous version, that’s for sure. Yet as simple as it seems, there is some serius opposition to change within the organization. “What about the Search button?” they ask.

Hmmm, good question. Personally, I think we could easily cram something into the search box, if we wanted to. Then again, we’ve wanted to avoid having too many controls in an already densely populated area of screen real estate.

Other people have even implemented search features that start crunching and returning results as soon as you start typing text into the search field. For example, Peter deHaan at the flexexamples blog uses the “type and wait to search” approach:

Although I’ve gotten used to that kind of funky-ness, I have to admit that it used to creep me out when I first encountered it. Am I doing the same thing to the end users who will be using my web application?

Try . . . Catch in JavaScript

Posted by admin on April 19, 2008  |  No Comments

Note to myself: The try / catch statement only works in web browsers that are capable of running at least JavaScript 1.3.

If you try to run “try / catch” statements in older web browsers, you get a JavaScript message (or, as your end users will point out, “a browser error”), stating something the lines of: try is a reserved identifier.

FYI:
IE6 and IE7 support JavaScript 1.3.
Firefox 1 and Firefox 2 support JavaScript 1.5.

If you want to make absolutely sure that your “try / catch” statements don’t cause errors for those end user’s with older web browsers (yes, they do exist), you could use the following statement in your < script > tag:

language=”JavaScript1.3″ . . .

Unsure about your web browser’s JavaScript capabilities? Check out The language attribute of JavaScript, run by the friendly folks from JavaScript Kit, which contains JavaScript code to test versions up to 2.0.