When structuring your markup there are many paths you can choose to reach the same goal. Most of the times it's a matter of preferences which element you wish to apply on a specific spot. I have my own personal preferences. One of them is preferring BUTTON over INPUT type="submit" elements. Why? Well W3C says it "Buttons created with the BUTTON element function just like buttons created with the INPUT element, but they offer richer rendering possibilities".

It's the rendering that I am after. You can easily apply image replacement techniques to buttons and make your form look good. Most interesting feature is that BUTTON element may have content. I will use that possibility in this tutorial.

So, the goal is to create and style button that can handle variable length so there is no need for later interventions. We'll treat button element as a container and add some markup.

Take a look at the demo | Download zip file

HTML

Here it is:

<button><span><em>Button text</em></span></button>

This is a valid code, and it gives us a lot to work with.

Please note, I am using two child elements instead of only one because I couldn't get rid of some paddings that button preserved. If anyone succeeds in styling with one child element only, please let me know :)

Concept

This concept is probably familiar to you from various navigation tab styling techniques. We have one long background image:

This one is 550px wide. I believe that is more than sufficient for buttons :)
So, we apply this image as a background image of a top element (in this case SPAN), place it to top left and add some left padding. Nested element (in this case EM) have the same background image but placed to top right and with right padding. As the content text grows so will the button.

Height of the button is fixed in my example but you can use similar technique and some more markup and place the same background image to all 4 corners.
To make sure that the text is vertically centered I use line-height property.

CSS

button{
	border:none;
	background:none;
	padding:0;
	margin:0;
	width:auto;
	overflow:visible;					
	text-align:center;	
	white-space:nowrap;	
	height:40px;
	line-height:38px;			
	}

Resetting button's default styling.

button span, button em{
	display:block;
	height:40px;
	line-height:38px;			
	margin:0;
	color:#954b05;
	}

Setting child elements. Note that value of height property is different than line-height. That's because I have 2px shadow at the bottom. Line-height vertically centers the text within the button graphic, shadow is excluded.

button span{
	padding-left:20px;
	background:url(bg_button.gif) no-repeat 0 0;
	}	
button em{
	font-style:normal;
	padding-right:20px;
	background:url(bg_button.gif) no-repeat 100% 0;
	}

Setting backgrounds and paddings for both child elements.

As I mentioned earlier, it would be more elegant if I could use BUTTON and SPAN only, but I couldn' t get rid of BUTTON paddings.

Redesigning a website can be a very involved process, and it is important to properly plan and consider the necessary factors that will make or break the redesign. Here is a quick look at 21 factors that you should be contemplated.

1. What is the goal of the redesign?

What do you hope to accomplish? It’s always important to have a clear understanding of your reasons and motivations as they should impact the decisions that you make along the way. Without knowing these goals the project will lack direction and you will likely wind up with a website that still doesn’t meet your needs.

2. Is this going to be just a minor upgrade or a complete overhaul?

A redesign could be anything from a minor facelift to an entirely new site. Obviously the time, effort, and cost involved will vary, but first you should determine what types of changes are required for you to meet your goals with the design. If a complete redesign is done you will also want to consider to what extent the new design should resemble the old design. If visitors are coming back to the site, chances are you will want them to notice the new design without feeling like they’ve never been to your site before.

3. What aspects of the current design are most effective?

Most likely there are some things about the current design that work very well, and these may be aspects that you would like to keep or incorporate into the new design. It’s a good idea to make a simple list of your likes and dislikes to help with decisions on the new design.

4. What aspects of the current design are not effective?

Building on point #3, if you are redesigning the site you are bound to want to get rid of some specific aspects of the website or the design. Are there some characteristics of the design that do not accurately portray your business to new visitors?

5. Who are your target users?

During any design process you never want to lose focus on the visitors. By knowing who you are targeting and how you can meet their needs, you will be on your way to building an effective website. What style of design are your users going to like?

6. How can the website be more user-friendly?

Improving the functionality and usability of a website is always a good thing. It’s pointless to spend time and money on a redesign that looks great but simply isn’t user-friendly.

7. Does the logo/branding need to be changed or updated?

Most likely the website will include some form of a logo or branding. Are these items still up-to-date and will they function effectively with a new design? If your logo is out-of-date and not attractive, a new design may not do much good if it is still using the same old logo.

