|
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.
- 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.
- 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 benifits.
- Less Code - Less code results in smaller file sizes and faster load time.
- 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.
- Search Engines better understand correct code. Use of HTML tags such as
<address> for an address, <q> for a quote and <code> for computer codes are easily understood by search engines.
- 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.
- 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.

- 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.
- File Size - Need another reason? The size of files should convince you.
|
Page A
|
Page B
|
|
Tables with all styling within the HTML:
|
|
8.8KB
|
10.7KB
|
|
HTML with external CSS:
|
|
6.33KB
|
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.
Linda Chadbourne is the owner of Maine-ly Web Design who has been creating websites for Businesses and Non-Profits Organizations since 1998.
|