NYTimes.com Hand-Codes HTML & CSS

eldavojohn writes "The design director of NYTimes.com, Khoi Vinh, recently answered readers' questions in the Times's occasional feature 'Ask the Times.' He was asked how the Web site looks so consistently nice and polished no matter which browser or resolution is used to access it. His answer begins: 'It's our preference to use a text editor, like HomeSite, TextPad or TextMate, to "hand code" everything, rather than to use a wysiwyg (what you see is what you get) HTML and CSS authoring program, like Dreamweaver. We just find it yields better and faster results.'"

Comments

Works for me too

[mrbluze]

I find that hand-coding works for HTML/CSS, provided of course you include it in a scripting language like PHP.

It's less work than it sounds and the results DO look better - you get a more original look and things can be made to look exactly how you want, instead of being restrained by the wysiwyg software's design limitations.

Re:Works for me too

[Yetihehe]

It makes it easier to switch back and forth between the code and the design. However, once you do that, you're just spending a bunch of cash for a tool that lets you switch between windows.

But tools like dreamweaver are good at showing layout of not yet completed code, it can be really useful sometimes.

Re:Works for me too

[mweather]

Not really, unless you're using tables for layouts. CSS layouts don't look right.

Great idea!

[Anonymous Coward]

Maybe we can use this idea to write programs, too.

Another opportunity to post...

[bennomatic]

The badge I used to put on all my sites...

Re:Another opportunity to post...

[bennomatic]

Nice. I once thought about making an image that said, "This site best viewed in Lynx."

Re:Another opportunity to post...

[yotto]

Like one of these?

http://www.subir.com/lynx/enhanced_images.html

W3C

[FST]

...and yet they get 455(!) errors. That's not very good. http://validator.w3.org/check?uri=http%3A%2F%2Fnytimes.com%2F&charset=%28detect+automatically%29&doctype=Inline&group=0.

Re:W3C

[tepples]

Forgetting required attributes like alt What is the correct value of the alt attribute for the CAPTCHA image in a "free registration required" form?

Re:W3C

[Bogtha]

Also, they use <br/> in HTML 4 and it is telling them that they shouldn't do that because some web browsers will think it's wrong.

No, it's not telling them that some browsers will think it's wrong, it's telling them it is wrong. Validators don't check to make sure browsers can understand your document, they check if you have made any syntax errors. Writing <br/> in an HTML document is wrong, regardless of any particular browser's handling of it.

Re:W3C

[clem.dickey]

Just what I was wondering: "Maybe, because they hand-code everything, they will pass the validation that all the fancy tools fail at so badly." Anyway, they are not alone. Here are the error couns for the Fortume top 20 companies (top of the Fortune 1000 list) manage on the w3c validator:

    53 walmart.com
    36 exxon.com
    26 chevron.com
    33 gm.com
    76 conocophillips.com
      0 ge.com
    29 ford.com
    52 citigroup.com
  105 bankofamerica.com
    26 att.com
    28 www.berkshirehathaway.com
      8 jpmorganchase.com
  148 aig.com
    55 hp.com
      0 ibm.com
  144 valero.com
      2 verizon.com
  180 mckesson.com
      5 cardinalhealth.com
1082 www.goldmansachs.com

Re:W3C

[JebusIsLord]

oh gee, i dunno... how about... "captcha"??

Re:W3C

[Bogtha]

fix whiney warnings that have no real world effect?

I knew somebody would pop up with this misconception. Did you know that the web has already been through this — not once but twice — and proven you wrong?

Netscape 2 was quite aggressive when it came to guessing when ampersands were mistakenly unencoded. Cue lots of people not bothering to do things correctly, and saying things exactly like you are — "What's the point? It makes no difference!"

Then Netscape 3 came out. It wasn't as aggressive as Netscape 2. All those people who cut corners had to rush to fix all of their pages. All the people who did it correctly the first time around didn't have to do any extra work.

