9 Beautiful web Headers

Today i would like to share with you some very nice header which attract me so i collect these header from different site just to share the new and creative ideas with you. hope you like it.

Which is The Best Screen Size For Website?

Your pages should work at any resolution, from 800x600 to 1280x1024 and beyond.

• Optimize for 1024x768, which is currently the most widely used screen size. Of course, the general guideline is to optimize for your target audience's most common resolution, so the size will change in the future. It might even be a different size now, if, say, you're designing an intranet for a company that gives all employees big monitors.

• Do not design solely for a specific monitor size because screen sizes vary among users. Window size variability is even greater, since users don't always maximize their browsers (especially if they have large screens).

• Use a liquid layout that stretches to the current user's window size (that is, avoid frozen layouts that are always the same size).

Optimizing for 1024x768 Screen Sizes

When we say "optimize" we mean that your page should look and work the best at the most common size. It should still look good and work well at other sizes, which is why I recommend a liquid layout using percentage widths to control layout. But it should be its best at 1024x768.

The three main criteria in optimizing a page layout for a certain screen size are:

• Web Page Initial visibility: Is all key information visible above the fold so users can see it without scrolling? This is a tradeoff between how many items are shown vs. how much detail is displayed for each item.

• Web Page Readability: How easy is it to read the text in various columns, given their allocated width?

• Web Page Aesthetics: How good does your page look when the elements are at the proper size and location for this screen size? Do all the elements line up correctly -- that is, are captions immediately next to the photos, etc.?

You should also consider all three criteria at the full range of sizes, continuously resizing the browser window from 800x600 to 1280x1024. Your page should score high on all criteria throughout the entire resolution range.

Your page should also work at even smaller and bigger sizes, though such extremes are less important. Fewer than half a percent of users still have 640x480. Although such users should certainly be able to access your site, giving them a less-than-great design is an acceptable compromise.

As the first criterion implies, scrolling is always a key consideration. Users generally don't like to scroll. So, when you design, you should consider how much users can see if they scroll only a screen full or two. Any more than five screen full's should be an indication to you that there is two much copy on the page.

Both scrolling and initial visibility obviously depend on screen size: Bigger screens show more content above the fold and require less scrolling. This is where you have to optimize for 1024x768: present your most compelling material above the fold at this resolution (while ensuring that the absolutely critical information remains visible at 800x600).

So, what about tiny screens, such as those found on mobile devices? A liquid design should scale all the way down to a phone, but don't assume that this is how you should deliver your company's mobile user experience. Mobile environments are special; to optimize for them, you must design a separate service that provides fewer features, is written even more concisely, and is more context aware.

Remember to build a website to the size you expect most visitors to be using - some research can help you with this, but always aim to please the visitors you seem to attract!

Css Browser Compatibility Tips & Tricks

CSS can be complex, and as each new browser version is released, you may well find yourself struggling to keep up with the latest tips and hacks. But those tips and hacks will save your sanity! Here, I've put together the Some useful tips that I find most helpful, to save you the hassle of scrounging around the Web for solutions when time is tight.

1. Block vs. Inline Level Elements

Nearly all HTML elements are either block or inline elements. The characteristics of block elements include:

* Always begin on a new line
* Height, line-height and top and bottom margins can be manipulated
* Width defaults to 100% of their containing element, unless a width is specified

Examples of block elements include <div>, <p>, <h1>, <form>, <ul> and <li>. The characteristics of inline elements, on the other hand, are the opposite of block elements:

Begin on the same line

Height, line-height and top and bottom margins can't be changed Width is as long as the text/image and can't be manipulatedExamples of inline elements include <span>, <a>, <label>, <input>, <img>, <strong> and <em>

To change an element's status, you can use display: inline or display: block. But what's the point of changing an element from being block to inline, or vice-versa? Well, at first it may seem like you might hardly ever use this trick, but in actual fact, this is a very powerful technique, which you can use whenever you want to:

