When using fonts on websites, font should display it’s all properties & styles on all or most web browsers which runs on different platforms like Windows, Mac or Linux. Unfortunately we don’t have much fonts which supported on all web browsers & platforms. So fonts which are working on all or most web browsers are called Web Safe Fonts.

So here are list of web safe fonts which I am using in my web design projects.

Arial

CSS code;

font-family:"Arial", Helvetica, sans-serif;

Georgia

CSS code;

font-family:"Georgia", serif;

Courier New

CSS code;

font-family:"Courier New", Courier, monospace;

Trebuchet MS

CSS code;

font-family:"Trebuchet MS", Helvetica, sans-seri;

Lucida Console

CSS code;

font-family:"Lucida Console", Monaco, monospace;

Verdana

CSS code;

font-family:"Verdana", Geneva, sans-serif;

Times New Roman

CSS code;

font-family:"Times New Roman", Times, serif;

Lucida Sans Unicode

CSS code;

font-family:"Lucida Sans Unicode", Lucida Grande, sans-serif;

Tahoma

CSS code;

font-family:"Tahoma", Geneva, sans-serif;

Again bad behave of IE. I was working on a client website. Site was done by someone else & I am basically fine tuning it & fixing UI bugs. In this scenario there is a multilevel CSS based navigation (that means no Javascripts at all) which coming under the side bar.

In Firefox it was easy to fix by giving the maximum value to the z-index for that particular navigation.

#navigation li a {
	 position:relative;
	 z-index:9999;
}

Keep in mind that if you are using z-index, use position:relative or position:absolute.

But IE didn’t response at all.

After few minutes of workarounds I just gave a minus z-index value to the Side Bar.

#side_bar {
	position:relative;
	z-index:-1;
}

Thank god!!! It worked.

So I am celebrating it for the second time!

Where did my Design go?

The idea behind this event is to promote Web Standards. Plain and simple. This includes proper use of (x)html, semantic markup, a good hierarchy structure, and of course, a good ‘ol play on words. It’s time to show off your .

To know more about why styles are disabled on this website visit the Annual CSS Naked Day website for more information.

Conditional Comments are basically a new set of comment-like tags that IE 5+ supports. These tags look very much like the good old comment tag and in fact are treated as such by all browsers except IE, in which they operate a little more intelligently. Using Conditional Comments, you can selectively “comment out” any portion of your page in a way that only IE interprets the containing content, or the other way around.

This is a good and valid alternative to invalid browser specific CSS hacks we used ealier.

<!--[if IE]>
You are using Internet Explorer.
<![endif]-->

<!--[if IE 5]>
You are using Internet Explorer 5.
<![endif]-->

<!--[if IE 5.0]>
You are using Internet Explorer 5.0.
<![endif]-->

<!--[if IE 5.5]>
You are using Internet Explorer 5.5.
<![endif]-->

<!--[if IE 6]>
You are using Internet Explorer 6.
<![endif]-->

<!--[if IE 7]>
You are using Internet Explorer 7.
<![endif]-->

<!--[if gte IE 5]>
You are using Internet Explorer 5 and up.
<![endif]-->

<!--[if lt IE 6]>
You are using Internet Explorer lower than 6.
<![endif]-->

<!--[if lte IE 5.5]>
You are using Internet Explorer lower or equal to 5.5.
<![endif]-->

<!--[if gt IE 6]>
You are using Internet Explorer greater than 6.
<![endif]-->

<!--[if !IE]>
You are NOT using IE.
<![endif]-->

Operators supported by Conditional Comments

Operator syntax	Description
!	The “not” operator.
lt	The “less than” operator.
lte	The “less than or equal to” operator.
gt	The “greater than” operator.
gte	The “greater than or equal to” operator.

If u use facebook, and you love CSS…

A CSS facebook group, where you can post your discussion, your website, your blog, your beautiful css/(x)html markup or anything you want!

Join CSS facebook group »

Yahoo Developer Network launches YSlow, a web page analyzer which tells you why they’re slow based on the rules for high performance web sites. YSlow is a Firefox add-on integrated with the popular Firebug web development tool. So before installing YSlow you have to install Firebug.

YSlow featured with:

• Performance report card
• HTTP/HTML summary
• List of components in the page
• Tools including JSLint

Get YSlow »

Introduction

The implementation of valid/standard methods, guidelines and best practices will help to produce high quality websites that are accessible to as many as possible. By building valid websites you can save time and money for the development and provides a better experience for the visitor.

Validation is also an important part of web development. Many errors that are hard to find can discover during validation. This is like spell checking and proofreading for grammar and syntax in a document. but is much more precise and reliable than any of those processes because it is dealing with precisely-specified machine languages, not with nebulously-defined human natural language. You can validate your (X)HTML page as well as your CSS.

