June 2, 2017 4:31 pm
Published by tnels
I read an article today discussing how select menus affect user abandonment of forms. I completely agree with their hypothesis, but its not always easy to replace select menus.
In a past experience, we had a sign up flow that had two steps. The first step captured the user’s email address and password. The second step captured their profile information. We required the user to fill out the second step to use the application. This consisted of first name, last name, phone number, company name, and industry. Each of the fields was a text input, except industry, which was a select menu.
Industry was a necessity for our business development team. They needed accurate data to project the average lifetime value of the user. Industry was also used to determine what order to follow up with users once they had completed accounts. It was imperative that this data be accurate and within our preset terminology.
This resulted in two major issues though.
- Most people selected the first option out of pure laziness.
- Most people didn’t know how to define themselves.
Both of these issues would arise in the solutions provided in the article. If we had made all the options (there were about 15) radio buttons users would not read them all. This would have the same result. If we had given the user a text box with autocomplete it is very likely they would not know what to type. We could give suggestions, but there would be no way to know if these were valuable to the individual user. Also, a text input with autocomplete does not solve for misspellings.
My conclusion is there is little we could have done. Giving our user too much freedom would have lead to more abandonment. But giving them less freedom led to poor selection.
One interesting note, one of our options was “Other”. These users were the most profitable and stayed with our application the longest.
May 7, 2017 10:47 pm
Published by tnels
One of the simplest ways to impress your users it to make your site fast. It’s incredibly important to the user experience. There’s a lot of data to support this.
I have been slowly redesigning the site over the last couple of weeks and I took it upon myself to make the site as fast as I possibly could. I did the same at CallFire, hacking Drupal to follow a few best practices. So here’s few things that I did:
- Set a performance budget of 200kb (I’m at 204 and hating myself right now)
- Limited requests, there’s no JS and 1 tiny CSS file (I recently removed modernizer because it was load blocking, not really sure if that was the best move)
- Installed WP Super Cache (its no secret I’m using WordPress
- Added rel=”preload” to the link tag and loadCSS as a polyfill
- Removed anything that WordPress tried to load automatically
I’m sure there’s a bunch that I’m missing. But the fact is that I was hovering around 2 seconds with my initial template before all of this, and as of tonight (thanks to loadCSS) I am rocking a 700-850 speed index on webpagetest.org.
February 5, 2011 11:17 pm
Published by tnels
UPDATE: 2012 bingo can be found here
After missing the last 2 Super Bowl due to travel/living aboard, I’m excited to host my very own Super Bowl party again. The best part is it coincides (well closely coincides) with my birthday. To make things a little more fun, Kate and I made our own Bingo game with this year’s commercials.
We did a decent amount of research and came up with 50 different themes/logos and are splitting them between two 5 x 5 Bingo cards. First person to get 5 in a row/column/diagonal wins. We decided not to make columns or rows themed and just randomized everything. Any tie breakers will be solved via rock, paper, scissors.
Here are the files in PSD and JPG formats. The logos file has 50 logos that you can split between 2 boards. Feel free to customize to your liking.
Enjoy the game!
September 13, 2010 11:27 am
Published by tnels
While reading up on the CSS3 border-image property, I couldn’t help but think that something is getting left out of CSS3: multiple borders.
One of the W3Cs primary goals is to remove a web designer’s reliance on images in page layout and design. Which will also speed up load time. However, the only way to create multiple borders on one element would be to use the border-image property. Here is an example of border-image:
All colors outside this little white box are the border.
CSS
.multiple-border-example-1 {
border: 20px solid transparent;
-moz-border-image: url(images/multiple-border.png) 25% round;
-webkit-border-image: url(images/multiple-borders2.png) 25% round;
border-image: url(images/multiple-borders2.png) 25% round;
}
Image
If none of the above CSS syntax makes sense to you (it took me a while to finally wrap my head around), I suggest you check out the links at the bottom of the page for further reading (because frankly, I’ll do a terrible job of trying to explain this). While I find this to be a workable solution, there are two issues that I have with it: 1. It requires an image and 2. I have a hard time working with percentages (its a personal problem, believe me).
Wouldn’t it be cooler if we could use the same syntax that’s used for multiple backgrounds? It could look like this:
Code:
.multiple-background-example-1 {
border: 10px solid #77ccff, 10px solid #33bbff, 10px solid #0077ff, ;
}
For this to work each border would be rendered from the center out. and they would stack with no spacing between each border. I’m pretty sure this would save me time and effort (and who knows, maybe you too!). No image to produce, no messing with percentages to get the border just right, and no extra image for the browser to load.
For more on border-image:
September 8, 2010 4:04 am
Published by tnels
I’ll admit that I haven’t done a lot of actual development for mobile browsers (mostly I’ve done user experience design, visual design, and usability). But this week I ran into a “fun” little loading error with Mobile Safari on the iPhone, iPad, and iPod Touch.
Apparently, Mobile Safari doesn’t like images (PNG, GIF, and JPG) larger than 3 megapixels (3 * 1024 *1024). This means any background image you want to show up on Mobile Safari needs to be height * width ≤ 3145728. This is only valid for iOS 3.0 (for below 4.0 is it okay to refer to it as iOS?) and above. Less then 3.0 can only handle 2 * 1024 * 1024.
So my 7900 x 1000 image needs to slimmed down a lot.
The reason I ran into this issue is that the client has many IE6 users and needs to fit their needs. His design is very nice, but has a lot of rounded corners and drop shadows. Rather than write two versions of the site, I’ve been making really large background areas in the sprite to avoid any potential issues with IE6.
I think I got a little heavy handed with this and didn’t create empty header and footer divs in the markup for just the bottom and top images, which I’ll be doing to solve the problem now. I am not terribly comfortable with this. The purist in me hates mark-up that has no real bearing on the content. Another solution would probably have been code a CSS3 version with rounded corners and had fallbacks for IE and non CSS3 compatible browser versions.
Thanks to the following articles for helping me fully understanding this issue more and come up with an appropriate solution:
July 30, 2009 11:45 pm
Published by tnels
At this point my web design career I have almost completely removed directories from my images folder. This is the result of using content management systems like Joomla, and the fact that I rarely have more than a handful of images in my images folder when I initially develop a site. I stopped because I was noticing that I was taking time to create folders like “header” and “background” to organize images, but only placing one or two images in those directories.
Instead, I began using naming conventions. Images with semantic names like “logo.png” and “navigation.png” would get their use or location in the code appended in front of them. So “logo.png” would become “header-logo.png”, “navigation.png” would become “background-navigation.png”. If you look at the source of this site you can see this in action:
#wrapper {
background: transparent url(images/background-header.jpg) center top repeat-x;
}
What does all this have to do with CSS3?
Basically, I can now add new styles to images based on my naming conventions. This, of course, applies to more than just images, but this was the first use I’ve found for these that naturally fits my already established workflow.
A little history: attribute selectors
These selectors allow web designers to select items based on just a portion of an attribute. I imagine this was originally developed to allow CSS target the many different kinds of forms elements (you’ve got checkboxes, text, radio buttons, etc) without needing to give each one a separate class. While useful, they were only good at matching exact strings. For example, to add a red background to text inputs I just write a rule like this:
input[type="text"] {
background-color: #F00;
}
The future: substring matching attribute selectors
Substring matching attribute selectors are a huge leap up from attribute selectors. They free web designers from relying on matching exact strings, making just about any tag with a selector fair game. One might also find himself using less classes/ids as a result, and it increases the semantic value of attributes. Plus it makes use of naming conventions that many of us web designers have probably been using for years.
I can use these naming conventions to add styles to the images, whereas in the past I would have used an id or class. For example, in the past, if I wanted all the images in the main content area of my site to float right I would have a rule like this:
#content img {
float: right;
}
But then let’s say that I wanted certain images to float left to mix it up a little:
#content img.left {
float: left;
}
Now I have two rules for my content images that are difficult (well not that difficult) to override. But if I use these new CSS3 selectors, I can write two simple rules that are “easier” to override (should the need arise):
img[src*="right"] {
float: right;
}
img[src*="left"] {
float: left;
}
The awesome part is that these CSS rules will work for either of my methods described above:
Old method
<img src="images/right/lion.png" alt="Lion on his back" />
New method
<img src="images/right-lion.png" alt="Lion on his back" />
One last thing…
Notice that I am using the * in these, that means that the string “left” or “right” can be anywhere in the src attribute. You can alternatively us ^ or $ which will look at the end of the string only, but won’t be of much use in this instance. Unless I was to place “left” or “right” at the end of the image name, but I would need to make it look like this:
HTML
<img src="images/lion-right.png" alt="Lion on his back" />
<img src="images/lion-left.png" alt="Lion on his back" />
CSS
img[src$="right.png"] {
float: right;
}
img[src$="left.png"] {
float: left;
}
For more on CSS2 attribute selectors, check here or here.
For more on CSS3 substring matching attribute selectors.
May 25, 2009 6:26 pm
Published by tnels
One of my biggest frustrations with CSS3 is that it doesn’t directly mirror many of the options that designers have in creating elements, making it more difficult than it should be to recreate them in CSS. The box-shadow property is a really good example of this.
In Photoshop, when a designer adds a drop shadow, they add the blending options and adjust to their liking the distance, angle and depth of the shadow. They also choose a color. These are all fairly easy to reproduce in box-shadow. Angle and depth of the shadow are covered by the first two digits of the shorthand property. Distance is covered by the last pixel value. Color is the last property, seems pretty easy to set right? Wrong.
The major issue here is that the default “Blend Mode” setting for drop shadow in Photoshop is “Multiply”. This is a light filtering setting that physically changes how the shadow interacts with the colors that are below it. Box shadow does not work like this, its not as sophisticated.
What can we do?
One way to give yourself a better translation is to change the “Blend Mode” to “Normal” and adjust your color to whatever you want. Then copy that value and plug it into your style sheet. This will give you the closest approximation to the color you want.
But what if I’m not the designer?
This is the issue I run into the most: I am just translating a design in HTML/CSS. So how do I find the correct value?
- Go to Photoshop, open up the Blending options and change some of the settings in the drop shadow
- Set the size of the drop shadow to 1 and the distance to 10
- Now there should be a solid version of the box to sample color from
- On a Mac, open DigitalColor Meter and sample the hex value
- Plug that hex value into your rule and you should be good to go
April 1, 2009 8:42 pm
Published by tnels
Been working a lot on trying to reduce the amount of information displayed on/around album art lately. Mostly around how to best display additional information about an album without forcing the user to go to the product page. Sometimes I am of the mind that its probably better just to force users to go to product pages to learn more. So I’ve been experimenting with only showing the album art and displaying additional information on interaction. Ultimately, I’m not convinced this is best for the user, but a friend sent me these two really cool jQuery plug-ins that I thought I would share.
Fullsize – its a plug-in but also a plea to the W3C to implement an additional feature in html to make it easier to display thumbnail and then show the full size without javascript. I’m not convinced this is a good idea at all, but the plug-in he’s got works pretty well.
Sliding Boxes and Captions – This one I can get behind. Slick animations while allowing the user access to additional information. I’m not for hiding everything because there’s no call to action, why would the user mouse over album art unless they know its going to do something? But there are several different ways to approach this issue, as shown in the demos.
Enjoy!
March 19, 2009 10:48 pm
Published by tnels
Internet Explorer 8 came out today. The office was all a buzz, most of the conversations revolved around its lack of CSS3 support and whether or not it should start in “Standards Mode”. While all of these are valid discussions, they fail to recognize that Microsoft finally did it right for once. They built a browser that supports all current standards.
I was in the CSS3 panel at SXSWi on Sunday afternoon, and there were 3 companies on the panel: Mozilla, Opera, and IE. When the IE guy came up to speak, the first thing he said was, “I am not here to talk about IE and CSS3.” He went on to explain how IE8 had passed every test out there and was fully compliant with CSS2.1. And you know what happened? People applauded. They were friggin elated. I was expecting people to boo this poor guy out of the room. His message was really that IE is in the present now, and because of that, we can all move into the future together.
I think Microsoft is tired of being the whipping boy of the internet and is ready to be open with the web developer community at large, not just those that use their products. One of the major factors in the IE’s inability to move forward was being able to support old products that Microsoft had made in 90s, and I think they finally realized the segment of society still using those products has really shrunk. Oh, and their constantly shrinking market share.
While Microsoft may be moving in the right direction, they haven’t forced everyone to upgrade yet. IE8 is only available via download direcly from the IE website. And for those of you reading this right now who can upgrade, please do so (here). Otherwise, you might be seeing this in your browser the next time you come back.
March 17, 2009 11:11 pm
Published by tnels
Just attended SXSW Interactive for the first time. Wow, what an experience. After partying all night and some awesome morning panels, the common theme after stuffing ourselves with food during lunch was, “Damn, my brain is mush.” Plus I got to drink Paul Rudd’s beer with some new friends. Right now I am full of inspiration and motivation, and I’m hoping to get everything that is in my head out in the next couple of days, so keep your eyes peeled for some updates.