Good website practices

Just because you can draw doesn't mean you should paint the Sistine Chapel.

You can't always determine a well-designed website upon first glance. While many websites may LOOK pleasing to the eye, they can be a horror show for search engines, don't render in multiple browsers or provide a sluggish experience for your visitors.

Even if you know nothing about website design, the information below should help provide you with the basic knowledge you need when approaching any website designer.

Please feel free to contact me with questions or to setup a consultation!

Why is this information important to me?

A website is an investment. Your website reflects you and your business.

With a well-formed W3C compliant website design, you provide your visitors and potential customers with a great experience. You also increase your chances for better website search ranking placement.

Cross-Browser Compatibility

The head-ache of all website designers.

One of the toughest things to do in website design is to make sure a website looks the same across multiple browsers.

These are the browser by market usage numbers as of May 2008. These numbers show that it's not enough to make a website look good in Internet Explorer 6 - it needs to function in several.

Website browsers interpret HTML code and render a web page based on the information they have programmed with. To ensure your website looks uniform through as many different browsers as possible, a web designer needs to follow strict standards as outlined by the W3C (World Wide Web Consortium ).

Spotting good design practices

If you Right Click over a web page and choose View Source you will be able to view the HTML code that generates the page you are viewing. A well-formed web page should have the following elements:

1.
2.  Good Website Practices - DesignedByDay.com
3.  ...Etc.
4.  ...Etc.
5.  ...Etc.
6. ...Etc.

Let's pick apart the blocks of HTML.

1. This line provides search engines information about the web page document.
2. This line provides a unique title for the web pages in your site.
3. A description of your the web page you are viewing for search engines.
4. Keywords should be targeted towards the type of content on this page.
5. Information instructing search engine bots on which pages to index and skip.
6. Links to outside resources such as style sheets (CSS) or javascripts.

Spotting bad practices

Stay with me now... While the block of code above looks complicated, it's quite easy for a search engine bot to sift through and understand what the web page is all about.

Below is an example of material you should NOT see in the top of a web page document.

body { background-color: #000000; margin-top: 0px; } a:link { color: #006699; } a:hover { color: #000066; } .style10 {color: #000000} .style11 { color: #000000; font-weight: bold; font-family: AGaramond; } .style12 { font-family: AGaramond; font-weight: bold; } .style13 {color: #FF3300} .style16 {font-family: AGaramond} //***************************************** // Blending Image Slide Show Script- // © Dynamic Drive (www.dynamicdrive.com) // For full source code, visit http://www.dynamicdrive.com/ //***************************************** //specify interval between slide (in mili seconds) var slidespeed=2000 //specify images var slideimages=new Array("images/slide.blank3.jpg","images/slide/1a.jpg","images/slide/2a.jpg", "images/slide/3a.jpg","images/slide/4a.jpg","images/slide/5a.jpg","images/slide/6a.jpg", "images/slide/6a.jpg","images/slide/6a.jpg") var imageholder=new Array() var ie=document.all imageholder[i]=new Image() imageholder[i].src=slideimages[i] } function gotoshow(){ if (newwindow) window.open(slidelinks[whichlink]) else window.location=slidelinks[whichlink] } function MM_preloadImages() { //v3.0 var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array(); document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }} else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload(); } MM_reloadPage(true); function MM_findObj(n, d) { //v4.01 d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);} if(!x d.getElementById) x=d.getElementById(n); return x; } function MM_findObj(n, d) { //v4.01 d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);} } // function MM_nbGroup(event, grpName) { //v6.0 var i,img,nbArr,args=MM_nbGroup.arguments; img.MM_init = true; img.MM_up = args[3]; img.MM_dn = img.src; if ((nbArr = document[grpName]) == null) nbArr = document[grpName] = new Array(); nbArr[nbArr.length] = img; } function MM_preloadImages() { //v3.0 var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array(); } function MM_findObj(n, d) { //v4.01 }

Items such as styles and javascript code can be mis-interpreted by search engines, giving your page a much lower rank or maybe skipped altogether. Having style classes and code in your document head can significantly slow down website page loading.

Style classes (CSS) should be placed in an external style sheet and included or imported once. This means your viewer only needs to download page style and script information ONCE instead of every time they load a new web page on your site.

External Stylesheets & Javascript

There are some other tell-tale signs of a good website designer.  The use of external style sheets can play a major role in making your website fast & efficient for both visitors and for search engine bots.

Bad Practice Example

Paragraph One


Paragraph Two


Paragraph Three


Good Practice Example

Note: A linked document called global.css which is located in the HEAD of our website document contains the following CSS code:

p {font-size:12px;color:#000000;line-height:150%;word-spacing:normal;font-weight:normal;}

Paragraph One


Paragraph Two


Paragraph Three


This example shows the obvious benefit to loading the web page for a visitor AND indexing by a search engine. 

Clean efficient code makes for a much better website.

Why you DON'T want a Flash website (or intro)

What is a flash website? Flash websites are websites that appear "alive", sometimes loading with music. They usually have a little "loading..." graphic and then spring into view.

While flash sites look pretty, in most cases they should be avoided.

Are there other ways of checking web pages?

Yes! The World Wide Web Consortium (W3C) is the main international standards organization for the World Wide Web (abbreviated WWW or W3). It is arranged as a consortium where member organizations maintain full-time staff for the purpose of working together in the development of standards for the W3.

Simple Version: This group helps standardize the internet so designers and developers can use a set collection of tools for creating web pages.

W3C provides an online validator that allows you to verify whether or not a web page is conforming to W3C specifications. You can click here to verify this page is compliant or go here and type in the address of any website.

Technology Definitions

While I can throw around technical jargon all day, not everyone is aware that things like AJAX aren't just a household cleaner. Here are some definitions as defined by Wikipedia.

CSS Cascading Style Sheets (CSS) is a stylesheet language used to describe the presentation of a document written in a markup language. Its most common application is to style web pages written in HTML and XHTML, but the language can be applied to any kind of XML document, including SVG and XUL.
More on this

Facebook Twitter LinkedIn Youtube RSS