Design Tips for Web Sites

Web sites are the digital versions of business cards, store fronts, directories, and social meeting places. The foundation of any web site is HTML and CSS coding. HTML is an authoring programming language that deals primarily with the content or data and information of a site. This is where all of the ‘stuff’ goes in a web page. The basic mark up language was originally developed by a physicist at CERN for transferring and sharing data between colleagues and was given to the world to help spread information over the world.

HTML is simple and easy to learn and tutorials on the language abound on the internet. A very basic HTML page can be authored or coded in a matter of a few hours while more complex sites and pages can take weeks or months. The basis of HTML can be learned in independent study in under a month for most users. HTML tells the browser what to display such as images, lists, links to other pages and sites, and general information. It is important to note that an HTML document is not considered a full fledged programming language as it is interpreted by the browser and cannot stand as a program on its own.

While HTML is concerned with content and data, CSS deals with the styles or how the information is displayed; CSS tells the browser how the information looks on the page. CSS is short for cascading style sheets; these style sheets can be implemented within the HTML mark up language or through separate documents linked to the HTML document. The use of both HTML and CSS is imperative in web site design.

When designing a page, a developer or author needs to be sure that what they code in to be displayed can be viewed by any browser being used. Browsers differ in the way they present the HTML and CSS information, although new versions of internet browsers are more compliant with web standards set by the World Wide Web Consortium (W3C). It is always a good idea to have several browsers on a workstation computer to test the HTML and CSS; this allows the author to change and augment the mark up language to suit all browsers.

Choosing fonts is an important part of web site design as this is how all of the visitors will see the text, data, and content on the page. Web safe fonts are fonts that can be viewed and are standard on most operating systems. If a developer chooses to not use a web safe font they run the risk of the design elements, the CSS, not being shown in all browsers they way they intended. This may result in odd renderings, or presentation of styles such as margins, white space, image placement, and of course the font itself. If a browser or operating system does not have the font listed in the CSS coding, a default font will be used instead. This could change the overall look of the page as different fonts have different sizes and display properties.

Development tools and software programs can help a new HTML and CSS author in examining their code to ensure that it is compliant with web standards and to ensure the resulting display in the browser. Some such programs in clued Dreamweaver and Front Page but there are multiple programs on the market. In addition forums and communities can be found on the web to assist new and experienced webmasters, authors, and graphic designers in their design and coding efforts.

Resources

Web Design Resources
Designer Resources
CSS Design
Web Standards Design
HTML Validator
CSS Validator
Image Placement
HTML Lessons
Web Site Development and Programming
Web Color Templates
Web Design schools
Web Safe/Common Fonts
Web Development Forums
W3C Workshops
W3C Forums
PHP Tutorials
Web Development Resources
Web Scripting Tutorials