Web Design and Internet Principles

Basic Website Design Principles

There are a number of basic principles that should be adopted in a good web design. They are simplicity, visual appeal, appropriate functionality, appropriate content, maintainability, cross-platform implementation and search engine optimisation.

The more simple a website is the more likely it is to satisfy the other design principles listed above. The most successful website on the net is arguably google. The google homepage is probably one of the simplest pages on the internet.

Obviously, if a site isn't visually appealing then nobody will want to look at it. The objective of most sites is to draw people in and keep them returning. The visual appeal of a site is very important to this goal.

While visual appeal is important, functionality is arguably more important, if the site takes too long to load or it is too hard to navigate then the user will exit the site out of frustration no matter how good it looks. The site needs to be designed so that it is user friendly to be effective.

There is a saying going around the internet that "Content is king". It is quite true, to keep people coming to a website they need to be interested by the site and the only way for that to occur is if the site has frequently updated, quality content. Furthermore, search engine ranking increase significantly if a website has quality content.

The maintainability of a site is an important factor that should be considered. If a site is maintainable then changing the layout or content is simple and cost-effective. Maintainability can be improved with the use of templates utilised by server-side code and also the use of style sheets and include files for any scripts.

As discussed below, the different possible browsing environments are endless and that means that a web page must be developed with cross-platform implementation in mind.

SEO or Search Engine Optimisation is a term that is commonly used now in web design. It means optimising the site with respect to the current search engine algorithms so that a site will achieve better search engine rankings. Techniques for SEO include the use of keywords in content, valid and well-structured code without styling code (i.e. the use of style sheets) and linking campaigns.

Client-side Environment

A big factor in website design is taking into account the varied browsing environments possible. A web page can look totally different on two different computers because of this. The four main client-side factors affecting the display of web pages are fonts, colours, screen resolutions and browsers.

When a font is specified on a web page it will only show up when it is viewed if the person viewing that page has that font installed on their computer. Two ways around this are using css to specify different fonts to show up if the computer doesn't have the first, or subsequent fonts installed. The second is to use images with the required font, the problem with this is that images are a fixed size and can't be scaled and they increase download time.

More Information: Font family (HTML).

The colour depth of the computer affects whether a specified colour will show up. For example, if a computer is in 256 colour mode and a colour is specified on a web page that isn't one of the standard 256 colours then it wont show up as that colour. Furthermore, because of the different brightness / contrast / quality factors for monitors the same colour can look completely different on different computers.

More Information: Web colors.

Screen Resolution refers to the number of pixels in width and height that can display on a computer screen. Because images are a certain fixed pixel size, catering for different screen resolutions can be difficult. For example, a website might show up great on a computer with an 800x600 screen resolution but be way too small on a 1600x1200 screen resolution or vice versa. To make it more difficult, screen resolution can't be detected on the server-side, only the client-side code can detect the screen resolution. Two techniques to solve this problem are dynamically loading different CSS files depending on the screen resolution using JavaScript (but then when JavaScript is disabled it won't work) and designing pages to be scalable to different resolutions naturally.

More Information: Display resolution.

Different Internet browsers have different compatibilities with CSS / HTML / XHTML / JavaScript and the DOM. Thus even on the same computer, if the same website is viewed in different browsers the website can look different. The browser engine is what determines how an internet browser renders a web page thus, generally, browsers with the same browsing engine will display a website the same. There are four main browsing engines: Trident by Microsoft (Internet Explorer uses this), Gecko by Mozilla (Mozilla, Galeon, Firefox and Netscape (v.6 and above) are all based on this engine), Presto by Opera Software (Opera is based on this engine) and HTML (Konqueror and Safari are based on this engine which is based on Gecko). There are various ways to get around this; there are a number of CSS Hacks that can be used to target specific browsers, also conditional comments can be used to target Internet Explorer. Another way is to detect the browser on the server or client side and change style sheets depending on the browser.

More Information: Web browser & Layout engine & About Conditional Comments & Will the browser apply the rule(s)?.

TCP/IP Protocol

