We got some new toys (testing devices) in the office. The Nexus S and Droid 2. The camera is pretty good on this phone and the interface is a lot more polished then the standard Android phone. Not having all the extra UI layers that other manufactures put on the device is a huge plus. The phone runs smoother and the interface is more consistent. The screen is beautiful and the camera is works quite well. (All the pics in this post were taken with the Atrix.)

We also bought a Motorola Droid 2 which is an OK device. It feels good in the hand and the camera is decent, but I’m not a fan of  slide out keyboards. The slide out keyboard (and analytics) is the reason we got this phone as a tester. The screen on the Droid 2 is pretty lousy when compared to the Nexus S, Atrix or iPhone 4.

Here is a gallery of the devices. We have all three Google phones so it’s cool to see them side by side. The Nexus One does feel better in the hand than the Nexus S which has a plastic feel.

Surprisingly CSS doesn’t have a straight forward way of changing the bullet color for any of the list-style-types. I’m going to show you a clean way to change the color of a bullet; (list-style-type:disc;) without adding spans or using background images. The only downside to this method is it doesn’t work in Internet Explorer 7 or less. But this method degrades nicely. IE7 will just show bullets which are the same color as text.

Why Not Use <span>s or Background Images?

One of the traditional methods were to use a span to wrap around the text. This way you could set the color of the li to red and the span> to black. The downside to this is if your using a CMS or have non-HTML savvy users editing content on the pages. If they don’t remember to use the spans then they’ll have a list of all red text.

Using a image of a red bullet is cleaner in terms of semantic markup and easy of use for a user that doesn’t know HTML, but it doesn’t scale with the text size. This is important especially in the age of mobile devices that scale text automatically. Meaning using background images wouldn’t be the best solution. And as responsive web design become the standard way to develop a site you’ll need bullets that scale with the text size.

The “:before content” method

View demo.

I came up with this solution because I was working on a mobile specific website that was using responsive web design techniques. The content editors of the site may not know HTML and I needed a method that would scale with the text and look sharp on high PPI mobile devices. So here we go:

The Markup

<ul>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
</ul>

The CSS

ul li {
  color:#444; /* set color of list item to a dark gray */
	list-style:none; /* if you’re not already using a reset */
}

ul li:before {
  color:#ed0000; /* set color to red */
  content:"\2022"; /* /2022 is the numerical unicode for • */
  font-size:1.5em; /* set the font-size of the bullet if necessary. Make sure to use em or %*/
  padding-right:.25em; /* give the bullet some padding from the text Make sure to use em*/
  position:relative;
    top:.1em; /* set the vertical position of the bullet if necessary. Make sure to use em or % */
}

In the content declaration you have to use the unicode value not the HTML entity. For example, • won’t work. As you saw in the CSS sample this method using the pseudo-element :before. :before isn’t supported in IE6 or IE7 so that’s why it won’t work in these browsers. But it’s no big deal; they’ll get get dark gray bullets and text. You’ll just need to specify list-style:disc; for IE6 and IE7.

Please leave a comment if you see a way to improve this, use a different method or have a question.

Set Bullets in a List to Any Color Using CSS demo.

I went to the National Restaurant Association Show to check out some of the technology solutions available in the foodservice market.

It was really fun to go and I just wanted share a quick list of categories I saw in the tech space. I wasn’t blown away by anything too exciting. Most of the technology related products revolved around these topics:

• Point of sales (POS) systems
• White label online ordering systems
• Mobile device solutions for:
  • Ordering online
  • POS
  • Inventory
  • Allowing customers to browse and choose wines or other items

And of coarse LivingSocial and Groupon had a sizable presence. The best part was there was lots of yummy things to taste.

Mobile and online ordering were definitely the hot topics. Mobile was everywhere. I saw a tons of iPads being used to demo products, as POS, inventory managers, and marketing tools. You can tell that the handheld mobile platform stuff is really catching everyone’s eye.

Here are some pics I captured while walking around.

I was a member of the IxDA (Interaction Design Association) Los Angeles for two years and was hoping the Chicago chapter wouldn’t disappoint. And although I do miss the awesome people I met at IxDA LA at least I know IxDA Chicago will be a great source of knowledge sharing.

The IxDA Chicago recently (05/18/11) held a workshop about Lo-Fi design processes. The meeting was facilitated and graciously hosted by the design agency gravityTank.

The workshop was broken into three main concepts:

1. Sketching
2. Storyboarding experience
3. Video prototyping experience

Sketching