* Have an inline element start on a new line
* Have a block element start on the same line
* Control the width of an inline element (particularly useful for navigation links)
* Manipulate the height of an inline element
* Set a background colour as wide as the text for block elements, without having to specify a width

2. Another Box Model Hack Alternative

The box model hack is used to fix a rendering problem in pre-IE 6 browsers on PC, whereby the border and padding are included in, rather than added onto, the width of an element. A number of CSS-based solutions have been put forward to remedy this; here's another one that I really like:

padding: 2em;

border: 1em solid green;

width: 20em;

width/**/:/**/ 14em;

The first width command is read by all browsers; the second by all browsers except IE5.x on PC. Because the second command comes second, it takes precedence over the first: any command that comes second will always override a preceding command. So, how does all this work?

By placing empty comment tags (/**/) before the colons, we instruct IE5.0 to ignore the command. Likewise, if we place empty comment tags after the colon, IE5.5 will ignore the command. Using these two rules in conjunction with each other, we can hide the command from all of IE5.x browsers.

3. Minimum Width for a Page

A very handy CSS command that exists is the min-width command, whereby you can specify a minimum width for any element. This can be particularly useful for specifying a minimum width for a page.

Unfortunately, IE doesn't understand this command, so we'll need to come up with a new way of making this functionality work in this browser. First, we'll insert a <div> under the <body> tag, as we can't assign a minimum width to the <body>:

<body>
<div class="container">

Next, we create our CSS commands, to create a minimum width of 600px:

#container
{
min-width: 600px;
width:expression(document.body.clientWidth < 600? "600px": "auto" );
}

The first command is the regular minimum width command; the second is a short JavaScript command that only IE understands. Do note, though, that this command will cause your CSS document to become invalid; you may prefer to insert it into the head of each HTML document to get around this.

You might also want to combine this minimum width with a maximum width:

#container
{
min-width: 600px;
max-width: 1200px;
width:expression(document.body.clientWidth < 600? "600px" : document.body.clientWidth > 1200? "1200px" : "auto");
}

4. IE and Width and Height Issues

IE has a rather strange way of doing things. It doesn't understand the min-width and min-height commands, but instead interprets width and height as min-width and min-height -- go figure!

This can cause problems, because we may need boxes to be resizable should we need to fit more text into them, or should the user resize the text. If we use only the width and height commands on a box, non-IE browsers won't allow the box to resize. If we only use the min-width and min-height commands, though, we can't control the width or height in IE!

This can be especially problematic when using background images. If you're using a background image that's 80px wide and 35px high, you'll want to make sure that the default size for a box using this image is exactly 80 x 35px. However, if users resize the text, the box size will need to expand gracefully.

To resolve this problem, you can use the following code for a box with class="box":

.box
{
width: 80px;
height: 35px;
}

html>body .box
{
width: auto;
height: auto;
min-width: 80px;
min-height: 35px;
}

All browsers will read through the first CSS rule, but IE will ignore the second rule because it makes use of the child selector command. Non-IE browsers will read through the second one, which will override the values from the first rule, because this CSS rule is more specific, and CSS rules that are more specific always override those that are less specific.

5. Text-transform Command

One of the lesser known, but really useful CSS commands is the text-transform command. Three of the more common values for this rule are: text-transform: uppercase, text-transform: lowercase and text-transform: capitalize. The first rule turns all characters into capital letters, the second turns them all into small letters, and the third makes the first letter of each word a capital letter.

This command is incredibly useful to help ensure consistency in style across an entire Website, particularly if it has a number of content editors. Say for example your style guide dictates that words in headings must always begin with capital letters. To ensure that this is always the case, use text-transform: capitalize. Even if site editors forget about the capitalisation, their mistake won't show up on the Website.

It's also preferable to use text-transform: uppercase to capitalise words, as screen readers may pronounce shorter words in capital letters as acronyms. A great example of this is 'CONTACT US', which is pronounced as 'contact U S' by some screen readers.

6. Disappearing Text or Images in IE?

