Welcome to the Reset

Make forms better - Increase clickable areas for radio buttons

Wed, 20 Mar 2013 16:06:48 -0400

A few months ago I was filling out a survey online which included a “How would you rate this product?” section which used radio buttons where each radio button was within it’s own table cell. However the “How would you rate this product?” section wasn’t a simple one line of radio buttons but rather half a page of these rows and made no use of the <label> tag.

The example below highlights the clickable area within each cell, if I missed the red outlined area I was out of luck. After missing the clickable area multiple times, at some point as a person filling out this survey that it was no longer worth the effort & closed the page.

However had the survey made use of the <label> tag my experience could of been much more painless. Granted I felt there were still too many questions being asked considering I couldn’t finish it after five minutes.. but that’s besides the point.

Below is an example of wrapping the radio button with the <label> tag, setting it to display:block; & increasing the padding of the label within the table cells to match the size of the table cell.

Now the risk of missing the radio button is decreased dramatically and makes selecting the radio button a much less painful experience.

If you work on the web, make sure to show some love to labels & if you ever have to create a survey with multiple radio buttons that are within a table, do everyone a favor and increase the clickable area.

Internet Census 2012

Tue, 19 Mar 2013 20:43:00 -0400

Internet Census 2012

Writing efficient CSS selectors

Tue, 19 Feb 2013 09:40:23 -0500

Writing efficient CSS selectors

web without words

Tue, 12 Feb 2013 10:59:21 -0500

A few years ago I stumbled upon the website web without words and it’s one of the few sites which I keep meaning to bookmark but always forget to do so yet it doesn’t take me long to find it again.

So moving along back in my younger days I had some discussions with some colleagues and we discussed what tools we used for our wireframes after the initial sketches - Pretty much came down to Photoshop, Illustrator & Fireworks and we were trying to see if a certain tool outweigh the other. One colleague mentioned doing the gray box method similar to what Jason Santa Maria does which I never had done previously so it interested me.

Fast forward to recently - Still haven’t attempted the Gray Box Methodology until I learned about the Blokk font which made me think of how useful it is because sometimes client’s get caught up with the details too early on. For example when attempting to show a possible layout and they focus too much on the size of Lorem Ipsum when it’s not ready for that stage. Obviously in a perfect world the copy would already be supplied but let’s face it the web isn’t perfect and neither is the world.

So above is the result of taking an existing site, removing and adjusting some elements and replacing all the copy with the Blokk font. Overall, it was an enjoyable exercise and I think I might experiment with doing it again when I design a new site.

Photo

Wed, 06 Feb 2013 22:37:54 -0500

"In the world which you are about to enter, you will embark on a grand adventure with you as the..."

Sun, 27 Jan 2013 23:09:00 -0500

“

In the world which you are about to enter, you will embark on a grand adventure with you as the hero.

Speak to people and check things wherever you go, be it towns, roads, or caves. Gather information and hints from every source.

New paths will open to you by helping people in need, overcoming challenges, and solving mysteries.

At times, you will be challenged by others and attacked by wild creatures. Be brave and keep pushing on.

Through your adventure, we hope that you will interact with all sorts of people and achieve personal growth. That is our biggest objective.

”

- Fire Red / Leaf Green Intro

Views on OOCSS

Fri, 25 Jan 2013 22:10:53 -0500

I first heard of OOCSS back in 2009 and back then it went completely over my head. I had taken object oriented programming classes but I couldn’t help but struggle with the OOCSS concept. Reflecting back on it I suppose the reason was to me OOCSS seemed to conflict with everything I had learn that was a “Best Practice” - such as avoiding classitis.

Fast forward 2012 - after working on multiple different client sites & multiple micro-sites (such as the 14GB Beast of a site) my boss asked me to research on doing a CSS Zen Garden approach. By CSS Zen Garden approach - my boss meant to touch the markup once and create multiple themes via the css. So if you’ve never seen the CSS Zen Garden, it’s a great site that can show the power of css - however it’s one of the ways css is powerful. Just like OOCSS is another way css can be powerful.

So if you look at the markup in the CSS Zen Garden, it’s a monster - I’m not saying that to be rude but it’s a monster because that’s how it needs to be. Every element needs to have it’s own hook. I spent over the past 3 months working on one project which was exactly like so - the markup is the same, but it had multiple themes / layouts so comparing it to some of the other projects I’ve worked on it had a lot of what some might consider bloat - but it’s there because it needs to be, just like how the CSS Zen Garden is.