Most (should be all) of us in the UX and IxD field understand the value of sketching. But I still meet designers who don’t make time to do it or make excuses such as, “I’m not good at drawing so I just start in Photoshop.” Lame. Sketching is about conveying ideas in a visual form; not creating art. To really get this idea across the clever folks at gravityTank had the entire group watch a portion (about 6 mins) of a TED talk by Bill Stone and sketch the ideas as we watched. Afterwards we hung up our sketches on a wall for sharing.

By doing this it showed that everyone can sketch even though most of us weren’t artistic about it and secondly that it can be done very quickly. The video forces you to just keep sketching and focus on capturing the ideas of the talk not the visual qualities of drawing.

Storyboarding Experience

Often designers are pushed into wireframing and photoshopping details of project before the experience has been fully realized. I think this comes from the myth that redesigns are enough to improve an experience. But even more so it comes from the constant battle against time. Because time is so limited on every project storyboarding is cut from many designer’s toolsets.

We broke into groups of six to 10 people and were given a scenario about a fictitious person and a dilemna they were having in space. Yes, as in outer space. This was fun, because it made sure we didn’t devolve the conversation into technical conversations about what’s possible to do based on Apple’s App Store rules, limited mobile bandwidth connections, or Rails vs Django etc.

The goal was to use sticky notes and sketches to explain the user’s feelings, their problem and then propose a solution for them. This worked well. Everyone started brainstorming ideas on to stickies and then toward the end of our 20 mins or so we started to group them in to order.

We started with stickies describing the beginning of the experience  all the way through the end of the experience. (Left to right along an x-axis.) The y-axis was used to group similar ideas. For example, a team might have three ideas for potential types of devices (Windshield heads up display, mobile device, a watch, etc.) the user could use. At these point a device type doesn’t need to picked, we just need to have a space along the x-axis that shows “User will use [device] to do….” Then along the y-axis we stacked different suggestions for this device.

Video Prototyping

Last phase of the workshop was to use video to prototype a user experience. Each team took their storyboard and edited them down into six frames. Each frame was then shot for three to five seconds on a flip camera (no sound allowed). We had about 1o minutes to do these, so they did come out a bit disorganized, but had we been give 30 or 60 mins I think some high quality concepts could have been flushed out. Even with the limited time, some teams were quite effective in being able to show their “space” persona’s problem and how it could be pleasantly solved. gravityTank said they will post the videos to their gravityTank Interact tumblr account soon. So once they do I’ll update the post here.

Hope to See You at the Next IxDA Meeting

They seem to have meetings about one month or so check IxDA Chicago and sign up. Oh, and if ya see me make sure to say hi.

I know everything can’t be made 100% accessible. It really depends on the site’s demographic, timelines, budget, etc, but that doesn’t mean accessibility should be ignored. Regardless of the project’s constraints I make sure to create my markup so the basic needs of all users can be meet.

Screen Readers

• Alt tags with appropriate descriptions WCAG 1.1.1 (benefits for all users and SEO)
• Proper heading hierarchies and label usage WCAG 1.3.1 (benefits for all users and SEO)
• Skip to links WCAG 2.4.1 (Benefits for keyboard users too)
• Unobtrusive JavaScript (This doesn’t make a site accessible, but it’s a good start. ARIA is used when possible)

Keyboard Users

• Make sure hover and click events map to focus and onkeypress events WCAG 2.1.1
• Creating a logical tabbing order so that the whole site can be navigated by just using the keyboard WCAG 2.4.3

Other Areas of Accessibility

• Captions for the hearing impaired. I’m generally not in control of video content, but I do my best to persuade the business to provide captions. Captions can be beneficial for all types of users not just the hearing impaired. WCAG 1.2.2
• Providing cognitively appropriate content. Example, facilitate proper read aloud of abbreviations WCAG 3.1.4.
• Three flashes or below per second. WCAG 2.3.1

How About You?

What are you developers doing to try to be accessible?

Sell the Product with the Packaging. Not just the Package.

This is a reminder that design isn’t just visuals. By design I referring the process of thoughtfully planning the creation of something.

After research one of the first things that should be designed is the content. I’m not a writer, but that’s not a good excuse for starting a design with out content. If you’re not a writer than work with a content provider (writer, content strategist, copywriter, editor) to come up with a strategy to marry visuals and content.

I’m tired of hearing designer ask how long the copy is because they want to make sure it fits in the box they designed. Too often as designers we are selling the packing and not the product. (I do believe copy should be pithy; but don’t just shorten it so it can fit into a design.)

Do whatever you can to work with your content people from the beginning.

Problem

Plainly marked up telephone numbers which contain letters can’t be dialed or saved on iOS devices. For example, the phone number 1-888-899-4VPI when pressed on an iPhone will try to dial 1-888-899-4.

“Sloppy” Solution

