Complete UX tool lists

Lately I have become a heavy reader of various UX related books. Below I summarize lists of useful UX tools for every UX process. Some of them overlap categories (for example the prototyping tools usually provide wireframing tools as well, or some of the feedback tools provide a ticketing system as well), although I tried as hard as I could to separate them. Enjoy…

Update : If you know a service that is not listed here, please leave me a comment to add it 🙂

Wireframing

Prototyping

Web Analytics

Feedback tools

Session Recording

Click Tracking

Remote Usability Testing

Offline Usability Testing

A/B Testing

Conditional styles for IE10

As you probably know Internet Explorer 10 doesn’t support the good-old IE CSS conditional comments. This means that the below code won’t work in IE10!

<!-- Not working :-( -->
<!--[if IE 10]>
<link type="text/css" rel="stylesheet" media="all" href="/path/to/ie10.css" />
<![endif]-->Check out this Pen!

But don’t worry, you can still apply CSS styles only to IE10 by using the below syntax. Great tip, that I learned from Chris Coyer’s blog.

html[data-useragent*='MSIE 10.0'] body {
  background:#ccc; /* IE10-only */
}Check out this Pen!

Responsive web design and touch devices

Well you’ve just finished your glorious responsive web design, using all the latest trends and best practices, like mobile first, HTML5 semantics, progressive enhancement and many more. You’ve also tested it to various desktop, tablet and mobile browsers and indeed it looks great, but you’re absolutely sure that something is missing, and you are right…

Am I missing something here?

Well it is very possible that you are. You might need to implement/adjust a couple of things to achieve perfection before you start working on your new masterpiece. But let’s start at the beginning. We all know that we need to apply 3 main principles in order to take web design to the next level and make it Responsive Web Design (RWD). These principles are the fluid grid, media queries and flexible media. But why take it to the next level anyway? Why make it responsive?

Because, according to wikipedia, you want with a single web site to provide an optimal viewing experience across a wide range of devices, from desktop computer monitors to mobile phones.

But you’ve already done that and you’ve done it right. That’s the exact point were most people stop and start working on their new masterpiece and that’s where you’ll continue and stand out from the crowd. Most believe that their jobs done, when visually everything looks great. But what about the rest of it? Below I’m sure you’ll find out some valuable tips in order to really polish your responsive web design, and I’m not talking about the visual part.

Adapt to touch devices (fingers !== mouse pointer)

Well the first and easiest addition you can make is to ensure that the User Interface (UI) is working properly on touch devices, and when I say working, I mean working superbly. Are the navigation and call to action links large enough to be pressed or do they need more padding? What about the drop-down menus, are they usable or do they feel and behave very strangely on touch devices? Do the form elements have the appropriate input types in order to bring the appropriate virtual keyboard on the devices? I expect you hate it as much as I do it when forms elements don’t display the correct keyboard layout. What about your image sliders/carousels, tabs and accordions, do they respond to touch events? What about the tooltips and all the other mouse over effects you have? They aren’t so useful in the “touch” world right? (basically there is no mouse-over in the “touch” world). What about modals? Are they useful enough just like on the desktop version or do they just make the experience worse?

As you can see many traditional weapons of our web design arsenal don’t really work (some of them don’t work at all) on touch devices out of the box. But don’t worry, if your web site is well structured and built, it won’t be so hard to tackle all these new challenges. In most cases all you need is some HTML5 attributes, like the new input types and attributes, some basic CSS rules and most of the above issues are history! But since you’ve already started, don’t stop here. Try to fully adapt to this new “touch” world.

You can‘t get there from here

Working with touch events isn’t as hard at it sounds. The majority of the mentioned issues can be very easily fixed, simply by using a javascript touch library. After all, why reinvent the wheel, when other people have already built it, tested it (on many devices/browsers) and continue to support it? I personally tend to like lean touch libraries like Hammer.js, which is tiny (just 2k) and easy to use for smaller projects. But there are times where a more complete library like QUO.js (with a larger footprint of course), might be a more suitable solution because it provides more events and functionality. Don’t be afraid, I’m sure you’ll find the one that suits your site’s requirements, just be adventurous and try as many as you can. There are many other libraries and even large mobile frameworks that also provide UI elements, but my advice is to start small and lean and try to avoid the huge frameworks that at the end of the day will contain code and styles you won’t use. In most cases you’ll be fine with the bare touch libraries, but if you really need something more complete, don’t hesitate to use it (jQuery mobile is my choice on this area). Finally, try to avoid loading a huge framework, then using just one widget it provides. Be smart, load only what you really need!

As you’ve already noticed, these touch libraries and a bit of your magic will resolve most of your remaining problems, and tackle the touch interactions on image sliders/carousels, tabs and accordions etc. These small details are reletevly easy to implement, but believe me, they make a huge difference! Remember to make everything more “finger” friendly and try to avoid UI functionality that doesn’t really work on touch devices and you’ll be just fine. In any case, check and recheck your responsive web site to as many devices you can and try to tackle every piece of functionality that doesn’t seems smooth enough. When your done, there is more…

Don’t stop there

So you’ve fixed all the above issues and you’ve provided touch alternative events to all your mouse events. You’ve even implemented your responsive navigation pattern of choice. I’m sure you’re already proud of that, but since you’ve started, don’t stop there… Touch devices such as cell phones can do more than simply rendering. They can call a phone number or even send sms!

See the Pen Call or text from a mobile device using very simple markup by John Tsevdos (@tsevdos) on CodePen

They can even capture images or video using plain HTML forms! The below code will work on most mobile/tablet browsers on Windows Mobile, iOS and Android devices. Why not take advantage of it.

See the Pen Mobile media capture straight to your web form by John Tsevdos (@tsevdos) on CodePen

Always pair responsive design with a feature detection and adaptation strategy

A huge mistake I’m running into over and over again online, is that an average site is not rewarding modern browser users and in most cases it actually punishes them! How? The answer is simple and reasonable in some cases, old browser support. The good news is that you can still use most of these technologies by providing reasonable fall-backs for older browsers, you don’t have a good excuse not to do it. With libraries like modernizr you can very easily reward the modern browser (aka mobile browsers) users, whilst at the same time providing reasonable fall-back functionality for older browsers. There is nothing wrong with that, after all you can’t build the next big thing if you don’t “stand on the shoulders of giants” (Isaac Newton knew it). So next time you want to use an image grandient think twice before serving an image in all browsers just for compatibility purposes. Be nice to modern browsers and help them use that bandwidth for more elegant purposes. Client-side feature detection is here to stay and we must adapt to develop sites that way if we really want to take the web forward.

Speaking of rewards, why not take advantage of the latest cool client-side storage solutions like IndexedDB, Web SQL or Local Storage. The majority of modern browsers support the above standards, but have you actually used one? Well, just start using them! Brian’s LeRoux lawnchair is a brilliant project for using client-side storage that provides excellent fall-back support for everyone!

Finally, use the HTML5 geolocation API. It’s super easy to use it, you can easily provide fallback support and is extremely convenient on touch devices (where form submission sucks).

Final thoughts

As you might have discovered here, a “ready” responsive web design is sometimes not as ready as we expected. Hundreds of times I’ve encounter responsive web designs that looked great on my phone or tablet, but they didn’t behave/perform so well. They didn’t feel so mobile… Hopefully this post can be a great reminder next time you’re about to hand over a responsive web design. After all, you don’t want to destroy your visitors’ high expectations, right? In most cases the polishing is easy to implement and fortunately there are many tools out there that can help us in this task. Remember, aesthetics are good, but sometimes helping a phone/tablet user to fill a form (aka converting) or complete a admin task is more important… It’s as simple and as hard as that.

Update

The above article was based on the latest presentation I gave (with the same title). You can find the slides below.

jQuery element’s tag name

Getting the selected element’s tag name is very easy in jQuery. Just use the below code.

See the Pen jQuery element’s tag name by John Tsevdos (@tsevdos) on CodePen

Keep in mind that by default the returned tag’s name is capitalized so if you want it lowercase you’ll need this :

See the Pen jQuery element’s tag name by John Tsevdos (@tsevdos) on CodePen

jPrefetch jQuery plugin

I just released jPrefetch a nice little jQuery plugin that makes HTML5 prefetching a bit easier. You can very easily use it for your current solution (static website or even CMS), just by including it and adding data-prefetch="true" to the link that you want to prefetch. You can also pass a url (string) in order to start prefetching the provided url, in case you are loading a page that doesn’t have any link with the data-prefetch attribute. jPrefetch will take care all the rest, and start adding the necessary markup (metatags) in order to allow prefetching in supported browsers (tested in Chrome and Firefox). As you can see, the use of this is very easy and elegant. The plugin was mainly inspired by these two excellent articles, Mastering HTML5 Prefetching and Prefetching with HTML 5 and jQuery.

Feel free to fork it, use it, whatever 😉

Base tag : Learn how to use it

Every now and then a friend/colleague of mine asks me to have a look at his latest masterpiece (aka site). In many cases the second request is to have a look at why a specific client side feature is not working. Most of the time, I’m given a URL of the live version of the site that uses many internal and external resources (css files, javascript files etc). As you can imagine, it’s super time-consuming to recreate the online page locally to start working on it (downloading and linking all these files).

But don’t worry, the base tag can save us from this hard task, and help up recreate the online page locally within two simple steps.

  1. Copy and paste the markup from the online page in a local file (.html)
  2. Use the base tag to link all the dependencies/resources (you must place it into the head section of the page) to that html file

See the Pen Base tag : Learn how to use it by John Tsevdos (@tsevdos) on CodePen

You’ll end up with a fully functional web-page that uses exactly all the online resources. Now you can either start adding your code to it, or simply download specific files that need re-factoring. Easy and clean, don’t you think?

Autocompletion with HTML5 datalists

We have all used (and most of us built) an autocomplete input element. There are thousands of plugins/widgets out there, although below I’m demonstrating the easiest, most semantic and HTML5 way to build it without using Javascript! Just put a normal input element and connect it with the new datalist element by using the list attribute. That’s it! You’re semantically correct, HTML5 autocomplete input is ready!

See the Pen Autocompletion with HTML5 datalists by John Tsevdos (@tsevdos) on CodePen

HTML5 Prefetching

One of the most interesting, but not widely known features of HTML5 is prefetching. By using it you can start loading pages (or even files) before the user requests them. This can increase your site’s speed and the user’s experience! Did I mention that it’s super easy to implement it? Just put the below code into the head section of your page:

See the Pen HTML5 Prefetching by John Tsevdos (@tsevdos) on CodePen

For prefetching a specific file use the same code by pointing directly to the file.

See the Pen HTML5 Prefetching by John Tsevdos (@tsevdos) on CodePen

The above feature works only on Firefox. If you want to use it in Chrome as well you have to use the “prerender” attribute as well:

See the Pen HTML5 Prefetching by John Tsevdos (@tsevdos) on CodePen

Browsers that don’t support prefecthing will simply ignore it (Safari and IE) but sooner or later they will implement it, so you have no reason not to use it asap! Please try not to prefetch everything, it’s wrong! For more details regarding this neat HTML5 feature have a look at Mastering HTML5 Prefetching, an excellent resource on the topic.

Not so popular HTML5 attributes

HTML5 offers many new attributes that make our lives easier and our code more semantic. In many cases they even provide functionality that we used to implement with javascript, like the placeholder attribute. I’m pretty sure you all know the placeholder attribute, but what about the following ones?

hidden attribute

The hidden attribute, as you can easily guess, hides the element that it is set on. It acts almost identical to style { display: none; }, but it’s simpler, cleaner and more semantic (since you are hiding the element directly on DOM rather than style). It is also ridiculously easy to make a fallback on browsers that do not support the specific attribute, just hide it in your styles ( { display: none; } ) or javascript…

See the Pen Not so popular HTML5 attributes : hidden attribute by John Tsevdos (@tsevdos) on CodePen

download attribute

Do you have downloadable content in your website (like PDF files etc)? If yes then with a little HTML5 attribute you can provide better semantics to the link element, give a better description/title to your file and enforce the browser to download it! Just use the download attribute followed by a string that represents the description/title of your download. Even if your filename is a timestamp or a temp name, the user will download the file,  having as its name the title you used.

See the Pen Not so popular HTML5 attributes : download attribute by John Tsevdos (@tsevdos) on CodePen

autofocus attribute

Finally with the autofocus attribute you can autofocus any input, textarea or button you want. Simple as that.

See the Pen Not so popular HTML5 attributes : autofocus attribute by John Tsevdos (@tsevdos) on CodePen

To conclude, whenever possible, try to use the new HTML5 attributes. They will always be more semantically correct and it’s super easy to implement them. Also, most of them have very simple fallbacks but even if you don’t provide any, most of the time you won’t break something, so you don’t have any excuse.

How to style a file input element in Firefox

Working on a recent project I found out the hard way that Firefox doesn’t allow you to style a file input element the way you want. I’m using Chrome for surfing and development, which let’s you style a file input field without any constraints so I was a bit frustrated when I checked my form in Firefox! With a quick search I discovered that Firefox doesn’t let you do too much with the file input element. I also discovered some workarounds, but most of them were too complicated for the simple effect I wanted to achieve (to place a background image in the file input field). With a little help from stackoverflow and no javascript at all, I managed to make it work in Firefox as well as other browsers (see code below).

See the Pen How to style a file input element in Firefox by John Tsevdos (@tsevdos) on CodePen

See the Pen How to style a file input element in Firefox by John Tsevdos (@tsevdos) on CodePen