Business owner, HTML builder, Xboxer, idea generator, dad, wireframer, greyhound owner, UX guy, Celtic fan, grumpy old man.
TwitterSearch
A UI annoyance. Which navigation item to click?
Awful usability, no empathy from Parcelforce
- Send me a letter through the post. That should probably get here tomorrow
- That letter contains a code.
- I can then take that code, go back on-line and type it into a different page on their website.
- I pay the customs charges on-line.
- Then they will approve the letter to be delivered
- 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).
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). 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. 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 categoryIt's gone. And here's the HTML for the parent category page. Value of the input box is "", so the A tag is hidden.
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.
Make a photo ID card in your browser with HTML5
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.
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. Then we add CSS magic, and a single image (this small shopping cartUnlike yesterday, I'll share first how IE shows the buttons. They aren't great, but are perfectly usable. But when you check exactly the same code in a modern browser, the border radius, gradient backgrounds and inset drop-shadows come alive. 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.
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. You can use CSS3 to make these buttons with just two DIVs. Here's all the HTML you'll need. Just add some rounded corners, drop shadows and background gradients and you get these. 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. If you'd like to get ball-deep in the code, a demo lives here. EnjoyHow 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.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.
Love this stuff? Make sure you follow http://twitter.com/#!/TheExcelGeek
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.
And most of the code... 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. 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 codeYou 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 If there's demand, I can go through each step.
view-source:http://celticend.co.uk/icons/ Love
CSS Cuban Flag
Hey flag-fans,
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/
Discover the CSS 'Outline' Tag and my North Korea CSS-only flag
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. 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. Love and beer. All flags: http://stevefitzpatrick.co.uk/demos/flags/








0 Comments