Monday, September 29, 2008

3 CSS Coding Tips That Will Save You Hundreds of Wasted Hours

I got into CSS-based design sometime around 2002-2003 and have wasted literally hundreds of hours of my life dealing with various CSS and browser-compatibility issues. Back then we had far fewer tools at our disposal so the process of testing was a lot more tedious. Over the past 5 years I’ve picked up some tips and tricks that have made my job 100 times easier.

So without further adieu I’d like to share some of these tips:

  1. On any given div, if you specify a width, do NOT specify padding or margins (and vice versa). Specify padding and margins on the elements contained in that div instead. Ex: leftcolumn {width:200px} lefcolumn p {padding:10px;width:20px;}
  2. Use Firebug and Web Developer Toolbar together. In Firebug, use the inspect button to see element names, styles, and inheritances. Then use Wed Developer’s CSS > Edit CSS panel to change the properties in real time. If anyone wants I can probably make a video screencast and show you some examples of what I mean.
  3. Don’t obsess about validation or having perfect code. I know some coding Nazis might hang me for this one, but if you need to stick a clearing div here or use a IE6 hack for a specific issue there, do it. I used to have CSS OCD once too, it’s ok. But if I can save myself an hour of tearing my hair out trying to fix one small issue just in the name of perfect semantic markup - it’s not worth it (especially if your users will never notice or know about it). Life is short. Don’t spend it obsessing about CSS.
via :auinteractive


Image Cropping Scripts List

After looking for awhile for a script that will crop your image in the browser I decided to put a list together. I found various types of scripts that will accomplish this. The list below is a list of image cropping scripts.

  1. cfImageCropper - This script is written in Coldfusion. The Demo of this script works very well and the code is very simple to implement.
  2. jsCropper - This javascript image cropping script is based on the Prototype JavaScript framework and jsCropper is one of my favorite copping script. It is very easy to use and its a great unobtrusive script. jsCropper has tons of great features you should check it out.
  3. mooImageCrop - mooImageCrop is based on the mootools framework and php. It is very easy to implement.
  4. Image Crop - This is a great script written in Javascript and PHP. It requires the install of ImageMagick server component.
  5. Ajax Image Editor - Is a very powerful image editor script that allows you to crop, resize, and rotate the image. It is fairly easy to implement and it isn’t written with any frameworks.
  6. Flash Image Crop - Is a very nice flash image crop tool written in Actionscript and PHP. The only problem I have with this script is that you have to use the space bar to accept the cropped area and not the enter key. But overall it works very well.
  7. Flash Based Cropping tool - This tool is also written in Actionscript and PHP is a very nice script. You can also resize the image with this script.
  8. MooCrop -MooCrop is an Image Cropping utility that uses mootools javascript framework. MooCrop works very fast and you can even edit the color of the mask.
via :webtecker

Labels: , ,

Friday, September 26, 2008

CSS Rounded Corners 'Roundup'

This collection of techniques to create boxes with rounded corners using CSS has become quite popular. The problem now is there are so many choices it's hard to know which one to choose.

To that end I've provided some more information about each method in order to help people choose which best fits their needs.

Some of these techniques use CSS and one or more background images, some use CSS, JavaScript and no images, and a couple use only CSS — no images or JavaScript required (more markup is needed though).

Not Sure Which One to Use?

There are so many different techniques now, it really depends on your individual requirements and preferences; particularly whether you want to use a JavaScript-based technique or not.

Try out a few methods and see if there's one that fits. For convenience I've split the methods into two tables:

Click on a column heading to sort the table by that column.

CSS Only Methods

Name # of Images Fixed / Liquid Site / Comments
Even More Rounded Corners With CSS 1 Liquid HedgerWow
Even More Rounded Corners With CSS 1 Liquid
CSS Mojo: Adding Visual Polish To Your Pages 1 Liquid Leslie Sommer
CSS Round Corners 0 Fixed / Liquid Gran Yosler. Limited flexibility.
Single Image Fluid/Fixed Rounded Bordered Corners walkthrough 1 Fixed / Liquid CASS-Hacks
ORB | Fluid CSS One Image Round Borders 1 Liquid Daniel Tillett
Rounded Corners for Fixed width 2 Fixed Daniel Bulli
Curved boxes in CSS 2 Fixed Includes CSS3 example
Chunky Borders and corners with no images 0 Fixed / Liquid Uses no images
Lean and Clean CSS boxes 2 Fixed TJKDesign
PNG transparency rounded corners using images 7 Liquid Uses PNG images
CSS Liquid Round Corners 6 Fixed / Liquid Search-This
RoundedCornr 4 Fixed / Liquid Online generator
More Rounded Corners with CSS 6 Liquid Schillmania
Spanky Corners 4 Liquid SitePoint. Online generator
Mountaintop Corners 2 Fixed A List Apart. Uses definition list
Custom Corners & Borders: Part I 5 Liquid A List Apart. For solid backgrounds
Custom Corners & Borders: Part II 5 Liquid A List Apart. For gradient backgrounds
Simple Rounded Corner CSS Boxes 1 Fixed Modx CMS. Replaces Thrash Box
Spiffy Box 1 Fixed SpiffyBox. Online generator based on Thrash Box
Graphik Junkie 3 Fixed Graphik Junkie
Single Image Rounded Corners 1 Fixed / Liquid Phoenity
Custom Corners 3 Fixed Interface-7
Bullet Proof Rounded Corners 4 Liquid Albin.Net. Images added via HTML not CSS
Rounded Corners in CSS 4 Fixed Adam Kalsey
CSS teaser box 1 Fixed 456 Berea Street
CSS teaser box revisited 2 Liquid 456 Berea Street
News list 1 or 2 Fixed 456 Berea Street
CSS Rounded Box Generator 5 Fixed Neurotic Web. Online generator
Round Corners 3 or 6 Fixed or Liquid Sova v siti. Liquid box uses 8 divs
Rounded corners using CSS 4 Liquid Maurice Svay
Simple Box 8 Fixed / Liquid Sperling Corporation
Custom Bordered Boxes 1 or 2 Fixed / Liquid Steve Clay. Includes Fireworks source file
Liquid box with rounded corners 4 Liquid Guy Fisher
Borders with curves 5 Fixed Webcredible
Boxes with curves 4 Fixed Webcredible
Rounded block or design with CSS & XHTML 3 Fixed Alsacreations. Uses definition list for markup
Resizable box with freely stylable corners & surface 4 Liquid Andreas Kalt
Rounded corners in CSS 4 Liquid Arve Bersvendsen. Does not work in IE
Broader Border Corners 4 Liquid 24 Ways
Liquid round corners 4 Liquid Tiscali
CSS: Smart Corners 4 Liquid Mike Cherim
Add Fluid Borders to Your Boxes with CSS 0 Fixed WebReference
Snazzy Borders 0 Fixed / Liquid CSS Play
Spiffy Corners 0 Fixed / Liquid Spiffy Corners. Online generator