Here I’m not going brief you about Web Standards, but I’m going to tell how we can use those best practices in Web standards to produce a valid (X)HTML page.

Benefits of having a valid code

• Future compatibility: Your website will compatible with future web browsers.
• Simpler development and maintenance: Creating Valid (X)HTML Documents Means Cleaner Code and Easier Maintenance.
• Faster download and rendering of web pages: Less (X)HTML results in smaller file sizes and quicker downloads. Modern web browsers render pages faster when they are in their standards mode than when they are in their backwards compatible mode.
• Better accessibility: Semantic (X)HTML, where structure is separated from presentation, makes it easier for screen readers and alternative browsing devices to interpret the content.
• Better search engine rankings: The separation of content and presentation makes the content represent a larger part of the total file size. Combined with semantic markup this will improve search engine rankings.
• Simpler adaptation to any media or screen devices: A semantically marked up document can be easily adapted to print and alternative browsing devices, like handheld computers and cellular phones, just by linking to a different CSS file. You can also make site-wide changes to presentation by editing a single file.

Best Practices…

• Include the correct DOCTYPE declaration at the beginning of the file. A DOCTYPE (short for “document type declaration”) informs the validator which version of (X)HTML you’re using, and must appear at the very top of every web page. DOCTYPEs are a key component of compliant web pages: your markup and CSS won’t validate without them.
• The DOCTYPE is case-sensitive so use the correct case:
  <!DOCTYPE html PUBLIC "- //W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" />
• Add the attribute xmlns="http://www.w3.org/1999/xhtml" to the <html> element.
• Close all elements: Omitting </p> is not valid anymore.
• Change all elements to lowercase: <P> becomes <p>.
• Correctly specify empty elements: <hr> becomes <hr />.
• Quote all attribute values: <p align="right">.
• Always add attribute values: <hr noshade="noshade" />.
• Always use & in place of &. : <a href="foo.php?chapter=1&amp;section=2 />
• <form> element should have to have a action attribute always: <form action="#"
• If you are using name & id attributes in input element, both should be in same name: <input name="field_name" id="field_name" />
• Use alt attribute always for <img> element: <img src="image.gif" alt="" />
• Use width & height attributes as in this order in <img> element: <img src="image.gif" width="100" height="100" alt="" />
• Use a separate JavaScript file always & make sure you have put type attribute correctly: <script type="text/javascript" src="javascript.js"></script>
• Try to use a external CSS file for styles.
• Always try to use tables only for TABULAR data.
• Make sure you are using <th> for table headers & <td> for table data.
• Elements in (X)HTML must be closed in the reverse order that they were opened in: <strong><em>…</em></strong>

(X)HTML Validation services

• W3C Markup Validation Service
• CSE HTML Validator
• Site Valet
• Dr. Watson

CSS Validation services

• W3C CSS Validation Service
• CSS Validator/Syntax Checker
• About.com CSS Validator
• Web Design Group CSSCheck
• Web Design Group CSSCheckUp

Accessibility Validation services

• Hermish Accessibility Evaluation Tool
• Cynthia Says^TM Portal
• Vischeck URL
• WebXACT

Useful Firefox Add-ons for validation services and web development

• HTML Validator
• Web Developer
• CSS Validator
• View Source Chart
• Firebug
• JavaScript Debugger

Here another list from me this time it’s all about feeds which I have added to my Google Reader to read whenever I am free. Actually now I am addicted to Google Reader and these feeds. This list is bit long and it’s containing around 78 valid feeds.

Here I have sorted out the list in alphabetical order. This will contain feeds about Web Standards, Accessibility, Usability, User Experience, Web 2.0, Personal Blogs, Technical and Technology, Design Resources and some great online journals regarding web and it’s new trends. This is very helpful for me to keep my self updated on time.

If anyone know any good feed that I have missed here, feel free to add it via a comment.

