Steve Fitzpatrick
Steve Fitzpatrick

Business owner, HTML builder, Xboxer, idea generator, dad, wireframer, greyhound owner, UX guy, Celtic fan, grumpy old man.

Twitter

Search

January 27th, 5:05pm 0 comments

A UI annoyance. Which navigation item to click?

This is a common annoyance for me.

I have just received an email from an online shop, and (as always) it's their proper, biggest, ever, really, this, time, sale.

So when I get to their site, I want to see all of their discounted Xbox 360 games.

Iegefjfc

Which one do I click?

As a customer, do I care about the difference between "All Special Offers" and "On Sale"?  Come to think of it, why are "Fast Dispatch" or "Game Highlights" even in the "Special Offer" section?

I have no idea. No idea at all.

If you are in charge of big sites, be careful that your navigation menus don't turn feral.  Make sure you take some time now and again to review your content, where it lives, its labels and how the user finds what they are after. 

Posted
December 5th, 1:42pm 0 comments

Awful usability, no empathy from Parcelforce

I've ordered some Christmas presents for my nephews from Japan, and it looks like I have some customs VAT to pay.  Fair enough.

When I track my parcel, I can see that it's "Awaiting Payment of Charges"

Hghchhbi

So, how do I pay the charges....?

Turns out, Parcelforce

  1. Send me a letter through the post. That should probably get here tomorrow
  2. That letter contains a code. 
  3. I can then take that code, go back on-line and type it into a different page on their website.
  4. I pay the customs charges on-line.
  5. Then they will approve the letter to be delivered
  6. It's shipped from their hub to my house.

So, I have to wait on a letter telling me that I've got to go on-line... despite the fact that I'm already on-line and looking at the exact package.  Hopefully I'll get my letter tomorrow.  But even then it's going to be a minimum of 2 days completely unnecessary delay.

When you build on-line tools, there is little point if you are not going to consider your users.  When I build tools, I always try to consider this rule...

"For every reaction, make an equal action"

If you are going to give your user an important piece of information, please try to think about their possible reactions and cater for a sensible range of the actions they'd want to perform. 

So, here's an idea Parcelforce (and even though I hear that you're going to charge me £13 on top of the customs amount for this nonsense, you can have it for free).

Dhgjabhe

Posted
July 8th, 10:08am 0 comments

A conditional form reset button with CSS only

I recently launched a new site, a league table of Twitter follower for official football club feeds.  The site gives users the ability to send a tweet that says things like...

Clyde at @clydefcwebsite have the #13 most followed official football club twitter feed in Scotland - http://folos.im/category/38

If a follower of that person clicked on the link in the tweet, they'd arrive at a sub-category of the entire folos.im database, and in this case would only see Scottish clubs.

From looking through Twitter comments and searching for blogs online, I spotted that some people thought that sub-category was the entire site.  So I needed to add a "Reset Filter" button after the search box to show that the current view was not the bigger picture.

I added this  (I don't particularly like the phrase, "Reset Filter" and I'll probably change it soon).

Moz-screenshot-5

But, obviously, I didn't want the button to appear when no category has been selected.  I could have used Javascript, but remembered an easier method.

Here's the HTML for that input box and button.

Moz-screenshot-6

What I wanted to do was hide the A tag when the value of the input box was empty.  And here's a lovely piece of CSS to do that...

#filter input[value=""] ~ a{display: none; }

So, if an input element has an empty value attribute, then all sibling (~) A tags should not be displayed.

In the example above, the value attribute of the input element is "Scotland" and not "", so there is no match and the A tag is not hidden.

But when you look at the parent category

Moz-screenshot-7

It's gone.

And here's the HTML for the parent category page.  Value of the input box is "", so the A tag is hidden.

Moz-screenshot-8

Lovely.

Probably doesn't work in IE6 and IE7, and might be buggy in IE8.  But I don't care. They'll just have to see the "Reset Filter" button on all the time - they'll live.

 

 

Posted
June 23rd, 3:11pm 0 comments

