15 web design resources that will save you time and improve your designs!

I have been doing quite a lot of creative work recently in the domain of web design (get it, “domain”, har har!) , and I’d be happy to share some of the great web sites and applications that have helped me make better and cleaner design and code jobs. I have divided the sites into six categories, so take your pick and dig in!

If you have any suggestions of your own, I’d be happy to hear them, leave a comment and be heard!

Cliparts and photos

 

Sxc.hu – Royalty free photography
Sxc.hu, or stock.xchng, is the little brother of  iStockphoto. They offer royalty-free photography for non-commercial use, and an option to contact the authors for use in commercial application using a very relaxed license. My experience with the people there has been great as a whole, highly recommended and great array of photographs, but also clip art.

 

clker.com – public domain clip art
Clker.com offers public-domain clip art uploaded by users. Great site for any smaller images that you might need, such as bullets and icons.

Compatibility

Common font list
When designing a page, you need to make sure you use a font that is visible to and looks visually similar for every viewer, and degrade gracefully in the cases where the font is not present on the viewers computer. This useful webpage displays common font families that work over a wide array of browsers and operating systems.

Inspiration

BrowserShots
BrowserShots has lost its glory days as the go-to site for making sure your web pages look equal across all browsers due to its increasingly long rendering waiting time and restrictions, and with IETester mentioned below, you can verify that your page runs properly on all major browsers.

But BrowserShots has introduced a fantastic gallery of web designs, and this is a place where you can find great inspiration.

ColorSchemer gallery and ColourLovers palette gallery
Finding the correct colors for your site can be a surprisingly difficult challenge, but when browsing these galleries, this becomes a fun experience. The idea is that you pick a scheme, which contains roughly 3-8 colors, and then try to base your design around these. If you try it, you’ll find a surprisingly clean and beautiful site looking back at you when you are finished. Using schemes with multiple variation of the same color (like this one) has worked the best for me.

Web Design From Scratch
A great resource for articles about the philosophy behind, and practical application to modern web design.

Applications/Add-ons

Sizer
Sizer is a small application which allows you to easily resize your browser (or really, any) window to see your web pages (hopefully) degrade in a graceful manner. Simple and easy, yet invaluable.

Firebug (Firefox add-on)
Firebug is a great web developer tool built as a Firefox add-on. I have barely scraped the surface of this great tool, but it has been very helpful so far.

 

IETester
Your web design and CSS looks great in the latest versions of Firefox, Chrome, Opera and IE? You’re not done yet! Unfortunately, a large portion of people still use Internet Explorer 7 and 6 (*shudders*) and this tool will help you make sure your design stays true to its form. (although it probably won’t until you spend an hour trying to figure out why IE6/7 doesn’t handle inline block  properly, which brings us to…)

Fixes and hacks for common problems
 

Google
This might seem like an odd choice at first, but if you’ve ever had a problem, googling will almost always lead to an answer. The great thing about the internet is that chances are great that somewhere, someone has had your exact problem and either asked about it in a forum or given a solution in a blog post, which will usually lead you closer to an answer.

 

IE PNG Fix
It is fairly common knowledge that Internet Explorer 6 and below does not handle the alpha channel (transparency) for PNG images properly and displays the whole transparent area as a gray box. Resorting to GIF is possible for single-colored background, but for patterned backgrounds your only choice is PNG and this fix (Which is mostly done in CSS) will take care of that.

A quick note: I have noticed that the JavaScript used for tiling images in “IE PNG Fix”, which is called “iepngfix_tilebg.js” seems to break the dropdown functionality of Superfish, which I mentioned earlier. I have been looking at the problem, but haven’t been able to identify the culprit, although I suspect it is related to the way the JS places the image. Unless you absolutely need tiling support, it’s best not to use the JS code, so beware!

CSS Sticky Footer
Making a footer that always stays at the bottom of the page, moves with JavaScript and  works over all major browsers is a surprisingly difficult task, but CSS Sticky Footer takes care of it. It requires you to import a fairly large CSS file, but it shouldn’t break your layout too much, aside from a margin that needs fixing here and there.

Coding
 

CodeIgniter PHP Framework
CodeIgniter is a great framework for easily making web applications in PHP. The features I have enjoyed so far is the fantastic database handling using Active Record, the interesting Model-View-Controller approach (which was new to me) and the great performance I get from my applications. If you want to know what the hype is about, check out this video tutorial entitled “Create a blog in 20 minutes”!

Suckerfish JavaScript/CSS menu system
Another thing that seems like there should be a myriad of online, but is surprisingly difficult to find is a menu that works over all browsers, is completely free, simple to use and can be used in commercial applications. Look no further, Suckerfish is what you have been waiting for! And it degrades nicely to CSS-only under environments without JS too!

