Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.
I'm currently learning web design.

Right now I'm learning html/xhtml coding which I actually enjoy (all those lovely codes). But then I will go on to learn Dreamweaver and Go Live for use when creating sites.

I felt it was important to understand coding in the event that I might need to do some quick editing or perhaps identify a problem in an existing site's format.
 
Admittedly, I've only hand-coded my HTML. Due to the flexibility of external CSS and JS files, I can re-use plenty of stuff over and over.
I'm not knocking anyone who uses Dreamweaver or something comparable - I just enjoy HTML coding. I'm just a Doofy™.
 
There are different purposes for different things. If it's a large site, you have two choices: a WYSIWYG/design-side database package to manage it, or something else database driven (templating engine, CMS system, whatever). Just coding the whole thing by hand is, of course, silly.

Likewise, if I'm tossing off dozens of small, not particularly important projects, it's probably a lot more efficient to just pop them out with a GUI editor than using something text based.

But, if you're on a large project--say, a site with a few hundred pages that gets tens of thousands of hits a day--then WISIWYG is a questionable choice. Why? Because that 2X or 3X code bloat--even if the result is the same--is 2X or 3X more work for the server, and 2X or 3X as many things that can go wrong with other browsers. And since you're obviously running the site through some sort of database to generate the pages, chances are you only have to write the markup ONCE.

And if I have a huge site that's going to have browsers hitting that same basic markup 100,000 times per day, I'm going to be darned sure that not only is it doing exactly what I think it's doing on various different platforms (all those fun work-arounds), but that it's as lightweight as possible--I'm not going to throw an additional load on the server and multiple gigs of extra data transfer just because I'm not willing to spend an extra hour or two coding the single sitewide template by hand.

Finally, I really don't see the "slow" issue with HTML/CSS at all--on most sites I do my markup consists of a few DIV tags, and a very logical (and simple) H/P/EM/STRONG tag structure, and I just do the rest with CSS. That way I don't even have to fiddle with any page templates to make design changes--just tweak the stylesheet, and I'm done. That, to me, is a lot easier than changing the template in a WYSIWYG package and uploading 500 pages to the server. Plus, for the few luddites or people on mobile phones or whatever, the clean markup (w/o the CSS) causes the site to fail very gracefullly--it's visible and completely useable in Netscape 2.
 
I am a "Web-Developer" and have been for quite sometime. Allow me to retort:

RacerX said:
Why would this matter? Web browsers generally display the formatted pages... not the code. Something like that would only matter to people who spend more time viewing the raw pages than how they are displayed in the browser.

There is in fact a real-world reason for favoring shorter code over longer code that accomplishes the same thing. It's called bandwidth usage, and if you can serve one, dare I say, "dreamwoven" page or two optimized pages that are half the size, then you have just cut your bandwidth costs in half. For sites that serve a ton of pages, this can be a significant amount of money... and in the end worth the extra effort.

RacerX said:
If you want something that is not needlessly and hopelessly complicated, type out a plain text document with no code at all.

Your sarcasm/ignorance really helps your case.

RacerX said:
The point of HTML is web layout within a browser. Hand coding HTML is very much like knitting your own clothes, while it is an admirable skill, it is also time consuming.

Sure I can hand code, but why would I want to? I can hand sew too, but I'd rather use a sewing machine. I'm more than fit enough to bike everywhere, but I still use a car (specially in the weather we have here in Minnesota).

I'm not sure as a hobbyist (... based on your comments, I assume you are this...), you are qualified to make this statement. Your analogies are far from accurate. First of all, HTML isn't a "coding language" it is a markup language, and no, HTML's goal is not "web layout within a browser." The "point" of HTML is to breakup pieces of data--whether it be textual, tabular, lists or otherwise--into a well-formed structure. For example, using the <p> tags to encase a paragraph says nothing about how it should be displayed, but only labels the enclosed text as a "paragraph." The same goes for lists... using HTML I (should) only define a list of elements as that... a list using the appropriate list tag. It is then the job of the Stylesheet to apply a style to that list, table or whatever else and render it visually according to whatever styles have been defined therein.

RacerX said:
From what I've seen, the people who are most proud of hand coding are those who invested a lot in learning hand coding. It was the same mentality that users of DOS or non-GUI Unix have. They took all this time to learn to be productive via command line, and then the world moved on. They are struggling to hold onto this skill that they mastered even in the face of newer tools that are easier to learn and help people be more productive.

