we design the web!
Header

Phpwomen.org

March 24th, 2013 | Posted by pixelhorse in Coding | Female Projects - (0 Comments)

I just discovered a female Project called phpwomen.com.

Here more about the project and the mission:

PHPWOMEN

PHPWomen is a user group specifically targeted toward the women in the PHP world. We do not wish to exclude men – rather to encourage women. They are not mutually exclusive after all.

Mission

Our aim is to provide a network of support and mentorship to women, help women become more involved with PHP, increase our numbers at conferences as speakers and attendees, and provide a “female friendly” and professional atmosphere.

History

Starting out on October 8, 2006 as a call for the women of PHP to “stand up and be counted” by Ligaya Turmelle and Elizabeth Naramore, we have since formed an active community that will hopefully continue to grow and flourish for many years to come.

Why a Woman’s Site

The women in the PHP World tend to be few and scattered all over the world, rarely seeing other women at the various conferences, unconferences, user group meetings and social get togethers. By providing this site we hope that the women will not feel so alone and isolated. The men in the PHP World are a very welcoming and acceptable bunch, but sometimes it is nice to talk to another woman either for coding help or for support in the specific issues of being a woman in a male dominated field.

 

Responsive Webdesign

July 3rd, 2012 | Posted by pixelhorse in Coding | Design | Uncategorized - (0 Comments)

Responsive webdesign is the most important trend in 2012 in webdesign technologies. But why. Let’s start just basic:

Responsive means a flexible design self modifiing dependant on the final device. It is designed in HTML/CSS/Javascript and shows only useful layouts depending on the selected design.

So finally the pages should look better in all kinds of design.

A book apart already made a book out of this technology: http://www.abookapart.com/products/responsive-web-design/

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/

Newsletters Part 2 – coding – tests

September 27th, 2010 | Posted by pixelhorse in Coding | Design - (0 Comments)

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/

HTML and CSS for Multi Column Layouts 1

March 1st, 2010 | Posted by odras in Coding - (1 Comments)

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.


<!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>

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 :

<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!

About Tooltips in Menues and for Links

February 21st, 2010 | Posted by pixelhorse in Coding - (1 Comments)

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 Adobe Flash player