Now Netscape 3 still guessed a little bit — if you left off the semicolon, it would pick up on it and guess correctly. So lots of the dumb people from the previous example didn't learn their lesson, and skipped the semicolon.

Can you guess what happened? Yep, that's right, Netscape 4 came out and broke all their pages again. And all the people who did things correctly laughed at them.

Sure, if you don't bother to do things right, today's major browsers will probably guess that you're an idiot and work around your bugs. But there's certainly no guarantee that tomorrow's browsers will do so. When you can do things correctly right now for no effort, why on earth would you risk incurring extra work in the future? Is it really so difficult to type &amp; instead of &?

Re:W3C

[Bogtha]

<br /> is XHTML standard and <br> is the regular HTML 4 standard. Both are correct

No, one is correct for XHTML and incorrect for HTML, and one is incorrect for XHTML and correct for HTML. The NYTimes use HTML. That means the XHTML syntax is incorrect.

Re:W3C

[dgatwood]

Agreed. <br /> should be, AFAIK, guaranteed to work in any working HTML parser because all HTML browsers have to ignore unknown properties in tags, including potentially that slash, in order to be forward-compatible with future changes to the specification. Assuming they included the space, then IMHO the W3C validator is being way too pedantic (as usual). If they left out the space (<br/>), then the W3C validator is right to warn about it, as that form does choke some HTML parsers, IIRC.

Re:W3C

[Bogtha]

all HTML browsers have to ignore unknown properties in tags

That reasoning would work if the people behind XML had chosen any other character to indicate empty elements. But unfortunately, they chose the slash. Not many people realise because browser support is rare, but a slash inside an opening tag means that it is the end of the tag and the contents follow. Basically, <foo/>x/ is equivalent to <foo>>x</foo> .

So no, while parsers that don't implement HTML fully might mistakenly treat it like an attribute, a parser that fully implements HTML cannot do so, and a validator certainly shouldn't.

the W3C validator is being way too pedantic (as usual).

What on earth do you think a validator is for, if not to point out syntax errors? Do you complain that your spelling checker is being pedantic when it tells you that you have misspelt something?

Re:W3C

[InlawBiker]

You guys are all wrong. the NYT is right, because the comment was, "...the Web site looks so consistently nice and polished no matter which browser or resolution is used to access it."

In other words they worried about the user experience, not technically standard syntax or some parser's score.

It's nice to see that not only does the New York Times hire the best writers, they also hire the best techs.

Re:W3C

[ultranova]

Sure, if you don't bother to do things right, today's major browsers will probably guess that you're an idiot and work around your bugs.

They will try to work around your bugs. There's no guarantee that the heuristics of a given browser will succeed in correctly guessing what you actually meant in a given case.

The best argument for writing bugless web pages is not that it takes less work (it does), nor that they works with more browsers (they do) and thus give you more customers. No, the best argument is simple: "Given how stupid computers are, do you really want the appearance and function of your website to be up to their guesses ?"

Re:W3C

[Rhapsody Scarlet]

What is the correct value of the alt attribute for the CAPTCHA image in a "free registration required" form?

If all else fails, you could just specify alt="", which will satisfy the validator. Not every image needs alternate text.

Re:W3C

[Bogtha]

while XHTML syntax is not strictly speaking correct HTML it is still valid HTML.

This is simply not true. It's incorrect and invalid.

What you may be thinking of is Appendix C of the XHTML 1.0 specification. It lays out a series of guidelines that minimise incompatibility with legacy user-agents. This means that it is relatively safe to transmit XHTML 1.0 documents following these guidelines as text/html. What it does not mean is that those XHTML 1.0 documents magically become valid HTML documents. They are not.

Re:W3C

[beav007]

Be that as it may, Bogtha is correct. We aren't talking about what works here, we are talking about what the standard says. The standard for XHTML says to use a slash, the standard for HTML 4 says not to. That is the discussion, and really, the end of it.

Re:W3C

[dave420]

