Kernighan says it best in The Practice of Programming, "it does not matter which coding style you pick, as long as you pick one and apply it consistently."
Extrememism should be left to the facist. A clear example is adhering to "tableless" design without knowing the context or the business cost.
For those who want to make money or save money, it's all about balance and value.
Now if you're responsible for converting HTML 4 site to XHTML, then here is an example of what you're up against in Roadmap to Markup Success
or Max Design's article, From tables to full CSS.
The same argument is true for rookie DBA's who just quote normalization rules and have never heard about the relationship between denormalization and performance.
Corporate Web professionals labour under the delusion that they can stay insulated from trends in Web development. They feel free to create expensive new sites whose guts are no different from something published in, say, 1999.
They're like baby boomers who cannot stand any music released after 1979. The way they made Web sites while they were growing up works fine and dandy for them.
Not only are no improvements necessary, as far as they're concerned there are no improvements available to make, save for this Flash thing their kids keep telling them about.
Their way is the state of the art - but, unbeknownst to them, back when they were learning to build Web sites we had no idea what the art actually was.
Before reading on, are you guilty of committing these web development mistakes?
Come on. Fess up. OK, I'll go first. YES, I'm guilty but I'm trying to redeem my devilish ways.
Why Build to Standards?
"So why has it taken so long for Web development standards to become a reality? Why have Web front-end developers ignored them for so long?
Simply because the browser manufacturers let them get away with it-and it made coding much quicker when we didn't have to think about details like the closing paragraph tag."
- Reduced development times
- Better search engine rankings with XHTML
- Content available across device media and platform, i.e. cell phones, handhelds, WebTV
- Browser Independent
- Smaller file sizes and faster page loads
- Less bandwidth usage therefore lower your hosting costs
- Faster development and maintenance
- Easier to redesign
- XHTML and CSS are core technology requirements for AJAX and therefore Web 2.0
If a site reduces its markup weight by 35%, it reduces its bandwidth costs by the same amount.
An organization that spends $2,500 a year would save $875. One that spends $160,000 a year would save $56,000. Savings can be even greater for sites whose hosts charge for file transfers.
Microsoft's published traffic numbers state that microsoft.com got 1.2 billion page views during the month of May 2004. In this presentation, I showed how to decrease the markup from one page by 62%, or 25 KB. I also predicted that about 25 KB is a fair savings estimate per page if Microsoft was to get more aggressive about using CSS site-wide. If multiplied out by an average of 38.7 million page views per day, that 25 KB savings per page could add up to about 924 GB in bandwidth savings per day, or 329 terabytes per year.
See Buy standards compliant Web sites for details. If you hate to read then, watch this Flash movie on
the advantage of using CSS
from Lynda Weinman, the "queen of design".
dragonCrew Goal
XHTML 1.0 became an official W3C Recommendation January 26, 2000. My goal is achieving XHTML 1.1 compliancy. dragonCrew is only XHTML 1.0 Transitional compliant. Go validate my code and see.
I can guarantee programmers will be in demand for mega ages, based on the sites I've checked with W3C Markup Validation Service! You thought Y2K was bad. Wait until you see the bill to make sites XHTML 1.0 or 1.1 compliant. So if you want to make some easy $$$, start learning. A couple of good starting points are W3C Schools and HTML Dog - IMHO.
Here is the Road Map for the future of dragonCrew.
Standards Rant
Everyone touts developing to W3C standards. But like all standards, there's the level in which ALL vendors comply.
Just look at SQL. All of the database vendors say that their databases are SQL-92 or SQL:1999 compliant. But if you actually know what you're talking about - meaning you've read the standards, you can ask the right questions to see just how and at what level the company complies to the standard.
I am currently using MySQL 4.0 and I can tell you it's NOT compliant. The database vendors have basically shown what would happen to the web world. The addition of their own proprietary features that circumvent the standards to give themselves the "competitive advantage". Codd is still rolling in his grave.
The Data Administration Newsletter article, Is SQL a Real Standard Any More? touches on just this. Most database products only fully comply at the Entry level and maybe have a couple of features in the Intermediate or Full level categories.
The point is, who's going to get the Microsoft, Mozilla, Opera and those MAC guys to comply. Unlike databases, when you have a web site, your stuff has to work for ALL browsers. So writing hacks become a fact of life for CSS and Javascript!!!
Style Sheets aka CSS
OK, time to come clean. I'm just as guilty. I don't have the time to figure out which browsers support which CSS features or even if they support CSS1 or CSS2. I can almost guarantee this to be true when CSS3 finally escapes the shadows of the "working draft"!.
The thing I do get is - I'll learn anything that miminizes the code I have to write and that results in the improvement in download times. It's a win win situation for the site, customer service, visitors and especially PAID members.
Tables and DIV's
I've tried to create this site without tables but just can't get it right. The table tag at least gives me the ability to set the borders on so I can see how jacked my code is. But with DIV, there's NO WAY unless I hack things. It's nothing but DIV's.
If someone with time on their hands stumbles upon my plight. Tell me how to get the main menu wrapper (4 rounded corners) to work using a percentage.
I might wait for browser makers to finally support border-image properties. So Billy get the campus cranking on a standards based IE7!. Well, I guess Billy's excuse will be that CSS3 hasn't been finalized yet which is true.
In the meantime, I'm resorting to Mozilla CSS Commands such as moz-border-radius. So if you're using Firefox, you'll notice my blockquote style has rounded corners. Look ma, no images!!! Yeah, I've even thought of using Nifty Corners but I'm not that disparate to resort to a Javascript solution - just yet!.
- border-image
- border-corner-image
- border-top-left-image
- border-top-right-image
- border-bottom-right-image
- border-bottom-left-image
Mike Hall of BrainJar has one of the best tutorials on the Box Model.
Tableless Design Advocates
For those of you who haven't updated your browsers to IE6, FireFox 1.x or Netscape 7.x, do it now. Never mind - you won't be able to read this. Just Joking!!!
Cookies are Evil but unfortunately a neccessary Evil!
As any web developer, I rely on cookies. According to a new study, Consumers Delete Cookies at Surprising Rate, from Jupiter Reseach, developers are going to have to rethink the reliance on cookies.
The Web Standards Group is one central source for everything from XHTML, CSS, Usability, Cold Fusion, ASP, and much much more!
CSS Organization
CSS Optimization
A good stylesheet optimization in my opinion should be adopted firstly at design time, ie when writing the CSS. Here are some good articles:
Checklist
Cheap Tricks
Trailing Slashes in URLs
Some people don't think there's any difference between these two URLs:
http://www.mysite.com and http://www.mysite.com/
but there is. The trailing slash tells the browser that the URL points to a directory, and as a result the browser doesn't have to decide whether the URL points to a directory or a file. You can speed up a URL's response time by including the slash behind a directory listing (not a file -- don't do this: http://www.mysite.com/index.html/).
Here's an excellent article from IBM on how-to Migrate apps from Internet Explorer to Mozilla.
Thanks to the List a Part, I was able to get Dreamweaver to produce valid XHTML.
Developer Toolbars
Tips
| Article |
Type |
Description |
| A history of browsers |
History |
A great history lesson |
| The learning curve of web standards |
Article |
So where should you start as a transitional designer? The answer is simple: always start with the basics. Learn the syntax rules of XHTML and CSS. DOCTYPEs, semantic mark-up, the separation of style and structure, accessibility, code validation, browser incompatibilities, positioning schemes and CSS hacks. |
| Writing cross-browser CSS |
Article |
Almost without exception, web professionals new to CSS run into problems trying to get their CSS to work as expected in all browsers. It doesn't have to be like that though. |
| Will the browser apply the rule(s)? |
Hacks |
CSS is a standard. A standard that has many versions. Browsers may or may not implement certain versions, or pieces of these standards, and this becomes the bane of our existence. |
| 10 new ways to speed up download time |
Tips |
Must read for professional designer and developers who are customer focused |
| IE |
Forms |
provide real-time feedback to the user using server-side validation scripts and eliminate the need for redundant validation functions without giving up a solution that degrades gracefully when JavaScript is disabled. |
| Firefox |
Design |
The point is to discover best practices by investigating how developers have successfully traded off conflicting design principles. AJAX is all about usability, so the patterns focus particularly on delivering usability in the face of constraints, most notably: user capabilities and expectations, bandwidth limits, the stateless nature of HTTP, the complexity of Javascript. |
| CSS Hacks |
Hacks |
CSS Hacks and IE7 |
| IE Hacks |
Hacks |
Call to action: The demise of CSS hacks and broken pages |
| In search of the One True Layout |
Hacks |
This article shows how to achieve each of these goals, and then how to combine them, creating what could be called the One True Layout |
| The perils of using XHTML properly |
Article |
I've been using XHTML for a couple of years now, but it wasn't until last summer that I started looking at using it properly, that is by serving it with the application/xhtml+xml MIME type. I knew about some of the problems I was going to run into, but far from all of them. As you're about to find out, there are plenty of seemingly small issues that can make life difficult when you start using real XHTML. |
| Stop Hacking, or be Stopped |
IE 7 |
The truth is that when IE 7 comes most of our usual hacking methods are going to fail. Afraid yet? |
IE7 Fixes
In IE7, we will fix as many of the worst bugs that web developers hit as we can, and we will add the critical most-requested features from the
standards as well. Though you won't see (most of) these until Beta 2, we have already fixed the following bugs from PositionIsEverything and
Quirksmode:
- Peekaboo bug
- Guillotine bug
- Duplicate Character bug
- Border Chaos
- No Scroll bug
- 3 Pixel Text Jog
- Magic Creeping Text bug
- Bottom Margin bug on Hover
- Losing the ability to highlight text under the top border
- IE/Win Line-height bug
- Double Float Margin Bug
- Quirky Percentages in IE
- Duplicate indent
- Moving viewport scrollbar outside HTML borders
- 1 px border style
- Disappearing List-background
- Fix width:auto
In addition we've added support for the following
- HTML 4.01 ABBR tag
- Improved (though not yet perfect) <object> fallback
- CSS 2.1 Selector support (child, adjacent, attribute, first-child etc.)
- CSS 2.1 Fixed positioning
- Alpha channel in PNG images
- Fix :hover on all elements
- Background-attachment: fixed on all elements not just body
Chris Wilson, Standards and CSS in IE - July 29, 2005
XForms
Browsers
There are 1000's upon 1000's of browsers. Imagine if you had to test them all. You'd never be able to launch!!!
Here is what browsers Yahoo supports. Yahoo takes a more methodical approach, in that, Yahoo uses a graded system.
|
Previous
