pelago

I just found this through one of the mailing lists I subscribe to. It’s a map that covers technologies on the web. It mentions Mordorsoft and Google’s All Seeing Eye, it’s worth checking out:

http://www.flickr.com/photos/psd/1805709102/
http://www.flickr.com/photos/psd/sets/72157602805227511/
http://www.archive.org/details/TheWebIsAgreement

PDF
http://www.archive.org/download/TheWebIsAgreement/web.PDF

I am currently writing this post on Safari on XP. The first thing I did was to check the navigator.userAgent js property.

I don’t know about everyone else out there, but seeing “Windows NT” and “Safari” in a userAgent property is something that I didn’t expect. It gives me both the creeps as well as a little excitement on what’s to come. Excitement would be more users submitting bugs to apple on this browsers crappy editable html javascript implementation, maybe this will get AppleWebKit to fix the bugs faster. What gives me the creeps is it gives me another platform our websites should run under… bittter sweet.

You can download the public beta here.

Update: It seems like most of the showstopper bugs are fixed with this version. With just a little push this very might well be a very good release.

UPDATE II: So I can’t maximize Safari on my RIGHT MONITOR… it just dissapears. Is that Apple trying to send a political subliminal message? ;)

Smashing Magazine, which I had heretofore never heard of, has an excellent article called 70 Expert Ideas For Better CSS Coding. The post is full of a wide range of wonderful suggestions on how to get the most out of your CSS-based designs, compiled from blog postings from other designers around the web. Every designer tends to have his or her own set of rules to go by when building a site or “chopping” a designers renderings into into XHTML/CSS. I have my own, and you can see it by just viewing the source code on this site and checking out the CSS here. However, it’s always great to see what other designers have come up with.

Some of the suggestions seem so obvious you wouldn’t think they would deserve a mention:

1 ID per page, many classes per page. “Check your IDs: Only one element in a document can have a certain value for the id attribute, while any number of elements can share the same class name. [..] Class and id names can only consist of the characters [A-Za-z0-9] and hyphen (-), and they cannot start with a hyphen or a digit (see CSS2 syntax and basic data types).” [Roger Johansson]

But some suggestions seem so obvious you wonder, “Why didn’t I think of that before?!?!?!”:

Organize your CSS-styles, using master style sheets. “Organizing your CSS helps with future maintainability of the site. Start with a master style sheet. Within this style sheet import your reset.css, global.css, flash.css (if needed) and structure.css and on occasion a typography style sheet.”

This is such a novel idea, but such a good one.

Many suggestions rely on versions of CSS that aren’t supported in “major” browsers, and some suggestions rely on CSS hacks to get around browser inconsistencies. That being said, every CSS coder, from beginner to expert, will find something valuable here. As for me, I am making it a point from now on to improve the organization of my CSS code. Thanks Smashing Magazine!

Here’s a great primer for developers who are interested in writing compliant css and html:

…the best thing you can do is give yourself a clean slate. Throw out your assumptions and expectations. For that matter, throw out everyone’s assumptions and expectations. Roll up your sleeves and learn something new. When it comes to layout and production, resolve to remove “but”? and “should”? from your professional vocabulary for a while. Replace them with “how”? and “why”? and commit to meeting your project objectives.

1. Everything you know is wrong… sort of…
2. It’s not going to look exactly the same everywhere unless you’re willing to face some grief… and possibly not even then
3. You will be forced to choose between the ideal and the practicable
4. Perfection is not when there’s nothing to add, but when there’s nothing to take away
5. Some sites are steaming heaps of edge cases
6. Longer lead times are inevitable
7. Coherent and sensible source order is the best of Good Things
8. Descendant selectors are the beginning and end of genuinely powerful CSS rules
9. In the real world, stylesheet hacks will get your project across the finish line
10. Working around rendering bugs is like playing Whack-a-Mole
11. When you’re drowning in CSS layout problems, make sure of the width and height of the water, float without putting up a struggle, and get clear of the problems
12. Background images will make the difference between the plain and the tastefully embellished

Listamatic is a list definitions repository.

You can view many different types of list definitions here. It just goes to show you the many different ways in which you can write a list through CSS. You can submit your own for others to use as well.

In the latest versions of Microsoft Internet Explorer, Netscape Navigator, and Mozilla (the Open Source, Gecko-based browser whose code drives Netscape Navigator, CompuServe, and other browsing environments), carefully constructed layouts have begun falling apart and expensively engineered behaviors have stopped working. As these leading browsers evolve, site performance continues to deteriorate.

A common misconception among many web developers, especially those in the library community, is that a web site must sacrifice a highly designed look in order to be accessible. This is not true. In fact, many sophisticated design elements subtle use of color, multimedia, careful use of large images that some accessibility advocates reject can be profound accessibility enhancements for a general audience. They do not diminish a disabled user’s experience if they are handled properly. If developers build a highly designed site according to web standards and accessibility guidelines, the site will still be accessible.

PROBLEM: DREAMWEAVER 4 FALLS SHORT in its ability to produce wellformed, standardscompliant markup.

SOLUTION: You can easily harness Dreamweaver’s two greatest strengths, its flexibility and its user community, to make it one of the best tools on the market for producing good XHTML. This article will tell you how. With a few tweaks, hacks and extensions, you’ll be able to produce sites that validate, and to clean up legacy pages. Set aside an hour or two, follow these directions, and fall in love with Dreamweaver all over again.

In the not-so-distant past, it was commonplace to use HTML hacks, workarounds, and proprietary tags and attributes to build sites. But hacks and workarounds just don’t cut it with the current disparate state of operating systems, hardware, and browsers. We need detail, and we need an understanding of how markup really functions.

The relevance of Web standards is most obvious when we consider emerging technologies. In these times of tremendous growth, the Web needs guidance in order to reach its full potential – and standards can serve as the perfect guides to help realize that potential.