2trying an un-annoying lightbox

Lightboxes are really irritating. No users I ever speak to like them, but all website owners love them – communication problems there, maybe?

Here’s why I don’t like lightboxes:

  • They usually override keyboard functionality. I use my escape key to clear fields and I use my arrow keys to navigate pages – don’t overwrite that. I know best, not you.
  • They’re unnecessarily schmancy and animated – if I opened a lightbox, chances are I want to look at a picture and nothing else. Leave me alone otherwise. I don’t want to see your great “close” icon or any of that crap so just drop it!
  • Some are nearly impossible to close

There are probably a bunch more reasons, but you get the idea.

My lightbox stays out of your way. It doesn’t override any standard keyboard behaviour and it doesn’t use visual fluff to irritate you. What it does do is open a big version of the picture you clicked on so you can see it in more detail. When you’re done, it closes. Here’s how you use it:

  • Click a flickr image to open the lightbox (this might be the last time you need your mouse/trackpad)
  • j = next
  • k = previous
  • o = open the flickr page for this image
  • q = close the lightbox
  • You can also click anywhere to close the light when it’s open

If you’re wondering why j,k,q; use Vim for a day. I would’ve used e to open, but who’s going to remember that?

I’m probably going to implement a resizing thing for people with small monitors so that screens don’t get flooded – if this affects you, please tell me whether you’d like the process to automatically detect your browser size, or whether you’d prefer to handle it yourself. I’m aware that this will affect basically all portrait images – this will probably make me make it automatic. Pictures are pretty pointless if you have to scroll, but I’m tired now and can’t be bothered.

If you want the code for this, view source and find the javascript yourself. There’s a PHP file to make Flickr API calls, but that encapsulates my API credentials. If you can’t figure out what to do here, holla so we can all have a good laugh.

api flickr javascript lightbox mootools photos

code

3know your tools; a story of web forms and why they always suck

If there’s a contentious issue in web development (could be other development, too, but I don’t know!), it’s capturing user input. Forms are irritating – validating, securing, sanitising, storing – no one likes doing it. We write libraries to do the legwork, then hate using those libraries! Forms are counter-intuitive to write and they’re a pain in the ass to use. We instinctively, as web developers, try to guess what all our users might enter, then write receivers accordingly. Courteous users will try to tailor their input based on what they think the form wants to know. This is probably based on no previous knowledge at all, although previous use of forms may ingrain a way to enter dates and currency, but it’s all input.

Computers are scarcely clever enough to infer the format or context of input (or, at least, I’m not clever enough to write something to do that!) so we have to hand-hold users through the process. We write beautiful copy (that never gets read), we tailor error messages as well as we can based on the nature of their input and how it fails the test (that never get read) and we sit by the support email account and wait for people who can’t be bothered to read, but can be bothered to email, to let us know how we’re failing. Even if you believed that forms worked 2 minutes ago, you’d be naive to believe that they do now. I am the authority, do not question.

So. Forms suck. Sadly, as a web developer (if you are one), it’s your job to make them as accommodating as you possibly can. This is a relatively easy thing to do, and I hate to use badly-written forms when there’s really no excuse for it. The catalyst for this post is equal parts simple and irritating, but I’ll get to that in a minute. Think about how the data entered in your form is going to be used. If your validation method could ever be broken with valid data, you NEED to rethink it. If I can’t enter my email address in your shop’s signup form, you can bet I’m buying elsewhere (you’d be surprised how easily some forms get fooled by two-letter TLDs). If you require a phone number, but I’m entering my number right and your form isn’t accepting it, it’s YOUR FORM that’s broken (you can circumvent this by giving clear directions, that way, if they don’t get read and you get a complaint, you can walk users through and sarcastically encourage them to read guidelines you’ve put in place).

The handiest of handy techniques I ever employed in form validation is to teach myself how users enter data in forms. You can do this so easily by having your validation class or method or whatever, send you an email, or log to a file the thing that tripped it up, the contents of post, get, session, time, IP, server variables, debug backtrace, everything you can get, then study it when you’re doing improvements. Learning about how users use something is nowhere near as valuable as learning how your users use something. It also gives a great point of reference when walking a user through your app to determine where they’re going wrong, and it can even help you to improve your copy.

That being said, the next person who develops something that encourages every user to actually read the great instructions you write will be the first!

Which kinda brings me onto why I’m even ranting in the first place. As a user, I hate using forms. As a developer, I hate creating them (unless they’re doing something really cool and interesting). What I hate even more is when they’re not fit for purpose. Upon filling in a particular form yesterday, I was asked to enter my country. Country can be pretty contentious in itself – it’s normally a bit of a pain, do I choose United Kingdom, Britain, Great Britain? Has my country been prioritised as it’s a major customer of this website? Is the list in alphabetical order otherwise? Do I scroll to U, B or G? Whilst these are small issues, when you fill in as many forms as I do, the fluctuation in input method can start to grate!

My favourite kind of way to enter country is by free text field. It’s a little risky if you’re joining users with a table of countries as you can never be sure that you’ve joined user input with the correct country, but it does make life easier. So, I entered my country as “United Kingdom” and was met with the following error:

know your tools (by jaspertandy)

This is, by far, one of the most stupid, avoidable messages that I have ever come across in a form. Number one, if they don’t want punctuation in my input, it can be stripped programmatically, even in the javascript that passes the form to the server:

string.replace(/[^A-Za-z]*/,'');

If they need it in upper case, that can also be done by the javascript:

string.toUpperCase();