The two are not mutually exclusive. It's perfectly possible to make even the most beautiful sites render accurately across all the major browsers and still contain perfectly valid markup. It smacks of being lazy, or just not knowing the importance of validating code.

Re:W3C

[Bogtha]

It may or may not be improper American English, but "misspelt" is certainly correct English. Consult the OED if you don't believe me.

This is far from the first time I've had an ignorant American attempt to "correct" my proper English into your regional dialect. It's pretty annoying and reinforces negative aspects of your national stereotype.

Re:W3C

[dgatwood]

Browsers that don't comply are pretty much worthless. You can't even view the W3C specification without ignoring unknown attributes. Good luck with almost any web page on the planet. The following sites all either have nonstandard attributes or are missing required attributes:

• www.google.com
• www.yahoo.com
• www.excite.com
• www.altavista.com

You get the picture. Good luck using the web with a browser that performs strict attribute validation.... It may technically be non-binding, but in reality, any browser that doesn't follow that guideline isn't going to work with the overwhelming majority of web pages in existence today. And in the end, a browser that won't even let you view the Google front page is not going to be used by... well... anybody.

Benefits vs Issues

[freedom_india]

Let's look 'objectively' at this:
1. Handcoding takes a lot more effort and needs more 'actual' writers than before. So more techies keep their jobs in a recession.
Score: Hancoding 1: Dreamweaver: 0
2. Hancoding requires extensive knowledge of all CSS and DHTML codes plus javascript/JScript. So only the really good techies get the job, and not some script monkey. Survival of fittest.
Score: Hancoding 2: Dreamweaver: 0
3. Handcoding takes far more time than is necessary in a changing scenario of today's news. Effort not proportional to returns. As a shareholder, i would sue them for wasting money.
Score: Hancoding 2: Dreamweaver: 1
4. Dreamweaver allows preview easily and pretty much automates repeatable tasks. Handcoding requires a Mechanical Turk.
Score: Hancoding 2: Dreamweaver: 2

So its a tie.
I appreciate NYTimes sticking to manual tasks for an electronic page as an end user and a techie.
I hate them for wasting my money as a shareholder.

Re:Benefits vs Issues

[rhavenn]

Let's look 'objectively' at this:
1. Handcoding takes a lot more effort and needs more 'actual' writers than before. So more techies keep their jobs in a recession.
Score: Hancoding 1: Dreamweaver: 0 No, given a good IDE with some basics it takes less effort. Every time I want to use Dreamweaver I end up losing some hair. It's a frustrating piece of software if you know what you're doing or want to do and it won't let you.

2. Hancoding requires extensive knowledge of all CSS and DHTML codes plus javascript/JScript. So only the really good techies get the job, and not some script monkey. Survival of fittest.
Score: Hancoding 2: Dreamweaver: 0 This is a good thing. Your designers SHOULD know the ins and outs of 80-90% of their code and tags.

3. Handcoding takes far more time than is necessary in a changing scenario of today's news. Effort not proportional to returns. As a shareholder, i would sue them for wasting money.
Score: Hancoding 2: Dreamweaver: 1 I doubt they hand code every story into the page. They have a template / publishing system for all articles / layouts. It's probably far, far faster to do it by hand then trying to wrap Dreamweaver into it.

4. Dreamweaver allows preview easily and pretty much automates repeatable tasks. Handcoding requires a Mechanical Turk.
Score: Hancoding 2: Dreamweaver: 2 dual monitors, sshfs mounted file system and vim will do it far faster then Dreamweaver.. alt-tab works okay if you're stuck with one monitor.

So its a tie. Nope, I would say hand-coding: 3.5 and Dreamweaver .5

I appreciate NYTimes sticking to manual tasks for an electronic page as an end user and a techie.
I hate them for wasting my money as a shareholder. I would applaud them for not wasting your money on software licenses and doing the job correctly.

How much work does that involve?

[menace3society]

