Deciphering Website Design - Front End Development

When I first started creating websites I remember working with just HTML on Notepad that our High School teacher told us to use. So I was absolutely blown away when I saw the first WYSIWYG, What You See Is What You Get HTML editors such as FrontPage which allows you to create webpage graphically instead of having to code by hand. It was good for creating webpages, but I still didn't know how to use forms and submit data, and the other amazing things that could be done with a webpage.

Now this is mostly because back then I didn't really understand the entire field and how website development works. In fact it wasn't until I started college that I finally did understand how everything fits in into the overall hierarchy.

Seeing as how Website Design is such an interesting field to me I thought it would be appropriate to write this little primer on understanding Website Development Technologies and how they combine together to create a website for beginners and professionals everywhere, maybe even help you decide if website design is the right career for you.

There are many different technologies involved with website development so we'll split them into five main categories:
- Graphic Design
- Front End Website Design - XHTML / HTML / CSS
- Cool Effects / Client Side Programming
- Web Programming / Server Side Programming
- Database Development

Graphic Design
Let's start with Graphic Design. Design itself can mean a lot of different things in lots of different fields, but in this case I'm referring specifically to the actual graphic design that goes into creating the website. The image that an artist uses and how they create a layout of a website. You'll find that website design artists work with numerous different types of graphic design software.

Software such as Adobe Photoshop, Adobe Illustrator and Paint Shop Pro. These aren't the only software tools but these are the ones that are more commonly used by many of the professional graphic designers and web design artists. I really can't go into detail about graphic design because it's not something that can be explained, atleast not in 2 pages.

So I'm just going to assume that you now have an overall image of your website designed and stored on a Photoshop or some other file format. The next step would be to turn that image into a website. This requires front end development, also known as website design. This is what most webmasters are familiar with. There are WYSIWYG software programs such as Microsoft Frontpage and Dreamweaver which can be used to create websites using HTML and Tables, but you'll find that professionals tend to rely on a combination of XHTML and CSS to create a layout, and for a good reason.

Why XHTML / CSS?
As with graphic design I won't go into the exact details for XHTML and CSS mainly because it's too long of an explanation, but here are some good reasons why you should be using XHTML and CSS.

With XHTML you'll be able to increase cross browser compatibility so that you're website displays correctly on multiple browsers, not just the one you're testing on. Why is this important.

According to W3C, The World Wide Web Consortium, Internet Explorer browsers (5,6 & the new 7) take up 58% of the browser market. Firefox and other browsers currently take up 42 percent. Imagine missing out on 42% of your profits because you're website is not cross browser compatible. The good news is that adding cross browser compatibility is easier to do if you follow XHTML and CSS standards. If you already know html then XHTML will be easy to implement because once you get down to it, you'll see that XHTML is HTML, but with standards which can help you build a great website - down to the EXACT pixel.

Why CSS?
I have to admit I actually didn't know about CSS when I first started learning HTML. I really wish I did though. If you've ever tried to create a webpage layout by including one table inside another, and 2 tables inside another cell, then CSS will give you freedom. Well not literally, but it will help you see that there is a better way to create great website layouts. Layouts that won't break down every time you try to edit your webpage. It will help you see how can you make use of tons of other html properties that you might have never seen in WYSIWYG editors.

With CSS webpages are easier to manage, designs are easier to change because by changing properties on the style sheet, those changes will cascade to ALL webpages that use that CSS file. So if you decide to change the font color of your 200+ webpages website, you can do it easily by just editing one css file in a few minutes. Now imagine if you weren't using CSS and you needed to update 200 webpages. Good luck with that.

But if I still don't believe me then just visit CSSZenGarden.com because this website really cleared it up for me. I used to have this crazy notion that CSS is used for just aligning the text and making sure it displays correctly. The main reason behind this is because when I first saw CSS it was when I used to work with Frontpage. And in Frontpage when you see an option for CSS it just displayed text aligning correctly. I thought WHO CARES about aligning some text? So for a while, ok ok for a long while, I ignored CSS.

It wasn't until I visited CSSZenGarden that I truly began to see how CSS could be used and really find out the secrets to creating the stunning designs that are seen all throughout the web. If you visit this website the first thing you should do is to first just browse through their design layouts. Once you're finished browsing read the text. It will show you the true power behind CSS and why almost all if not all of the great websites that are built with HTML also make use of CSS.

Ok so you've moved on to XHTML and gained your freedom with CSS, and you've now finished turning that design into a real live webpage. Congratulations. What's next?

At this point you're probably itching to add those dynamic and cool effects to your website. You can add effects using front-end languages such as Javascript. Javascript is free and you can use it to add those cool effects that are seen on webpages and more. It's not a full fledged programming language so front end developers can use it easily to create dynamic effects.

Javascript is also not a server-side language because it works directly from your browser and so it's classified as a client-side programming. Meaning if a visitor to your website doesn't support it on their browser, or if they've disabled it then it won't work. The good news is that 90% of the browsers do support Javascript and on a majority of them javascript is enabled. Just keep in mind that it does take a little longer to load javascript, and that using too many effects or using effects just for the sake of effects won't help your website.

Always keep in mind that you're visitors are there to find information not just to look at cool effects. The good news is that Javascript is one of the key tools that is used to create AJAX applications, so if you have some knowledge of javascript then it will help you when you do decide to start building dynamic applications where javascript knowledge is required.

About The Author-- Sam runs http://www.WebsiteDesignHouston.net, a Houston based Website Development firm which helps entrepreneurs and businesses establish their online presence. For more information visit http://www.WebsiteDesignHouston.net or if you're interested in seeing Ajax In Action click here.

Article Source: Articles island - Free article submission and free reprint articles