Again, in this case your analogy is inaccurate, and I doubt you've encountered many professional level web-developers. A hobbyist's view of anything is always different (skewed?) than those who make it their livelihood. Here you insinuate that the skills needed to use a command line are outdated? Useless even? I use an OS X box to do my development primarily because I have the option to use either/or. It is kind of hard to be "more productive" using a GUI when you are required to log in to a remote server via SSH to fix something. The beauty of OS X, for example, is that you have options to choose from, depending on what the job calls for. Having the skill to choose when to use one technology over another is one way that professionals separate themselves from hobbyists, as again, it is our livelihood at stake.

RacerX said:
I mean, even at the beginning of the World Wide Web HTML was being made in a WYSIWYG app (the original browser/editor worldwideweb.app for NEXTSTEP). The need for hand coding came on other platforms as they didn't have anything to do that (they were lucky back then to even have a web browser to view what they had written).

:rolleyes:

I don't think it'll be too long before hard core hand coders are looked upon the same way we look at the Amish today. ;)

I doubt that DOOM4 will be written in Visual Basic. I have a big problem with people who learn how to use something that they feel is "easier" and interpret that as being "better." In the same token, just because hand-coding something can be "harder," it doesn't mean that it is more optimized.

I originally learned how to write HTML markup with the aid of a WYSIWYG editor. It is a fantastic way to understand how something is translated from a visual tool into textual markup. As you become more proficient, you understand that the editor takes liberties in certain areas and in the end it is more time consuming to fix these than to simply maintain it yourself--this being my prerogative of course.

To their credit Macromedia has done a very decent job from a coding aspect with the new Dreamweaver.

I think your argument that Dreamweaver as a WYSIWYG editor is better/faster than hand-coding is unfounded. You have obviously never tried to tap into BBEdit's more powerful tools. One of the most overlooked tools in BBEdit is the Glossary feature. This allows you to select component templates and have them inserted into the working document. For example, there is an HTML page template that automatically fills in the code for a basic (blank) HTML page. Sound familiar? Yes, this is basically what you get when you open a new Dreamweaver document. The power here lies in the fact that you can customize these templates for any language or any type of component. Say, for example, if you're finding yourself writing a certain set of tags very often, you can create your own glossary entry to insert this code automatically. BBEdit's palette's extend this functionality into clickable buttons that will insert code (for say, tables) automatically, much like Dreamweaver. This is in effect an equivalent to Dreamweaver's snippet code library. BBEdit also has a built in FTP client, like Dreamweaver (although I use Transmit with it's built-in "Edit with BBEdit" command).

So up to this point, from a coder's standpoint, what's the difference right? Well my main point is this: the reason you say that Dreamweaver is easier is because it does most of the underlying work for you--implicitly--and you get the generated code that comes with it, which is usually less than optimized. I am suggesting that taking most of that implicit coding and making it an explicit process allows you more control over the code as a whole--hopefully making it easier to make it clean which in my case, is important. Also, I usually have to test this on multiple browsers anyway, and Opera 6.0 (which drive's Dreamweaver's in-app HTML rendering) is really the least of my worries, as often it renders differently than Mozilla or IE, and in the real world, IE (unfortunately) is the first browser that needs to render correctly, with Mozilla coming in second. I find it easier to test a resulting page in one of these browsers, so the "live" in-app preview doesn't help me in the end (and yes, just as in Dreamweaver, BBEdit has a "Preview in Browser" command).

There are a number of other reasons why using BBEdit has become more natural for me than using a WYSIWYG tool, most of which won't matter or simply won't be understood by the casual user. So, in conclusion, as far as your statements are concerned, I prefer to take a little more time upfront to do something right, rather than correct things after the fact, but again, this comes down to choosing the right tool for the job. To each, his own.

I apologize for the lengthiness of this post.
 
RacerX said:
Why would this matter? Web browsers generally display the formatted pages... not the code. Something like that would only matter to people who spend more time viewing the raw pages than how they are displayed in the browser.
If you have have 2 pages, they look the same, the hand coded one is 56kb, the WYSIWYG one is 256kb, which one will load quicker? The 56kb, as there is less to download.

Personally, I hand code XHTML 1.1/CSS 3 (Draft :p)/PHP/SQL in SubEthaEdit.
 
link92 said:
If you have have 2 pages, they look the same, the hand coded one is 56kb, the WYSIWYG one is 256kb, which one will load quicker? The 56kb, as there is less to download.

Personally, I hand code XHTML 1.1/CSS 3 (Draft :p)/PHP/SQL in SubEthaEdit.