IE exhibits a very strange bug whereby text or background images sometimes disappear from sight. These items are still actually present and, if you highlight everything on screen or hit refresh, they'll often re-appear. Kind of strange, huh?

This problem mostly occurs on background images and on text positioned next to a floated element. To remedy the problem, simply insert position: relative into the CSS command for the disappearing element, and for some bizarre reason, that'll usually fix the problem. If this doesn't work (and sometimes, it doesn't), assign a width to the offending element in the CSS -- that should fix the problem.

7. Invisible Text

Sometimes, you may actually want to make text invisible. Invisible text can be especially useful for screen reader users, perhaps to assign a label to a form item, or insert a heading ahead of a section. Don't want to change the visual appearance by inserting these elements? Make them invisible, and no one using a visual browser will know they're there.

You may also want to make text invisible if using a print or handheld CSS file, as some information may not need to be displayed on either of these mediums (see below for more on this).

To make text invisible, you can use display: none -- easy! This works fine for hiding text from handhelds (if CSS is supported) and printed Web pages, but isn't so great for many screen readers. Screen readers are now becoming too clever for their own good, and some will actually ignore any text that has the rule display: none assigned to it.

Therefore, for screen readers users, a new approach is needed: position: absolute; left: -9000px. This basically takes the text and positions it 9000px to the left of the left edge of the screen, essentially making it invisible.

8. CSS Document for Handhelds

A separate CSS document can be created for PDAs and mobile phones, and activated only when one of these devices is being used to access your site. More and more Websites are creating separate CSS documents for printing, so Web pages automatically become print-friendly when users choose to print them. You can do the same for handheld devices.

The following command is used to call up the CSS document for handhelds:

<link type="text/css" rel="stylesheet" href="handheldstyle.css" media="handheld" />

CSS commands in the handheld CSS file override any equivalent commands in the main CSS document. So, what commands should you place in this file?

Ideally, you want users of handheld devices to avoid having to scroll horizontally.

To test this, open up your Website in a regular browser window and resize it to 150px in width. Then, open up your main CSS file and insert some new commands at the very bottom of the document. The commands you place here should adjust the layout of the Website so that it doesn't require horizontal scrolling at a width of 150px. Then, open up a new document, cut and paste these new commands over, and save it as handheldstyle.css (or whatever name you want to give it).

Your Websites offering to users of handheld devices should be quite different to its offering to traditional Web browsers, as the user experience is quite different on a handheld device. For further information, a book such as Handheld Usability, by S.W. Weiss, is a great read.

9. 3-D Push Button Effect

Back in the early days of the Web, 3-d buttons that appeared to become pushed in when moused over were all the rage. At that time, this could only be achieved through images and JavaScript, but now, with the advent of CSS, we can go retro and re-create this 3-d effect.

The main CSS commands you'll need are:

a {
display: block;
border: 1px solid;
border-color: #aaa #000 #000 #aaa;
width: 8em;
background: #fc0;
}

a:hover
{
position: relative;
top: 1px;
left: 1px;
border-color: #000 #aaa #aaa #000;
}

Aside from these commands, you can insert other commands to achieve the desired presentation effect -- the only limit is your imagination!

10. Same Navigation Code on Every Page

Most Websites highlight the navigation item relating to each user's location within the Website, to help users orientate themselves. This is a fundamental requirement for basic usability, but it can be a pain: we need to tweak the HTML code behind the navigation for each and every page. Can we have the best of both worlds? Is it possible to have the navigation highlighted on every page, without having to tweak the HTML code on every page? Of course it is!

First of all, you'll need to assign a class to each navigation item:

<ul>
<li><a href="#" class="home">Home</a></li>
<li><a href="#" class="about">About us</a></li>
<li><a href="#" class="contact">Contact us</a></li>
</ul>

You'll then need to insert an id into the <body> tag. The id should be representative of where users are located in the site, and should change when users move to a different site section. When on the 'Home' page, it should read <body id="home">, in 'About Us', it should read <body id="about">, and in 'Contact Us', <body id="contact">.

Next, you create a new CSS rule:

#home .home, #about .about, #about .about, #contact .contact

{
commands for highlighted navigation go here
}

This basically creates a rule that only takes effect when class="home" is contained within id="home", and when class="about" is in id="about" and class="contact" is in id="contact". These situations will only occur when the user is in the appropriate section of the site, seamlessly creating our highlighted navigation item.

Some Important Elements for Website Design

Once you have defined what your web site's content should be, arranged it into a likely information architecture, and worked out where your content elements will sit on the page, you're ready to design the display layer.

The goal is to arrange various elements on the web page to maximize the web user's chance of using the site successfully.

There is a set of simple designer's tools available to help you help the user.

Clarity is all about the relationships between elements

The root factor of effective visual design is creating relationships to show:

• what is part of what
• what is different from what
• how different elements relate to each other

One fundamental principle for clarity is economy: Don't use more techniques than necessary to differentiate. (For example, if you use bold text to differentiate one piece of text from another, ask if you really need to use a colon as well.)

Tools for designing the display layer

In conjunction with the layout tools already described (grouping, alignment etc.), these are further devices that have an impact over a design's attractiveness and ease of use.
This part of the course looks at each of the tools in turn, and discusses how we can use each one to further our design purposes.
The primary design tools include:

• Contrast
• Colour
• Richness
• Dynamism

Contrast

Contrast is the primary tool of eye control. Contrast attracts the eye, and it's the easiest surface mechanism to employ. In order to work, contrast needs to be balanced against areas of low contrast.

Colour

Colour can attract the eye. Use colour sensitively to make a page attractive and easy on the eye, and also to pick out items for special attention. Colours must balance with other colours and areas of low colour.

Richness

Richness can be created through use of colour, pattern, layering, and 3D effects such as gradients, shadows and highlights. The eye can linger on richer areas, so use specific areas of rich detail in key areas.

Dynamism

Movement is another factor that attracts the eye. This doesn't mean that an element must actually be animated - some shapes (such as diagonals) and busy patterns can suggest movement.

Approach

Before you design the actual visual interface, get clear on the relative priorities of the elements on screen. (If you've made an attention map, this is where it comes in really useful.)
Usually, the most important elements will be those that:

• Identify the site/page (answer "Am I in the right place?")
• Link on (many pages are stepping stones to others, rather than ends in themselves)
• Provide content or feedback

These elements need to stand out most.

Other design elements may have softer purposes, but can still be important, such as:

• Branding which creates a certain feel or personality
• Subtle guides to help a user use a form or navigation interface effectively

Clearly, all these objectives are important. The trick to successful visual design is finding a balance that achieves as many of these (sometimes conflicting) objectives as possible.

Some useful Css Hacks for webdesign

1. Browser-Specific Selectors

These selectors are very useful when you want to change a style in one browser but not the others.

IE 6 and below
* html {}

IE 7 and below
*:first-child+html {} * html {}

IE 7 only
*:first-child+html {}

IE 7 and modern browsers only
html>body {}

Modern browsers only (not IE 7)

html>/**/body {}

Recent Opera versions 9 and below

html:first-child {}
Safari
html[xmlns*=""] body:last-child {}

To use these selectors, place the code in front of the style. E.g.:

#content-box {
width: 300px;
height: 150px;
}

* html #content-box {
width: 250px;
} /* overrides the above style and changes the width to 250px in IE 6 and below */