Methods Requiring JavaScript

Name # of Images Fixed / Liquid Site / Comments
Corner.js 0 Fixed Multiple effects including borders.
Anti-aliased Rounded corners with JQuery 0 Fixed / Liquid Blue anvil.JQuery version of Curvy Corners.
ShadedBorder 0 Fixed / Liquid Drop shadows & other effects.
Transcorners 0 Fixed
Sweet Rounded Corners 1 Liquid Online generator
DomCorners 1, 2, 5 Liquid Web Graphics. # of images based on layout
Transparent Custom Corners and Borders 2 Fixed 456 Berea Street
Customising custom corners and borders 2 Liquid 456 Berea Street
curvyCorners 0 Fixed / Liquid Curvy Corners. Support forum; mailing list
Nifty Corners Cube 0 Fixed / Liquid 13 examples
Rico – Javascript Rounded Corners 0 Fixed Rico
Rounded Corners With CSS and JavaScript 0 Fixed Dev Articles
Rounded Corners with CSS and JavaScript 4 Fixed SitePoint
MochiKit Rounded Corners 0 Liquid Mochikit
Octopus Engine 8 Liquid Dragon Labs. Source package includes PSDs
Editsite Rounded Corners 0 Fixed
Anti-aliased Nifty Corners 0 Liquid Steven Wittens
Rounded Corners without Images 0 Liquid Seky

via :smileycat

Labels: ,

Advanced color menu in flash with sound

how to create very advanced and modern flash menu with sound. You can use this menu for any web site. Using this lesson, you will also learn:

1. How to design a menu,
2. How to animate it,
3. How to import any sound file into a flash library,
4. How to apply action script code on menu to make it more powerful,
5. How to use Free Transform Tool (Q) and much more!

Step 1

Create a new flash document. Press Ctrl+J key on the keyboard (Document Properties) and set the width of your document to 380 pixels and the height to 50 pixels. Select #f8f8f2 as background color. Set your Flash movie's frame rate to 28 and click ok.

Step 2

Take now the Rectangle Tool (R). In the Colors portion of the Tool panel, block the Stroke color by clicking on the little pencil icon and then on the small square with the red diagonal line. For Fill color choose #E9E9E9 and draw a rectangle about 380x9px on the top position of stage like it is shown on the picture below!

Step 3

Take now the Line Tool (N) and go to the Properties Panel (Ctrl+F3) below the stage. Then, choose the following options:

Then, draw a three vertical lines like it is shown on the picture below.

First vertical line place on X:95 and y:22, second on X:190, Y:22 and the third place on x:285 and y:22. See the pictures below!

Step 4

Take the Text Tool (A) and go to the Properties Panel (Ctrl+F3) below the stage. Then, choose the following options:

1. Select a Static Text field,
2. Select a Trebuchet MS as font.
3. Choose 12 as font size and bold it,
4. Select #585858 as color,
5. As the rendering option, select Use Anti-alias for readability.

Then, type the name of buttons like it is shown on the picture below.

Step 5

Take the Selection Tool (V) and select the first buttons text (in my example “HOME”). Then, press F8 key (Convert to Symbol) to convert this buttons name (HOME) into a Movie Clip Symbol.

Step 6

While the new made Movie Clip is still selected, go again to the Properties Panel below the stage. On the left side, You will find the Instance name input field there. Call this Movie Clip "home". See the picture below!

Step 7

Double-click on the movie clip on stage with the Selection tool(V).You should now be inside the Movie Clip.

Step 8

It's time for animation, so while the text home is still selected, press again F8 key (Convert to Symbol) to convert this text again into a Movie Clip Symbol again.

Step 9

Click after that on frame 10 and press F6 key.

Step 10

While you're still on frame 10, move your buttons text a little up. See the picture below!

Step 11

After that, take the Selection Tool (V) and click once on the buttons text (Movie Clip) to select it. After that, go to the Properties Panel (Ctrl+F3) below the stage. On the right, you will see the Color menu. Select Tint in it, for Tint color choose white and put it down to 100%. See the picture below.

Step 12

Right-click now anywhere on the gray area between frame 1 and 10 on the timeline and choose Create Motion Tween from the menu that appears. See the picture below!

Step 13

Create now a new layer above the layer 1 (layer 2). After that, using the drag and drop technique, move layer 2 below the layer 1.

Step 14

Select layer 2, take the Rectangle TOol (R). In the Colors portion of the Tool panel, block the Stroke color by clicking on the little pencil icon and then on the small square with the red diagonal line. For Fill color choose #D7D3C1 and draw a rectangle 93x40px on the position like it is shown on the picture below!