Now - Back to OOCSS. For some reason I thought in order to accomplish what my boss had asked me I did research on OOCSS and after seeing what could be done with the Media Object I was convinced it was the way to go - until I realized in order to make use of the power of OOCSS I would have to touch markup.

In the end, I realized if I was going to accomplish a site where the markup never changes once it’s developed, I would have to take the CSS Zen Garden approach but if I’m working on a site where I can touch markup and change markup as needed then I can take the OOCSS approach.

I have a better understanding of OOCSS now and wish I would of realized it sooner. I will say it’s extremely useful when you have a site where the branding includes 4 different styles for links, 3 different styles for buttons, 2 different alternating styles for each headline and when needed if a design calls for a certain different style or if something needs to be changed suddenly from cascade - being able to add a class to adjust it rather than write a custom selector to override it or even worse - writing inline css - yuck.

So OOCSS rocks, yes I think there’s a balance between to prevent it from becoming a maintenance nightmare but that goes with anything.

A Better New Bulletproof @Font-Face Syntax

Thu, 17 Jan 2013 14:53:57 -0500

Back in 2009, Paul Irish came up with the Bulletproof syntax for the @font-face declaration, which for a good amount of time was the default location I would go when I wanted to use @font-face and couldn’t remember the syntax (before FontSquirrel’s generator). In 2011, the Bulletproof syntax was updated by Ethan Dunham at FontSpring (which I believe FontSquirrel’s generator was updated to use this method.)

Recently however Sam Goddard posted a fix to how @font-face rendering incorrectly in Chrome. Below would be the @font-face syntax which includes the fix for the poor rendering in Chrome and IE9 issues.

@font-face { font-family: 'FontFamily-webfont'; src: url('../fonts/Font-webfont.eot'); src: url('../fonts/Font-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/Font-webfont.svg') format('svg'), url('../fonts/Font-webfont.woff') format('woff'), url('../fonts/Font-webfont.ttf') format('truetype'); font-weight: normal; font-style: normal; }

Public service announcement: time to update your CSS3

Fri, 04 Jan 2013 14:07:17 -0500

dstorey:

If you use experimental CSS on your sites, demos, articles or tools, there is a certain amount of maintenance required to keep on top of changes. With a number of recent changes in the browser world, now is the time to revisit and update your code. Read on to find out what may need updating.

Read More

"That Awkward Moment when you notice that the Old Lady in Saffron City with a Meowth in Pokemon Red..."

Mon, 31 Dec 2012 20:50:43 -0500

“That Awkward Moment when you notice that the Old Lady in Saffron City with a Meowth in Pokemon Red & Blue has a “sculpture of a diglett.””

- https://twitter.com/06b/status/285925392391475201

A friendly reminder that you should never trust user input.

Thu, 27 Dec 2012 21:14:03 -0500

A friendly reminder that you should never trust user input.

Jxnblk: Hamburgers & Basements: Why Not to Use Left Nav Flyouts

Mon, 26 Nov 2012 13:48:22 -0500

Jxnblk: Hamburgers & Basements: Why Not to Use Left Nav Flyouts:

jxnblk:

“Good design makes a product understandable” – Dieter Rams

Good navigation should do at least three things well: (1) it should allow the user to navigate; (2) it should serve as wayfinding, letting the user know where they are; and (3) it should help the user understand what the product is…

Detect inputs & textareas that use the required data annotation, attaches an asterisk to labels associated with them & replaces the legend indicating the asterisk's meaning.

Wed, 14 Nov 2012 17:00:56 -0500

For the past couple of weeks I’ve been full time on one project only. Which can be nice but also stressful at the same time. So it was an ASP.NET MVC project and while I was working on the registration page making it a bit friendlier, I wanted to call out what fields were required. Validation was already in place, but I shouldn’t have to hit the submit button to figure out which fields were required.

So I was going just to add <abbr title=’Required’ class=’required’>*</abbr> to the labels (however I wasn’t able to do so, at least not super quick). Turns out the labels & fields including the validation was done in the model. Example:

[Required]
[Display(Name = “Email”)]
public string Email {get;set;}

Which outputs the following:

<label for=”Email”>Email </label>
<input data-val=”true” data-val-required=”The Email field is required.” id=”Email” name=”Email” type=”text” value=”“>

So the end result was to write a small jQuery script that detected the required data annotation then finds the label associated with that field, replaces the label with the same text but includes the abbreviation shown above and finally replaces the legend of the fieldset with a message indicating the asterisk’s meaning.