2. Transparent PNG’s in IE6

An IE6 bug which causes a great deal of hassle is that it doesn’t support transparent PNG images.
You will need to use a filter which overrides the CSS.

* html #image-style {
background-image: none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="filename.png", sizingMethod="scale");
}

3. Removing Dotted Links

Firefox produces a dotted outline that appears around links when you click on them.

This is simple to stop. Just add outline:none to the a tag

a {
outline: none;
}

4. Applying a width to inline elements

If you apply a width to an inline element it will only work inIE6. This is actually a fault of IE6 - inline elements shouldn't need to have a width assigned to them. However it is often useful for example if you wanted all labels in a form to be the same width.
All HTML elements are either a block or an inline element. Inline elements include span, a, strong and em. Block elements include div, p, h1, form and li.
You can’t change the width of an inline element. A way around this is to change the element from inline to block.

span {
width: 150px;
display: block
}

Applying display: block will turn the span into a block element, allowing you to change the width. One thing to note however is that block elements will always start on a new line, so you might have to use floats as well.

5. Centering a fixed width website

To centre your website within the browser, add relative positioning to the outer div, then set the margin to auto.

#wrapper {
margin: auto;
position: relative;
}

6. Image Replacement Technique
It is always best to use text rather than an image for headings. On the odd occasion when you must have an image it is best to use a background image with hidden text within a div. This is extremely useful for screen readers and SEO as it is still using regular text, with all the benefits associated with this.

