http://sixrevisions.com/web_design/a-look-into-color-theory-in-web-design/

But what about how to find the right color? Who is faster and sure what to choose? In my daily work I often stumble upon different types of customers. Some give examples and know what they want. Others ask for propositions what to choose. Others compare printed colors with the monitors color, printed on whatever a printer.

I often wonder why the most difficult decisions are caused by people who ask many others what to do! With different monitors and different ideas and points of view. And see one thing – often it is more difficult with women.

My personal selection is here – and I hope there will be more suggestions, too. Maybe we will reach the 100s? Sure. Give them to me! Use this as your showcase.

http://yaili.com/ – London

http://www.dream-design.net/

http://www.evalotta.net/

http://girlatplay.com

http://www.kaiusdesign.com/index.html

http://www.pixelhorse.de/

http://peejeej.com/

http://www.pixelgraphix.de/

http://www.lealea.net/

http://www.sarahenid.net/

http://juliakhusainova.com/

Let’s have a look at the mag’s original description:
“Beat That If You Can! – “Slanted #12 – Women, Typography, Graphic Design” is a stage for extraordinary and intelligent projects by women. This is not a very special thing. For our focus on visual culture it’s all the same whether a (typo-)graphic work has been realized by a female or a male being. But it’s undeniable and strange that still only very few women are visible in graphic design (more) and typography (less). We want to contribute to more visibility for at least some female type and graphic designers – design by women is at least just as well. Beat That If You Can!

With great pleasure we present the work of Ariane Spanier (Berlin), Julia Born (Amsterdam) and Verena Gerlach (Berlin), the photographic essays “Brides of Krishna” by Kalpesh Lathigra (dmbmedia / London) and “Female Marines” from the archives of the U.S. Marine Corps as well as contemporary typefaces, illustrations and graphic projects by female designers. Type essays by Laure Boer (Berlin) and Gerda Breuer/Julia Meer (Wuppertal) are dealing with the role of women in graphic design and typography and outline a corresponding history. Numerous interviews with Verena Gerlach (Berlin), Ariane Spanier (Berlin, Nadine Chahine (Bad Homburg), Veronika Burian (Prag), Laura Worthington (Washington), Kapitza (London), Geneviève Gauckler (Paris), Esen Karol (Istanbul), Akiko Kanna (Tokyo) and Susanne Baer (Tokyo) as well as the second part of the Tokyo report by Ian Lynam (Tokyo), a musical travelogue and a paper report round up stuff to read.

Slanted Magazine #12
Women, Typography, Graphic Design
Autumn/Winter
148 pages”*

*order and see here: http://www.slanted.de/eintrag/slanted-12-women-typography-graphic-design

There are many clients you can use free for receiving eMails. Freemail clients as yahoo, hotmail or solutions as lotus notes, outlook … We decided to send designed newsletters in html and hope the user agreed to receive html. To have a good result in all clients here are the best links:

General tipps for your code

• 20 best practices by nettuts
• 6 ways to improve html mails by nettuts
• CSS compatibility
• Design guidelines
• Design mistakes
• Crossclient work by adobe
• How to code by sitepoint
• 10 Basics HTML for newsletters
• Design and build newletters seen by SMASHINGMAGAZINE

Testing the newsletter

Testing can be solved if you have many addresses at all common freemailers and clients installed. Not very efficient and not in all cases a good practice because it depends on the mailer, too, how the code is presented in the client. If you send a html mail using copy and paste with outlook, outlook will modify the code itself. A service for testing your code is previewmyemail.com, it offers some clients views’ free and nearly all for a fee.

• http://www.previewmyemail.com/

Keep it small, short and interesting

1. The newsletter should be not wider than 600px, and give a first impression in the preview panel.
2. Use the main theme in the header and the subject.
3. Don’t write the whole article about … use headlines and short blocks and give links to read more. The more contents can be on your homepage. If you use a professional solution you can use tracking tools – to check the response.
4. If you can send attachments use common formats as pdf. Often clients have a limit for receiving attachments. Keep it under 1 MB.

What others say

• e-how email-marketing-guidelines
• 20 best practices by nettuts
• Design guidlines by campaignmonitor

Thank you foru your suggestions and links!

Maybe we can collect some differences here:

In all cases you have to take care if free is really free. Sometimes adapting is possible, sometimes there are a free and a licensed version as well.

I think, individual is the best way even for developers, because adapting an exsisting code is often more complicated than coding in your style.

Another point is inspiration. Creative people have ideas but looking at examples will give us new ideas, too. This doesn’t mean copy but modify and take parts. In the best case it’s just an idea and it doesn’t look as a copy afterwards.

Here are some resources for free templates and inspiration

TEMPLATES

http://chocotemplates.com/

http://cssmayo.com/

http://www.freewebtemplates.com/

http://www.styleshout.com/

http://www.freewebsitetemplates.com/

http://www.cssplay.co.uk/ – more a coding resource, but endless

http://www.templateworld.com/free_templates.html

PSD

http://freepsdfiles.net/

http://photoshopcandy.com/category/free-psds/

EMAIL

http://freemailtemplates.com/

Ok let’s go on, here http://whdb.com/2008/100-awesome-webmaster-blogs-by-and-for-women/ a really large list is published – about active female webdesigners.

What happend elsewhere? In germany the http://www.webgrrls.de/ network started in 1997 – unfortunately it is not free to participate.

I think it’s time to talk a bit about our work. We do it and we can show it.

Write a comment if you are a webdesign-related woman! Say hi and leave a url – that’s enough, don’t loose time.

Professional web-designs often come along with a so-called multi column layout. Using the table-tags for displaying such a layout is outdated for years since for reasons of accessibility  it is recommended to use the table-tag(s) only for displaying table and not for structuring the design of a website.

In this little workshop I am going to show you how you can manage to realize a multi column layout (in our case three columns) without the obsolete table-construction.

So, lets first think about how we want to structure our website. Lets say we choose to build a website with a header and a footer, of course a part for the main content and two sidebars. One of these sidebars we will use to display our site-navigation, the other sidebar we can use for additional information, links  and other services.

At first we set up a struture for header, footer and content in HTML.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 <head>
 <title>My MultiColumnLayout</title>
 <style type="text/css">
 body{
 font-family:verdana, arial;
 color:white;
 text-align:center; /*workaround for IE6 for centered page*/
 }

 #container{
 width:960px;
 background-color: grey;
 margin:auto;
 text-align:left;    /*resets workaround for IE6*/
 }

 #header    {
 width:940px;
 height:150px;
 margin: 0px 10px;
 background-color:green;
 }

 #content{
 width:940px;
 min-height:350px;
 margin: 0px 10px;
 }

 #footer    {
 width:940px;
 height:80px;
 margin:0px 10px;
 background-color:blue;
 }
 </style>
 </head>
 <body>
 <div id="container">
 <div id="header">
 This is my header
 </div><!-- header end-->
 <div id="content">
 <div id="sidebar_left">
 This is my left sidebar
 </div><!--sidebar_left end-->
 <div id="mainContent">
 This is my main Content
 </div><!--mainContent end-->
 <div id="sidebar_right">
 This is my right sidebar
 </div><!-- sidebar_right end -->
 </div><!-- content end -->
 <div id="footer">
 This is my footer
 </div><!-- footer end -->
 </div><!-- container end-->
 </body>