• .net Top Stories – Feed
• 24 ways – Feed
• 31Three – Journal – Feed
• 456 Berea Street – Feed
• A List Apart – Feed
• Accessify: latest news – Feed
• Adactio – Feed
• Airbag Industries – Feed
• Ajaxian – Feed
• Andy Budd::Blogography – Feed
• Andy Rutledge : Design View – Feed
• Authentic Boredom – Feed
• Bartelme Design | Journal – Feed
• Boxes and Arrows – Feed
• Brand Spanking New – Feed
• Brusheezy.com – Feed
• Brushfind – Feed
• CollyLogic – Feed
• CSS Beauty News Feed – Feed
• CSS Drive News – Feed
• CSS Globe Members News – Feed
• CSS Help Pile – Feed
• Damn Cool Pics – Feed
• Dave Shea’s mezzoblue – Feed
• del.icio.us hotlist – Feed
• design.Principles – Feed
• Devlounge – Feed
• Digital Web: What’s New – Feed
• Download Squad – Feed
• Entrepreneur.com: Latest Articles – Feed
• fadtastic – a multi-author web design trends journal – Feed
• Freelance Switch – Feed
• Fresh Designs on Vecteezy.com! – Feed
• Glenn Wolsey – Feed
• hicksdesign – journal – Feed
• Hiveminds Magazine – for web publishers and community builders – Feed
• If..Else Log – Feed
• Interllectual.com – Feed
• Jason Santa Maria | Articles – Feed
• JeffCroft.com Journal – Feed
• Jeffrey Veen – Feed
• Jeffrey Zeldman Presents The Daily Report – Feed
• Joshuaink – Feed
• kartooner.com – Feed
• KuraFire Network – Everything! – Feed
• Left Brain/Right Brain – Feed
• Lifehack – Feed
• Lifehacker – Feed
• markboulton.co.uk | Journal – Feed
• Mashable! – Feed
• maxdesign.com.au – Feed
• Mike Davidson – Feed
• Modern Life – Feed
• molly.com – Feed
• N.Design Studio – Feed
• Planet I18n – Feed
• Read/WriteWeb – Feed
• SilentBits – Feed
• SimpleBits – Feed
• Small Business Hub – Feed
• Smashing Magazine – Feed
• Snook.ca – Feed
• Solution Watch – Feed
• Stopdesign – Feed
• Stylegala | news – Feed
• Stylegala | public news – Feed
• Subtraction – Feed
• TechCrunch – Feed
• Techmeme – Feed
• The Web Standards Project – Feed
• tomatic.com – Feed
• Tutorial Blog – Feed
• userstyles.org – Feed
• UX Magazine – Feed
• UXmatters – Feed
• Veerle’s blog: Approved – Feed
• Veerle’s blog: full articles – Feed
• Vitamin – Feed
• Web 2.0 Explorer – Feed
• WorkHappy.net: killer resources for entrepreneurs – Feed

Here I’m going to list down very useful articles regarding web standards. From introduction to implementation, from web browsers to web accessibility. These articles were very helpful for me, so I hope for all you people who have heard about Web Standards and want to learn more about it, people who haven’t even heard about Web Standards and also Web Standards geeks who have miss some articles can find here.

If anyone think I have miss something here, please let me know then I can add it too.

• What are web standards and why should I use them?
• An Introduction To Web Standards
• The benefits of Web Standards to your visitors, your clients and you!
• An Introduction to Web Standards Part 1
• An Introduction to Web Standards Part 2
• Developing With Web Standards
• A Web Standards Approach
• Design Rant
• Whatever for?
• Why tables for layout is stupid
• Web Standards For Business
• The Business Benefits of Web Standards
• The business case for Web standards-based development

Let’s make a better web for you and for me

What is CSS?

Styles sheets define HOW HTML elements are to be displayed. Styles are normally saved in external .css files. External style sheets enable you to change the appearance and layout of all the pages in your Web, just by editing one single CSS document!

CSS is a breakthrough in Web design because it allows developers to control the style and layout of multiple Web pages all at once. As a Web developer you can define a style for each HTML element and apply it to as many Web pages as you want. To make a global change, simply change the style, and all elements in the Web are updated automatically.

[Introduction to CSS]

Why Optimize?

Well for two reasons mainly. It helps you get smaller CSS file sizes and better written code. The way the optimizer works actually lets you decide how much compression you want. From super compressed (virtually unreadable and editable by a human being) to visually pleasing. I prefer the standard setting because it gives you a little of both.

Another cool feature is that it helps you with shorthand coding. I am by no means an expert at CSS. I do not have all the shorthand methods memorized (yet!). For those of you using Dreamweaver, like myself, you’ll find that it likes to use longhand code. By this I mean putting each separate rule on its own line. This can get tedious copying and pasting it make a small change. A lot of that stuff can get consolidated into one line, like backgrounds and borders.

So your main reasons for wanting to optimize are to make sure your CSS files are clean. There is a certain art form in clean and concise code. And I’m not even a programmer and I can see that. I’m an artist, so this tool really helps speed things up.

[Why Optimize?]

CSS Optimization Tips

CSS Shorthand
Shorthand properties can be used to set several properties at once, in a single declaration, instead of using a separate declaration for each individual property. As you’ll see, this can save a lot of space in your CSS file.

• Efficient CSS with shorthand properties
• CSS Shorthand Guide
• CSS shorthand properties

CSS Optimizing/Formatting/Compressing Online Tools

• flumpCakes CSS Optimizer
• CSSOptimizer
• CSS Formatter and Optimizer (based on CSSTidy 1.3dev)
• Un-Compress CSS
• CleanCSS
• 123css
• Icey CSS Compressor
• CSS Superdouche
• Format CSS
• CSS Tweak
• CSSTidy
• Pretty Printer
• Tabifier