The grid, which helps designers to organize text & images in a rational way, is hard to get used to, but after that, it makes most design related problems disappear.

The Grid System is a resource on grid based designs.

It covers:

• articles
• tools
• books
• templates & more on grids.

It is a very fresh website but already presents handy InDesign & Photoshop grid templates, interesting tools like Syncotype, Phiculator & more.

ecommr is a website presenting interface & design elements of e-commerce websites in a well-categorized way.

Besides the element categories, designs can be reached by retailer names too ( for ex: you can simply focus on the design elements of Apple Shop).

It has a growing collection of elements like:

• add to cart buttons
• banners
• product detail pages
• shopping carts & much more..

ecommr is definitely a handy inspiration resource for anyone into e-commerce related design.

Intersquash is a simple yet very functional & free web service that generates an iPhone compatible web interface from feeds.

It is very handy to use the service for creating an iPhone version of any website.

Usage of the service is very easy. Just mention the feed URL & the title of the website &  that’s all.

You can see an example for WebResourcesDepot here.

First of all, sorry that WRD had a downtime (around 8 hours) yesterday.

The post: 27 Adobe AIR Applications – Handy For Web Designers got pretty popular in most of the social-bookmarking / voting websites. I realized that the website was getting slower & about to take action on it. Then the post moved to frontpage at digg.com & I was not able to reach to server anymore.

As the server was not responding, rebooted from the power-strip several times, got ping results but after sometime, reboots weren’t pinging.

Thanks to the hosting company that they reached the server & told that the server was not able to boot because of corrupt system file errors (confirmed via KVM).

A fresh OS is installed & they added the previous harddisk as a secondary one so I could get the data.

After setting up the server, here it is, WRD is back online.

Lessons learned:

• Don’t underestimate the digg effect, it is really strong.
• Don’t reboot a server via power-strip (several times).
• Backup frequently (I’m good at this from past experiences).
• Apply all of your own tips.
• And maybe it is because the server is Windows, think about that.. : )

Hope that this post may help you to stay online.

Cymbolism is a website which aims to quantify the association between colors and words with the help of the visitors.

It simply shows a word & asks the visitor to click a color, the visitor thinks the color defines.

There are currently 200 words & visitors voted more than 280,000 times for them.

Words can be browsed to see the color-palette generated from the previous votes. And, this may help on deciding which colors to use in our designs considering the theme of the website.

Info: Every user / developer has different experiences. Any more tips that you share in the comments will be appreciated.

"Why is my website slow?" is a popular question. And it is a vital problem for a website.

Faster the website, happier & more the visitors. That's a well-known fact.

There are several factors that may slow a website. In general, all of them can be solved. This just depends on how much effort you can spend on it.

How much time do you have?

You may not have enough time to spend on speeding up your website. Depending on your free time, you may choose the steps to apply like mentioned below:

• I have very limited time: Apply step-1, step-2, step-4 & step-5 (only the compression parts) and step-6.
• I have some time: Apply all of them except step-3 & step-8.
• I rule the time: Go with them all.

Most of the tips are the ones that you probably know. So, you can use the list as a checklist (which it normally is in my "customer notes sheet" : ) ).

Here are the tips:

1. Get A Fast & Less-Loaded Web Server

This is a must. Whatever you do to make your website faster, if it is served slow, there's nothing to do.

Make sure that the server your website is hosted has low ping values & it is not over-loaded. Specially if you've a database and/or using dynamic files (like asp, asp.net, php, ruby..) server over-load can kill the performance.

If you've a simple website with few visitors then shared hosting is ok. For a website getting popular, think of a VPS with guaranteed RAM & CPU usage. If the website is already popular, a dedicated server will be the best performing one.

2. Know When To Use GIF, JPG & PNG Files. 

Playing with the quality of images will dramatically lower the sizes of them while they will still be looking good.

GIF is suitable for images with few colors like logos, text & line art. When saving a GIF file, make sure you use a small color pallette (learn more).

JPG is good for images with lots of colors & details like photographs. Decrease the quality of a JPG image before saving. It will still look good for a web image (learn more).

PNG, a format specially for websites, has great quality – both transparent & non-transparent – is specially functional when you're in need of quality transparent images. Don't forget that IE6 has problems in displaying them (learn more).

3. Use XHTML – No Tables

This is easy to tell but may be harder to implement for anyone that has few experience with XHTML.

The thing is, tables are rendered slower than DIVs by browsers. You can do more with less code & no need to say it is much better to be compatible with any browser (including mobile browsers), in means of SEO, etc..

Update: There may be cases when using tables are much more logical like "tabular data". You may have to code a lot for creating the look of a simple 5 columned table. Don't do that & use tables when needed.

What is tried to be mentioned here is, use XHTML rather than tables in general. But don't try to draw images with XHTML.