Make a photo ID card in your browser with HTML5

By using the canvas element in an HTML5-compatible browser and a flash file that embeds your webcam in your browser window, you can take a still picture, add some input box text and create a single-image, save-able ID card. All client-side in your browser.

To see it in action you'll need a modern browser (essentially anything recent and non-Microsoft):

Here's the URL: http://stevefitzpatrick.co.uk/demos/id/

I could annotate the code, but can't be arsed really. I'm sure you'll go ball-deep into the source if you're interested in how it's done. Shout if there's anything I haven't explained in there.

Posted
April 1st, 2:34pm 0 comments

Blog post: And two Amazon.com buttons redone in CSS3

After sharing the play.com buttons in CSS3 yesterday, I got the taste for CSS-ing stuff again and launched into two Amazon buttons, the top two here.

Moz-screenshot-24

Like yesterday, all we'll need are two DIVs.  The Wish List button has two different functions, so we need two A tags in there.

Moz-screenshot-25

Then we add CSS magic, and a single image (this small shopping cart).

Amazoncart

Unlike yesterday, I'll share first how IE shows the buttons.  They aren't great, but are perfectly usable.

Moz-screenshot-26

But when you check exactly the same code in a modern browser, the border radius, gradient backgrounds and inset drop-shadows come alive.

Moz-screenshot-27

Go on, make your own buttons.  The demo is here if you want to tear it apart.

Now, your homework is to take these buttons and put them in the blue boxes.  They can be done in just CSS too.

Moz-screenshot-24

Posted
March 31st, 2:16pm 1 comment

Mimicking Play.com's login buttons with CSS3

Made this ages ago for no other reason than the challenge of it all.  Found it today and thought I'd share.

There are the two login/account buttons for Play.com.  They be seen here.

Moz-screenshot-18

You can use CSS3 to make these buttons with just two DIVs.  Here's all the HTML you'll need.

Moz-screenshot-22

Just add some rounded corners, drop shadows and background gradients and you get these.

Moz-screenshot-20

No images, just text, HTML and CSS.

As pre-IE9 Internet Explorer is such a deuce, it chooses to ignore most of the rules, but the buttons are still usable.

Moz-screenshot-21

If you'd like to get ball-deep in the code, a demo lives here.

Enjoy

Posted
November 15th, 10:44am 2 comments

How to create a super-quick graph with Excel

Recently I happened upon the excellent http://www.excelgeek.co.uk/ and his posts have reminded me that I used to be good at Excel once, and I really should pass on some hints and tips.

I'll start with my favourite, the super-quick Excel chart.

Excel-graph-1

If you have a value in a cell, you can use the REPT function to create a visual representation.  No messing around with the chart wizards, just a simple formula.

It's piss-easy to do.  Alongside your value to be graphed, type:

=REPT("X",D4)

This repeats the letter in quotes (in this case an 'X') by the number in the cell D4.  In the example above, I've used an uppercase 'i', although the pipe (SHIFT + \ on a Windows keyboard) is usually my preferred character.

And once you've got the hang of that, you can even use Conditional Formatting to automatically change the colour of your bar based on its value.

Excel-graph-2

Love this stuff?  Make sure you follow http://twitter.com/#!/TheExcelGeek

Posted
September 1st, 5:08pm 0 comments

Client-side dynamic images with Canvas

You can use HTML5's Canvas to create dynamic images in the browser.  No server processing needed.

In a past life as a despot on a football forum, I used to create emoticons for players at the club.  I'd put them together in Photoshop, save them and then upload them to the server.  There was sufficient faffing around that when faced with six or seven to do, I never quite got around to it.

While reading the excellent book Introducing HTML5 I found out that the content of a canvas element (onto which you can overlay almost anything) can be converted to a single image with a single command.  Awesome.

Here is the example (by Remy Sharp) http://introducinghtml5.com/examples/ch05/todataurl.html

