Blog

Add Attributes to Links via jQuery

I was working on a recent project that used a lightbox-style jQuery plugin called Facebox. This allowed me to put both images and DIVs of content into a lightbox-style popover — simply add rel=“facebox“ to an anchor tag and it would activate the popover.

The one thing Facebox didn’t do “out of the box” was automatically make links to images open in the lightbox window. To fix this, I just used a bit of jQuery to add rel=“facebox“ to any anchor tag that linked to a JPG or PNG:

// add rel="facebox" to image links for lightbox effect
$("a[href$=.jpg],a[href$=.jpeg],a[href$=.png]").attr("rel","facebox");
Posted in Development, jQuery | Comments closed

Happy New Year!

2010 was busy; 2011 is starting off the same. That’s great for business, but it keeps me from things like updating this blog. Of course, keeping busy — and keeping clients happy — is more important.

Keeping this blog updated somewhat regularly isn’t an official resolution of mine, but I will try to update it more than once every six months.

One thing I’ll be using it for is for publishing tips (design, development, etc.). These are things I’ve researched and used on a project, and sometimes I need to go back and use the same thing for a later project. Publishing them here has the dual benefit of letting others find and use them (if they find it useful) as well as making it easier for me to find them later on.

Onward to 2011!

Posted in KCD | Comments closed

Is Apple Killing the Mouseover?

Andy Croll writes in the end of :hover?:

:hover as an web interface design tool going forward is going to be less and less important. As to whether this is a good or bad thing I’m not sure.

He makes the point that as more and more sites and web apps optimize for the iPad and iPhone, designers aren’t going to be able to rely on mouseover states. Mouseovers are used both to provide feedback that an item is clickable and to reduce complexity on a screen by hiding controls until the cursor is moved over an area. But that ability goes away with the iPad. I’m running into this issue with a current project, and it takes a new way of thinking about the problem.

Andy sums up:

I know that I’ll certainly be considering ‘tap to toggle’ as a user interface choice ahead of hover in the future. The iPhone-ification of interaction online continues.

(via Daring Fireball)

Posted in Design, UI | Comments closed

Recent Site Launches

I realized I haven’t made note of any site launches in quite a while. So if you’ll indulge me, here are some recent (and not-so-recent) updates…

recentsites1

The following sites/microsites/blogs were all designed and developed by Kieran Chapman Design:

O’Connor Constructors
Arborjet Blog
Super Soil Raised Bed Garden
Organic Tick Control
Lincoln Street Cooking School
Sara Richard

recentsites2

I’ve also been doing some front-end development to bring to life the work of other talented designers:

KSN Partners
Ooh-la-la Salon
Newborn Possibilities
Navia Systems
KBK Wealth Connection

I’m also planning a redesign of my personal site, but that’ll only happen when I have some free time (or a burst of inspiration).

Posted in KCD, Releases | Comments closed

Reduce Your PNGs

PNGs are pretty standard images on the web these days, but Photoshop tends to generate unnecessarily large files. And even though most people have high-speed access, any savings in image size is a good thing and will help speed page load times.

PNG ThingEnter PNG Thing for Mac. Running your Photoshop-generated PNGs through PNG Thing reduces their size: just drag your images onto PNG Thing and strips out unnecessary junk, making your PNGs smaller. (It does a better job on large files and doesn’t make much of a dent with smaller PNGs.)

Dave Shea says Fireworks does an even better job of reducing PNGs. But if you don’t have Fireworks handy, PNG Thing is a nice (free) way to go.

Posted in Development, Tools | Comments closed

yav Form Validation

