How would you answer this person?
Friday February 23, 2007
I received the following comment this morning on an older post, and I've provided my own feedback.
But what do you think?
Maybe some of you smart designer/developer folks can help out a young naive beginner by helping me understand why I’m using only divs, why I spend so much time getting everything to validate, etc.Why should new designers bother with learning Web standards and validating their HTML? Or should they? What do you think?
Comments
Yes, absolutely, young designers should learn to habitually validate code. Why? Because it teaches the correct way to structure a web page. Once you’ve learned how and why you have the knowledge to bend the rules a little if absolutlely necessary.
Also, not every site visitor uses the same browser, and while browsers do not render valid code correctly, you’ll at least have a good starting point to achieve cross browser consistency before needing to employ and tricks of hacks to achieve you desired effect.
Once writing valid code becomes second nature, validating your code becomes no real hassle anyway. And if you’re working with a developer, make sure that the server generated code is also output to validate.
The final reason that I can think of is future updates. If you have to revisit that site a year after first building it, invalid HTML (especially old table based layouts) can be a nightmare to work with, a validated HTML / XHTML & CSS structure is far far easier to return to.
Anyway, that’s my six penneth…
)
There are quite a few reasons for using validate web pages, but here are my top couple;
1. Validated pages keep browsers from going into “quirks” mode. In quirks mode, each browser manufactor displays web pages according to their html interpretation and not the W3C. Because validate pages are interepted according to the same rules, they are likely to display the same no matter which browser (or version) is used. (No more chasing the “I can’t view the page with xxx”)
2. Validated pages help the disabled/mobile. Not everyone is using a browser on a PC. Disabled people sometimes use “screen readers” and others are viewing the web on cell phones.
3. Validated pages help search engines. Google and other search engines have an easier time disecting pages which have a good stucture. Therefore they are more likely to come up correctly when being searched.
–part 2 about divs–
Content is King
People come to your site for many reasons, but mostly for the information “content” it has.
When I write web pages, I focus first on what I want to say, not how to display it.
For me, sometimes starting with an outline is better, ie: I need to talk about this months events, or these products, and each product has these features, etc…
So, try writing the body of your web page using only the ul, li items.
Once the outline is done, I display the web page just as it is and then look to see which items should be “broken off”. For only those sections do I create a “div” around it and use CSS to color, style, float, etc…
Other sections will have the li changed to p tags, or broken off into smaller lists.
Add some menus and, volia!
I’m also just a beginner is the web design and it does take me a long time to get a page the way I want it and then to find out it has errors is very frustrating, but for me it is very personal to do it right.
I figure that the more I do it the faster it will be come. It is just like anything else we learn, at first it is exhausting work but the more we do it the faster we become with out even realizing it.
You’ll also find out that there are a lot of wonderful people out there that will help you validate your pages. I have one friend that I met at About.com that completely validated a page for me and sent me the file.
We all really need to start designing web pages the correct way so that we bring some uniformity to web design. Who knows if all of us who are web designers start insisting on correct web lay out maybe the people designing the browsers will get the message that we are not interested in them stiring the pot with their own little bells and whisles.
Just my ramblings on the subject.
How about a non-design example to illustrate. I live in a perfect example of why standards, and adhereing to those standards are very important, but you may not realise how important it can be down the line.
I live in a house (the website) that was originally built in 1915 before there were any building codes (standards) in my area. The original builders, used non-standard lumber, built to non-standard specs and generally did whatever they needed to get the house built. Now, they did a splendid job, the original builder was obviously very good at what he did and there were no problems. Later on some rennovation was done, still no standards so they did things like put new wall over old wall and make doorways with no headers. It was still good work, it was just non-standard.
So, if everything was fine, why did they need standards? Maintainability. Fast-forward 85 years, and I am now faced with replacing non-standard sized windows and doors, stripping out extra layers of wall, dealing with asbestos and lead. Changes that should be simple in todays standards are difficult because there were no standards before.
The same applies to websites. Things change, you will need to pull out content, you will want to add or take away browsers will come and go, etc. By adhereing to the standards now, you will ensure that you are saving yourself work, time (and money???) down the line.
It’s really in your best interests, especially if you plan on becoming a professional.
html should be catchy, interesting and most of all up-to-date with the latest trend.
I like Jason’s House Metaphor.
I was also thinking that building a web page is a bit like building a house.
A table-based layout where all content sits in a TD tag is like framing a house without concern for whether the room should function as a kitchen or a bedroom.
Table-based pages or houses can also look pretty ugly to the outside world (i.e. search engines or the visually impaired).
Semantics and standards ensure that the kitchen gets a window over the sink and —if you’re building a public building, a ramp for wheelchair access.
I deliberately stay up to date on the latest trends, but sometimes have to advise against them for commercial sites. Looking at my client’s server logs it’s plain to see that there are still a significant portion of their viewers who use Win98SE (or older!) with IE5 or early Netscape clients.
In practice, this means that it’s likely that these folks are viewing the web site at low res, have older plug-ins (if at all), dial up access, and are generally well behind the times. We can encourage them to keep up, but if they represent a profit line to the client, denying them access to the web content will hurt the client.
Standards are important, trends might not be. Not everyone on the receiving end is aware of them. Developers should adhere to standards at all times, but also be aware of what the standards where in the ‘olden days’ of the web. Some people still live there.
Have you ever considered another career?
Like selling cookies at a mall? Your patience sucks.
Human errors are inevitable, which is why we see inconsistent programming results - “It’s not supposed to do that!”
This validates the need for validation.
Jason: you know, I think I live in the house you describe.
But mine was built in 1926…
“God”: aren’t you supposed to have infinite patience with us fallible mortals?
“Websmith”: good point, but I believe that it’s a good idea to design to standards first, and then make the necessary adjustments to meet the needs of the customers. You have to do both, which is why Web design is a challenging career.
DougWig: I like your taking the house metaphor even further. I had to think about it a second or two, but you’re right, building with tables says that every “room” in the Web “house” has the same purpose, and they don’t.
I recommend validating your html/css with w3c.org because some html you write may look great in Internet Explorer but in Firefox it may look like absolute junk
In today’s world of web development IE no longer is the only browser avaliable and most designers and web masters do not just test their sites in IE. One site may look great in IE but terrible in everything else. Do the right thing and learn html/css Here .
Why do web design if you can’t be bothered to learn good coding?
Jennifer: Isn’t it just the most fun you’ve ever had with a house? With all the surprises I get working on this thing, you could well be living in a part I haven’t discovered yet.
I’ve been doing this for a long time and could write a lot on why to follow the standards. No doubt any developer will point out the main reasons to have valid HTML (1) Browser compatibility; and (2) maintenanace/updates. The third thing is that as the web progresses more use will be made of XML, so might as well learn good practices now and write in XHTML.
You raise a good question: Why should every designer have to learn HTML? Shouldn’t the thousands that have had to struggle with HTML, CSS, standards, etc. over the years be enough? Shouldn’t there be a better way?
My best answer, is that HTML, like the programming languages C and Fortran and Perl before it, is a tool. A tool used for presenting information.
Every tool since time began has taken skill to use well. Any school kid can walk into a store and buy a hammer, and anyone can eventually get a nail driven. But the craftsman knows his tools. Picks the hammer suited for the task, and learns to use that hammer well. Note sometime the master work — a nail driven, with no hammer marks in the wood around it. Or the work a blacksmith accomplishes with his (or hers) variety of hammers and tools.
Jennifer and many other designers live in a tech-oriented world. They can expect that 99+% of their visitors will have the newest browsers. Others of us live on the edges, with customers selling to people that may have computers 8-10 years old, and never upgraded from Windows 95 or 98 SE. I evaluate standards against common practice — among my client’s customers, and I don’t get to use standards newer than 3-5 years old. My client doesn’t want to hear a custmer complain a page doesn’t display — as can happen with a pure CSS (div) design when a packet or three gets dropped over a slow network.
Standards checking is just one step a professional takes. There are others. First is proofreading what you have, next is standards checking, then double check once you install the updated page/site on the destination domain. Then you ask the customer to review and comment. If you can find a trusted additional reviewer to also look over your work, check for missing images, page layout and information integrity and organization, navigation, and sentence structure, that all helps your client get the very best from their web site. Which is what gets you the next referral or update.
Oh, and if you are using all ‘div’s, please be sure that you are using tables when they are appropriate — for displaying tabular data.
Learn your HTML, CSS versions, and also Javascript, AJAX/SOAP, CGI, PHP, Photoshop or another graphics package or three, and etc. so you know what to use when, and why. The more you know, the better choices you can make.
Brad: Great comments. I really like what you said, and agree with most of it.
The only thing I don’t agree with is:
I don’t expect my readers to have any type of browser. I use my Web statistics to know what they have and design for those.
I then validate and test against older browser types and versions to make sure that the sites I build look good and work correctly even in browsers and across networks/speeds I don’t specifically design for.
I am sure that there are lots of designers who design only for the newest browsers and expect their readers to keep up, but that’s not me, and it’s not what I recommend.
Creating and working to standards provides the foundations for those following you to build upon. It allows for “repeatable performances” rather than individual implementations. Standard implementations using standard practices can be turned around more quickly, as many decisions are already made about the implementatin. In the end, it is your audience who are entitled to receive consistent and usable content on your website, irrespective of which individual has actually created the content.
I’ve been writing web pages since 1994. Back then, there wasn’t free WYSIWYG editors, or at least any worth mentioning. Most word processors wouldn’t save in HTML neither. I personally did everything in a text editor. I learned what was considered as the Industry standard, and follow that explicitly.
I personally never liked using tables to control layout. I always asked myself “Why is there no better way?” When DIV tags were standardized, I knew this was it. When CSS2 was standard - this was the relief I was looking for.
Currently, my web site of more a lot of pages all uses a single layout design. This layout is defined by DIV tags. If I was to use a respective table control the layout, than the layout’s size would double - therefore increasing the size of the page. Where web designers are always trying to get the edge in their design, it only makes sense to shave as many seconds as possible. So, if nothing else - using DIV tags simply makes sense. Also keep in mind the future of web sites would eventually focus on standards. People are getting tired of Large space hungry web browsers. WAP2 already proved small scale browsers can work if the web developer writes his page properly. Using DIV tags is a step in that right direction.
Which leads to the second question. Why should one validate. Well, validation assures that everything would work as you written it too. I use server coding to control nearly every aspect of the code itself. And even with my more than a decade of writing web pages, I still validate. If you create your site, and it’s guts with server generated code, than you do not have to validate each and every single page, but just one generated page. No matter how experienced we are, we are people, and can make mistakes. To ensure the valid code, and keep the number of sloppy pages off the Internet would be a goal that every good web designer should want. Only by showing what valid pages can do for the clients, and the visitors would everything else become easier. Who knows, maybe 10 years from now when the novice of today becomes experienced, they may see the day that novices wouldn’t even consider using tables as a layout control.
So why use DIV tags? Well to keep everything clean, and promote standards. Why validate? To ensure that everything works properly. Yes, you could do things the sloppy way. Use tables, and double the download of the layout. Use tables, and confuse web browsers that can not be 25MB+ to correct the mistakes. However, these are both very poor reasons to use tables. From my experience, using DIV is easier, and better. Yeah, you have to learn CSS2, or use a CSS Editor - however, if you are serious about web design, why wouldn’t you want to learn CSS2, or any future versions. If you would do something, than why do it half right? And yes, you can skip the whole tedious 5 - 10 seconds to validate. Just keep in mind that you can alienate those WAP 2 visitors, and when there are pure XHTML browsers that would not be 25MB+, and have a hard time dealing with invalid code - than you can post a notice on your pages saying that your web site supports legacy browsers only. That day is coming, just as the day that there had to be a better way to control the layout came.
Also, seen a post comment of older web browsers that may not be able to handle the newer XHTML code. This can be supplemented. I am not a wealthy person myself, however I have been able to acquire all of the 6 gTLDs for about $65/year. For most people, this is a very reasonable price, and if your host supports multiple domain hosting (mine does unlimited domains, and sub domains), than the cost is justified. If one is concerned about not alienating legacy browsers, than the simple matter of using a domain for the legacy browser. This assures that those using legacy browsers can visit the site, while also protecting the domain name identity. And yes, if you are targeting legacy browsers, than there is a reason to go back to the old way of using tables for layout control. Even than however, my Legacy layout is still valid - just not as XHTML strict.
I’m all for standards and compliance, and try to build that way as much as possible. CSS makes for smooth color, text, layout changes. Until you get to IE. What IE does to standards is not fit to repeat in polite company. What IE7 has done to all that nice hacked IE6-and-earlier code is causing web designers world wide to lay down their keyboards and weep.
I have IE6, Opera9, Foxfire1.5, several flavors of Netscape, and a Mac with Safari and Firefox. I make sure my design will function the way my customer needs in all of them. And I have a friend running Win98Se with whatever IE flavor, who checks my stuff as well.
I love CSS with a passion. When a client says “can you change…?” I go into client.css and *poof* it’s done. But there are times when having a site layed out with very basic tables is sometimes far less stressful, and far more likely to get done within the client’s timeframe, than trying to find out why that DIV is eating the edge of my text in IE, and has a 15px left margin in Opera and Firefox.
I would love to be completely standards compliant and totally validatable. But until certain browsers stop saying “yes we’re compliant… except for…” I’m using what will get the product out the door, satisfy the client, and be as viewable to as many people as possible. So, yes, I’m standards compliant and validatable… except for…
Save yourself time and a lot of headaches. First learn the basic simple tags - there is a lot to learn there…. how to spot errors, where to locate files, how to control format, adding images, sound and movies, etc.
After you have mastered the basics, you can start thinking about posting a web page, then look into structuring your files with DIVs and paying attention to validation.
I’ve back-peddled a bit from using divs exclusively. There are times that a table can do better, with less browser hassle and neater.
I started using tables again when bringing in data from a database(databases are table oriented). Especially when I want the elements to line up neatly. I found that using divs for this got different responses from various browsers.
There are places to use a table and other times where it’s just a waste of space.
I find the comments to this question to be quite interesting, to say the least. However, for me they miss the mark completely. I’m an IT Business Analyst and Project Manager. I started in the industry in 1976 as a tech, then a programmer.
To me, the most important reason to write code to standards is so I, or the next programmer, can see what you did and fix it. If any of the hackers reading this post plan to move beyond personal web sites, one of the most powerful selling points you can add to your resume is a piece of very good, well documented code, written to current standards . . . and the ability to explain what it does, and why.
Just my two cents. Keep hackin’!
Web design is full of endless possibilities, and to utilize those possibilities, we need to have standards to follow for several reasons.
In a perfect world, everyone would have the same computer, the same access to the Internet, and the same browser to view it. Since none of this is true, we need to be able to design web sites for multiple browsers accessed by multiple channels (cable, DSL, phone, etc.) which are connected to multiple varieties of computers.
Again, in the perfect world, one language (HTML, CSS, PHP, etc.) would be just right to create a page, save it, and run it without having to worry about whether your coding worked. This is also false as each language works differently with each browser. This is why we validate for browser versions so that your code will render correctly regardless the browser.
With portable languages comes the possibility of redundancy. This is why we use tags like the “div” and “span” tags to set a block of text to accept the design we choose. We can then use external files (CSS, JavaScript, etc.) to hold one set of rules that multiple pages can follow by specifying the blocks with a “div” or “span” tag.
Until the day there is a “real-time” editor that works online where you can see what you are doing and have the ability to drag-and-drop things where you want like a word document, we need these standards to create web sites for those who can’t. With time, practice, and learning, your skills will get better. The key to remember is: it takes 6 seconds to turn a surfer into a user. The average surfer is looking for something; an item, a service, a site with appeal. Developing a web site that offers all 3 will keep them there long enough to get a good look at the site and increases the chances of coming back.
hey how u?
1. A web developer should be a one patient enough and should look for alternatives as there are multiple ways of doing the same thing
2. All browsers do not interpret the same code in one way.
3. A browser opens the same code differently in different platforms and window sizes
4. some tags are not known to some browsers. bla bla bla
Valid code is a critical part of effective web site design.
By learning how to cleanly lay a web site out, one can develop a web site that can be seen and visited by anyone. Not just those using a particular browser or pc platform.
There are truly three key things to a great web site. First is quality content, second is proper page structure, and finally is valid code. If the house isn’t constructed right, no matter how much paint you put on it, it still won’t function properly.
Of course, there is always the point that Section 508 compliance is the law in the US, so if nothing else, concerning yourself with that should be fairly important if the web site is for a business.
Fnally, once you learn how to build a web site using Valid code & CSS for styling, you’ll be amazed how quickly you can build an attractive and functional web site. And when you can do that, then your value goes up, quickly!
While there is a certain sense to what you are saying, like most things in life proper HTML coding is difficult to learn in the beginning. But by following standards, laying out your pages using CSS, >DIV< and >SPAN< tags you will actually find it easier to write pages, you’ll spend less time re-writing should the site theme change and cleaner, clearer code is always easier to debug. Standards also mean that (browser wars issues aside) that a page written using standards will look almost identical on any of the major browsers (IE, Mozilla, Opera, Firefox, Netscape etc). For myself, when I was learing to write pages, the standards were not enforced and tables were the standard for page layout. As a result I still find it difficult to shake these habits and spend a great deal of time tweaking to get similar effects from my pages across the browsers.
Hope that helps,
J
For beginners (and I’m one) I think Firefox’s Total Validator is more user-friendly than the WC3 markup validator, though it does’t check the CSS. I use both, FF’s first. BTW I read recently the the WC3 plans to point out errors in a kindlier, easier-to-understand way.