If you've done any Ajax development then you know that much of the loading of data is done in the background. This is great from a developers stand point, but from a users stand point it can be confusing as to what is happening while the data is being loaded. The solution to this is to show a loading indicator.

A loading indicator is a great idea and a nice animated image that could be hidden would be nice. However, if you are like most developers making a nice animated image may not be your strongest point. Well, today while seeing what was getting bookmarked on del.icio.us, using the del.icio.us Spy, I found an interesting and simple service that makes it very easy to get a nice looking loading indicator.

The service is call Ajaxload and is very easy to use. You simply choose the loading icon that you like and the background/foreground colors (you can even have the background transparent). Then you just save it to your computer using the "Download It" button and then you have your own customized loading indicator.

You can go to the service by clicking here.

If you have used this or a similar service I would love to hear about your experience with it (you can leave a comment, or if you would like you can write a blog post about it on this blog, using your free Ajaxonomy account). So, remember that your users would love to see a loading indicator when it is appropriate.

A common - and desirable - technique for constructing JavaScript-based web applications is that of progressive enhancement: only providing capable browsers with the features that they are capable of utilizing - but providing incapable browsers with an adequate, albeit degraded, experience otherwise.

This provides the best of both worlds: Users of modern browsers (the majority audience) can get the best experience while those that are using incapable browsers (such as most mobile devices) will still get an interface that suits them well.

There's one thing, overriding in all of this, however: Progressive enhancement is nearly only ever applied to the JavaScript functionality of web applications. Presumably it's assumed that if a browser is capable of supporting the desired JavaScript features of an application then it must, also, be capable of supporting the specific CSS styling as well.

One technique that has greatly interested me, as of late, is one employed by the Filament Group (a local design shop here in Boston): Progressive CSS Enhancement. The premise is that progressive enhancement is done with page styling in mind, primarily, rather than from a purely-JavaScript perspective.

This is particularly important for a couple reasons:

• It should be easy to degrade page styling in a manner that isn't reliant upon CSS browser hacks - this technique makes it so.
• Not all pages utilize heavy JavaScript (and, thus, progressive JavaScript enhancement does not apply to them).

Their technique works as follows: You choose to provide the user with, either, the enhanced or the decreased experience by default. In either case a basic script is run which attempts to verify a couple CSS styling behaviors along with some basic JavaScript functionality (just enough to be able to run the test).

A couple of the CSS techniques that they test for:

• Box model: make sure the width and padding of a div add up properly using offsetWidth.
• Positioning: position a div and check its positioning using offsetTop and offsetLeft.
• Float: float 2 divs next to each other and evaluate their offsetTop values for equality.
• Clear: test to make sure a list item will clear beneath a preceding floated list item.
• Overflow: wrap a tall div with a shorter div with overflow set to 'auto', and test its offsetHeight.

With those in place you can pretty safely begin designing a useful CSS-based layout. Note that the experience will only ever be upgraded if all of the tests pass - if any fail then it simply won't continue. Obviously there'll still exist some browser discrepancies (like in the differences in the box model between Internet Explorer 6 and most other browsers) but that's usually an acceptable level of hackage (meaning that you won't have to deviate much from what you're already doing).

The actual implementation is quite simple. It consists of a number of JavaScript-based rules that test for behavior. For example the following rule tests for a working box model:

That check, alone, is able to knock off a number of older browser whom aren't able to successfully implement that CSS behavior. Currently all the rules are in a large code block, which makes maintenance unwieldily. I think that this library could definitely benefit from extensibility (being able to add/remove rules that you wish to honor).

When it comes time to actually use this technique within your application there are a number of strategies that you can use. However, for the sake of discussion here, let's assume that you're sending, by default, the degraded experience to the client (optionally upgrading if the browser is capable). Then you would be able to use these two techniques:

• A class of "enhanced" is assigned to the body element to be used for optional CSS scoping (such as: body.enhanced {background: red;}).
• Any links to alternate stylesheets that have a class of "enhanced" will be enabled.

In this manner you can specify all of your stylesheets in your header with some disabled (being alternate stylesheets) or with some CSS rules being only applied with the body.enhanced match.

Their implementation also allows you to only execute JavaScript if all the rules pass - however I'm not sure if that's an acceptable solution, in this situation. If you want to verify that your desired JavaScript functionality is able to operate then you should check for just that. However, in this case, we can get the other side of the equation: Verifying that CSS works as you would expect it to, knowing that an adequate experience can be provided.