yav Form Validation
- Make form validation (a little) easier with yav.
Forms are a way for your site’s users to contact you, place orders, complete a survey — in general, provide you with important information. So, it’s very important that forms are clear, well-designed, and easy to use.
Validating online forms is a pain from a developer’s point of view, but necessary for a good user experience. If a user does make a mistake completing a form — such as omitting a required field or entering an invalid email address  — you want to let them know right away so they can fix it before submitting the data. And it’s best to show the error right away without refreshing the page or having to user search for what might be wrong. (A somewhat-old but still-relevant article by UIE is worth a read: <a href=”http://www.uie.com/articles/form_design_wild/”>Web Form Design in the Wild, Part II</a>.)
<a href=”http://yav.sourceforge.net/>yav</a> is Javascript form validation tool that does a great job handling form validation. It’s good for both simple validating (such as requiring a field or checking for a valid email address) and more complex rules (if your country = United States then require the State field; if your country = Canada, require province). You can even write custom Javascript functions if you need require even more specific validation rules.
yav also gives you options for displaying form errors. You can list the errors in a single section above the form, which works well with shorter forms:
IMAGE
You can also display error messages inline, which is better for longer forms. You don’t want users to have to search for their error, so calling out the error next to the field that needs correcting makes it easy to find:
IMAGE
yav’s config settings let you change error message text, and you have total control over the look of the errors using CSS. The only downside is that it’s not terribly well-documented, so if you’re unfamiliar with Javascript you’ll probably require some trial & error to get things to work like you want them.

Forms are a way for your site’s users to contact you, place orders, complete a survey — in general, provide you with important information. So, it’s very important that forms are clear, well-designed, and easy to use.

Validating online forms is a pain from a developer’s point of view, but necessary for a good user experience. If a user does make a mistake completing a form — such as omitting a required field or entering an invalid email address  — you want to let them know right away so they can fix it before submitting the data. And it’s best to show the error right away without refreshing the page or having to user search for what might be wrong. (A somewhat-old but still-relevant article by UIE is worth a read: Web Form Design in the Wild, Part II.)

yav is Javascript form validation tool that does a great job handling form validation. It’s good for both simple validating (such as requiring a field or checking for a valid email address) and more complex rules (if your country = United States then require the State field; if your country = Canada, require province). You can even write custom Javascript functions if you need even more specific validation rules.

yav also gives you options for displaying form errors. You can list the errors in a single section above the form, which works well with shorter forms:

yav-2

You can also display error messages inline, which is better for longer forms. You don’t want users to have to search for their error, so calling out the error next to the field that needs correcting makes it easy to find:

yav-1

yav’s config settings let you change error message text, and you have total control over the look of the errors using CSS. The only downside is that it’s not terribly well-documented, so if you’re unfamiliar with Javascript you’ll probably require some trial & error to get things to work like you want them.

Posted in Development, UI | Comments closed

iPad: a Huge Leap Forward for Regular Folk

Apple iPadThere’s been so much reaction since the release of Apple’s iPad, a lot of it strangely underwhelming. Not that everybody needs to be an “Apple fanboy suckling at the teat of Steve Jobs” (as some people have put it) but the iPad is more than “just a big iPod Touch.” (As an aside, I realize nobody likes the name “iPad” —  The Onion’s comment “Awkward name enables Twitter users to make the same joke over and over and over again” points out the obvious jokes — but why don’t IBM ThinkPads get the same treatment?)

On his blog, Mike Monteiro suggested that “The iPad isn’t the future of computing; it’s a replacement for computing.” I think he’s right, which is why so many people who “do computers” (geeks) are underwhelmed — or worse — by the iPad. It’s not going to replace computers for geeks, but it’s going to bring computers to the rest of the world.

So many things that it doesn’t do or have are actually perfect for non-geeks: The iPad has no file system, which is good for people who can’t find files they’ve saved. There’s no multitasking, so people who don’t realize that they left 10 applications open won’t wonder why their computer is running so slowly. And another big improvement is software installation.

Right now it’s pretty simple on a Mac — just copy the application from the disk image to your Applications folder — but even that can be confusing to novices. (How many non-geeks have run their newly downloaded application from the disk image?) iPhone and iPad app installation is easy: find the app you want to install, the icon appears, you move it to the screen you want. This simplicity alone is a huge step in the right direction for the non-geeks.

The iPad isn’t for everyone (I certainly can’t see it replacing my regular Mac) but I believe it is for a lot of people. The geeks may not be impressed (how could a UI designer not be impressed? Simplicity is not simple!) but perhaps the iPad isn’t supposed to impress them. It’s not for them; it’s for the regular folks.

Related reading:
On iPads, Grandmas and Game-changing
The iPad Is For Everyone But Us

Posted in UI | Comments closed

The End of IE6…Please!

Over at ZDnet Ed Bott says it’s time to stop using Internet Explorer 6. Actually, people should have stopped using IE6 two or three years ago, but there are still people using it today.

Checking my server logs, I see that only 2-3% of people visiting my sites are still using IE6 — small enough that I can probably ignore them — but for some of my clients, that number runs around 5%. For these higher-trafficked sites, I can’t just ignore these users (as much as I’d like to). The sites don’t render perfectly as designed when using IE6, but they do have to work.

So until more of these people upgrade their archaic browser, I as a web developer need to keep testing the sites I build in IE6. But I think 2010 will be the last year I do that.

Are you still using IE6? Upgrade it now — it’s free! Or better yet, avoid security issues and download Firefox or Safari instead.

Related: France Joins Germany Warning Against Internet Explorer

Update: Perhaps the end is beginning? IE6 users to be evicted from Gmail, Google Calendar

Posted in Development | Comments closed

It’s OK to Scroll

Web design is not print design. Designers shouldn’t try to force web pages to fit into a screen-sized box. The browser is not a magazine, so let long pages scroll! Even UI curmudgeon Jakob Nielsen said (five years ago) that users expect vertical scrolling on websites.

True, the most important information should still remain above the scroll (that is, be seen without scrolling). But as I tell clients, not everything needs to be above the scroll. The design can encourage users to scroll for the rest of a longer page page, such as with the cut-off technique.

Don’t cram everything into a single screen. Don’t force your users to click though multiple screens to read an article that could simply be an easy-to-read single scrolling page. Remember: on the web there is no page fold.

Posted in Design | Comments closed
  • Browse Categories

  • Browse by Date

  • @kieranchapman

      Follow me on Twitter...