Archive for September, 2008

& a p o s ; in IE

Posted by admin on September 30, 2008  |  No Comments

Does not work. At the time of this writing, Internet Explorer 7 does (still) not expand XML-based character entities, such as ', <, > or ".

That may seem fairly obvious and perhaps even normal to the XML mavens out there, but I still keep forgetting from time to time that some web browsers may neither be able, willing nor ready to interpret those “friendly” charcter entities.

  • Instead of using ' (apostrophe) in your XHTML markup, use: '
  • Instead of using " (quotes) in your XHTML markup, use: "
  • Instead of using > (greater than) in your XHTML markup, use: >
  • Instead of using < (less than) in your XHTML markup, use: <

For situations in which you receive an RSS feed or other XML-based content, it would be best to replace the “friendly” character entities with escaped characters or the decimal character entities I’ve listed above.

In PHP, for example, you would do something like this:
$text = str_replace(‘'’, ‘\”, $text);

In ASP, for example, you would do something like this:
text = replace(text, “'”, “'”)

Let me know if you have any additional insights into this subject. Thanks!

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.

Wacom Graphire 4×5 Graphics Tablet for $39.99 (refurbished)

Posted by admin on September 26, 2008  |  No Comments

JR.com is currently selling refurbished Wacom graphics tablets for $39.99.

The Wacom UCTE440 Graphire 4×5 Graphics Tablet is a 4×5 inch graphics tablet that includes Adobe Photoshop Elements 3 and more. It also includes the Pressure Sensitive Pen & Cordless Mouse, is ideal for drawing & painting and comes in metallic blue.

The graphic pen with eraser has 512 levels of pressure sensitivity for natural brush control. Flip it over and it acts as an eraser in such software programs as MS Word and Photoshop. By the way, the tablet comes with free copies of Color Efex Pro 2 GE, Corel Painter Essentials 2, Evernote Plus and JustWrite Office 4.

According to Jr.com’s web site, This Wacom UCTE440 has been Factory-Refurbished to perform as if it were new. It comes with a 1-Year Warranty from Wacom.

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.

 

CCI = Color Clash Incidents

Posted by admin on September 24, 2008  |  No Comments

When I read Kevin Hale’s article “Calculating Color Contrast for Legible Text” yesterday, I was reminded of the fact that some colors just don’t work well with other colors.

Monster.com's new zebra tables

It might just be me and my old age and the fact that I’m male, but there’s something very disturbing about the new “orange links on green background” in Monster.com’s newly re-designed HTML e-mail for job search results.

This is not the first time, of course, that we’ve seen clashing colors on the web. And it certainly won’t be the last. Moreover, you would think that some of the accessibility hype of late would translate into better designed web pages & web components for everyone. Sure, the links are accessible and even underlined (and I’m fairly positive they work just splendidly in a screen reader for end users with vision problems). The problem is that there’s not enough contrast between the orange and the green.

Much to my dismay, even one of my favorite webmaster resources, VisiBone, can display some very disturbing color combinations on their Webmaster’s Color Laboratory

VisiBone's Webmaster Color Lab

That just goes to show that hard-coding orange, pink and brown text could get you into a bit of trouble, if the background can be randomly changed to orange, pink and brown as well.

Don’t get me wrong: I’m not knocking the hard work of others; I’m merely contemplating on the challenges that web design has to offer, even in 2008. (Either that or I’m getting color-blind.)

In all seriousness, though, even if you’re under deadline pressure, or if you are a one-person web shop, run your work past a couple of co-workers and see what they think. Make it easy for them to comment on any spect of your work, without getting defensive or cynical. In the end, everybody wins.

 

Additional Resources:

A Guide to Combining Colors & Color Schemes for Great Web Design

Eric Meyer’s Color Blender

Simply Graphix Color Combinations

JavaScript Color Picker

 

Filed Under: Uncategorized

Breadcrumbs vs. Breadbox

Posted by admin on September 12, 2008  |  No Comments

NOTE: This article contains screen captures from an actual web site. The information and the screen captures in this article are intended for informational and educational purposes only. If you have any concerns, comments or suggestions about the fair use of published materials for informational and educational purposes, please feel free to contact the author at webgyver [at] webgyver [dot] com.

Although breadcrumbs definition at Wikipedia have their place in web design & development, sometimes too much of a good thing can turn into, well, I’m not sure, but judge for yourself. (Click the image below to see a larger version of the screen capture.)

Breadcrumbs versus Breadbox

Typically, breadcrumbs provide links back to the previous pages you’ve visited on a web site. Although I don’t want to victimize the web site from which I’ve taken the screen capture above, you can easily see that only four (4) of the eight (8) links in the breadcrumb navigation have actually been visited. (Yes, it’s the purple ones.)

In this example scenario (taken from a real-life web site I’ve visited today), the so-called Location Breadcrumbs (static navigation hierarchy that shows you where you are in the web site hierarchy) have two flaws:

1) They duplicate other web site navigation functionality.

2) They clutter the visual display and tend to confuse web site visitors.

1. They duplicate other web site navigation functionality that already exists in the header and in the left navigation. The thought that comes to my mind when I see something like this is, “Did they worry about having vague navigation?” Why else would they “overload” their breadcrumbs?

2. They clutter the visual display and tend to confuse web site visitors by displaying an accurate yet meaningless navigation trail. If you come to a company’s web site to register for a training class about their products, do you really need to see all of the possible navigation options? Sure, there’s nothing wrong with over-marketing a web site’s content, but in my opinion, this could be done more effectively — and less confusing — in other ways. For example, if you want to provide an appropriate after-webinar-signup special or destination, why not add it below the “thank you” text?

At any rate, I want to make it clear that I am not trying to spread negative publicity about the web site whose breadcrumb navigation I’m describing. No, I simply would like to call attention to web designers & developers (including me) who deal with this subject matter in the first place: Make sure you know why & how you’re using breadcrumbs — and please make sure your web site visitors will never have to wonder about it.

High Quality Icons (free)

Posted by admin on September 11, 2008  |  No Comments

Good Gravy! How did I ever miss this awesome web site? Free icons? OK, what else is new? Free high quality icons? Hmmm, that sounds better already. How about free high quality icons that you can download in a variety of sizes, even as PNG files with transparent backgrounds?

Free high quality icons in different sizes and in ICO and PNG formats featured on the WebGyver blog...

At any rate, aside from its content, the web site itself has been carefully crafted, featuring a very intuitive and visually appealing collapsible & expandable navigation bar on the left side.

The icons are organized by such categories as Art Icons, Business icons, Computer Icons, Phones, etc. By and large, the site makes heavy use of Google AdWords and seems to belong to somebody who’s not necessarily a native English speaker (so be kind when you encounter typos and obvious misspellings).

Most of the icons in which I was interested were available for download in a number of sizes (such as 32×32, 48×48, 64×64, 128×128 and 256×256) as well as in a PNG and ICO formats. Typically, the free high quality icons that I downloaded were all licensed under the Creative Commons Attribution 3.0 License.

By the way, if you are an icon designer and would like to submit some high quality icons on IconsPedia, you can submit your icons (or at least some of them) on the web site, too.

Filed Under: Uncategorized

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?