One could just wrap every phone number that contains letters in an anchor element with a tel URI scheme. <a href="tel:1-888-899-4874">1-888-899-4VPI</a> but this means all browsers will see the anchor. Most user don’t have their browser set up to dial a number when clicked so I think it’s better to add this feature for devices that are made to deal with phone numbers.

Progressive Enhancement Solution

HTML Markup

<abbr class="tel" title="1-888-899-4874">1-888-899-4VPI</abbr>

This is the recommended markup for a telephone number for an hCard microformat. The whole point of microformats is to create data portability and semantic richness with common bits of content. This is why I highly recommend using this markup structure. Also the title and class will prove to be useful in scripting our solution. Because the extra markup is useful for every browser as well as search engines we don’t have to have any guilt about adding some extra markup to achieve a usable number on an iOS device.

jQuery Code

//Create a variable for each device
var isiPad = navigator.userAgent.match(/iPad/i) != null,
    isiPhone = navigator.userAgent.match(/iPhone/i) != null,
    isiPod = navigator.userAgent.match(/iPod/i) != null;

//If browser's user agent matches then run the following code
if(isiPod || isiPhone || isiPad)
{
  //Double check device to see if it’s an iOS Device
  if (document.cookie.indexOf("iphone_redirect=false") == -1)
  {
    //Find all phone numbers that contain titles
    var originalNum = $('.tel[title]');
    //Go through the array of matched elements
    for (var i=0,ii=originalNum.length;i<ii;i++)
    {
      //originalNum[i] is needed more than once so it's faster to store as a variable
      var originalNum_i = $(originalNum[i]);
      //Get the element's title
      easyDialNum = $(originalNum_i).attr('title');
      //Make sure title isn't empty
      if (easyDialNum != "")
      {
        //Take this element and put some put in an anchor that can be dialed
        $(originalNum_i).html('<a href="tel:'+easyDialNum+'">'+$(originalNum_i).text()+'</a>');
      }
    }
  }
}

Why an Anchor Element with :tel?

This piece of code: <a href="tel:'+easyDialNum+'… is needed to make the phone number clickable since it’s been modified by JavaScript. On an iOS device phone numbers are automatically detected and made clickable, but if you make an edit to a phone number using JavaScript the iPhone will no longer auto-detect that number. For example, if you had a page with the following markup: <p>1-888-899-4874</p> the iOS device would automatically find this number and make it clickable even though it’s just marked up as paragraph, but not if you’ manipulated it with JavaScript. To make it clickable post JavaScript manipulation you have to make the number an anchor and use the tel: URI scheme.

Switch the Viewable Text to All Numbers

The script above keeps the visible number the same. Even after the script runs the user will still see 1-888-899-4VPI but when the number is clicked it will dial 1-888-899-4874. If you want the script to show the easy dial version of the telephone number after the script runs just replace this “last” line of JavaScript with this:

$(originalNum_i).html('<a href="tel:'+easyDialNum+'">'+easyDialNum+'</a>');

Need to Change One Number on the Page

Some website only have one number on the page. For example, maybe this number is in the header. The code below is for site that will only have one number within a specific div. The script runs much faster if you specify the div which the phone number will be in. For the example below I used #header.

var isiPad = navigator.userAgent.match(/iPad/i) != null,
    isiPhone = navigator.userAgent.match(/iPhone/i) != null,
    isiPod = navigator.userAgent.match(/iPod/i) != null;

if(isiPod || isiPhone || isiPad)
{
  if (document.cookie.indexOf("iphone_redirect=false") == -1)
  {
    var originalNum = $('.tel','#header'),
        easyDialNum = $(originalNum).attr('title');
    if (easyDialNum != "")
    {
      $(originalNum).html('<a href="tel:'+easyDialNum+'">'+$(originalNum).text()+'</a>');
    }
  }
}

iPad and iPod?

iPad and iPod don’t have a phone’s but numbers are still clickable so that you can add it to your address book.

Download

A zip containing both version of the iOS EasyDial script.

Upcoming redesign of the portfolio section of my site. This in the secondary navigation that will scroll you to different sections of the portfolio. The typeface is Futura LT Bold. Faux ligatures were created using custom kerning

Also shared on Forrst. #DribbbleInviteNeeded

Made a quick breakfast sandwich. It’s basically an open-faced bacon, egg, arugula sandwich on ciabatta bread. The arugula is drizzled with white basalmaic vingeratte and garlic infused olive oil.

I based the sandwich off a recipe I found on Epicurious.com.

Beginning Object-Oriented JavaScript

The Basics of Object-Oriented JavaScript

Object-Oriented JavaScript Book

Introduction to Object-Oriented JavaScript