So, that’s the first 2 of their issues, both of which become entirely moot when you come across their final issue; Choose a country from this list! Seriously?! Have you ever heard of a select list?! I know you have, because I already used one on your website! Justification for this sort of shortsightedness evades me, but I am open to enlightenment.

Short and short, users have the attention span of a gnat, and the temper of a recently-woken bear. Irritating either one of those is an easy way to lose a customer, so please try to make your forms minimally irritating. If I end up using one, I may just have to hunt you down and moan at you.

annoying forms javascript tiny bit ranty

internet

3take back your browsing experience

It occurred to me that I hate when a website opens a new tab/window when I wasn’t expecting it. The main offender for this is target=”_blank”, so I wrote a quick Greasemonkey script to convert these attributes. Let me know if you use it. I don’t care, but the comments make me look popular.

You’ll obviously need Greasemonkey or Creammonkey or Fluid.app or something that accepts GM scripts to use this.

greasemonkey javascript userscript web

internet

steal buffalo’s planner slider in mootools and css

On BuiltByBuffalo‘s Proposal Planner, we use a much-revered slider thingy that we’ve had a lot of compliments on. We recently received an email asking for a little tutorial on how to put this all together. The main brief is actually pretty esoteric, and you probably won’t be working with designers of the calibre of Jason Reynolds, but this should show you how to put such a thing together.

First off, you need 3 elements. I’ve gone for divs because they’re fairly non-descript and semantically pretty viable for use here. I’ve gone for the following structure:

<div id="scale" class="m1" rel="6">
  <div id="full">
    <div id="marker"></div>
  </div>
</div>

The rel on this div refers to the maximum number of positions on the slider. Unless you shamelessly steal all my source images, you might need to change this! The class refers to a CSS class that denotes the width of the guage element (#full), defined thus:

#scale.m1 #full {
  width: 43px;
}

Because the marker element (#marker) is floated right, it will always stay to the right side of the guage div, so there’s no need for any more CSS than this.

Now that we have our layout and have defined our images (I won’t insult you by teaching you how to set a background image. If you really don’t know that, the declarations are in the source!), we need a method of getting between them. In the actual planner, we do a bunch of ajax-y stuff between stages that’s not relevant here, so here’s a simple breakdown. We’ve got 2 links, next and previous. We, therefore, need 2 event methods to handle input.

In our Marker class, the initialize method deals with identifying the container, marker and guage elements so that we don’t need to keep traversing the DOM to get them. It also sets the current state of the marker and gleans the capacity from the rel attribute (even though it shouldn’t really – you can hardcode it if you want!). We then have our next and previous methods, which just check that their respective states are valid (we don’t want the marker trying to go to 0 or 7, so we stop it from happening).

The method do_morph is where all the legwork is done. We construct the class to Fx.Morph to (mootools requires the whole CSS declaration, not just the element) then define some other options for the morph (namely the duration and a method to run when it’s completed). The completed function calculates the background position needed on the marker image so that we display the correct state.

I’m not great at explaining things, but hopefully that’s done a little to make it clearer for the person who asked for this post, and easy to steal for the people who are that way inclined!

Enjoy the demo:

Oh crap, I accidentally deleted the demo. I’ll put it back when I’ve got some time. In the mean-time; check out the real thing

buffalo craptorial css html javascript mootools slider

code

2goin’ through changes

I’ve made some changes. If you see anything that looks wrong (and you don’t use IE6), let me know.

blog design javascript mootools social

internet, jspr

161 081108 – James’ website

James Marshall

Got pretty far with James’ site today, little did I know that I’d have to rewrite it anyway!!

365:365 javascript web design

365.1, internet

2On Microsoft wasting everyone’s time (including their own)

Microsoft are constantly wasting my time. I am a Mac fanboy, this is no secret, but I am going to make no mention of Windows users here today.

Are you a web developer/designer? If so, then Microsoft waste your time, probably on a daily basis, too and it’s going to get worse. When I heard about IE8′s impending release, there was the same heart-sinking feeling as when IE7 was first installed on one of my VMs and I realised that not enough had changed. We were promised better standards compliance, and whilst that was delivered, it wasn’t even close to enough. After having installed IE8 beta 2, it’s just disappointing. IE8 devs still clearly can’t add up, as elements that are laid out perfectly in Firefox 3, Safari and Opera are falling all over the place in IE8.

Now, I don’t profess to being able to write my own web browser. If I could, that’s probably what I’d be doing. I don’t develop web browsers for the same reason I don’t fly spaceships or present kids TV – I can’t do those things. So why is it that Microsoft employ this team of people who clearly have little interest in making a web browser that actually works? My guess is that they don’t care about their users (surprised?) or they don’t care about the developers working on their platform (again, surprised?).

For this reason, from today I am not going to be indulging them or their inferior software for my personal projects. I won’t open or test my sites in Microsoft browsers, and subsequently I won’t make any attempt to fix anything for those browsers. Instead, what I will do is give IE users a one-time, tiny notice that I don’t support Microsoft and politely suggest they try an alternative browser. I will also offer a style-less, javascript-less version of everything I do for people whose experience is completely hampered by Microsoft’s inadequacy.

Hopefully, any developer who reads this will adopt the same mentality for their sites and in a perfect world, users will start seeing how little their experience is taken into account by the software giant. It’s all about numbers, baby!

Someone has to start the ball rolling, and why would users when the internet looks fine to them?!

browsers css firefox internet explorer javascript microsoft opera rant safari the web

windows