</html>

I have already added some style-information into this code. In this case I chose to include the style sheet in our HTML-head, of course you can also create a separate style sheet which you can include by using the link-tag :

<link rel="stylesheet" href="mystyle.css" type="text/css" media="screen" />  

Do not forget to close the link-tag if you want to create a website in valid XHTML!

Now, lets see what this stylesheet is doing to our layout.

Our Elements:

#container
#header
#content
#footer

all contain a background-color definition and a height to give you a visual impression. These selector refer to ID-elements. ID’s are used for elements that are used only once on a single web-page while classes also can be used for several elements on the same page. In CSS ID’s are labelled by # while the label . is used for classes.

The #container-div encloses the divs #header, #content and #footer or the other way around, #header, #content and #footer are nested into the #container-div.

The #container-div is responsible for giving our website a certain background und position. In our case we decided to use a pixel-based width – that means the width is always the same – no matter what the visitors browser-view-port is. Of course you can also define a flexible width depending on the browser-view-port by using percentage-values instead of pixels, but this can cause trouble if you wish to create a multi column layout with different background-colors for you columns. In a later lesson I will show you how to solve problems like these, but for now we will work with this fix-width-layout.

This property and value “margin:auto;” forces the browser to display the web-page (#container) in the middle of the visitors browser-view-port. For elder versions of the Internet Explorer e.i.  margin:auto does not work, therefore we need to include the property “text-align” into the body-selector in our CSS-file. To prevent text-elements from being displayed centered in our page-section we need to reset this property in our #container and define text-align:left;.

Not very difficult so far… Now lets see how to create the famous multi-columns in our layout. For this we need to add some more style-information.

In our HTML-template we have already included the divs #sidebar_left, #mainContent and #sidebar_right, which are nested into our #content-div. Now we will go on and make these three divs display next to each other.

First we need to think about the width of each of our columns. We have a total width of 940px for our #content-div. Lets say our sidebars will get a width of 220px, the left sidebar gets a right margin of 10px and the right sidebar gets a left margin of 10px. All together we now have a width of 440px plus 20px for margins for our sidebars. That means there is a 480px width left for our mainContent. For displaying the columns next to each other we need to float them. Lets define these in our style sheet:

#sidebar_left    {
 width:220px;
 margin-right:10px;
 float:left;
 color: green;
 }

#mainContent    {
 width:480px;
 float:left;
 color:brown;
 }

#sidebar_right    {width:220px;
 margin-left:10px;
 color:navy;
 float:left;
 }

Have a look

Doesn’t look bad that far…

Now, lets see what happens if we have more content than on single line and add some random text-snippets and see what happens:

Have a look

The text flows over our footer – this is not, what we intended to see. Solving this is very simple. You need to clear the floatings of the sidebars and the mainContent by adding the clear-property to our #footer-selector in our style sheet:

#footer    {
 width:940px;
 height:80px;
 margin:0px 10px;
 background-color:blue;
 clear:both;
 }

Alternatively it’s possible to add a specific class for clearing floated divs:

.clearer    {clear:both;}

See, what this brings

Good so far… But now lets try to add some background-colors to our columns. Lets try to make our left sidebar yellow, our mainContent orange and our right sidebar white and add the needed background-color-definition to our columns:

#sidebar_left    {
 width:220px;
 margin-right:10px;
 float:left;
 color: green;
 background-color:yellow;
 }

#mainContent    {
 width:480px;
 float:left;
 color:brown;
 background-color:orange;
 }

#sidebar_right    {width:220px;
 margin-left:10px;
 color:navy;
 float:left;
 background-color:white;
 }

Now it looks like this

Not what we wanted to see…
The most simple way to give our columns different background-colors anyway  the usage of a background-image  that simulates the background-colors for us (Faux Columns). We include this into our #container-div:

#container{
 width:960px;
 margin:auto;
 text-align:left;    /*resets workaround for IE6  */
 background-image:url(bg.gif);
 background-repeat:repeat-y;
 }

The background-image is a graphic of 960px width and 1px height. The vertical repeat of the image suggests different background-colors for each column.

Have a look

This really simple multi column solution works in all common browsers. Enjoy!