4. Use CSS Smartly & Compressed

• Mention every style in CSS files.
• Find the common properties in objects, define them once & try not to repeat them.
• If using a significant amount of totally different properties for a specific page, define them in another CSS file & only include on that page. So users viewing other pages won't need to download those properties.
• Compress your CSS file (you may try this, this or this).

5. Merge & Compress JavaScript Files

Try merging JavaScript files prevent multiple includes (see step 6).

If a JavaScript file will be used only in few pages, try to include them inside those pages only (like CSS in step 4).

Compress JavaScript files. It lowers the size seriously & doesn't have any bad effects on your side. This & this are some of the popular compressors.

6. Manage Included Files Better

There may be several files included in webpages like CSS files, JavaScript files and other JavaScript files for statistic services, social bookmarking sites, widgets & more.

Try to decrease the number of these files:

• If using digg-reddit-like voting widgets, don't use them in stories that won't hit the frontpage & remove the ones that were submitted few days ago as they won't have any help after sometime.
• Use only 1 statistic service if possible. Every web-based service requires new files to be installed & they are called each time a page is loaded.
• Host files on your side & don't use web addresses as file paths.
  • If you're using any JS frameworks like jQuery or MooTools, don't call the .js files from their websites but download & upload them to your website.
  • Don't try to call any file from a web address like "http://.." as this always requires dns queries to be done & will work slower.
• PHP Speedy (WRD post)is a very effective solution that does all the combining & compressing automatically. You may want to try it.

7. Use HTTP Compression

HTTP compression is one of the most effective step with a little effort.

Today, almost every browser & web server supports HTTP compression. Using it, your files are sent to the visitor compressed & un-compressed on their side & you can have up to 90% success for the text based files (like HTML).

You have 2 popular choices with this:

• HTTP compression: a feature of the web server (can be enabled on the server side)
• Gzip: can be enabled at the site level. Here are more details.
• Further readings:
  • HTTP Compression at Wikipedia
  • Speed Web Delivery With HTTP Compression – By IBM DeveloperWorks
    

8. Better Coding

This is for websites which does not use any ready-to-use systems like WordPress, Drupal, ExpressionEngine or similar (if you're using these then you're lucky as they are already well-coded).

Besides the better XHTML & CSS coding, the dynamic coding of the website directly effects the performance.

As you can guess, this is a huge subject. But there are some major things like:

• Seperate the static & dynamic content. This will help writing less-code.
• Create smart & effective functions. For ex: if you're going to use a user's name & birthdate at the same page, don't run 2 queries or functions, your function must call 2 of them. Simply, try to do everything once.
• Connect to the database as few as you can & once connected, call only the data you need.
• Try to keep database sizes small. If you've a large database, sometimes seperating it into several databases perform better, specially for the data which is reached not so often. From the server's point of view: 4-250mbs of dbs perform better than 1-1gb of db.

9. Cache Webpages

Caching is a superb way of decreasing the stress on the server by running more static files & less queries. It simply saves a static, HTML version of the page to be displayed & displays that file rather than the dynamic one.

For CMS applications like WordPress, there are already ready-to-use caching plugins (like WP-Cache). For PHP, here is a great article from SitePoint.

A small note, caching can also be done at the web server level. But if you're on a shared hosting account, you better be lucky to have it on.

What Do You Suggest?

Besides the tips mentioned above, what are your tips to make websites faster?

Whenever you’re browsing a website & it is too slow, you may wonder whether it is your connection having a problem or the server who is hosting the website.

speed.io is an internet speed test application, with a very attractive Flash interface, that you can test the speed of your web connection.

Whatever your connection type is: DSL, cable or a T1 connection, with just a click, you can start the internet speed test. It will run download, upload, connection and ping tests to give you the result.

At the end, it is no different then other speed test applications but as a designer or developer, using speed.io may be more fun.

A while ago, Templates.com was running a slogan contest which was also announced at WebResourcesDepot.

The contest is over & they have selected the winners. Click her to see the results.

And, free credit mentioned is loaded to the accounts of every participant who has an account. For using them, check Templates.com.

BgPatterns is a pattern library where you can find, create & share patterns.

You can create the patterns from ready-to-use images by changing the colors & canvas and scaling or rotating them. And this process is done with a slick interface.

The pattern design interface lets you preview them easily.

And, you can also check the recently created and popular patterns.

This is a simple line of JavaScript code which you can copy-paste to your browser and makes any webpage editable.

Here is an example:

This is a method which some people create fake Google Analytics & Adsense reports.

But, it is very handy to use when you simply want to see how a page would seem with a different text or without a menu, etc.

Here is the code:

javascript:document.body.contentEditable='true'; document.designMode='on'; void 0

Copy & paste it to your browser and start editing that page.