If you're curious as to which devices are supported by the default rules in the test file you can view the result matrix on the tool's site.

I definitely think that this technique has a lot of merit, especially in the realm of mobile-accessible web sites. Since it's virtually impossible to design, and test, your pages to work on such a large number of obscure platforms this degraded strategy is really one that will help to benefit both you, and your users, in the long run.

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.

1. If your site's content can be turned into a widget somehow, such as with an RSS feed or just a mini version of your site (ex. the puzzles widget on this site) - do so - and then submit your widget to all the major widget-oriented websites such as iGoogle, Netvibes, Pageflakes, Facebook, Live, Widgetbox and Widgipedia - it will help drive a LOT of traffic to your site - think of it as a great form of content syndication.
   
2. Do NOT: have a public link exchange on your site, sign your site up on link farms or on SEO directories - this will lower your rankings on Google a lot - take it from experience.
   
3. Though CSS can replicate the styling brought from these tags, search bots love them - so they're worth using for SEO purposes: <h1> - <h5>, <strong>, <em>.
   
4. Make sure your site supports the big four: Internet Explorer 6+, Firefox 1.5+, Opera, and Safari.
   
5. Make sure your site fits down to a 1024 x 768 monitor resolution.
   
6. Use the color wheel when creating layout themes. Try to keep your site layout down to three distinct colors.
   
7. Create a website shell (a.k.a. template), so that if you decide to make another website down the road, it will be a lot quicker to make because you'll already have a framework set up.
   
8. Create a to-do list for your site so you don't forget anything as it grows bigger - I like to jot sudden ideas I get down on it too.
   
9. A successful website provides a service to its users - such as teaching (Wikipedia) and/or social networking (Facebook).
   
10. Whenever possible, use onmousedown instead of onclick - it's ~100ms faster.
    
11. Use file compression for your javascript and web page files so that your pages load faster - also if you can, put the script include tags at the bottom of your page - this will give the illusion that your site loads faster because browsers usually comb through an entire js file before continuing on with loading the rest of your page.
    
12. If you have a rails site, I suggest checking out Mongrel and Monit for Mongrel (or God) if you are currently using Apache with FastCGI. You may notice your app is a lot faster with Mongrel clustering than on FastCGI.
    
13. This one is more of a for-your-health point, but our eyes naturally look slightly downwards - so if your computer screen is straight in front of you at eye level or higher, trying moving it down to neck or chest level - you may notice that your eyes feel more relaxed -- (I learned this last point from an eye doctor and feel that it helps me.)

This tutorial explains how to design a beautiful form (Facebook inspired) using a clean CSS design with only <label> and <input> tags to simulate an HTML <table> structure. You can reuse all CSS/HTML elements to design your custom form for your web projects:


Live preview Download this tutorial (HTML + CSS)

Update: I solved an issue with Safari and Firefox, download the new zip file.

Step 1: Input elements and labels
When you design a form (for example to Sign-in or Sign-up on your site), a fast solution to place all form elements in a page is add them into the table's cells. A good and simple alternative is using HTML <input> and <label> tags in this way:

...and the css code is the following:

...in this way, <span> element inside the <label> tag set the same width (70px) for the field descriptions to the left of each <input> element in your form, like if field description and input was placed in a table row with two horizontal cells.

Update: to solve an issue with Safari (using size attribute) and with Firefox (problem to display correctly input label) I changed the following code:

with:

Step 2: Submit Button
When you add a standard/unstyled button in a form (<input> or <button> tag) take a mind it looks different on different browser and OS. A good practice to uniform how it looks is to define a CSS class to apply to your button. Instead of <input> or <button> tag you can also use a simple link (<a> tag) like in this case (I designed and applyed "green" class to the link <a>):

...and CSS code for the "green" class is the following:

The final result is very nice and clean, ready to reuse in your projects.

Download this tutorial (HTML + CSS)

Bramus introduces a new version of jsProgressBarHandler with bugfix to making multiple barImages properly work with Safari and addition of an internal queue.

jsProgressBarHandler is a Javascript based Percentage Bar / Progress Bar, inspired upon JS-code by WebAppers and CSS-code by Bare Naked App. Next to a structural rewrite of the WebAppers code, this javascript progress bar can easily be extended and tweaked just by setting a few parameters.

jsProgressBarHandler has been tested and verified working in IE6, IE7, FireFox 2 and Safari 3.0.3. Other browsers should work fine too (untested though).

This is one of the coolest javascript progress bars I’ve ever seen. You can find non-ajax demo here and a bit less cool Ajax demo here.

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