Tools for finding kodsmuts

In total I’ve been speaking about Kodsmuts three times this spring. Last time was in Gothenburg at Drupal Camp. I got a question on Twitter after my session from @vincic who wanted to know if I used any special tools to find Kodsmuts. I realized the answer was too long for a tweet and promised to blog about it. This is me fulfilling that promise. Sorry it took a while.

Now I don’t really think I use any fancy tools to check web sites so don’t be disappointed. I’m just going to tell you the way it is. Here it goes.

Viewing Source

The most common way for me to review a web site. I view source. On a desktop it’s pretty easy. I hit Cmd+Alt+U in Chrome on my Mac and I got the Dev Tools, Cmd+Alt+I, to see the generated source. On my phone a got a nifty little bookmarklet with the following JavaScript:

javascript:(function()%7Bi=document.createElement('iframe');
i.setAttribute('viewsource');
i.setAttribute('width',%20'100%25');
i.src=location.href;
document.body.insertBefore(i,%20document.body.childNodes%5B0%5D);%7D)();

I did add line breaks to make it more readable but if you’d like to use it you better remove the line breaks.

Viewing Minified Resources

Nowadays a lot of resources like CSS and JavaScript are minified. This makes them really hard to read. To get around this I usually check if the file has a “min” in the filename, like scripts.min.js. If it has there are a good chance you can get to the original file by removing the “min”. Otherwise I often visit Dirty Markup (Maybe because I find the name somewhat appealing). You also got the pretty print-button in Dev Tools in Chrome which are pretty useful.  Dev Tools is of course also great for debugging.

Screenreaders

I often use VoiceOver if I suspect something is off. It’s a real good tool to see if the page is logic and not full of hidden things that might destroy the user experience. Cmd+F5 to open up VO and Ctrl+Alt+A to go through it all and Tab for jumping between links. Easy. Now of course VO is for Mac only. If you are on Windows use NVDA.

Colors

To check contrast nowadays I use Lea Verous Contrast Ratio site. I used Jonathan Snooks  tool before. As for color blindness I got a nifty tool called Color Oracle which is very simple but I think it’s good enough for quick checks.

Keyboard

I check the most common things with my keyboard like if the tabbing feels logical and if it’s obvious where on the page I got my focus.

Google

I often use Google to search for things related to a web site to see how they do when it comes to SEO. Do I get good hits? Is the description good enough? If not what might be he reason? I know a lot of web developers think SEO is kind of shady business. But many sites get most of their visitors from Google so you need to check this.

That’s it folks. Keep it clean and healthy out there!