Step 15

While the rectangle is still selected, press F8 key (Convert to Symbol) to convert this recatngle into a Movie Clip Symbol.

Step 16

Click now on frame 10 and press F6 key. Then, go back on the first frame, take the Free Transform Tool (Q) and do the following.

Step 17

After that, take the Selection Tool (V) and click once on the rectangle that you just decreased. Then, go to the Properties Panel (Ctrl+F3) below the stage. On the right, you will see the Color menu. Select Alpha in it and put it down to 0%. See the picture below!

Step 18

Right-click now anywhere on the gray area between frame 1 and 10 on the timeline and choose Create Motion Tween from the menu that appears. See the picture below!

Step 19

Go back on the main scene (Scene 1).

Step 20

Double click on layer 1 with the Selection Tool to rename its name in menu. After that, create a new layer above the layer 1 and name it invisible button.

Step 21

Select now the invisible button layer and take again the Rectangle Tool (R). In the Colors portion of the Tool panel, block the Stroke color by clicking on the little pencil icon and then on the small square with the red diagonal line. For Fill color choose any color and draw a rectangle over the first button. See the picture below!

Step 22

While the rectangle is still selected, press F8 key (Convert to Symbol) to convert this rectangle into a Button Symbol.

Step 23

Move now the keyframe from the Up state to the Hit state. See the picture below.

Step 24

Create a new layer above layer 1 (layer 2).

Step 25

Click on the Over state of layer 2 and press F6 key. After that, find somewhere any sound (mp3. file) which you like to use, and Import it into a Flash library (File > Import > Import to Library).

Step 26

Go back on the main scene (Scene1).

Step 27

Take the Selection Tool (V), click once on the Invisible Button to select it, open the Action Script Panel (F9) and enter the following Action Script code inside the Actions panel:

on (rollOver) {
_root.mouse_over_home = true;

on (rollOut) {
_root.mouse_over_home = fstartlse;

on (release){

Step 28

Create a new layer above the invisible button layer and name it action script. Then, click on the first frame of layer action script and enter the following Action Script code inside the Actions panel:

_root.home.onEnterFrame = function() {
if (mouse_over_home) {
} else {

Now, we're donw with the first button. Repeat this process also for every other buttons in menu!

Have a nice day!

Download example

via : flashperfection


Search Engine Optimization –Thoughts From a PPC Point Of View!

Search Engine Optimization – Random Thoughts From a PPC Professional Point Of View! If a person had asked me a few years ago whether SEO is complimentary to paid search or asked a SEO professional whether a person must even do PPC (Pay Per Click aka SEM aka Search Engine Marketing), I am sure both of us would not have given a positive opinion of the other.

One reason for this could have been that SEO is the grandfather of search and it is nearly as old as the search engines themselves, while PPC is only less than six years old. Many SEO professionals detested search engines for introducing paid search and firmly believed that it was a temporary phenomenon – if the SEO firms would have truly supported paid search from the beginning, specialist paid-search companies such as Communicate 2 would have found it difficult to prosper. In hindsight, I am truly grateful they didn’t and both of us got an opportunity to create our own niches.

The other reason could be that SEO and PPC is generally handled by two different departments of the marketer – PPC by the marketing department, SEO by the IT department. Thus, generally there is little collaboration between the two; both working in their own compartments, each thinking that it is the other’s job.

Today, however, I firmly believe that SEO is complementary to paid search rather than being competitive. In fact, PPC and SEO companies can work together to compliment each other’s services quite effectively. (the ‘Andar Ki Baat’ reason also is that now Communicate 2 has become a part of Isobar that owns one of the best SEO companies in the world, I-prospect and our agreement compels me to say positive things about SEO *Smile*)

Below are many ways in which SEO and PPC can collaborate and create a synergistic strategy that will result in most effective results for the client. Furthermore, there are some areas when either SEO or PPC is more effective, best thing to do is evaluate the purpose, then either use one of them or both of them in a way that they complement each other.

Identifying Keywords through PPC: When one designs an SEO strategy, it would be good to know which keywords drive most traffic, give most conversions, which are most expensive, and so on. I am sure that an SEO professional will understand this – paid search can give all this information at a flick of a button. If a person uses this information to design an SEO strategy, the SEO strategy would be very effective. Example, keywords that are expensive and give good traffic plus conversion must be given priority treatment by an SEO company. Cheaper keywords that although give good traffic and conversions could be given second priority.

Identifying conversion keywords through SEO: We have seen keywords that are on the 25th position on SEO and still give conversions to the client. A simple step of increasing the bid for those keywords, and getting them on position one for PPC has resulted in increasing conversions exponentially. We have many clients whose entire analytics is handled by Communicate 2; getting a higher listing for these long-tail keywords through SEO would not be difficult, but it would have also taken a lot of time. However, increasing bids on the PPC campaigns allowed us to increase the conversions almost immediately.

Identifying expensive conversion oriented keywords through PPC: Similarly, there are many keywords that are expensive keywords in PPC, as they form a part of the broad match direct keyword. It is quite easy to optimise these keywords through SEO and get a good position. A person is not only able to generate traffic but also do it for free. Example – a keyword such as ‘Personal Loan Mumbai’ hardly triggers any of the tops banks in the top five listings, the natural results show sites such as Sulekha, JustDial, and so on. Building a page on the top bank sites with content covering these long-tail conversion-oriented keywords such as above could be useful strategy as these keywords are nearly as expensive as the primary keywords.

Identifying ad copy that works on SEO: CTR can play a big role in an SEO process. It not only plays a role in the SEO process but it is also important from ROI point of view. What is the use of being on top five in Google, if the CTR is low. PPC allows one to test various ad copies without worrying about losing one’s ranking, once the ad copies that deliver maximum CTR are identified, the same can be used to for creating the title and description tags. I guess not many SEO companies would like to touch the ad copy of their page once they have achieved number two listing on Google.

Understanding the customer through PPC, and then using the info for SEO: PPC allows one to understand what customers call the product of the company, example I know of a company that used to call their customer service centres as ‘customer response centres.’ So when someone would search for ‘company brand’ service centres, the result would be a negative blog site. Once we know what customers are looking for, executing SEO for the same becomes easy. Sometimes a simple keyword change from ‘quick loan’ to ‘fast loan’ can make all the difference.

Using PPC for performing a litmus test: There are many times when a company wants to introduce a new product and see if there is a demand for the same. In such a scenario SEO would take months before it starts showing results while PPC is a very effective starting promotion of a new product. It gives you an idea of how successful the product could be and thereafter the products that deliver results can be complimented with a SEO strategy.

Optimising Landing Pages: It takes months to get a good ranking on SEO. If a person does not have a page that converts into a sale/conversion, months of efforts will go waste. All the more, changing landing pages’ content once they start getting a number one ranking on SEO can be disastrous. PPC is a good way to test your landing pages. Once a person has tested the landing pages through A/B and Multi-variate testing and identified which pages are creating the most conversions, executing SEO for those pages would deliver great results.

I can give many other ways on how SEO and PPC can complement each other. It is important, however, that companies understand that SEO and PPC is not an either/or strategy. Both are synergistic to each other and if used in a way that they complement each other they can deliver great ROI.

So the next time, if any of you –from SEO or paid search – debate over which is better, please remember this note of mine and smile and shake hands as I believe that the end result of any debate should not be winning, but human progress. And blending together of SEO and paid search does just that!

Labels: ,

Why CSS is good for Google

Cascading Style Sheets (CSS) are used to separate the stylistic elements of a page such as layout, colour and fonts from the content of the page such as paragraphs and images. We call this Separation of Content from Presentation.

If you don't understand CSS at all then you may decide not to use it for your site. However I would suggest that the advantages to be gained from using CSS, not just for Google, are well worth the time invested in learning it. For an introduction to CSS see CSS Is Easy by Kevin Yank or see the many other quality articles over at SitePoint's CSS Section.

So why is CSS good for Google?

  • CSS allows for smaller file sizes
  • CSS allows you greater control of page structure
  • CSS allows you to hide certain content from browsers while it still gets picked up by Google

CSS allows for smaller file sizes

By taking styles out of the HTML page and putting it into a standalone (imported) style sheet (.css file), you can reduce the overall amount of code in your web pages. Pages with less code have smaller file sizes and Google prefers pages with smaller file sizes (many other search engines do too).

Though Google doesn't offer specific advice on this matter, the search engine optimisation community is generally agreed that 100KB is a good upper limit for page sizes.

CSS allows you greater control of page structure

CSS allows you to structure your document according to HTML standards without comprimising the look-and-feel of the page.

Google rewards pages that are well structured, though many designers choose to ignore standards and guidelines as much as possible, because they (incorrectly) believe standards lead to bland pages. Using CSS, designers can create attractive pages with much flair, while adhering to the findability design principles identified in the book (yes you'll have to buy it to get more!).

CSS allows you to hide content from browsers while it still gets picked up by Google

Using CSS you can hide content from certain browsers in certain situations. For example you may have some content that you only want to appear in print, or you may want certain content to only be shown on screen and not in print (such as page navigation). The advantage is that Google will still index all of the content and you will still get the benefit that content brings.

For an example of this technique see my article Random Content Rotation.

Browser Compatibility

If you are new to CSS, be aware that different browsers still interpret CSS standards in different ways, while some (very) old browsers don't read CSS at all. Ensure that your CSS is as cross-browser compatible as possible, and that your HTML pages look acceptable even without CSS.


There are many useful resources for those seeking to learn more about the effective use of CSS. A useful place to start is or SitePoint (mentioned above).

Labels: ,

Website Content & Usability

Writing for the web is totally different to writing for printed matter. We tend to scan content on the web hunting for the information we're after, as opposed to reading word-for-word. As a result of this, there are certain guidelines you should be sure to follow when writing copy for your website:

1. Use clear and simple language

Reading from computer screens is tiring for the eyes and about 25% slower than reading from printed matter. As such, the easier the style of writing the easier it is for site visitors to absorb your words of wisdom.

Some techniques for using clear and simple language include:

  • Avoid slang or jargon - Get your grandmother and ten year old nephew to read your site - if both can understand the page content you've done well!
  • Use shorter words where possible - ?Begin? rather than ?commence?, ?used to? rather than ?accustomed to? etc.
  • Avoid complex sentence structures - Try to include just one idea or concept per sentence
  • Use active ahead of passive words - ?We won the award? is shorter and easier to comprehend than, ?The award was won by us?

2. Limit each paragraph to one idea

If you assign just one idea to each paragraph site visitors can:

  • Easily scan through each paragraph
  • Get the general gist of what the paragraph is about
  • Then move on to the next paragraph

All this and without fear that they'll be skipping over important information, because they will already know roughly what the paragraph is about.

Limiting each paragraph to just one idea is especially effective when combined with front-loading paragraph content.

3. Front-load content

Front-loading content means putting the conclusion first, followed by the what, how, where, when and why. The first line of each paragraph should contain the conclusion for that paragraph, so site visitors can:

  • Quickly scan through the opening sentence
  • Instantly understand what the paragraph is about
  • Decide if they want to read the rest of the paragraph or not

Because each paragraph contains just one idea, users can do all this safe in the knowledge that if they jump to the next paragraph they won't be missing any new concepts.

Front-loading also applies to web pages, as well as paragraphs. The opening paragraph on every page should always contain the conclusion of that page. This way, site visitors can instantly gain an understanding of what the page is about and decide whether they want to read the page or not.

Unfortunately many websites don't adhere to this guideline and end up writing page content in a story-format. On each page there's an introduction, middle and conclusion, in that order. Unfortunately, when scanning through web content we don't tend to read all the text nor read all the way to the bottom of the screen. As such, you may easily miss the conclusion if it's left until the end.

So remember, conclusion first, everything else second! For a great example of front-loaded content, just read any newspaper article. The opening paragraph is always the conclusion of the article.

4. Use descriptive sub-headings

Breaking up text with descriptive sub-headings allows site visitors to easily see what each section of the page is about. The main heading on the page provides a brief overall view of what page is about, and the opening paragraph gives a brief conclusion of the page (because you've front-loaded the page content). Within the page though, there are various sub-themes which can be quickly put across with sub-headings.

There's no hard and fast rule for how frequently to use sub-headings, but you should probably be roughly aiming for one sub-heading every two to four paragraphs. More importantly though, the sub-headings should group on-page content into logical groups, to allow site visitors to easily access the information that they're after.

5. Bolden important words

Another way to help users locate information quickly and easily is to bolden important words in some paragraphs. When site visitors scan through the screen this text stands out to them, so do make sure the text makes sense out of context.

Bolden two to three words which describe the main point of the paragraph, and not words on which you're placing emphasis. By seeing these boldened words site visitors can instantly gain an understanding of what the paragraph is about and decide whether or not they want to read it.

6. Use descriptive link text

In the same way that bold text stands out to screen-scanning web users, so does link text. Link text such as ?click here? makes no sense whatsoever out of context so is useless to site visitors scanning web pages. To find out the destination of the link, site visitors have to hunt through the text both before and after the link text.

7. Use lists

Lists are preferable to long paragraphs because they:

  • Allow users to read the information vertically rather than horizontally
  • Are easier to scan
  • Are less intimidating
  • Are usually more succinct

8. Left-align text

Left-aligned text is easier to read than justified text, which in turn is easier to read than centre- or right-aligned text.

When reading through justified text the spacing between each word is different so our eyes have to search for the next word. This slows down our reading speed. Right- and centre-aligned paragraphs slow down reading speed even more because each time you finish reading one line your eye has to search for the beginning of the next line.


These eight guidelines are nothing revolutionary nor are they difficult to implement. Yet so many websites structure their content so poorly to the detriment of their site visitors. Have a quick look over your website now - how does it do with regards to these content guidelines?

This article was written by Trenton Moss, founder of Webcredible, a web usability and accessibility consultancy. He's extremely good at usability testing and knows an awful lot about the user centered design process.

via : theukwebdesigncompany

Labels: , , ,

Tuesday, September 23, 2008

Accessibility In Suit And Tie

The life of the corporate web worker who cares about standards and accessibility can be a frustrating one; hampered by office politics and archaic content management systems. In this article, Bruce looks at what you can do to make sure your projects are as accessible for your users as possible.

The gap between the high-end standards-aware freelance developer with the freedom to choose and the corporate web worker is a wide one, and it doesn’t look as if it’s likely to narrow any time soon. But, just as not every start-up employee skateboards from meeting to meeting coding Django on her iPhone, not every business suit uses FrontPage to juggle his marquee tags. There are many corporate developers who do care about cross-browser compatibility, semantic code and accessibility.

So this article is for the suits who care: if you can’t use cutting-edge tools, technologies or techniques, what can you do to ensure that you’re doing all you can for all of your users? My tried-and-tested method is:

  1. Get buy-in from the top
  2. Some accessibility is better than none
  3. Educate your content providers

Get Buy-In From the Top

The last major redesign project I was involved with was successful from an accessibility point-of-view because we had buy-in from the board. Having convinced the top brass of the need for accessibility we wrote a “constitution” for the new site that says all content must be accessible to people with disabilities, and where this clashes with aesthetics or organizational convenience, it trumps them. If you read it, you’ll see that I’ve sneaked in some accessibility-related rules under a different guise.

The CEO then sent this to all the directors. The advantage of this is clear: when a content owner is exasperated at the time you spend marking up a long important document rather than simply linking to a PDF of the Word document they gave you, you can just point out that you’re just doing what you’re told and invite them to complain to the CEO.

Achieving Buy-In

One problem with corporate accessibility is that while corporations generally care about accessibility in the abstract (because they don’t want to get sued, and they don’t want negative publicity), they don’t actually understand how to show that they care. In my own experience, working for a UK legal regulator, accessibility is seen as a legal compliance issue (”does this comply with the DDA?”) which can lead to a grudging attempt to be accessible, because a corporate lawyer will naturally try to do the minimum required to stay in compliance; minimizing risk while minimizing costs.

The way to overcome this is to focus on the customer. I find the following arguments successful in getting accessibility discussed in a positive, “good-to-have” way rather than in a legal compliance “oh-well-if-we-must” way:

Some Accessibility is Better Than None

I often see standardistas boast "I don’t care about accessibility" because it’s assumed to be inherent in standards-based development. (I doubt that’s true if you’re making Ajax pages, as you’ll need WAI-ARIA attributes to be added to HTML elements in order to ensure accessibility).

But that is based upon the premise that your web infrastructure and office politics mean that you’re able to do standards-based development. Assuming you have a website that deals with the storing, manipulation and display of company data, you’ll need a CMS of some kind. The best code is produced by the best CMSes, and many of those are unavailable to corporate developers because:

  • they’re open source and most corporate IT departments don’t like open source, due to perceived "risk" and lack of someone else to shout at if there’s a problem
  • they are free or very cheap (this is why start-ups often have better tools than big corporates with deep pockets: they use the free ones like WordPress, PHP, Rails, Drupal, etc. because they have to)
  • they are very new and don’t have a pedigree that reassures those whose job depends upon procuring the right CMS
  • there’s a feeling that they can’t possibly compete with costly behemoths like Sharepoint, Teamsite, Vignette (AKA "no-one ever got sacked for buying Microsoft")

We could talk all day about why terrible tools are so prevalent. (In my experience, the reason why a terrible tool isn’t replaced is because someone senior paid $500,000 for it and sure as hell isn’t going to admit a mistake and scrap it.)

Working Around Bad Tools

The terrible tools can hamper your efforts to be accessible in several ways. One of the worst ways it can do this is by having some archaic WYSIWYG editor that allows authors to cheat and make “headings” by choosing size and colors which are translated into font tags on the front end, and therefore there is no structure for an assistive technology user to navigate by.

You can cure this by with a CSS rule that naughtily over-writes the tag: font {color:red; font-size:xx-large; text-decoration:blink; background-color:yellow;} which means content authors see hideous flashing text. It will, I guarantee, encourage them to write proper headings.

Sometimes, terrible tools have to be worked round. You might never be able to get 100% valid code, or remove all the nested tables that you’ve added into pages just to stop them looking atrocious.

But that doesn’t mean that you won’t make a difference if you do what you can. While I was working on The Law Society website we had thousands of pages in the CMS that were full of tags, double-
s to separate paragraphs and some table layout. Even if we could have run a script over the proprietary database to change those, it wouldn’t have been good use of our time, as every page would still need to be manually verified.

However, the site-wide header and navigation was controlled by a single include file, so we amended that to change the navigation from elaborate tables with bullet to be a CSS-styled unordered list. It would be easy, with such an architecture, to add some WAI-ARIA document landmark roles to help screenreader users. These changes were comparatively simple and made screenreader users’ lives much easier. The site will never validate, or win a clean code award, but it’s more accessible than it was.

Incrementally Improve the Code

So you know you have loads of bad markup and “imitation” headings lurking around, but fixing them all will take too much time and effort. Sort out the biggie pages, such as the home page, “contact us” page, “about us” page and the other top 10 high-traffic pages (check your server logs) straight away.

Whenever any other page needs any kind of editorial amend, take a few minutes when the page is open for the editorial change to correct the markup, too. You’ll find that the most commonly updated pages will be corrected first, and they’re very likely to be most-important or most-visited so a sort of "accessibility through natural selection" process takes over.

Educate Your Content Providers

Most big corporates have multiple people throughout the business submitting content for publication. Generally, they aren’t web specialists and submit their content in Microsoft Word format. It’s vital to give them a Word template that defines the styles they can use for bullets and numbering, etc., so they don’t get a nasty surprise when they see that their lovingly-created purple lightning-strike bullets haven’t made it onto the website.

Consider organizing half-day training sessions on how to use Word styles so that headings are methodically created rather than imitated with font size and bold. This pays off as there is no ambiguity if you’re having to mark up their content by hand. (I would have killed for a Word macro that converted documents into HTML with no style information, only the structural information. If you know of one, please tell the world!)

If you have to publish in PDF format, it will be more accessible if it’s made with a proper Word structure. (Adobe has published a useful cheat sheet on how to author Word files for conversion to more accessible PDF.)

Get Your Content Providers Writing HTML

Go mad! Dream big! Turn off the WYSIWYG, throw away Word and train your content providers to deliver you HTML. Most web content (as opposed to headers, navigation, forms, etc.) consists of a few conceptually simple elements:

  • headings
  • paragraphs (including abbreviations)
  • links
  • bulleted/ numbered lists

So train people to send you the content ready-marked up. It won’t be perfect, but it’s simple to run it through HTML Tidy to make it validate. It will be shorter and better-structured if they have to consider the heading hierarchy. Of course, you will still need to add the more complex elements like images and data tables yourself, but they are rarer, so your workload will diminish, their control over the content will increase and your users will get a more accessible website.

Accept the Compromises

It’s hard, when you’re a professional, to accept that something you produce is less than perfect. But all web design is a compromise: liquid layouts versus line length, design versus page weight, and so on. Complete accessibility is never completely achievable as there is such a vast range of needs. So, be a zen master and accept the compromises: simply by caring and trying to do what you can, you’ll make your company’s website more accessible and lives of your disabled visitors easier.

via :thinkvitamin


SEO (Search Engine Optimization) tool for higher rankings

Web design has assumed a great importance today with varied business activities being carried out on the internet. Hence, during web design and web development stages, the focus of the web designer must be to create search engine friendly web pages through effective use of SEO tools. Schools may teach you about aesthetic aspects of a website and so on. However, they never give you the inner secrets to higher search engine rankings. Here are certain crucial techniques that must become a significant aspect of your web design process in order that your website gets more referrals. These SEO tactics are here to stay.

Use Flash judiciously

Flash option while web design process must not be exercised too much. Flash brings out awesome web pages but it does not allow the search engine spiders to crawl through your content. Therefore, the search engines do not recognize it. Hence, SEO strategy during web development program must be manipulated according the needs of the business. Web design may however include the option of a HTML website version and a FLASH version, which will depend on customers’ connections (Dial-up or Broadband). Moreover, if you are keen on using flash as a Search Engine Optimization tool, a small square or rectangle of flash on the website may blend well. However, flash sites take time to load and the person may be distracted towards another website that loads faster. Therefore, web development must carefully consider this.

“Keywords rich text”

The keywords on the website must be placed meticulously. The must not be overused. Web development and SEO strategy must consider optimum but shrewd use of these keywords. All web design and web development would hold no good if the search engines consider your website as spam due to overuse of keywords. These keywords ought to be placed systematically on the content. They must reflect the paragraph and must form an integral part of it. Otherwise, web design needs to be modified in order to accommodate these keywords. The keywords are a great SEO tool that can boost your search engine rankings.

More keyword placement ideas

Keywords are the key to conversions. Hence web design must consider this aspect important. A website name using keywords can be highly effective. If your keyword for a website selling cheap holiday packages, then you could call your website This way, you can also place the keywords on your title tag. Wed design must therefore be specific to the needs of the business. Placing the keywords on your Meta tags also boosts web design credibility on the engines and their rankings.


This is a kind of tool used in web design process for web development. The main aim of the ALT tag during web design is that those who cannot download the pictures from a website can learn about the images from the ALT tag below. This tag gives a description of the image and enhances web development through effective SEO. Search engines consider this while ranking websites.


Monday, September 22, 2008

8 CSS Techniques for Charting Data

There are many ways you can present numerical, chartable data by styling elements using CSS. Using CSS to style your data prevents you from relying on static images and increases your content’s accessibility.

Below, you’ll read about 8 excellent techniques for styling elements into beautiful, accessible charts and graphs.

1. CSS for Bar Graphs

CSS for Bar GraphsView Demo

This tutorial showcases three ways of graphing data. The Basic CSS Bar Graph example involves a

to contain the graph, and styling a element as a block element and using percentage widths to adjust the width. A great modification of this technique is to use a paragraph

element instead of a tag for semantically-correct HTML. The two other examples use a definition list and unordered list to graph multiple bars.

2. Accessible Data Visualization with Web Standards

Accessible Data Visualization with Web Standards - screen shot.View Demo #1View Demo #2View Demo #3

Author Wilson Miner discusses the concept of accessible, standards-compliant techniques for data visualization mentioning the benefits, limitations, and alternatives in brief. The A List Apart article shows you three data visualization techniques using a basic structure of unordered lists.

3. CSS Vertical Bar Graphs

CSS Vertical Bar Graphs - screen shot.

Eric Meyer shows us another technique for graphing vertical bar graphs using unordered lists similar to the "CSS for Bar Graphs" technique from Apples To Oranges.

4. Creating a Graph Using Percentage Background Images

Creating a Graph Using Percentage Background Images - screen shot.

In this technique, you use pre-made background images to shade in the appropriate data. The downside of this technique is that you’re limited by the pre-filled background images that you have and making more to suit your needs will increase the amount of classes you assign to your data - increasing the file size of both your CSS and HTML file as well as increasing the number of HTTP connections needed to render the page because of the background images.

5. Pure CSS Data Chart

Pure Css Data Chart - screen shot.View Demo

This example uses a definition list for mark-up. A element inside the

definition list item serves as the element that gets adjusted in height to shade the appropriate area. An element is used to display the numerical representation of the shaded area, absolutely-positioned in the middle of the bar.

6. CSS Scatter Plot

CSS absolute positioning scatter plot - screen shot.

A scatter plot is another great way to graph two-dimensional data. In the example, each data point is clickable, so a possible modification to this technique is to use a modal window that displays extra information about a particular data point.

7. Definition List Bar Chart

Definition List Bar Chart - screen shot.

This technique shows two examples of styling definition lists into horizontal bar charts. Each definition list item is assigned a class that adjusts its width using percentage units.

8. Accessible Bar Chart

Accessible Bar Chart - screen shot.

This technique showcases a method for semantic, accessible bar charts by using a table as the basic structure of the bar graph and using CSS to stretch a background image to its appropriate width.

via : sixrevisions


Why adding variables to CSS is a good thing

Professional perspective

Bert posts statistics of stylesheet usage from the W3C site, and means that most stylesheets are very small, and on those, variables are not really needed. I agree. You can get away with simple search-replace in those simple cases. But Bert also finds that there are bigger sheets: “largest hand-written style sheet: 1462 lines (bought from a Web design company)”. I work at one of those companies, and almost all CSS files I write exceed 1000 lines.

In those cases, I think CSS variables would help me a lot. Especially for margins. Matching several margins together by copying the same value over and over again isn’t maintainable. Search replace on a pixel value is a sure way to mess up your whole stylesheet: who says you only use 5px for those margins? So there is a use case for some kind of variables.

So we need variables, but how?

Bert then suggests that those people should use a solution such as PHP to generate CSS. So we should invent a new language for generating CSS with PHP? And another language for generating CSS from Ruby, from Java, from .NET, and so on. Why shouldn’t we go this way? It’s the path HTML has taken. And this is a hard nut to crack. How is CSS different from HTML? Why should CSS have variables when HTML doesn’t?

I think the answer is that we should add variables to both languages. They are very similar in nature, so they should be treated the same. Because what has changed since when CSS was created is that we’ve started building bigger and more complex sites. And if CSS starts to be too cumbersome to use, people will start looking elsewhere, to Flash, Air, Silverlight and so on. CSS needs to adapt to the more complex sites people are building today.

I’d rather see CSS follow the times and add variables, than seeing frustrated professionals move to proprietary technologies.

So what about beginners?

Bert’s article deals a lot with beginners, and how it will be harder for them to understand another level of abstraction. Lets make it clear at first that CSS already is too hard for beginners. To make a very simple layout you need to understand floats (yes, almost everyone needs columns), and floating is really confusing (ever tried to explain float/clear to someone?). Even for someone like me, who has worked with CSS for years, floats still puzzle me regularly.

People will give up on CSS when they encounter floats (yes, I’ve seen this), not when they find CSS variables. They can just choose not to use variables, while they really need to know floats. Also, CSS variables are easier to understand than cascading values. I mean really, if I set font-size on body, why do my links get larger? That’s a very similar concept that is central to CSS.


CSS Variables make it easier for professionals to do their job. It doesn’t require inventing new template languages. It doesn’t make the language overall harder either. The people that can handle floats and cascading, can handle variables too. We need variables.

Via Simon Willison


10 Smart Javascript Techniques to Improve Your UI

Javascript can add a lot of special effects that can really improve the user's experience. Here are 10 simple and clever Javascript techniques that add an extra dose of usability to any webpage.

Javascript is typically used as an aesthetic language in web development. This means that web developers should almost always be using Javascript for one thing only: Improving the visitor's experience. There are many clever and useful ways to improve a site from the user interface perspective. A developer can find nearly any snippet of Javascript to achieve what he or she wants to accomplish.

Javascript is truly a powerful and easy language to learn. It can be used to perform simple, aesthetic functions like toggling an element. It can be used to power a dynamic email client, and even send data instantaneously. Javascript can be as simple or advanced as you want it to be.

Javascript Frameworks

A great place to find Javascript techniques that can improve your site's functionality is by browsing Javascript frameworks and their plugins and documentation. Here are a few frameworks that have lots of resources, plugins, and communities behind them:

Frameworks are a blessing to any developer or designer who wants to quickly add Javascript effects to their layouts, without having to make raw code. Many of the techniques that we use below will run on Javascript frameworks like JQuery or MooTools.

Simple Javascript Techniques that Make Happy Users

It's important to note that many of these features aren't big and obnoxious, but rather small and subtle. Too often developers get carried away when it comes to adding Javascript. These are small but very useful techniques that can be used by almost any developer. You'll also note that most of these features deal with cleverly hiding and showing important information in non-traditional ways.

1. jQuery Hover Sub Tag Cloud

The jQuery hover sub tag cloud is an excellent example of a simple piece of Javascript that really adds a nice, subtle touch to tag clouds. As the user hovers over a specific tag and it has sub-tags associated with it, a pop-up box appears and shows the sub-tags. Simple, yet effective.

2. Opacity Change

Opacity Change is a little tutorial on how to use Scriptaculous to make an opacity change for an element.

Opacity changes are great for many different reasons: showing hovered content, showing content that has been clicked on, and many other useful functions.

3. Image Upload and Auto Crop

Being able to crop photos after you upload them is a feature that more web applications could use. That's why the jQuery image upload and crop is such an under-used Javascript technique. Cropping images is a much-needed function when it comes to uploading images, and many web applications could benefit from adding this useful feature.

Honestly, I think that nearly all image uploads could use a basic crop function. However, image cropping isn't the easiest Javascript function to add to a form. It's a somewhat involved process, using image libraries and Javascript. Using this script built on the jQuery framework can add a lot to the user's experience without a bunch of extra code.

4. Password Strength Meter

As hackers become smarter and larger in numbers, it's becoming more and more important for site users to pick strong, non-guessable passwords that contain a combination of letters (upper and lower case), numbers and special characters. However, this task is easier said than done. Users typically don't read directions if they can help it.

Visually showing password strength in registration forms is an excellent way to encourage users to make the passwords more challenging. While this is slowly becoming more common this simple technique is not used anywhere near as much as it should be.

The Password Strength Meter works off of prototype/scriptaculous and is a handy little script that shows the strength of the password with a colored meter in real-time. More sites need to implement this type of "safety" script to help users see the dangers of inputting weak passwords.

5. Magic Zoom

Magic Zoom is a highly-useful script for eCommerce sites, as well as other sites that have detailed images. Instead of having the user making an extra click to a much larger picture and use up bandwidth, Magic Zoom allows you to essentially look through a magnifying glass at each picture.

Magic Zoom is a paid script, but well worth the $47 if you have an eCommerce store or any other site that has very detailed photographs. You can download the trial version below.

6. JQuery Autotab

Every single form on the Internet should have this feature. It might just be the perfectionist in me, but having multiple input forms that autotab to the next input automatically seems like it should be commonplace. It's such a relief when filling out items like social security numbers when the input automatically tabs to the next input.

The jQuery Autotab script is self-explanatory, and does what the name implies: adds autotabs to forms with jQuery.

Sometimes it's the small things in development that can really make a difference.

7. Incredible Javascript Login Form

While we typically don't like to toot our own horn at NETTUTS, how can we talk about clever and useful Javascripts without bringing up Connor Zwick's awesome tutorial on how to build a useful login form?

The Javascript login form is an elegant combination of jQuery and a beautiful Photoshop layout to achieve the effect of being able to show a login form without having the box take up a bulk of the page. Digg is another great example of a site using Javascript to show and hide the login form.

8. Context Highlighting Web Forms

Forms are some of the hardest parts of web design. Make a form too long and you might scare away a potential user or customer. If a form's design is unattractive, that might scare away a potential user as well. Any way that we can make our web forms more appealing to the eye will yield a higher sign-up conversion rate.

The context highlighting web forms script is an excellent attribute to add to a signup form. It's surprising that more forms don't offer this functionality. Being able to quickly see the progress on a form can noticeably improve the user experience.

9. Sliding Top Panel

The Sliding Top Panel script is a lot like the Incredible Javascript Login Form. Hiding/Showing important information is a key to beautiful, usable designs. Any time we can use Javascript to help keep unneeded information neatly packed away, we should be striving to do that.

10. Social History

Site promotion buttons and links can quickly clutter a site or blog's layout. It seems that if you want to promote your blog posts and other content on sites like Digg and Delicious, you have to add a long list of buttons to your template so that you don't exclude anyone's favorite social bookmarking or news site.

Social History comes in handy because it runs a test to see where the user has been recently, and loads images to those sites, and only those sites. Essentially, it's only showing the visitor the buttons that they would want to see.


Labels: ,