Web Standards & Best Practices

Web Standards & Best Practices

There’s No Such Thing as a “Standards-Compliant” Browser

There's No Such Thing as a Standards-Compliant BrowserI think this is a pretty basic point, but I often see people throwing terms around in inappropriate ways (which I’ve also been guilty of), so I thought I would clear this up.

As fallible humans we tend to lean towards making excuses, blaming others, or trying to justify our mistakes or shortcomings. This is why you’ll often read comments from people discussing CSS and web standards, and they’ll say “I don’t use Internet Explorer; I use a standards-compliant browser”. Well, no you don’t. Nobody does.

Don’t Use PHP for Browser Detection (for CSS)

Don't Use PHP for Browser DetectionIn the comments of a recent article discussing conditional comments someone mentioned that they prefer to use PHP to detect which browser (user agent) and/or operating system is in use, then they display a custom class for the <body> tag and target the browser accordingly in their CSS.

I’ve known for some time now that this is wrong. I was told that a user agent can be faked, so the people I’ve worked with discouraged this method, and I’ve never used it.

In no way am I an expert in this particular area, so I’m not claiming here to be able to fully explain exactly why we shouldn’t do this, but a little bit of quick research on this topic shows that server-side browser detection is not a good idea.

I’m not going to drag each of these points on (mostly because I don’t have the technical expertise in this area), but instead I’m just going to provide brief quotes and links that discourage the use of this method and provide further insight into the matter.

Things You Might Not Know About Conditional Comments

Things You Might Not Know About Conditional CommentsUse of conditional comments to target certain versions of Internet Explorer is pretty commonplace nowadays, and is generally seen as the best-practice method for including separate styles for IE.

Of course, I’ve argued in a previous article that if your IE-only styles are minimal, then you should just include them in your main stylesheet, a notion that others have echoed.

But conditional comments have some unique possibilities and quirks that maybe you haven’t considered before, or have simply forgotten. Here is an overview of some things you may not know about conditional comments.

IE-only Styles: Where Should They Be Placed?

IE-only Styles — Where Should They Be Placed?Dealing with Internet Explorer is a fact of web design, and it isn’t going to go away anytime soon.

If not for some of the differences in the way IE6 and IE7 handle certain areas of CSS (whether it be margins bugs, float bugs, or other problems), CSS development would be so much easier.

Of course, as I’ve said in past articles on this website and others, I believe IE-only styles can be kept to a bare minimum, and in some cases you may not need any, but it’s unlikely that developers will end up so fortunate. So how do you divide your IE-only CSS styles? The options we have are as follows:

Coding for IE6 = Progressive Enhancement

Coding for IE6 = Progressive EnhancementIt was disappointing to see the unwarranted uproar that occurred in the comments of my article on Smashing Magazine on cross-browser CSS. But in retrospect, it was probably a good thing, because a more important (but related) issue was brought to light in the discussion.

At this stage in modern web design, all front-end coders should at least be familiar with (if not very capable of implementing into their projects) the concept of progressive enhancement. In most cases, we tend to associate progressive enhancement with JavaScript and CSS, and rightfully so, because those technologies help us layer our functionality in a way that makes a website accessible to as many people as possible.

But progressive enhancement isn’t just limited to what we accomplish with fancy Ajax, jQuery, and CSS3 — that’s just part of it (albeit a very significant part). I would like to take the Wikipedia definition of progressive enhancement just a little bit further. Here is the definition:

Will EOT Become the Standard for Font Embedding?

By Louis Lazaris on | 5 Comments

Will EOT Become the Standard for Font Embedding?If you’re at all familiar with the various methods in use today to embed custom fonts in web pages (sIFR, Cufon, @font-face, etc), then you also may have heard of a font format called EOT. Well, if Microsoft has it their way, EOT will become the standard, allowing web developers — with permission from font vendors — to be free to use virtually any font in a text-friendly manner in their web pages.

So what is EOT, and how has Microsoft pushed to standardize this method? Embedded OpenType fonts are compact OpenType fonts designed by Microsoft for use as embedded web fonts. They are recognizable by their “.eot” file extension. By means of data compression and removal of superfluous data, EOT files are made small in size and include features that protect the fonts themselves from being copied and used in unauthorized ways.

The Ultimate Guide to Embedding Sound in Web Pages

By Louis Lazaris on | 8 Comments

The Ultimate Guide to Embedding Sound in Web PagesThis exhaustive article includes relevant links, best practices, and other useful resources that will enable all web developers to incorporate sound effects into their web projects in a manner that conforms to the latest in standards and best practices.

If you’re looking for a reference that you can bookmark and use for any project where you’re asked to include some type of audio clip into a web page — whether it’s MP3, MP4, WAV, WMA, and more — this is the article for you.

This is the one and only resource you’ll need to assist with all your audio-embedding needs.

10 JavaScript Quick Tips and Best Practices

JavaScript Quick Tips and Best PracticesRecently, a few blogs and tutorial sites have posted some really good articles on JavaScript tips and best practices, and I thought that was a good topic that could easily be expanded upon. So I put together a list of 10 fairly simple JavaScript tips and best practices of my own.

I tried to include stuff that was not mentioned in those other posts, but I’m sure there is a little bit of overlap. Keep in mind that these are brief tips and recommendations, so I don’t go into great detail about the reasons and such, but I may go into some of them in depth in future articles and tutorials.

In the meantime, please enjoy this list of tips, recommendations, and best practices for JavaScript coding.

25 Classic Web Design Articles That Significantly Impacted the Way We Code

25 Classic Web Design ArticlesOver the years there have been hundreds, if not thousands of articles published online that have each had a tremendous impact on the world of web development and design. Some have been truly memorable, and have remained quite relevant for years, and remain so today. Others have outlived their usefulness, but we remember them because of the impact they had on our code and on the way we think about web design.

Occassionally, while reading or doing research, I still stumble upon “classic” web design articles. So I thought it would be a great idea to list what I feel are some of the most important articles that have been published in the relatively short history of the web development industry.

Originally, I had started with the idea of listing 10 articles — but when I began the research, I slowly started to realize that was not going to do justice to this list. So I settled on 25. I think this is a good collection of some of the more significant articles that have been produced over the past 13 years or so.