How much work does that actually involve? I don't read their online edition, but I imagine that they have all their articles in a database and put its contents into an HTML wrapper. That involves coding the wrapper once, and maybe a couple of conversions in the article text to make it HTML-friendly. You can do this when the article is converted into the database, or you can do it on the fly in your scripts, but the point is it shouldn't be that difficult to do.

Dreamweaver is an excellent tool

[davebarnes]

Stupid comment by Vinh about Dreamweaver.
1. DW lets you code at the source code level if you choose.
2. DW is much faster--in Design View--at creating tables.
3. DW allows for flipping back and forth or split view.
4. DW does not rewrite your code (for the most part).

I use DW every day. I am not even conscious of flipping between the 2 views. Some things are done better in Design View and some in Code View.

CSS support is very good in DW.

Re:Dreamweaver is an excellent tool

[njcoder]

Stupid comment by Vinh about Dreamweaver.
1. DW lets you code at the source code level if you choose.
2. DW is much faster--in Design View--at creating tables.
3. DW allows for flipping back and forth or split view.
4. DW does not rewrite your code (for the most part).

I use DW every day. I am not even conscious of flipping between the 2 views. Some things are done better in Design View and some in Code View.

CSS support is very good in DW. 1. Why use a heavy tool like DreamWeaver if you're mostly just editing the source directly?
2. Nobody uses tables anymore, at least not as much as they incorrectly used to before for formatting since CSS gives you a lot more control. This practice thankfully died out.
3. Alt-Tab is just as fast if you have your browser open, or multiple browsers. I usually check IE and FF when I'm working on layout.
4. For some people, even a little bit of code changes is too much.

If I'm working on a php or jsp page that retreives content from a database how does DreamWeaver get it? Does it have a php engine or a servlet engine? If I want to include a page fragement from a php or jsp page or text from a java bean can it do that?

Back when I was playing around with it, it couldn't do any of that. Even if it can now, I'm better off testing it directly in the servlet engine or php/apache setup I plan to deploy on to make sure there are no problems with db connections, unexpected session behavior, etc.

When dealing with sites that have a lot of dynamic content and or more complex interactive attributes, like more and more sites are having, DreamWeaver seems to get in the way for me. I have, on ocassion used it to generate the initial design and then cut and paste the pieces in the appropriate php/jsp files then work from there. It never seemed necessary though.

It's not a big deal to install Apache, mod_php, tomcat, database on a development server or even locally to be able to test things out in a real environment.

For simple sites, or for the initial design of the site it may have it's place but for me that's not worth the price.

I feel OLD.

[Valdrax]

wysiwyg (what you see is what you get) I remember when this acronym was so frequently used as a selling point in the 80s that you wouldn't have had to explain it.

Well it looks great

[grrrl]