8. Should the color scheme change or remain the same?

In point #2 I mentioned that most of the time you will want to keep the website at least looking familiar to repeat visitors. Using a similar color scheme is one of the best ways to accomplish this. A lot of times it can be a good idea to make some minor changes to the color scheme, such as changing shades of colors or adding a few new colors, just to give the site a fresh look.

9. What screen resolutions are visitors using?

It’s important to know how your visitors are going to be viewing the site. A program such as Google Analytics can easily give you this information. Obviously, a fixed-width design should take into consideration the typical screen resolutions of visitors.

10. What connection speed are visitors using?

Knowing the connection speed will help you to know what types of elements you can include in the design without causing hardships for the average visitor.

11. What should be the focal points of the design?

Every design is going to draw attention to certain parts of the page in one way or another. By knowing what you want to emphasize you will have more control over what gets attention from visitors. In a comment on a recent article, Caroline Middlebrook mentioned that in her redesign she used the area above blog posts to feature some select content, such as a free e-book that she has written. Obviously, in her case this is a focal point that she wants visitors to notice.

12. How can the navigation be made more effective?

Navigation is one of the most critical elements of a site’s usability. If a significant amount of content and/or pages have been added to the site since the last design, it is possible that navigation is no longer optimal. Before designing think about how visitors will want to move through the site, and make it as easy as possible for them.

13. What will visitors want from the website?

Meeting the needs of visitors is important to the success of any website. Will visitors be coming to the site looking for information? If so, make it easy to find the information and make it a prominent part of the design. Will they be coming to the site to find products? Will they be coming for some other reason? Anticipate what your visitors will want and do your best to give it to them.

14. How can increased user interaction be incorporated?

The most successful websites are able to get visitors involved in one way or another. Blogs are great for this purpose because they allow for comments and discussion. Other possibilities are forums, games, user-generated content, polls, quizzes, etc. By making the website more engaging to visitors you are more likely to get a high number of repeat visitors.

15. Who will be doing the maintenance/updates?

Will you be the one doing routine maintenance and updates? Will someone else be doing them? If multiple people will be using the website commenting the code becomes even more important. Code should always be kept as clean as possible, but when others will be doing work on the site has a bigger impact.

16. Is a content management system (CMS) needed?

Many website owners now prefer to use a CMS, such as WordPress, so that the site can easily be updated without requiring a designer. Depending on the amount and type of updates that are anticipated, a CMS may be a good, time-saving decision.

17. How can SEO be improved?

Any time a website is being designed, search engines should be considered. The current design may or may not be search engine-friendly, but the new one certainly should be. Should the current page titles be kept, or could they be done more effectively? How can internal linking be improved? Where can headers be used? This list could obviously go on for a while.

18. What keywords and phrases are being targeted?

Of course, keywords should be used in titles, headers, anchor text, alt tags, etc. Designing a website without knowing what words and phrases you are targeting means that you are most likely targeting none, at least not effectively. Don’t simply consider the search terms that are being targeted with the current site, make sure that these are the most effective terms to go after.

19. What pages and search terms are currently drawing traffic?

If there are pages on the site that are currently doing very well with search engines, you’ll probably not want to make major changes to the content of those pages. This can easily be overlooked during a redesign, but making excessive changes to pages that are ranking well can kill the rankings. Likewise, what search terms are currently producing traffic? Be sure that they are used in the new design.

20. What pages currently have inbound links?

Whatever pages on the site have a significant number of inbound links or are drawing traffic through those links, you’ll want to make sure that any changes do not negatively affect these links. If possible, use the same URL structure. If not, be sure to re-direct visitors to the appropriate page.

21. What will make visitors want to come back?

Most likely you’ve considered how the new design can make a solid first impression, but what is it about the website that will keep visitors coming back for more?

1. Web Developer Toolbar

The must have tool for any web developer.
Download Web Developer Toolbar

2. Firebug

Another must have extension for any developer. View, edit, debug, and monitor CSS, HTML, and JavaScript live in any web page.
Download Firebug

3. View Source Chart

Draws a color coded chart of a web page’s source code and includes automatic indentation to make source code easier to read.
Download Source Chart

4. HTML Validator

Adds HTML validation to the view page source of the browser.
Download HTML Validator