Video

Mon, 22 Oct 2012 14:13:00 -0400

Overriding Unobtrusive Client Side Validation Settings in ASP.NET MVC 3

Wed, 17 Oct 2012 17:12:14 -0400

Overriding Unobtrusive Client Side Validation Settings in ASP.NET MVC 3

Let's reconsider our "users"

Wed, 17 Oct 2012 16:28:00 -0400

Let's reconsider our "users":

us·er
/ˈyo͞ozər/

Noun
1. A person who uses or operates something, esp. a computer or other machine.
2. A person who takes illegal drugs; a drug user.

Synonyms
consumer

During a Square Board meeting, our newest Director Howard Schultz, pulled me aside and asked a simple question.

“Why do you call your customers ‘users’?”…

An Evaluation of Typeface Design in a Text-Rich Automotive User Interface

Sun, 14 Oct 2012 22:45:03 -0400

An Evaluation of Typeface Design in a Text-Rich Automotive User Interface

Because after all these years, IE still sucks. - Bless

Wed, 10 Oct 2012 13:18:49 -0400

A couple of weeks ago I noticed on my twitter timeline a tweet mentioning Bless and at first I’m thinking - Yep, can’t argue with that statement (See Title). But then I’m start thinking - what are the chances of hitting the 4095 selector limit in IE? So I kept reading on and say the following statement “Chances are, so far you’ve worked on smaller scale sites and/or separated out CSS across multiple files. Once a project reaches a certain size however, there’s no going back.”

So it hit me - I should check on of the largest projects I’ve worked on (and still currently actively working on). This project is over 14 GB! It’s pretty much was two separate sites which merged into one site which has hundreds of micro sites within it. It’s a beast! So ignoring all the micro sites that come from third party vendors and just looking at the style sheets which has been written by myself and other member’s within the team I decided to start to look at the number of selectors within the project. Over 20 separate style sheets and one of them has over 500 selectors, the result - on just the home page - over 2130 selectors. Over half way to the limit.

The chances of going back with this project to even just 1000 selectors are slim, however the chances are it hitting the 4095 anytime this year is also slim. Those who’ve worked on the project all know it’s a beast and try to avoid adding more fuel to the fire so I think it’s safe to say we most likely won’t hit the limit, however if it was all different people touching the project at different times for a year or more without really looking at what’s been done before / what could be reused, I could see how a project could grow that large.. That’s how we ended up building the beast we did.

With that being said - currently how it’s developed the stylesheets aren’t compressed to a single stylesheet on deploy so the error within IE occurring is slim. On that same note - that also hurts us performance wise because that’s over 20 HTTP Requests. Now in the event all the stylesheets were compressed on deployment, that would be great but then it’s clear that had we been closer to the 4095 limit that Bless would be needed.

UI/UX and Subjectivity

Mon, 01 Oct 2012 23:01:07 -0400

UI/UX and Subjectivity

How did you learn your UI skills?

Tue, 04 Sep 2012 22:54:03 -0400

A few months ago, I was asked “How did you learn your UI skills?” by a new co-worker which I didn’t really understand his question so I asked back “What do you mean?” He then followed up that with a programming language you can pick up a book and start coding (obviously he was just saying that as an example) which then I understood his question but didn’t have a simple answer.

Part of developing an user interface involves code - in my case HTML, CSS, JavaScript which I could pick up a book and learn, however the other parts are a collection of mixed skills. For example - deciding the best way to dissect a design to be built (with that being said also deciding if a section is better off being created by code only or if it should be a graphic), or reviewing brand standards and looking at what should be followed or when the rules should be bent (Depending on the typeface used - setting the full body copy at 10px vs 11px can be argued).

So part of those skills have been learnt by practice while other skills have been learned by taking communication design courses at an university. However then comes the skills that are learned by attending conferences, meeting other developers & designers, reading recommended posts that are either trending on a current blog or social network to just reading recommended books by different people… That’s not all - also the skills you learn by watching people and by watching I don’t only mean with your eyes, hear what they say, look at what they don’t do, etc. If it wasn’t for talking and listening to people I would have never known I was working with a project manager & creative director that had some sort of color blindness. (FYI about 10% of males are color blind.)

Suddenly we start focusing on performance, usability, interaction, accessibility, and the list goes on. So it’s hard to say “I learned how to do X by doing Y” because it’s not just one thing… and I suppose what makes it harder to answer is it almost feels natural. Not sure if that makes any sense…