Personally, I have come to really enjoy reading the online NY Times (and I don't even live in the US).

The re-design they did a couple years ago is a pleasure to navigate, to read (I love the fonts) and while the photos are always top notch, I must say the award goes to whoever makes the graphs. They have the most fantastic and unique ways of presenting data - far beyond a boring Excel bar graph. I am really really impressed by the interesting and informative graphs which are often highly interactive, and I would love to know who thinks them up.

At the end of the day, they use templates (I believe he says as much in TFA, IIRC, I read it a week or so ago) and hand tweak the site to make it sure it stays cross-platform pretty. Each story has a similar layout so it can't be hard for them to simply tweak by hand where needed.

Re:Well it looks great

[Hemogoblin]

If you like cool graphs, you might enjoy this Economist article.

Summary: "A good graphic can tell a story, bring a lump to the throat, even change policies. Here are three of history's best."

Re:I "hand coded" both of my kids

[PC and Sony Fanboy]

translation: my 'wife' got pricked with a needle, instead of being needled with a prick.

Doesn't everyone?

[consumer]

He doesn't mean that they hand-code every page -- he says very clearly that they use a CMS with templates. All he said is that they don't use a GUI tool to create the templates. This is true of just about any significant site. What is the imagined news here?

text editors

[Chris Burkhardt]

The pages would look even better and load even faster if they used Vi or Emacs. Obviously.

Re:text editors

[rossz]

No Way! If they coded it with emacs, the average reader wouldn't know what 12 keys to hit simultaneously to get to the story.

Re:That's nothing.

[Anonymous Coward]

That's not coding by hand, that's compiling by hand ;-p.

Re:Hand-coding?

[RuBLed]

Overhead at an outsourcing facility:

Hand-coding agent: I hate this guy, he's refreshing his browser every minute on the same news. I can't keep up.

Hand-coding supervisor: PrintScreen it!

Hand-conding agent: Brilliant!

Link Management

[joeflies]

For all the pros/cons on using a web site editor package vs writing code in a text editor, there's one issue that's been overlooked - how to manage links in a website with a large degree of depth and complexity.

As much as it may work in principle to build highly optimized pages by hand markup, it must be a nightmare to make any changes to something as tightly constructed as a hardwired web site.

Re:Dreamweaver is a mediocre tool

[Animats]

CSS support is very good in DW.

Actually, no, it's not. At least through Dreamweaver 8, CSS is sort of a bolted-on afterthought. The Dreamweaver "Properties" pane and the CSS system do not play well together. Dreamweaver has a useful GUI for table-based layout, but falls down on DIV-based layout. (This isn't entirely Dreamweaver's fault. DIV-based "float" and "clear" just weren't a well chosen set of primitives. It's trying to solve a 2D problem with a 1D mechanism.)

Dreamweaver 3 was easier to use.

Re:Hand-coding?

[nxtr]

Please refrain from alluding to such explicit language. For goodness sakes, Slashdot is not the Netherlands after 9 PM.

Valid Markup != Good Code

[DigitalisAkujin]

While the purists are going to argue that valid markup defines the quality of the code on a given website the reality of the real world always tends to rear it's ugly head and debunk that fantasy.

In the real world us web developers have to deal with interoperability on many different levels. We have to make sure the layout looks the same on Internet Explorer, Firefox, Opera, and Safari with Windows XP & Vista, OSX, and Linux using the same code base. Most of this however has a lot to do with how talented your CSS developer is. And unfortunately for you kiddies, any less isn't perfect.

So to spell it out for those that don't know, here's the real difference between WYSIWYG and pure text:
In a WYSIWYG editor you tend to do everything the same way every time you do it. That means that all your links, images, and code snippets come from the same code base and therefore have all the same pitfalls and good points. Unfortunatly the wonderful world of DOM doesn't work that way. HTML, CSS, JavaScript, and objects like Flash, Quicktime, and Java have very specific ways that they interact with each other and the browser and so what you generally find is that the reason you code by hand is not for the specific reason of coding by hand but simply put you really can not build good, quality websites with WYSIWYG editors. At some point you will most assuredly find yourself digging in the HTML.

Finally, on the topic of validating your markup. The Markup validaters that are out there are only good as tools of the trade and shouldn't be used as the end-all be-all certification of quality markup. They are tools that should be used by a web developer to run through and make sure they can be as close to valid as possible but I am willing to bet that out of the top 100 sites on the internet, the front page of all of them will produce Markup validation errors. The reason is simple: The validation rules are so restrictive that there is no point even worrying about them. It would be impossible to make a working website by being totally loyal to the markup rules.

Especially with the validator's stupidity in treating & signs in the href attribute of my a elements as the beginning of an entity which it's not! /rant >.>

Re:Valid Markup != Good Code

[Bogtha]

I am willing to bet that out of the top 100 sites on the internet, the front page of all of them will produce Markup validation errors. The reason is simple: The validation rules are so restrictive that there is no point even worrying about them.

You're right about valid code being rare, but wrong about the reason. Sturgeon's Revelation applies to developers.

It would be impossible to make a working website by being totally loyal to the markup rules.

That's not even close to being true. Take the NYTimes for example. Would you care to point out a syntax error they've made that is actually necessary, where the valid alternative wouldn't work?

The same goes for those "100 top sites" you mentioned. They aren't invalid because valid code is impossible to get working, they are invalid due to apathy and ignorance. In practically every case, you could take a mildly competent developer, throw the code at him, and have it valid in next to no time. Hell, in many cases, a program can do it automatically! The cases where invalid code is actually required to achieve a particular effect are far and few between these days.

Especially with the validator's stupidity in treating & signs in the href attribute of my a elements as the beginning of an entity which it's not!

The validator is completely correct. That's a syntax error and the job of a validator is to point out syntax errors to you.

Re:Valid Markup != Good Code

[Bogtha]

An & sign in a link to a URL isn't a syntax error

Yes, it is. Don't just take my word for it, take a look at what the HTML specification has to say on the matter.

treating it as such would nullify all GET parameters after the first one.

You are confusing a URI with the representation of that URI within an HTML document. Just because it appears as &amp; in the document, it doesn't mean that's what you end up with after it has been parsed.

Re:Valid Markup != Good Code

[shutdown -p now]

It would be impossible to make a working website by being totally loyal to the markup rules.

This is quite wrong. You absolutely can make a site that validates, and (what's more important, in fact) is actually semantically correct HTML, yet displays properly in all the major browsers out there. A good example is the Opera website (validates as XHTML 1.0 Strict). Also, if you have a browser that has such feature, try disabling CSS and JavaScript entirely, and see how it looks then - I was pretty surprised to find out that drop-down menus are actually defined as a hierarchy of nested unordered lists, which is why it is fully navigable in Lynx and similarly restricted browsers.

And that's not all...

[swm]

I hear they have people who hand-write the news stories: sentence by sentence, word by word. Can you imagine?

Yes and, err, no?

[stewbacca]

Better results? Probably. Faster? No way. Never. Not gonna happen. Maybe they mean faster in the way that it is faster for guys who hand code lines of html all day to hand code lines of html all day because they don't have the first clue of how to use a WYSIWYG editor? If they know code so well, why not use Dreamweaver in pure code mode? The management tools of the suite alone are worth the ?extra? time.

Re:Yes and, err, no?

[Bob The Cowboy]

Management tools? What, ftp? Why the hell would you run some bloated WebDev environment entirely in code mode?

Dude. Let me help you.

This will be KDE-specific, but I'm sure you could use Gnome programs for the same thing. For that matter, you could also setup SSHFS, or NFS.

Open Kate.
Click File, Open.
In the file selector, type: fish://user@someserver/some/path/and/file.html
Edit.
Save.

Marvel as your file is magically updated, without any bizarre management tools. With the benefit of being secure.

For extra credit, you can even figure out how to commonly accessed remote directories in the left-hand sidebar.

Bill

Re:Yes, and?

[Jellybob]

How I wish that was true.

It's the case for almost any *large* dynamic website, but having spent a couple of years doing web development in the design industry, I can tell you that at least in the UK, a large proportion of the small agencies are using Dreamweaver for most things.

Fuck knows why - I'd rather be handed an Illustrator file and turn it into HTML then have the crap that Dreamweaver spits out given to me, and have to try and turn it into something dynamic.

RE: "It's nice to see that not only does..."

[slysithesuperspy]

Great, now if only they would hire the best journalists!

Blame our woefully inadequate education system

[blueZ3]

Anyone who's read even a modicum of literature would be aware that misspelt is the older/English spelling of the "American" misspelled. Of course, for anyone educated in our school system who lacks the interest or motivation to go beyond the standard curriculum, 100% reliance on the spell-checking function of their browser would lead them to believe that misspelt is mispelled. :-)

I must say however, that your insistence on lumping everyone in this country into the "ignorant American" stereotype is also pretty annoying and reinforces negative aspects the snobby European stereotype. :-)

Re:Hand-coding?

[Russellkhan]

Emacs has a mode for that.