Are you one of many website designers who use a popular WYSWYG (What You See Is What You Get) program? I was one of them. I blissfully made websites using the ever-popular design view and grew a very nice clientele. Due to years of experience my websites were cross-browser compatible, affordable and attractive. Life was good!!!

I became intrigued by Cascading Style Sheets (CSS) while surfing the net and decided to read about the benefits and do some tutorials. It seemed really interesting and I soon realized I could become a better designer. But there was a problem. I didn’t know anything about html (Hypertext Markup language)!
It didn’t take long to realize I was doing a disservice to my clients.

First let me list the good points about using a WYSWYG program in design view.

1. Small Learning Curve - With a little time, you will understand how to design a site. Unlike hand coding and learning any new language there is a learning curve which will take a bit of time to overcome.
2. Secondly it is faster to design a website using the design view and tables. Want the text bold, click the “B” button. Need a different font, select it from the drop-down box.

But that is where the benefits end.



Hand coding websites has many benefits.

1. Less Code - Less code results in smaller file sizes and faster load time.
2. Better SEO Results - Proper html with an external CSS style sheet allows Search Engines the freedom to focus on areas of importance without needing to sift through all kinds of meaningless code.
3. Maintenance and Update Ease - With CSS located in an external style sheet, updates and changes are easier and faster. If you choose to change the color of a link site-wide, you change ONE bit of CSS code in the external stylesheet. You no longer need to scan every html page to find every link.
4. Better Design Consistency - Because you have styled elements with CSS, you will not have any errors due to having forgotten or simply missed restyling something like a link. With consistency you have increased the chances of an enjoyable experience for the viewer. Also since all paragraphs look alike, all images are the same size, the visitors eye does not need to relearn how your website works thus delivering a very professional end product. Prior to using CSS, changing the styling of one element such as the color of a link required so much time and effort. I would have to search each page for links and hope I did not miss one.
5. Release all the Mysteries - Understanding html releases all the mysteries. Knowing how things work allows you to solve problems easier and also be more creative. You are no longer limited to square, blocky designs by tables restrictions.
6. File Size - Need another reason? The size of files should convince you.

Tables with all styling within the html:
Page A = 8.8KB Page B = 10.7KB

HTML with external CSS: Page A = 6.33KB Page B = 6.33KB

HTML is the foundation and structure of a site. CSS is what gives the HTML style.

Knowing how to hand code versus using a WYSWYG program in design view gives you POWER and complete control of your website. Musicians begin by learning one note, one chord until they can play a song. To become a true hand coding designer and developer, learn one element, then another. Soon you will have a website that you can feel proud of because you did it yourself.

___________

About the Author

Linda Chadbourne, an experienced web designer since 1998 specializing in artistic sites for small businesses. Maine-ly Web Design.