5. SEO Quake

Quick view of site parameters in the search engine results pages
Download SEO Quake

6. ColorZilla

This extension adds a small eyedropper tool to the bottom left of the status bar which when clicked upon allows you to hover over any part of a web page to view the colour that is being used.
Download ColorZilla

7. Colour Contrast Analyser

A nice accessibility extension to check whether there is sufficient contrast between foreground and background colours of a web page.
Download Colour Contrast Analyser

8. Foxmarks

The Foxmarks Bookmark Synchronizer automatically synchronizes your bookmarks between two or more computers running Firefox.
Download Foxmarks

9. Adblock

Not so much a development tool but useful nonetheless. This extension allows you to block adverts within web pages easily and effectively.
Download Adblock

10. Dust Me Selectors

Dust-Me Selectors is a Firefox extension that finds unused CSS selectors.
Download Dust Me Selectors

YAML (Yet Another Multicolumn Layout)

Dirk Jesse’s extensive (X)HTML/CSS Framework offers the whole bunch of default-templates for a number of simple or more complex web-projects. YAML is based on web standards and supports every modern web browser. All Internet Explorer’s major rendering bugs are countered. YAML fully supports all IE versions from 5.x/Win to 7.0.

Apart from a number of standard-conform layouts the framework also offers a debugging stylesheet, print stylesheet as well as various robust tools for web-development in YAML. All CSS components of the framework as well as the various layout methods are thoroughly documented in both English and German, supplemented by numerous examples.