HTML:
h1 Main heading one /h1


CSS:

h1 {
background: url(heading-image.gif) no-repeat;
}

h1 span {
position:absolute;{
text-indent: -5000px;{
}

As you can see we are using regular HTML code for the h1 tag and using CSS to replace the text with an image. Text-indent pushes the text 5000px’s to the left, making it invisible to the user.
Try turning off your CSS style on your website and see how the heading looks.

7. Min-width

Another bug in IE is that it doesn’t support min-width. Min-width is extremely useful, especially for flexible templates that have a width of 100%, as it tells the browser to stop contracting. For all browsers apart from IE6 all you need ismin-width:Xpx;. e.g.:

.container {
min-width:300px;
}

Getting this to work in IE6 takes some extra effort! To start you will need to create 2 divs, one embedded in the other.

Then you will need the min-width which goes on the outer div.

.container {
min-width:300px;
}

Now this is where the IE hack comes into play. You will need to include the following code.

* html .container {
border-right: 300px solid #FFF;
}

* html .holder {
display: inline-block;
position: relative;
margin-right: -300px;
}

As the browser window is resized the outer div width reduces to suit until it shrinks to the border width, at which point it will not shrink any further. The holder div follows suit and also stops shrinking. The outer div border width becomes the minimum width of the inner div.

8. Hide Horizontal Scrolling

To remove the horizontal scrolling bar, insert overflow-x: hidden; into the body

body {
overflow-x: hidden;
}

This is useful if you decide to have an image or flash file which has a larger width than the browser.

Get Better Feedback Just in 5 Steps

If you’ve done much design or development work for clients you know that getting effective feedback from the client is critical to the success of the project. Unfortunately, this can sometimes be a challenge. Depending on the types of clients that you work with, you may find that some of them are difficult to communicate with, not because they don’t have opinions, but because they don’t understand very much about the process of building a website.
From my experience these clients can be a bit more difficult to work with, not because they are hard to please or unreasonable in their expectations, but simply because they don’t always understand how much of an impact they need to have on the process. They hire a designer to create the site and they just assume that the designer can do what is needed.
Sometimes this isn’t a big problem, but other times it can result in a project that doesn’t live up to its potential or it can lead to changes and revisions that could have been prevented with better communication throughout the process.

Get Better Feedback Just in 5 Steps

1 – Be Upfront
One of the best things you can do to improve the quantity and quality of feedback is to explain that the web design process requires your work as well as input from the client. Remind the client that the effectiveness of their website is drastically improved if they get involved in the process and provide their feedback.
As a designer you can create a website that is beautiful, but if it doesn’t meet the needs of the client, it really does no good. Once clients truly realize that the outcome is going to impacted by their feedback, they’ll typically get more involved. I like to explain this at the start of the project as I have found that it will save some time that could otherwise be wasted.

2 – Use an Interview/Survey

When you accept a new project for a client, one of the first things you should do is go through a series of questions that will help the client to think about specifically what they want and need from a website. Sometimes clients won’t give much input on what they want, but once you ask them some specific questions the wheels will start rolling and they’ll quickly see how they can get more involved. It’s a good idea to have some fairly standard questions that you go over with all of your clients, and of course you’ll want to add some specific questions according to the project at hand.

3 – Ask the Right Questions

Simply asking questions is not enough, they also need to be the right questions. Clients that are hesitant to give much feedback will often assume certain things, so they are unlikely to share their thoughts unless you ask. Asking the right questions can save you time and make the project more successful, while not asking the right questions will usually lead to more work down the road when you realize that the client isn’t interested in what you’ve been doing. Take the time to be sure that you have addressed all of the important issues with the clients and asked all of the necessary questions.

4 – Actually Listen

If clients see that you are taking their feedback and putting it into action, they’ll be more likely to stay involved. On the other hand, if clients feel like what they are saying is pointless because they don’t see the results in your work, they will probably stop giving much feedback.

5 – Explain the Entire Process

From my experience, part of the reason that clients don’t give more feedback is because they are unfamiliar with the whole process of building a website. I’ve found that when I take the time to explain things about the process, clients will be more comfortable and open to sharing their thoughts. Before a project gets started I’ll usually explain that I’ll need some time to talk with them so I know specifically what they are looking for in their website. After that I’ll get started with the design and come back to them throughout for their feedback. Once I have their feedback I’ll be able to put it into practice and give them what they want. After the understand more about how the process will work they usually are comfortable enough to get more involved.

Adobe updates website tool more easy for designers

Adobe Systems is to release a hosted, online version of its web content maintenance tool that allows less-technically gifted personnel to update website content from any web browser.

Adobe InContext Editing 1.5 is intended for professional designers to use with clients who could benefit from being able to perform simple website updates without risking damage to site design and layout. InContext Editing lets users update sites from a browser without installing additional software; the hosted, online service acts as a productivity extension to Adobe Creative Suite 4.

InContext Editing allows web designers to offer long-term maintenance programs to clients while spending more time doing actual design work, Adobe said.

With the product, web designers identify which regions of a website can be edited in DreamWeaver CS4 or within a browser. DreamWeaver CSS also enables users to specify editing options or define CSS styles available to clients editing content.

"The web designer's clients then access the Adobe InContext Editing service using any modern browser and, once prompted, simply type in their use name and password and then click the 'Edit' button to begin making their updates," Adobe said in a statement.
"InContext Editing does not require a web designer's client to install any special software or learn HTML. It's an easy-to-use service that also offloads web designers from having to provide tech support to their clients."

InContext Editing also offers simplified administration controls to safeguard design integrity. Web designer clients can make updates from virtually anywhere.

CSS Simple Trick of browser Compatibilty

I just recently found this out and it’s pretty cool so I have to share. When dealing with browser compatibility of CSS I used to have an IF statement in the HTML that would call for the appropriate CSS file according to the browser that is displaying the page. Well, I found a trick on how to keep all the class or id attributes together so it’s easy to find and adjust later.

The trick is you can use the pound sign (#) and underscore character (_) to comment out attributes for IE7, IE6 and FireFox.

The FireFox sees # and _ to be comment characters, Internet Explorer 6 sees # as comment character, Internet Explorer 7 sees _ as a comment. So if you build your CSS statement like the folowing example you should be able to please all 3 browsers. And this is great when dealing with paddings and margins, since Firefox and IE do not agree on these two.
------------------------------------------------------------------------------------------
Example:

#divid {

padding: 0px 0 20px 40px; /* All browsers see this */
#padding:0px; /* FireFox will not see this but IE7 & IE6 will */
#margin: 20px 0 0 40px; /* FireFox will not see this but IE7 & IE6 will */
_margin: 10px 0 0 30px; /* FireFox and IE7 will not see this but IE6 will */

}
------------------------------------------------------------------------------------------
I have not tested it in other browsers like Opera and Safari but it does work really good FireFox and IE’s. Let us know if this works for you or not.