Experimenting with alternative CAPTCHA designs and a brief history of the modern day CAPTCHA

Examples of simple CAPTCHA designs

What is a CAPTCHA?
If you have ever registered yourself on any site (mail, social networking etc) there’s a good chance you’ve seen a CAPTCHA (Completely Automated Public Turing test to tell Computers and Humans Apart). It is a simple test to prove your humanity to the site you are visiting. In this post I will be discussing CAPTCHAs in general, and experimenting with some new designs that might further thwart spammers.

Why is it needed?
The problem stems from how HTML forms work – they’re very simple to fill out and submit. Using a specially coded software, a spammer could  create thousands of email account in a matter of seconds, these could be used for sending email spam. (Because the email sending page is essentially another HTML form.) Spamming guestbooks is also a popular SEO technique to drive up a particular sites PageRank with both Google and other search engines, which employ similar mechanisms. (As a side note, good practice is to use the nofollow attribute for all outbound links if you’re ever coding a guestbook.)

CAPTCHA systems were invented to stop spammers. A CAPTCHA is usually a generated image that shows some sort of distorted text, which the user can read and input properly. A lot of work go into crafting CAPTCHAs that are simple for the user to read and understand, but difficult for OCR software to comprehend properly. This is usually done by adding distortion of some sort. But as OCR software improves and some people actually write custom code that target specific CAPTCHA systems, more obfuscation is needed, and so unreadable examples as shown in the image below are not uncommon.

An excellent example of a horrible CAPTCHA

Therefore I applaud alternative designs. There has been a few ones including identification of cats and dogs, although these are also flawed because of their limited databases, which are subject to brute force attacks.
Here’s another one I found while researching this post that I quite enjoyed:

An excellent example of an excellent CAPTCHA

This simple substitution CAPTCHA is good because it is unbreakable by standard OCR and requires a special algorithm. This involves someone programming it, which involves manpower, which involves money, which is a rare commodity – therefore, unless this kind of CAPTCHA is run on a high-profile site it would be too much hassle breaking it, and so this kind of alternative implementations works well for smaller sites.

My experiments
I know that I’ll be needing to use a CAPTCHA for some of the projects I am currently working on, and so I sat down a few days ago and started brainstorming. Some of these CAPTCHA variations probably already exist, others are a bit more exotic. Feel free to implement and use any of these. If you do, I’d love an email on how you are using them and what improvements you have made.

– Counting upwards

This is a pretty simple idea that differs from the vast majority because the letters are jumbled – every letter has a corresponding number. You type the word by starting from one (1) and counting upward, in this case the word is SECRET, which we see if we move the groups by numerical order:

SECRET
———-
123456

This sort of CAPTCHA should work pretty well on even high-profile pages, especially if you apply some distortion to the background, because it provides two points of errors – not only do the letters have to be identified correctly, so do the numbers. This one probably requires a small explanation on how to solve it on the page where it is used.

– Follow the path

This is one of the more exotic ones, and it builds upon the idea of following the letters around the shape in the direction of the arrow, in this case we start from H and wrap around the shape to make out HELLO. There is some Lorem Ipsum text inside the shape to further fool OCR. A full implementation should also randomize where the arrow points and its location from all possible letters. Distortion could be put on the background to make letter identification harder. This almost certainly requires an explanation on how to solve it on the site where it is used.

– The hierarchy
Last one wasn’t exotic enough for you? Meet the hierarchy. The basic idea is that letters are stacked on the edges of an arbitrarily large pyramid. The example shows one with four letters on each side, but it can be of any size. Inside the pyramid is an arrow twisting upwards – now follow its path and pick up the letters on the way to spell out TEST. A full implementation should randomize the path of the arrow, and perhaps even use other shapes (squares, circles) although just switching out the letters should work well for low-profile site use. If you use this to authenticate your comment form and don’t feature some sort of explanation on how to use it you probably won’t get a lot of comments…

Questions?
If you have trouble understanding how any of the examples work (I know my explanations are usually clumsy at best) go ahead and throw me a comment or an e-mail. You can find my address on the Fair Use page.

But it’s still possible to beat them!
How you might ask? Indian slave labor. The article linked is a fascinating insight into the world of the professional CAPTCHA solvers, who make as little as 0.001 dollars per solved CAPTCHA. A truly fascinating read about how cheap manpower can be used to circulate more spam around the planet.

See you next time!
This article has talked about CAPTCHA in general and some experimental approaches to the problem, next time we’ll discuss various ways of implementing a CAPTCHA using PHP. Stay tuned!

Tinfoil Tom Series – Episode 1: Securing your web browser

“What’cha lookin’ at?!”
(Thanks to Sarah for this beautiful depiction of paranoia!)