You can also use a YAML Builder to develop your layout visually - in your web-browser. You can choose a Doctype, basic layout elements (#header, #footer, …), the number of content columns as well as preferred column order and set the layout and column widths. You can also drag & drop and nest both sub-templates and dummy content, display and output the complete code (XTHML markup and CSS) and switch between draft mode and preview of the finished layout.

Blueprint

The Blueprint CSS framework, created by Norwegian tech student Olav Frihagen Bjørkøy, is a very promising foundation for developing typographic grids using CSS. The framework offers an easily customizable grid, sensible typography, a typographic baseline and a stylesheet for printing. It also uses relative font-sizes, provides a CSS reset and is supposed to be cleaned of code bloats. The latter isn’t always true.

Besides, you can also use the Blueprint Grid CSS Generator to generate more flexible versions of Blueprint’s templates. Whether you prefer 8, 10,16 or 24 columns in your design, this generator now enables you that flexibility with Blueprint CSS Framework - a new “to-become-standard” in grid-based design approach.

Yahoo! UI Library CSS Foundation

Yahoo! UI Library presents a set of CSS frameworks: the core YUI CSS foundation includes the Reset CSS, Base CSS, Fonts CSS, and Grids CSS packages.

While Reset CSS removes and neutralizes the inconsistent default styling of HTML elements, Base CSS applies a consistent style foundation for common HTML elements across A-grade browsers.

Fonts CSS offers cross-browser typographical normalization and control; the framework provides consistent font sizing and line-height, supports user-driven font-size adjustment in the browser, including cross-browser consistency for adjusted sizes and works in both Quirks Mode and Standards Mode.

Grids CSS delivers four preset page widths, six preset templates, and the ability to stack and nest subdivided regions of two, three, or four columns. The 4kb file provides over 1000 page layout combinations. The framework supports easy customization of the width for fixed-width layouts; it also supports fluid-width (100%) layouts as well as preset fixed-width layouts at 750px, 950px, and 974px, and the ability to easily customize to any number. YUI also offers The YUI Grids Builder — a simple interface for Grids customization.

You should be aware that these frameworks are often criticized for bloating the code with non-semantic markup and generating too many unnecessary classes, IDs and div-containers in CSS. Yahoo! UI Library also provides a detailed documentation with numerous examples, tutorials, cheat sheets, templates and tools.

Taken From: TechDune

Internet Explorer has cool add-ons which make the job of website designers and developers much easier. Here is my list of 20+ excellent Firefox add-ons that every web developer and designer should know about.

Internet Explorer Developer Toolbar
Variety of tools for quickly creating, understanding, and troubleshooting Web pages.

IE Watch
Allows you to view and analyze HTTP/HTTPS headers, Cookies, GET queries and POST data.

IE Web Developer
Allows you to inspect and edit the live HTML DOM, evaluate expressions and display error messages, explore source code of Web page and monitor DHTML Event and HTTP Traffic.

IESpy
Allows one to inspect or manipulate the DOM of any IE Web browser control.

DebugBar
Brings new services to surfers and professionals. Surfers: zoom, direct Web search, e-mail page screenshots, and color picker. Developers: view HTML code, cookies, JavaScript, HTTP/HTTPS headers, and miscellaneous information.

Virtual Machine
Allows you to view java applets on Web pages.

Microsoft Fiddler
Logs all HTTP traffic between your computer and the Internet.

Tangram Xtml Designer
Visual designer for IE Band Object, activeX Control and .NET user control.

Http Watch
HttpWatch shows you HTTP and HTTPS traffic from within IE allowing you to quickly debug, fix and optimize your Web site.

Embedded Web Browser
The package contains all the programmer need to extend the development of a Web browser.

CGToolbar
Must have tool for CG Artists, Animators, VFX and 3d professionals.

Site Studio 6
Build rich content Web sites, with no HTML skills required.

Haptek Player
An ActiveX control and Netscape Navigator Plugin that allows any webpage or application (with ActiveX support) to include Haptek’s Autonomous characters.

Flash2X Flash Hunter
Save Flash movies from web pages.

iOpus iMacros
Check the same sites every day,data upload, online marketing and functional testing and regression testing Web sites:

Telerik RadToolBar
A flexible component for implementation of tool and button strips, needed in most web applications.

UltraEdit-32
Powerful Text, HEX, HTML, PHP and Programmer’s Editor.

Bytescout Post2Blog
Freeware powerful blog editor for WordPress, Typepad, MovableType and other blogs.

Search Monster
Free Flash Web Directory & Internet Search Engine is the Flash-remoting Web directory instant content for you Web site.

Zend Studio
Encompasses all the development components necessary for the full PHP application.

DbaBar
Integrated toolbar enabling Oracle Database Administrators to browse their databases from within Internet Explorer within minutes after installation.

Explorer Toolbar Maker
lets you create your own Explorer bar from any HTML page, picture, Macromedia Flash file, or Microsoft Office document.

Let’s say you want to change the color of your links on just your contact page to red. They are blue on every other page, but it just makes sense for them to be red on your contact page (for some reason). There are a couple ways you could go about this.

• You could declare a separate stylesheet for your contact page.
  This isn’t ideal, because it’s redundant. If you make any other changes, you’ll always have to make them both on the main stylesheet and the contact page stylesheet.
    
• You could give all those links a unique class on that page.
  This isn’t ideal, because it isn’t very semantic and it’s also redundant. Why apply a class to every single link on the page when they really aren’t any different from links elsewhere on the site, contextually speaking?
    
• The best solution is to give your the body a unique ID.
  This solves the problem perfectly. You can use the same stylesheet and target just the links you want to with a single CSS selector.
    

Simple, literally just apply the ID to the body tag:

   ...
</head>

<body id="contact-page">
   ...

Now for our example of making all links on the contact page red instead of blue, just use some CSS like this:

a {
color: blue;
}

#contact-page a {
   color: red;
}

Web design is simpler than ever, and that's a good thing. web 2.0 design means focused, clean and simple design that is all about the content.

Why simplicity is good?

1. Web sites have goals and all web pages have purposes.
2. Users' attention is a finite resource.
3. It's the designer's job to help users to find what they want (or to notice what the site wants them to notice)
4. Stuff on the screen attracts the eye. The more stuff there is, the more different things there are to notice, and the less likely a user is to notice the important stuff.
5. So we need to enable certain communication, and we also need to minimise noise. That means we need to find a solution that's does its stuff with as little as possible. That's economy, or simplicity.

How?

There are two important aspects to achieving success with simplicity:

1. Remove unnecessary components, without sacrificing effectiveness.
2. Try out alternative solutions that achieve the same result more simply.

Whenever you're designing, take it as a discipline consciously to remove all unnecessary visual elements.

Concentrate particularly on areas of the layout that are less relevant to the purpose of a page, because visual activity in these areas will distract attention from the key content and navigation.

Use visual detail - whether lines, words, shapes, colour - to communicate the relevant information, not just to decorate.