webdesign women » Coding

List of 100 female webdesigners

pixelhorse — Mon, 10 Oct 2011 21:24:39 +0000

I just found a nice page with a list of female webdesingers: http://www.leemunroe.com/25-hot-female-web-designers. So I was curious and looked at some of the listed pages and further the suggested pages in the comments.

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/

Get Shareaholic

Newsletters Part 2 – coding – tests

pixelhorse — Mon, 27 Sep 2010 09:57:28 +0000

Newsletters are a fast and cheap way for marketing. In our first issue we collected articles about contents and concepts. Now we look at the design, coding and testing.

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

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/

Get Shareaholic

HTML and CSS for Multi Column Layouts 1

odras — Mon, 01 Mar 2010 16:46:44 +0000

A simple solution with Faux Columns

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.



 
 My MultiColumnLayout
 
 
 
 
 
 This is my header
 

 
 
 This is my left sidebar
 

 
 This is my main Content
 

 
 This is my right sidebar
 

 

 
 This is my footer

Have a look

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 :

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!

Get Shareaholic

About Tooltips in Menues and for Links

pixelhorse — Sun, 21 Feb 2010 19:21:42 +0000

Tooltips are a good thing for a better usability in webdesign – you find a good description about them in wikipedia: http://en.wikipedia.org/wiki/Tooltip. They are shown when you hover a link or menu element. With css you can modify the tip as you like.

Design of tooltips for links – with javascript

A javascript based library by Walter Zorn you find here. Another Version at dyn-web.com. Based on the javascript library jQuery a plugin helps to design tooltips – find more about it here.

and css only

A better way for all users would be to use css http://lixlpixel.org/css_tooltip/ and as whole popups here: http://meyerweb.com/eric/css/edge/popups/demo.html

Some love it some hate it

In case you design a menu an extra tooltip could disturb the user. Often tooltips are used to explain a link – but in a menu it’s clear and not good to use. What can you do – where does they come from? Each link with a title attribute will show a tooltip. So the easiest thing to do would be to delete the title attribut within the link.

Special Joomla: In the basic mainmenu there are no titles – fine – but some people think they need them, so you use the extended menu module to add them.

For SEO reasons, titles can be useful. They are good if they give extra information about the link – but in a menu you should avoid just to repeat the link name in the title.

Get Shareaholic