Hi and welcome to the “Tinfoil Tom” series that I intend on running on this very blog. This series of post will be dedicated to end-user computer security – for the slightly paranoid. So it seemed appropriate to start with what you’re doing at this very moment – that is, surfing the web! (Whatever else you were doing is but your own business, in the spirit of tinfoil hats, paranoia and all.)

This guide is first and foremost directed at power-users, but it is written in a way so that (hopefully) anyone can follow it without problems.

The web browser
Try asking someone about their web browser preference and you’ll notice that many people would rather bite your head off than consider an alternative one. That being said, according to me – the power-user browser is Firefox. Opera is not far behind and may very well excel in some categories, but with the grand focus on security, the enormous community and the perpetually growing add-on library that all Firefox users can enjoy, it’s simply unbeatable, and so it will be a prerequisite for this tutorial.

With its out-of-the-box configuration Firefox is one of the most secure browsers, but we won’t stop there! To make your experience even safer – read on for some useful add-ons.

Added security
Here are some great add-ons that will help in tightening your browsers security.

Adblock Plus

Before and after shot. Unfortunately, some of that heavily
appealing “bling-bling” disappears together with the ads.

Whilst not technically a security add-on, Adblock plus make practically all ads on pages disappear, and in such way makes you less targetable to third-party exploits such as XSS attacks, not to mention those bastard animated smileys. *shivers*

Using Ad blocking software has come under heavy fire lately, with many ad-financed sites expressing heavy criticism towards the users, some sites have even started to reject users with ad-blocking software. Luckily, the number of these sites so far is very small, and let us hope it doesn’t spread. One could probably spend a whole series of posts just discussing the moral aspects of ad blocking (Which according to me has heavy parallels to downloading or TiVo‘ing TV shows, effectively skipping the commercials.) but I’ll leave it for another day.

Get Adblock for Firefox here.

NoScript

Evil script is evil.

Before you install this add-on, you should be aware of the fact that breaks almost all modern websites because it interferes (or rather completely shuts off) JavaScript support unless you specifically enable it on a per-site basis. But it also stops a lot of third-party homepages from running scripts and makes a lot of other security improvements under the hood. Although I don’t recommend this add-on for normal users, power users who often visit the same set of homepages may benefit greatly in terms of increased security – this add-on will truly make your browser an impenetrable fortress.

Get NoScript for Firefox here.

TorButton

Just watching that onion makes my eyes tear up… with laughter!

TorButton is actually a quick proxy gateway to Tor, an online darknet-like anonymization effort, but because the Tor software acts as a standard HTTP proxy, we can use any proxy server in its place, and because the TorButton add-on features many security tweaks, some similar to NoScript, even running it through a transparent server on your own computers adds security, and as far as I have noticed, TorButton breaks much fewer websites and barely requires any user attention. The only problem might be the cumbersome task of properly setting up a proxy server, but for Windows I can recommend CCProxy which I use myself. (Demo version with some non-timebased restrictions, although works fine for our intentions.)

Get TorButton for Firefox here.

Coming up!
In the next episode of the Tinfoil Tom series we will be discussing laptop security, secure file deletion through wiping and file recovery.

In other news…

Randomly speaking of video game soundtracks – the classical Unreal Tournament Score is really such a pearl. Fantastic and surprisingly mellow soundscapes with a hint of almost organic roughness. I’m pretty certain it isn’t being sold anymore (I think it was only included in the special editions to begin with.) but I found a mirror, let’s hope it stays up!

Spotify – future or failure?

Today I acquired a much sought-after Spotify invite (thanks Mikolan!) and finally got to try what has been called a new and revolutionary way to listen to music. Instead of wrapping music in DRM and selling it at ridiculous prices (I’m looking at you, Apple.) they provide you with software that lets you stream their entire gigantic library to your computer. (Screenshot below) All you need is an internet connection.

The service is presented in two flavors, a free ad-based service, where you listen to music on-demand and hear occasional messages from sponsors (So far I’ve only heard ads for a security company and for Spotify themselves.) and a paid service – for 99 swedish kronor per month you not only get all of the music, but it is completely ad-free. I should also mention that the service is currently available in Sweden exclusively, visiting the site from another country informs the user that Spotify is not available due to licensing restrictions.

While the service is pretty great, it’s not perfect – I found that even though Spotify sports a huge library, many artists that I listen to are unavailable at the moment, either at all or in full albums. The ones that I miss the most are: Ugress, The Flashbulb, Mind.In.A.Box, Dark Globe and Juno Reactor. While there are perfectly good reasong to why these artists are missing, I still feel a bit sad that they’re not in place yet. But don’t let a few missing artists fool you, I found tons of other obscure artists on Spotify, and am very impressed by the library.

My final words would be that Spotify is a great service, and that I’m planning a forum post comparing it to similar services such as Last.fm and Pandora.