“In 1896, architect Louis Henri Sullivan said, “Form ever follows function.” (http://www.digital-web.com/features/feature_1999-10.shtml) This quote has proven timeless, and is very applicable to the design and development of websites. It should be the goal of any developer to meld the design and functionality of a site so that they are inseparable. But wait……maybe they should be separated to an extent. Form and function of a site should have a symbiotic relationship that only has user experience in mind. If not approached carefully, it is easy to create a site that becomes one-sided in this regard. Flash based websites and overly-“seo’d” websites are examples of what can happen when form is not balanced with function.
One of the unfortunate aspects of websites to date has been that many of the graphic designers have migrated from the print medium. The ideas and attitudes that have carried over from that medium are often not applicable to the new medium of the Internet. It is not the fault of these designers that they are not programmers, but in many ways they have to become programmers to help create successful sites. Form must always follow function in regards to a website. The form of a website should blend with its’ function and become intertwined with it, but the function is what determines visitor retention. The form should complement the function and serve as the attraction to visitors.
There are several dilemmas to balance when approaching form and function. In the past, websites have done a very poor job of intertwining the two elements to improve user experience. The form of a website is defined by usability and aesthetic elements. Anything that makes a site more appealing to the senses can generally be thought of as a form element. The form of a website is important because it increases the satisfaction of visiting a website by prompting emotional response. A site that lacks form will seem dull and drab and not entice users for a prolonged initial visit to experience a site’s function. The function of a website is defined by performance. A site that is concentrating only on SEO will lack form and ease of use.
The functional elements of a site are what ultimately bring value to the user by helping to “solve a problem”. A site that lacks function will not retain users that strong form will attract. Some examples of form versus function would be the design of a website versus the ability to have the site rank high in search engines. The most aesthetically pleasing sites are not fit to rank well in search engines, and the best ranking sites are normally a long ways from the best looking. It is very necessary to find a balance between these two elements to create a successful website for businesses. One of the best current ways to balance form and function is to actually separate the two. The technologies of CSS and XHTML give us this opportunity.
CSS is a technology that uses the elements of HTML (and/or XHTML) to define display properties for a website. CSS can be used to tell what fonts, colors, borders, etc. will be used for an entire site from a single document. This makes it much easier to change these properties across an entire website than had been in the past. Before the acceptance of CSS, many developers used HTML tables to create complex and visually appealing designs. The problem with that approach was that there was no separation between content and design. CSS is also likely to be a long-term solution because it allows for more streamlined, leaner code that downloads more quickly than its’ large convoluted table-based counterparts.
More on CSS here: http://www.w3schools.com/css/default.asp
XHTML is a language very similar to HTML. There are only very minute differences that careless programmers will most likely not even notice. XHTML is a way to prepare sites for the emerging technologies of XML, and reduce the amount of work required when those technologies become available. XHTML is more a “transition” language that should be used until XML based applications become more widely available and reasonably priced. According to the W3C,
“Document developers and user agent designers are constantly discovering new ways to express their ideas through new markup. In XML, it is relatively easy to introduce new elements or additional element attributes. The XHTML family is designed to accommodate these extensions through XHTML modules and techniques for developing new XHTML-conforming modules (described in the XHTML Modularization specification). These modules will permit the combination of existing and new feature sets when developing content and when designing new user agents.” (http://www.w3.org/TR/xhtml1/)
More information on XHTML is available here: http://www.w3schools.com/xhtml/
The integration of these two technologies seems to be the current available way to fuse form and function. With CSS a designer can accomplish visually pleasing layouts while still retaining functionality with the use of XHTML and possibly other technologies.
Flash technology may be applicable to certain types of websites if they require animated or interactive elements. Always be sure to use the test of necessity when deciding to add visual elements. When Flash technology is used, it is the responsibility of the programmer to understand how to implement the technology while still maintaining the ability to be indexed by search engines. Using flash elements within a website can add visual spice while still maintaining search engine friendliness.
Download time is another key consideration to take into account when deciding on technology for a website. While the number of broadband users is increasing substantially, the majority of people are still using dial-up connections. Using a dial-up Internet connection can make browsing the web a slow and sometimes miserable experience if pages do not load quickly. Writing valid streamlined code and using CSS helps to improve download time and the satisfaction of users.
As with most technologies CSS is not compatible with ALL web-browsers. Many developers are tempted to write off the 2-3% of browsing traffic that cannot view CSS, but in many cases this is a mistake. With CSS it is a little more work to make a second version of a site to be viewable in all browsers, but it lends a level of professionalism, and caters to that small percentage that are often ignored and could represent a fair amount of customers. For more information on non-CSS articles check out Steve Champeon’s article on Progressive Enhancement.
The mix of form and function is truly a Zen Art . Neglecting one of the elements can lead to the defeat of a website. Those who master their craft in the balance of form and function will become highly sought after artisans in the coming future with website importance growing so quickly. So go and study young grasshoppers……but don’t let your significant others smell that incense burning, then they won’t think it’s work that you are doing locked in your office all day.
More good CSS resources:It took radio 34 years to have 50 million listeners...it took TV 13 years to have 50 million viewers...it took the internet only 4 years to have 50 million users.
