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 and I also follow Nielsen Norman Group. There are many resources for testing usability, one of my favorites is 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 img{width:100%;}

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

aside img{

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