TCP/IP stands for Transmission Control Protocol / Internet Protocol. The TCP/IP protocol is the backbone of the internet and modern networking and specifies how computers can connect and communicate between each other. An IP Address defines a unique location of a computer on a network (such as a LAN (Local Area Network) or the Internet (the IP Address of your current computer is 127.0.0.1) and TCP defines how communication between computers using this protocol occurs. The internet has a broad and varied history. Its original development can be loosely dated back to 1973 when development began on the TCP/IP protocol by DARPA (Defence Advanced Research Projects Agency).

More Information: The History of the Internet & A Brief History of the Internet & Transmission Control Protocol & Internet Protocol.

HTTP Protocol

HTTP or Hypertext Transfer Protocol is the set of rules for exchanging files over the internet and is an extension of TCP. It is through this protocol that Internet Browsers can send requests to web servers (see next section) and interpret the response and display a web page or download a file.

More Information: HyperText Transfer Protocol.

Client/Server Networking

Internet browsing is made possible via client/server architecture. Internet browsers such as Firefox or Internet Explorer send a HTTP request to a web server (the server), which in turn sends information back to the internet browser (the client). The HTTP protocol is based on client/server networking.

More Information: Introduction to Client/Server Networking & Client-server.

DNS

As previously mentioned, the way the internet works is that internet browsers connect to a web server via its IP address. However, websites aren't accessed via IP addresses, they are accessed in the form of a domain name (i.e. www.google.com). DNS or Domain Name System defines the protocols and stores the information needed so that domain names like www.google.com can be translated to the ip address of the web server that stores the Google website.

More Information: "DNS - Domain Name System" & Domain Name System.

W3C

W3C or World Wide Web Consortium is a group that develops standards, guidelines, tools and software to lead the internet to its full potential.

More Information: World Wide Web Consortium & World Wide Web Consortium.

HTML

HTML or Hypertext Markup Language is the basis of WebPages, it is a markup language based on SGML that defines the structure of a web page. The standards for HTML are maintained by the W3C.

More Information: HyperText Markup Language (HTML) Homepage & HyperText Markup Language.

XHTML

XHTML or eXtensible HyperText Markup Language is the future of the web and is starting to replace HTML as the standard in web design. Simply, it is HTML transformed so it complies with the rules that define the powerful language XML. Again, the standards for XHTML are defined by W3C.

More Information: HyperText Markup Language (HTML) Homepage & eXtensible HyperText Markup Language.

CSS

CSS or Cascading Style Sheets are a simple mechanism to add style to a web page. It allows you to code a web page with no layout specific information (text sizes, colours, widths, heights, margins etc.) and instead implement the layout with an external CSS file or a block of css on the page. This means that the code of all your WebPages remains uncluttered by layout code and just contains the structure and content of the page. A single CSS file can be used over the whole site and thus a change in layout can be accomplished by changing one file rather than every page on the site. CSS is very powerful as a layout tool and certain layout effects can be achieved through it that aren't possible with just HTML / XHTML. CSS is defined by W3C.

More Information: Cascading Style Sheets Home Page & Cascading Style Sheets.

Client-side and Server-side Programming

Any programming code that is executed on the web server before a web page is sent to the browser (the client) is known as server-side code. Conversely, any programming code executed on the browser after the server sends the web page is known as client-side code. Either static pages can be sent from the server (where there will be no server-side programming involved) such as .htm or .html files. But, alternatively, pages sent by a web server can be dynamically created by server-side code such as PHP (see below), ASP (see below), Java, C++ etc. Furthermore, programs can be run on the server-side that the server-side code can use such as ISAPI DLL's that access a database and perform calculations. The server-side code will generally be a lot more powerful than client side code and will have file and database access, neither of which client-side code normally has. Furthermore, client-side code is browser specific and can be turned off. The most common example of client-side code is JavaScript (see below).

More Information: Client-side Versus Server-side Coding - Part 1 & Client side or Server Side?.

DOM

The DOM or Document Object Model is a description of how a HTML or XML document is represented in an Object Oriented sense. As such, this means that for websites, the different elements on a web page can be accessed as objects with properties and modified on-the-fly (i.e. client-side without the need to refresh the page) using a combination of JavaScript (see below) and CSS. This is known as Dynamic HTML or DHTML. An example of the use of DHTML is on the google site where the scrolling suggestion box pops down when you start typing in a query. That box is generated on the fly with JavaScript.

More Information: Document Object Model (DOM) & Document Object Model.

JavaScript / DHTML

JavaScript is a common client-side web programming language that allows among other things alert box's, mouse and keyboard triggered events and form validation. As previously discussed, Dynamic HTML (or DHTML) is where JavaScript is used to modify the document object model (DOM) of a page allowing dynamic changes to CSS or the different layers on the page.

More Information: JavaScript Tutorial & JavaScript.

PHP

PHP, short for PHP: Hypertext Preprocessor is a web server-side programming language. PHP can be used to create any number of things such as webforms that send emails, shopping carts, templates and dynamic page loading. When combined with a database, php becomes yet more powerful allowing such things as file-uploaders, database driven sites and content management systems. PHP is a Free, Open Source project maintained by the PHP Group.

More Information: PHP Homepage & PHP.

ASP

ASP or Active Server Pages is Microsoft's server-side technology for creating dynamic web pages. It is a part of Microsoft's IIS (Internet Information Services) Server. The default language that is used to code ASP pages is VBScript. Currently, ASP.NET is becoming more popular with the growth of Microsoft's .NET framework.

More Information: ASP Homepage & Active Server Pages.

JSP

JSP or JavaServer Pages also known as the Java Scripting Preprocessor, allows the use of the Java programming language to dynamically create WebPages. Because JSP pages utilise the Java programming language, like Java, JSP pages are thus server and platform independent which is a big advantage.

More Information: JSP Homepage & JavaServer Pages.

SHTML / SSI

SHTML or SSI (Server Side Includes) is a simple server-side scripting language that is used primary to include the contents of one file into another file but can also be used to execute cgi scripts.

More Information: Server Side Includes.

Databases

A Database can simply be put as a collection of records (information) organised systematically by a computer so that the database can answers queries (questions). In terms of websites, the applications of databases are varied, they range from content management systems, dynamic page content, and in web-based software.

More Information: Database.

SQL

SQL or Structured Query Language is a popular query language for databases. The most common database solutions, particularly for web-based projects, are SQL databases. Examples include Oracle, Microsoft SQL Server, MySQL and PostgreSQL.

More Information: SQL.

"Do not follow where the path may lead. Go instead where there is no path and leave a trail."
Muriel Strode