Examples please. Not sure where you guys think this large files size is coming from and how it would be dreamweaver. You are telling me that a dreamweaver file is going to be 200k larger than if you hand code it? Thats just wrong. If you know what you are doing in DW this isn't a problem. Its about your own HTML efficiencies.
 
infect said:
I am a "Web-Developer" and have been for quite sometime. Allow me to retort:
Really... hmmmm

There is in fact a real-world reason for favoring shorter code over longer code that accomplishes the same thing. It's called bandwidth usage, and if you can serve one, dare I say, "dreamwoven" page or two optimized pages that are half the size, then you have just cut your bandwidth costs in half. For sites that serve a ton of pages, this can be a significant amount of money... and in the end worth the extra effort.
The web has become so saturated with images that the size of an html document really isn't the issue it once was.

Your sarcasm/ignorance really helps your case.
Your not helping your case any either.

I'm not sure as a hobbyist (... based on your comments, I assume you are this...), you are qualified to make this statement. Your analogies are far from accurate.
No you don't... you're attempting to be insulting... which is your own personal problem, not mine.

First of all, HTML isn't a "coding language" it is a markup language, and no, HTML's goal is not "web layout within a browser." The "point" of HTML is to breakup pieces of data--whether it be textual, tabular, lists or otherwise--into a well-formed structure...
HTML started life as an attempt for a cross platform page layout language. It didn't catch on, but did find a place in the original worldwideweb app which donned it's current use.

I'm sure, like me, you were a user of the worldwideweb.app when it was originally released. I would hate to think that you are new to all this stuff.

Again, in this case your analogy is inaccurate, and I doubt you've encountered many professional level web-developers. A hobbyist's view of anything is always different (skewed?) than those who make it their livelihood.
From what I've seen you have no history here, I have no reason to believe that you are anything more than a hobbyist yourself.

If you are so intent on attacking my professional abilities, maybe we should wait for you to display yours first.

I never attacked anyone's professionalism, I just think the world is moving on past hand coding HTML.

You, on the other hand have issues that are not worth anyones time to comment on.

I apologize for the lengthiness of this post.
That ain't the only thing you should be apologizing for. :eek: You made an interesting first impression. ;)
 
ChicoWeb said:
Examples please.

I'd like to second that request. Real world example of Dreamweaver/GoLive/etc. making monster pages compared to the same page (in how it displays and it's content) from hand coding.
 
Sigh... If you really want one, I'll make one...

[edit]I can't do one using DW... Not used it for too long...[/edit]
 
RacerX said:
You, on the other hand have issues that are not worth anyones time to comment on.

I'm sorry you feel my post was a personal attack on you, but it wasn't. If you are offended by my comments, perhaps it has more to do with your own "issues." I also find it interesting that your reply is completely devoid of any coherent response to my comments on the actual topic of this thread.
 
infect said:
I also find it interesting that your reply is completely devoid of any coherent response to my comments on the actual topic of this thread.
Well, maybe next time you can stick to the topic of the thread.

There is nothing interesting about it. You, personally, are just not worth the time to compose such a post.

:rolleyes: Make of it what you will. There is nothing further to be said to you in this thread.

Have a nice day. :D
 
RacerX said:
...
The web has become so saturated with images that the size of an html document really isn't the issue it once was.
...

To pick on this one statement for a moment. Many web standards experts have pointed to how web standards-compliant designs can save medium- to large-sized sites tons of bandwidth.

One notable case-study: Throwing Tables Out the Window

This is not to say that DW is outputting table-layout clogged HTML, not so much anymore anyway, but to point out that the size of your HTML/CSS can have a huge impact on bandwidth for you and your visitors.

PS. Play nice, folks. :)
 
Rower_CPU said:
This is not to say that DW is outputting table-layout clogged HTML, not so much anymore anyway, but to point out that the size of your HTML/CSS can have a huge impact on bandwidth for you and your visitors.
But the actual HTML document represents less than 5-25% of what is being downloaded for a browser to assemble these days. A single graphic element can be many many times the size of the html page that it is being rendered in.

And worse, I've been coming across more and more pages with non-optimized images and graphics. People are forgetting that not everyone has DSL and Cable (just like people forget to design to 800x600 displays which are still very common).

