blog

Usability Resources

We have added a new member to our family this week and life is somewhat hectic, I forgot how much sleep you don’t get with a newborn. With that in mind, this week’s post is short.  Earlier this week someone asked what websites I like to visit for staying current in UX. My top picks uxmag.com and uie.com. I also follow Nielsen Norman Group. There are many resources for testing usability, one of my favorites is www.userfocus.co.uk they are a London-based usability consulting and usability training company and have put together an awesome workbook on usability testing.

HTML5 Responsive Images and CSS3 Image Flipping

It’s hard to have a responsive website without responsive images, I usually use the HTML5 figure “figure” or the aside “aside” tag for responsive images. In your CSS just assign your width, max-width and/or min-width to the tag.

In the code below, the image below will not exceed 800 pixels wide or get smaller than 300 pixels wide.

figure{min-width:300px;max-width:800px}
figure img{width:100%;}

Using CSS3, we can also flip images horizontally without the use of an image editor or JavaScript.

aside img{
-moz-transform:scaleX(-1);
-o-transform:scaleX(-1);
-ms-transform:scaleX(-1);
-webkit-transform:scaleX(-1);
transform:scaleX(-1);
}

Check out the demo here, be sure to resize the browser window.