When designing web pages, it is a good idea to have as many browsers on your computer as possible, so that you can test your code in each, as most browsers interpret the code in slightly different ways. If you have done any design before, I’m sure you have had a site that looks great in Firefox, but looks screwy in IE, or something like that. Often you can’t have multiple versions of a browser on your computer, and it may be impossible for you to test your site on browsers of another OS. That is when the above site is very useful. All you have to do is plug in the web address of the site you are testing, check off the browsers you want to check and submit it. It may take a few minutes, but you will get screenshots of your site in countless browsers and operating systems.

When creating a website, you want people to have a way of finding it. This can be business cards and advertisement, links from other sites, and, primarily, the search engine. Especially if you are using your website for business purposes, it is very important that your site rank high in the search engines. Even the coding of your site needs to be approached in a way that will optimize your search rating. Keywords, domain name, incoming links, overall traffic and more all effect how high in the results your site will be. Most people do not look past the first page of ten results when searching, so search engine optimization is very important. Below are some good resources for SEO:



Color is the ultimate tool a designer has at their disposal to communicate feeling and mood. This site attempts to quantify the association between colors and words and become a resource for designers to choose the best colors for the desired emotional effect. You can both go through the list of words and give your answers on what color goes with what word or you can browse the results. It is an interesting experiment and could be useful if you have clients with loose enough brand standards to let you use a new color to set the mood.

other sources:

The goal of is to provide design articles, viewpoints, and resources that are not the same regurgitated, rewritten articles that seem to plague the design blogosphere.

This article is about common mistakes in creating a portfolio site.  I think this will be useful to my own web portfolio. So the author evaluates 200 portfolios for this research, there are screenshots to illustrate his points on some of the websites. The goals he judged each portfolio on, and that each portfolio should strive for are relatively simple: Impress the viewer within the first 10 seconds visually and allow the viewer to succeed in their goals (viewing your work or contacting you)

Here’s a quick reference of how the CSS is structured

960 Grid System, by Nathan Smith, “is an effort to streamline web development workflow by providing commonly used dimensions, based on a width of 960 pixels.” Why 960? 

All modern monitors support at least 1024 × 768 pixel resolution. 960 is divisible by 2, 3, 4, 5, 6, 8, 10, 12, 15, 16, 20, 24, 30, 32, 40, 48, 60, 64, 80, 96, 120, 160, 192, 240, 320 and 480. This makes it a highly flexible base number to work with.

The grid is divided into 12 and 16 columns, which can be used separately or in tandem. PDF grid paper, templates for Fireworks, OmniGraffle, Photoshop & Visio, and CSS framework with demo HTML are available for download here.

This flexible grid system and its supplied templates are handy for prototyping website designs and helps keep elements consistent and easier to code.



The full commented page

The same page but sprited

From a web designer and developer’s blog, this article shows examples of well known websites at different stages of their evolution. It’s great to make fun of older websites but also interesting to see what trends have emerged. Some websites have gotten simpler and image heavy while others have gotten more complex as people have become more adept at navigating websites.

It seems as if we’ve been using the internet long enought that we can look back on the web historically and note movements and draw conclusions the way we might look historically at industrial design, art history, or the history of invention. Web Archives or Google Trends are neat ways to look explore the past.

These two sources allow you to check to see if your website is compliant with HTML, XHTLM or CSS standards. HTML validators operate by comparing the mark-up on a web page to the W3C standards. The standards vary depending upon the declared version and so the validator will start by reading the “doctype” declaration to see which set of standards to apply. Once the validator has read the page and determined the applicable standards it looks for such things as missing opening or closing tags, missing quotation marks and other hand-coding errors. So if you have been looking for hours to find what’s wrong with your code, try one of these websites.

“I’ve made it a goal to learn at least one useful thing each day so that I can stay sharp and well-versed on the topic of web development and design.” This blog contains a number of useful information sources for website development, information hierarchies, and design choices. There are 30 web pages that provide invaluable tools for both beginning and advanced website developers. The blog provides helpful descriptions of the pages and the information that they provide. Personally, I was most influenced by Web Designer Wall. Web Designer Wall is another blog that provides design ideas and CSS tutorials.;

The first website is very useful for choosing a typeface for your website! You simply choose a typeface and you immediately know how it looks like in your browser. It shows you all varieties of the choosen typeface, and you can test it in different sizes, tracking, colors and so on. On that way you can shortly test what size you need for a heading, as an example. Just type it in, and you don’t get disoriented…

The other homepage is just a nice guide for building a webside. It has a lot of useful links. For free fonds for example (my pasion)! What’s more you find all the basic design tips and get some inspiration!