◀ View all Words posts

You are viewing posts by: kelly

I recently had an experience that reminded me of the value and importance of graphics in user instruction, navigation and way-finding. Here was the scenario: I was headed to dinner and parked in a lot on a corner near the restaurant. This parking lot had a large printed sign attached to an adjacent building instructing drivers to display a printed receipt on the car dashboard as proof of payment to avoid a ticket. I headed to the bright yellow payment unit shown here:

The box was very basic, no digital screens, no lighting for night-time usage, no information on pricing, but I saw the credit card slot and used it.

Then nothing happened. There was no receipt printed and the only feedback was a small red light above the credit card slot.

Did the red light indicate user error? Or was this a broken machine? I tried the credit card two more times. Still nothing. The only reason to keep trying was knowing the possible consequences for not obtaining a receipt: a ticket or a tow. Then I realized what was missing — an instructional graphic. There are four possible ways to enter a credit card into that slot, but I had kept trying the one that seemed most obvious to me — the numbers facing up and the card turned 90° clockwise.

I started trying the other ways, numbers up and 90° counter-clockwise, magnetic stripe up and 90° clockwise, and finally magnetic stripe up and 90° counter-clockwise. Of course I got it on the last try. The indicator turned green and the receipt popped out. All that hassle on my end could have been avoided with one very simple instructional graphic. I took some sample shots of other credit card instructional graphics around Portland, Shown below. Each has…

Read More →

Comment

Categories

How to fix the IE7 and inline-block CSS bug

Recently, we redesigned the Uncorked Studios website to be responsive to different browser and devices sizes. Along with the responsive design came a few CSS bugs. Here’s one that involved the inline-block display in CSS.

Bug:  Unordered list element <li> using CSS display: inline-block won’t align horizontally in IE7

When recently using the Blueberry responsive jquery image slider on the Uncorked homepage, the pager navigation along the bottom of the slider, which navigates between the featured images, uses display: inline-block to create a horizontal row. But of course, IE7 doesn’t recognize display: inline-block and gave us this:

Fix:  Add zoom:1 and *display: inline to the element in CSS (courtesy of The Mad Ranter)

Original CSS:

.blueberry .pager li {
display: inline-block;
}

Fixed CSS:

.blueberry .pager li {
display: inline-block;
zoom: 1;
*display: inline;
}

The asterisk (*) in front of display: inline allows for other browsers to ignore that line.

Corrected appearance in IE:

Read More →

42 Replies

Tags

Categories

Creating a custom icon for the ‘Add to Home Screen’ on iPhone

iPhone users have the ability to add an icon to their home screen that directly links to a website url (see this Lifehacker post that teaches users how to never type in that url again). If left alone, the icon image is generated from a screenshot of your website, which will usually look like this:

However, this icon can be customized, and after years of creating fav icons for desktop websites, why not customize the icon for mobile websites? Here’s how:

1. Create a 114px x 114px icon image – this larger size makes sure the icon is sharp even in Retina Display. Save it out as a png and load it onto the server in either the root directory or images path.

2. Apple automatically generates rounded corners and adds a glossy semi-circle on top, if you like that use this code:

<link rel="apple-touch-icon" href="/custom_icon.png"/>

3. If you hate glossy shine, tell Apple to step off with this code and your icon will remain how you designed it (but still :

<link rel="apple-touch-icon-precomposed" href="/custom_icon_precomposed.png"/>


Now you have a fully custom experience for your mobile website users!

*Android users can add an icon to a screen that will directly link to a URL also, but the process is a little more complicated, so I am not sure how many users actually know it can be done. While iPhone users have a “Add to Home Screen” option in the same area as “Add Bookmark” while actually viewing a website, Android users can only add the icon from the actual screen. So the process is save a bookmark while viewing a website, then go to a screen that has an empty spot for an icon, long-press in that empty spot to open the “Add to Home Screen” option, choose “Shortcuts”, then “Bookmarks” and then…

Read More →

12 Replies

Categories