The savings (if it exists, and I'm not convinced of it) from hand coding is negligible these days. On the largest site I work on (736 pages) the largest page is 56k, I have 8 between 20k and 32k and the rest are 8k and 4k. the bulk of the bandwidth issues on that site are images (and some quicktime). And I take a lot more time optimizing images for the web than I feel any need for optimizing the HTML pages.
 
RacerX said:
But the actual HTML document represents less than 5-25% of what is being downloaded for a browser to assemble these days...

Based on what...? Your sites? A study somewhere?

I'm not saying that image optimization isn't important, or that hand-coding is more important than image optimization. I'm just saying that lean code, whether generated by hand or by a WYSIWTG editor, can, and does, save bandwidth.

To ignore the bloat in your HTML and focus on image optimization is bad. So is the reverse.
 
Rower_CPU said:
Based on what...? Your sites? A study somewhere?

I'm not saying that image optimization isn't important, or that hand-coding is more important than image optimization. I'm just saying that lean code, whether generated by hand or by a WYSIWTG editor, can, and does, save bandwidth.

To ignore the bloat in your HTML and focus on image optimization is bad. So is the reverse.

Agreed. I thought the topic of this thread had more to do with the coding aspect, so that's where my focus lies. Regardless, there are so many ways to optimize a site using purely HTML/CSS even before images are concerned. For example, using CSS to create something like buttons/rollovers versus actually creating full-button graphics for the same effect. It definitely helps make a site more lightweight. I try to do as much as I can using purely Stylesheets before introducing graphics to accent page designs (like rounding out the edges of a CSS content box etc.) as graphics and images can considerably add to page weight.
 
link92 said:
Sigh... If you really want one, I'll make one...

[edit]I can't do one using DW... Not used it for too long...[/edit]

Sure, you hand code a page and I'll build it with DW and we'll see what the difference is in file size :D
 
RacerX, Incase you didn't read the article linked earlier, here's is an important snippet.

From Douglas Bowman's "Throwing Table's Out the Window" Article. Copyright (C) of Stopdesign.com

"The numbers get even more interesting when we start doing Meyer/Davidson ESPN-style estimates and projections. According to a public Microsoft page titled “Inside Microsoft”, 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."

That is a very real world example of what the difference between efficient coding and non-efficient (WYSIWYG) code.


I myself am a recent WYSIWYG covert. I used to use dreamweaver for my design and my content management. The fact it is, it's just not as clean or accurate.

When you hand code something you have so much more control than you have when designing inside dreamweaver. You can condense code and make it precise to your exact use.

The fact is hand coding isn't dead. It's efficient and clean.

You make the mistake of combining the idea of hand coding with taking a large amount of time. It is very possible to hand code in a fast manner. Maybe not as fast as dreamweaver, but at what sacrifice?

However, the real decision comes down to you. If you really feel that hand coding is out of style and that it doesn't get you anywhere, don't do it. You're the one that's losing.

There are many people here that have explained the benefits of hand coding, and I fully agree. Also, I can't wait to see the code difference between the page that Link92 just put up.
 
Rower_CPU said:
Based on what...? Your sites? A study somewhere?
Common sense?

Lets take a random page from the web... or maybe a not so random page, as we wouldn't want people saying I'm picking "special" examples. How about link92's page. It is a beautiful, hand coded page.

Now lets look at the sizes...

preview.xhtml- 4,456 bytes
logo.jpg- 116,521 bytes
the other 17 images- 16,382 bytes​
from what I can see here, preview.xhtml is about 3% of what was downloaded to display that page.

Any savings that link92 made in hand coding that page were completely blown away by not optimizing logo.jpg (which I was able to get down from 116k to about 34k in ImageReady without major loss of quality).

MrSugar,

The next time I get a client with traffic anywhere close to Microsoft (or Apple, or Google, or Yahoo, etc.) I'll keep that in mind. Currently, the HTML pages on the sites I manage are not the biggest draw on bandwidth... nor has any reached anywhere close to their bandwidth limits.

The closest I've personally come to bandwidth problems was last November when my personal site was slashdotted. Back then I got as many visitors in about 2 days as the previous 3 months.
 
RacerX said:
Common sense?

OK - so does that mean we both keep finding examples that refute each other's statements since we're using a subjective standards?

http://folding.extremeoverclocking.com/team_list.php
HTML = 188KB
total images = 40KB

Sorry but I dislike being so cavalier when throwing around statistics. I'm not saying you're wrong - with a range that wide it's hard to be - I was hoping it was based on something more objective.

Just because you're nowhere near bandwidth limits doesn't mean that everything's peachy. Your users may still be downloading more than they have to, and by the time you're hitting your bandwidth limit and hitting overages it's kind of too late to rethink optimizing your site.

And who knows, maybe your site would have survived the /.ing better with more optimized HTML. :p
 
Rower_CPU said:
Sorry but I dislike being so cavalier when throwing around statistics.
I never claimed statistical accuracy, it was a ballpark guess based on what I've seen on the net.

And it surely did warrant the harshness of your responce... specially given your position as a moderator.

And who knows, maybe your site would have survived the /.ing better with more optimized HTML. :p
:confused: Who said it didn't survive it? I didn't find out about it until days later when looking at the stats and then doing a yahoo search showed me that it had popped up at Slash Dot.

Besides, the point of my site is not optimal code (or images for that matter), it is a site about Rhapsody made on Rhapsody with Rhapsody native applications. It is an answer to the number one question I always get about Rhapsody... "what can you do with it?" The site is one example of what can be done with Rhapsody.

For the record, I don't do my client's sites in Rhapsody... and for those who haven't read the whole thread, I still do a lot of coding by hand in OmniWeb, just not all of it. :p
 
RacerX said:
I never claimed statistical accuracy, it was a ballpark guess based on what I've seen on the net.

And it surely did warrant the harshness of your responce... specially given your position as a moderator.


:confused: Who said it didn't survive it? I didn't find out about it until days later when looking at the stats and then doing a yahoo search showed me that it had popped up at Slash Dot.

Besides, the point of my site is not optimal code (or images for that matter), it is a site about Rhapsody made on Rhapsody with Rhapsody native applications. It is an answer to the number one question I always get about Rhapsody... "what can you do with it?" The site is one example of what can be done with Rhapsody.

For the record, I don't do my client's sites in Rhapsody... and for those who haven't read the whole thread, I still do a lot of coding by hand in OmniWeb, just not all of it. :p

Sorry if you took my comment as being "harsh" - it wasn't intended as such. I was honestly curious about where you got your figures. I try to stay on top of the web design best practices and am always looking for case studies/research/etc. In that regard, I really try to separate the noise from the signal and random stats thrown around tend to be more of the former than is constructive for discussions of this nature.

You said your site was "slashdotted", so I assumed you had some issues. My bad.
 
RacerX said:
Common sense?

Lets take a random page from the web... or maybe a not so random page, as we wouldn't want people saying I'm picking "special" examples. How about link92's page. It is a beautiful, hand coded page.

Now lets look at the sizes...

preview.xhtml- 4,456 bytes
logo.jpg- 116,521 bytes
the other 17 images- 16,382 bytes​
from what I can see here, preview.xhtml is about 3% of what was downloaded to display that page.

Any savings that link92 made in hand coding that page were completely blown away by not optimizing logo.jpg (which I was able to get down from 116k to about 34k in ImageReady without major loss of quality).
I'm still developing the site itself on localhost, so I tend to just export it as a progressive 100% .jpeg while still working on it, but when the site is finished, I will compress all the graphics properly, and upload it.
 
What about web apps?

Now, if standards were vigorously followed, you're right - hand-coding HTML might be less of a priority among all but the most fastidious of us. :) Like Postscript: nobody writes in PostScript now, because the standard is followed by everyone, so we trust InDesign and Quark and to "get it right." Or at least right enough to print it. But HTML+CSS aren't quite there yet. There are myriad incompatibilities, hacks, tips and tricks that you need to know. If a client calls and says "hey, my site doesn't look right here in Opera" the response, "Well, it looks fine here in Dreamweaver!" won't cut it.

I think there are two separate niches here. If you want throw a site up quickly, go for the WYSIWYG editor. If you're working on any kind of site with custom interactivity, or a web application, chances are you're going to have to get into the details of the code. Yes, with effort and good planning you can completely separate business logic from design (and yes, that's what CSS attempts to do with presentation and markup), but it's difficult at best. And how do actually hook the apps into the presentation layer, without getting into the code?

This is kind of the way it is with a lot of different web technologies, like content management systems and weblog software, etc... A lot of apps, like Wordpress, Movable Type, phpNuke, Audition (ahem ;-) )are good enough for what they do, so that users can pretty much use them out of the box. This is like the WYSIWYG editor for HTML. But there will always be users that require something customized and a little more hands-on. So they'll roll their own. It means they're creative; it doesn't mean they're Amish.
 
aftk2 said:
It means they're creative; it doesn't mean they're Amish.

Haha. Touché.

Just as an update to my previous post, BBEdit's in-application "Preview in BBEdit" will bring up a preview window for the current document. This preview is live updating and uses the Safari rendering engine. This is pretty handy if you're in need of a Dreamweaver style preview that uses something other than the Opera Browser to render content.

I guess in the end, it pays to know your editor, whichever editor that may be. So, RTFM.
 
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.