And this is what I managed to put together.  It's experimental, so you WILL NEED either Chrome (recommended), Safari or Opera to see it working.
http://celticend.co.uk/icons/

So, what's going on?

Inputs
Nothing of note going on here... just using a traditional form to capture some data.

Moz-screenshot-36

And most of the code...

Moz-screenshot-37

There are two things of interest here.

Firstly, I am using the HTML5 placeholder attribute to show "Player Surname" in the input box.  This will populate an input box with greyed out text which disappears on focus.  Obviously, it's not supported by all browsers at the moment, but is a nice touch when it doesn't have to work across them all.

Secondly, the value of the select field relates to the CCTLD country code for each flag that I have on my server.  Annoyingly (but understandably), canvas will throw a security error if you try to convert it to an image when it contains another image that is sourced from an external site.  For instance, if you use a dynamic Google Chart in your canvas, you will not be allowed to then convert that canvas to a flat image.

The Output
When you fill out the details, you are rewarded with your image.  And that is an image, a bona fide right-click-and-save-as image.  Created completely in the user's browser.

Moz-screenshot-38

How does it work?
The image at the bottom is just that, an image.  To get to that stage, I've had to

  • Read the inputs from the form
  • Draw the background boxes onto the canvas element
  • Draw the text on the canvas element
  • Show the element containing my output image
  • Convert the canvas to an image SRC and attach that to the output image

Note, the image that you see there isn't the canvas element, that's hidden on the page throughout.  But it looks identical.

Viewing the code
You can have a look at the code in the page source for the example. It's very self-explanatory. 

The nicest bit is the convert-to-image, and this piece of code deals with that particular magic

Moz-screenshot-39

If there's demand, I can go through each step.
view-source:http://celticend.co.uk/icons/

Love

Posted
August 1st, 11:29am 0 comments

CSS Cuban Flag

Hey flag-fans, 

I've had oomphteen requests to render specific flags in HTML/CSS-only, and I've decided to ignore them all and piece together the Cuban flag. Here you go...

Moz-screenshot-35

Throw all flag requests to the usual address.  And, no, I'm not doing Wales.  Or Mexico.

As always, source code is here: http://stevefitzpatrick.co.uk/demos/flags/

Posted
July 19th, 5:08pm 1 comment

Discover the CSS 'Outline' Tag and my North Korea CSS-only flag

Afternoon,

Playing with HTML and CSS to create flags out of nothing has been great fun, especially when it leads me to discover tags and elements that I had never previously happened upon.

While putting together The Gambia flag, I was convinced that I could somehow draw five different stripes by using a single HTML div.  And I've found out how.

OUTLINE
I found the CSS "Outline" tag while using the excellent http://css3generator.com . It's a CSS2 tag, but I'd never really noticed it before, what with IE completely ignoring its existence since ever.

Layman-ly it allows you to put a second border around your element.  And I've used this to create a double-border effect and draw a North Korea flag.

Moz-screenshot-32

HTML
    <div id="north-korea" class="flag" title="North Korea">
        <div class="stripes"></div>
    </div>

CSS
    #north-korea .stripes{
        top: 33px; /* The box doesn't start at the offset tag, but the old-style border. */

                height: 122px; width: 300px;  /* Red bit is 122px high */

        background: #ed1d25;  /* Red background */

        border-top: 6px solid #fff;  /* Top white border    */
        border-bottom: 6px solid #fff;  /* Bottom white border */

        outline: 33px solid #034da2;  /* Top and bottom blue bits.  Left and right do exist, but my main flag has an overflow: hidden (see below) */
    }

    .flag{
        display: block; position: relative;
        width: 300px;
        height: 200px;
        border: 1px solid #000;
        float: left;
        margin: 0 20px 20px 0;
        overflow: hidden;
        background: #fff;
    }

So, there you have it, a nice new CSS rule for me to abuse.

And here's the finished CSS/HTML-only North Korea flag. 

Moz-screenshot-33

Love and beer.

All flags: http://stevefitzpatrick.co.uk/demos/flags/

Posted