Web design basics
What makes the website appear on the viewer's monitor?
For the purpose of this brief overview regarding the basics of web design we are going to look at what it is that makes the website appear on the viewer’s monitor.
We are going to exclude all the programming languages that introduce dynamic interactivity; languages such as .php, C++, and java, amongst others.
Having eliminated a confusing collection of possibilities, we should have only two languages available to us. These two are HTML, or Hyper Text Mark-up Language, and CSS, or Cascading Style Sheets.
Aspirant web design apprentices, upon reading this, will no doubt rush over to W3c and rush through the first one and a half HTML web design tutorials, get bored, browse one or two CSS web design tutorials, and then head over to Facebook for the rest of the day.
Tomorrow morning, after another attempt at more web design tutorials, the apprentice will buy Dreamweaver, or download Kompozer, and design a website. During the WYSIWYG “design” process they will ignore the pop-ups that request Meta tags, DocType, and alt tags for images will be ignored too. Images may not, or may, be linked, resulting in an ugly blue border that the apprentice web designer cannot get rid of; the file structure may be re-arranged prior to loading; it may seem unnecessary to load the file ending in .css; in fact, any of many problems can crop up.
The beginner web designer will then load the masterpiece to the Internet, send the link to several friends, and sit back, waiting for orders. What happens now? Comments come back, comments along the lines of “I can’t see your website because everything is squished up in the corner.” Or, “Why do you have everything going straight down the side?”
This has happened because the beginner web designer did not understand the basics of web design.
The basic concept of web design is an intimate knowledge of what makes a web design. Learning about ID’s, classes, and attributes parrot fashion does not relate to a successful web design.
A successful, sound web design is a collection of components, arranged in a manner that is pleasing to the viewer. This collection of components needs to be ordered in such a way that it will display the same in all the popular browsers. A successful web design will take the odd behaviour of non-standards compliant browsers into consideration.
To attain a solid footing in the basics of web design the apprentice needs, no, the web designer apprentice must, learn about all the bits and pieces that make up a web design.
A very sound way of doing this is to open the source coding of a simple website, and, together with Google work through the source coding. Find a line that makes no sense, a line such as the one right at the very top of every web page, the line that has “DocType” in it. Go to Google, and ask Google: ”What is a DocType?” Work through a few of the answers that explain what a DocType is. Go on to the next line of the source coding, and repeat the process.
When you have all your answers, open your code editor, get into the guts of the source code, and throw it around. See what your alterations do to the web page. Try something else, and see what happens. The basic knowledge you will have accumulated will help you define and identify what you are doing.
By exploring the source code, the apprentice will be exposed to the design components, and the contexts in which these are used, and the abstraction of following a tutorial written by a web design specialist, for other web designers, is removed.
The "down and dirty" process outlined will provide the apprentice with a sound grasp of the basics of web design, and is a process recommended by many of the top web designers, who themselves started out the same way.
© copyright Teresa Schultz 2010
This article above, written by myself, Teresa Schultz,
was first published on Factoidz.
