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!

Bored? Try my hellish Image Maze web game!

The beginning…

Level-based/hacker web games have been around for a long time now. The usual premise is that you land on a page using your browser, and with the help of the information on this page are supposed to reach the “next level”, ie. the next page, with yet another mystery, and so on. This is accomplished by either manipulating the URL through the hints you have received, or inputting a password in a form on the page.

I’ve always thought it was a great concept and have played quite a few of them in my days. (Although I’m having a real time finding them right now, maybe I’m using the wrong search terms – if you remember any of these classics, feel free to post the link to them in the comment section!)

But you’re not here for them, no you’re in for my very own Image Maze. So head on over to
http://fs.shrtl.com/imagemaze/ and you’ll soon notice that you have been bumped to
http://fs.shrtl.com/imagemaze/first – “first” being the level name, and your task is to find the next level, for example, if you were to guess that the next level is called “brownie”, you simply go to http://fs.shrtl.com/imagemaze/brownie/ and check it out. Now you’re on your own!

The game contains six levels, which quickly go from very simple to sucker hard, each level has a very vague hint on what to do to find the next level name, and features some of the photos I’ve taken over the years. Once you’ve finished all of the levels you’ll get a unique code, post it in the comment section if you want to brag about your accomplishment! 🙂

I’ve assembled a bunch of hints if you get stuck, but don’t peek unless you’re absolutely lost – because just like Hint Coins in Professor Layton, it ruins the experience! In order to view the hints, simply mark the text in the black boxes below.

Hints:
Level 1 – What kind of extra information does an image carry when used in HTML?
Level 2 – Now would probably be a great time to check out the HTML code!
Level 3 – Woah, that’s quite a big image – but why?!
Level 4 – What usually causes an image to now be shown?
Level 5 – Your browser won’t help you solve this one, there’s a secret inside the image.
Level 6 – This one is kind of like the last one, only the other way around.

In other news…

Small logo improvement suggestion to account for actual company policy.

The oddball, unstable queue  and booking system employed by Swedish event ticket seller Ticnet stinks. The fact that they have pretty much a monopoly on any larger event doesn’t make things better. I guess I’ll just have to enjoy my Rammstein concert sitting down… in the back… Blargh.

Software Release: Homepage downtime kit for Apache v1

The bad boy in action.

When you’re managing a homepage for a while, there will be the times when you absolutely need to take your site down for maintenance – be it a hardware upgrade, code upgrade (When migrating to a new version of your/someone elses software.) or disk maintenance due to power loss or crash. But what do you show your users while the regular homepage is unavailable? Simply shutting down the server resulting in an error for the end-user is kind of boring, and gives a far less memorable expression than having a proper downtime page, all the big boys are doing it, so why shouldn’t you?

I spent a few minutes and hacked together a minimalistic “downtime kit”.

The easiest way is to temporarily redirect your page somewhere else (where you host the downtime kit) during the downtime, and there’s a multitude of ways to do so, all depending on the architecture of your hosting setup, so you’ll have to think of the best way for you to utilize this kit.

As for how it works, it simply uses the mod_rewrite functionality in Apache to redirect image requests to one central image, so that any hotlinked images you might have show a proper downtime dialogue on their respective pages. It also redirects users who want to download files and visit pages to a proper downtime dialogue.

Setting the kit up to work for your page takes less than a minute, here are what needs to be done (taken from the readme.txt file in the distribution.)

Prequisites:

• PHP5 (Should work with PHP4)
• Apache with mod_rewrite (XAMPP Lite distributions work great for this purpose.)

License:
This kit is released as beerware, a very permissive license, so do whatever you please with the code.

Download link:
zip file – (Mirror 1 / Mirror 2)

Tutorial:

1.) Upload all the files into the root of your web directory, if you want to restrict the script to a subfolder, read step 2, otherwise skip to 3.

2.) If you uploaded the distribution into a subfolder (like http://www.mypage.com/ahomepage) instead of the root (which in this case would be http://www.mypage.com) – open the .htaccess in a text editor and change the second line from:
ErrorDocument 404 /index.php
…to:
ErrorDocument 404 /<your subdirectoryhere>/index.php

In our previous example, this line would be:
ErrorDocument 404 /ahomepage/index.php

If you have vhosts that link a subfolder to a domain name (ie you can visit the page at ahomepage.mypage.com) this step is not necessary.

3.) Open config.php in a text editor and change the text
<b>Status:</b><br>This page is down!
…to whatever you wish for your downtime page to show.

4.) Optionally change the notfound.jpg image for another one that suits you or your homepage better.

5.) Enjoy!

In other news…

Cover art for “The Constants – The Foundation, The Machine, The Ascension”

In this episode of “In other news…” we’re going to talk about post-rock. It feels like such a huge topic, but I’ll just satisfy myself by saying it’s a fantastic genre of music, especially instrumental post-rock, so without further ado, here is a list of some of my favourite post-rock band, in unspecified order – click on the band names to visit their homepages/profiles.

• The Constants
• God Is An Astronaut
• The Evpatoria Report
• Beware Of Safety
• pg.lost
• s.ink

Most of these bands are relatively small, and you can find a lot of music on their respective Myspace profiles and homepages.

Optimizing the JAVA QuickSort implementation – a real-world study

I recently found a report I wrote on JAVAs quicksort algorithm as part of the INDA course last year. I read it through and it’s actually pretty interesting stuff if you’re interested in how QuickSort works and how we can optimize the algorithm for specific data sets. So I figured I’d release this for anyone who is interested! I’ll gladly accept comments on the report, so don’t be a stranger!

The abstract below:

In this report, we examine four implementations of the famous sorting algorithm known as QuickSort – the optimized one included in the Java API, and three barebone versions that we write ourselves. We then put these algorithms against each other to see which one is faster in sorting arbitrary and sorted data. We discover that whilst the Java implementation is the best in some cases, it can also be easily outperformed if you know a lot about your information.

You can download the report below (421KB PDF)
Mirror 1
Mirror 2

3D Realms shuts down – millions of Duke fans weep

Duke – Smug as always,
unaware of his fate.

Update 1: There’s great coverage on the history of Duke Nukem: Forever here, a fantastic read.
Update 2: An insider story about the life and death of Duke Nukem: Forever, check it out!

It felt almost unreal reading this article and realizing that Duke Nukem Forever might actually never be released. This holy grail of vaporware has been in the making for over twelve years, which in perspective is more than half my current life length! The game has gone through a number of 3D-engine changes and a cascade of other issues.

I was one of the people that always believed. I believed when the game first became notorious for its long release cycle back around the millennium shift. I even discussed DN: Forever with Per just a week ago or so, where he proclaimed that the game would never be released, following Broussard bold claims that DN:Forever would hit the shelves this very year.

Now it sadly looks like he was right.

To be perfectly honest I shouldn’t even be sad over this, I rarely play games nowadays, even though I have fond memories of the series, especially DN: Land Of The Babes which kept me company for what probably was an entire summer vacation. But this was one of those games – the ones that you just had to at least try because of the hype. If it was a great game or a disappointment came in second.

Take-Two still holds the rights to the Duke Nukem franchise, but has declined to make a comment on the situation. Who knows, maybe they’ll continue development and actually release it, although the chances are slim. But I’ll never stop believing… R.I.P for now, Duke.

The game back in 2001, when it looked almost finished, and still cool by todays standards according to me.

In other news…

Rawr!

I’ve finally started to teach myself Apache Tomcat – a fascinating (albeit sometimes confusing)  implementation of Java for the web. If you’re a Java programmer and wish to develop dynamic applications for the web, this is where to start!