Web design

Web design is the design or designing of a Web page, Website or Web application. The term generally refers to the graphical side of Web development using images, CSS and XHTML.

History

When the Internet was first invented, Web design consisted of a basic markup language that included some formatting options, and the unique ability to link pages together using hyperlinks. It was this feature that characterized the Web among other communication methods, and characterized Web design among other design methods. Because of this unique behaviour of the World Wide Web, and the unique behaviour it encouraged in users, Web design would prove to be unlike any other form of design before or since, with the possible exception of interactive CD-ROM design.

As the Web and Web design progressed, the markup language used to make it, known as HTML, became more complex and flexible. Things like tables, which could be used to display tabular information, were soon subverted for use as invisible layout devices. With the advent of Cascading Style Sheets (CSS), table based layout is increasingly regarded as outdated. Database integration technologies such as server-side scripting (see PHP, ASP.NET, ASP, JSP, and ColdFusion) and design standards like CSS further changed and enhanced the way the Web was made.

The introduction of Macromedia Flash into an already interactivity-ready scene has further changed the face of the Web, giving new power to designers and media creators, and offering new interactivity features to users.

Controversies

As in all professions, there are arguments on different ways of doing things. These are a few of the ongoing ones.

Liquid versus fixed layouts

Programmers were the original web page designers in the early 1990s. Currently most web designers come from a graphic artist background in print, where the artist has absolute control over the size and dimensions of all aspects of the design. On the web however, the Web designer has no control over several factors, especially the width of the browser window.

Many designers compensate for this by wrapping their entire webpage in a fixed width box, essentially limiting it to an exact pixel-perfect value, which is a fixed layout. Some create the illusion of liquidity by building the graphics for their webpage at a size larger than any current standard monitor size (however, at the current rate of monitor supersizing, this method will soon become obsolete). Other designers say that this is bad because it ignores the preferences of the user, who might have their browser sized a specific way that they like best. These people propose a liquid layout, where the size of the Web page adjusts itself based on the size of the browser window.

There is a usability reason (rather than wanting control) for why a designer may choose a more fixed layout. Studies have shown that there is usually an optimal line width in terms of readability. One rule to appear from such studies is that lines should be between 40-60 characters long, or approximately 11 words per line.

This decision of which style of layout to use is often made on a case by case basis, depending on the needs and audience of the website.

Interesting note: Wikipedia is a liquid layout.

Flash

Macromedia Flash is a robust graphics animation program used to create and deliver dynamic content and interactive applications to the web.

Many graphic artists use Flash because it gives them exact control over every part of the design, and anything can be animated and generally "jazzed up." Some application designers enjoy flash because it lets them create applications that don't have to be refreshed or go to a new web page every time an action occurs. There are many sites which forego HTML entirely for Flash.

Flash detractors claim that Flash websites tend to be poorly designed, and often use confusing and non-standard user-interfaces. Up until recently, search engines have been unable to index Flash pages, which has prevented stores from having their products easily found. Also Flash websites cannot take into account many usability features, such as respecting the browser's font size and allowing deep-linking, and they outright fail any accessibility tests for blind users using screen readers. Although Macromedia has addressed these long-standing problems in the latest incarnation of Flash, it has yet to be seen whether it will lure over stalwart designers.

The final consensus is that Flash is simply a tool, and like all tools it takes a skillful craftsperson to know when, and how, to use it properly. Macromedia's other two products, Fireworks and Dreamweaver, makes Flash integration with graphics and HTML a lot easier.

CSS versus tables

Back when Netscape Navigator 4 dominated the browser market, the popular (but now deprecated) solution available for designers to lay out a Web page was by using tables. Often even simple designs for a page would require dozens of tables nested in each other. Many web templates in Dreamweaver still use this technique today. Navigator 4 didn't support CSS to a useful degree, so it simply wasn't used.

After the browser wars were over, and Internet Explorer dominated the market, designers started turning towards CSS as an alternate, better means of laying out their pages. CSS proponents say that tables should only be used for tabular data, not for layout. Using CSS instead of tables also returns HTML to a semantic markup, which helps bots and search engines understand what's going on in a web page. Today, all modern Web browsers now support CSS with different degrees of limitations.

However, one of the main points against CSS is that by relying on it exclusively, control is essentially relinquished as each browser has its own quirks which result in a slightly different page display. This is especially a problem as not every browser supports the same subset of CSS codes. For some designers used to the creating table-based layouts, developing Web sites in CSS often becomes a matter of replicating what can be done with tables, leading some to find CSS design rather cumbersome. For example, it has proved rather difficult to produce certain design elements, such as vertical positioning, and full-length footers in a design using absolute positions.

These days most modern browsers have solved most of these quirks in CSS rendering and this has made many different CSS layouts possible. However, people still continue to use old browsers which do not get updated any more. Most notable among these are Internet Explorer 5 and 5.5 which, according to some web designers, are becoming the new Netscape Navigator 4 — a block that holds the internet back from converting to CSS design.

Dynamic web design

Concept

Hypertext Markup Language (HTML) has long been the predominate method of structuring, stylizing, and presenting data to a web browser. Though still the most common method of delivering data via HTTP, many improvements have been made since its debut. Despite its usefulness for marking up text, it does not provide many features that allow data reuse, modularity, or server-side scripting. HTML does allow for style, but there are several other methods that are generally considered better. The collection of all the technologies that help to overcome the static shortcomings of HTML as a complete web design language are rolled up into the category of "dynamic web design." Dynamic web design allows a for a web site to better interact with its users and taylor itself to meet specific needs. In general, there are two places that dynamic decisions are made: on the client, and on the server.

Server-side

The concept of server-side dynamic web design is simple. A web server, running any of a myriad of web server software, makes a decision before serving a web page to the requestor. Once the decision is made, the server formats the HTML it is about to send according to the requestor's needs and then sends the HTML data. The key to server-side design is that the server makes all of the decisions and sends the client standard HTML. This helps to ensure that all browsers, regardless of make or version, will render the page as the web designer intended. Some common server side technologies include:

• PHP, ASP, and JSP. All of these technologies act as the decision makers on the server. When a user requests a web page, these technologies run their scripts and output HTML that the client can use.
• XSLT. Can then be used translate data in XML format to another format such as HTML. This translation is useful as one can easily update a translation rule to easily change the HTML structure of data.
• mySQL. A database technology that stores a variety of data. The database can easily have content added at any time. By doing this, a web site can be updated by not just admins, but users who are allowed to submit data.

A popular combination is the Apache web server running PHP and accessing data from a mySQL database.

Client-side

The concept of client-side dynamic web design is equally simple. With client-side technologies, a web server sends a client an HTML document with embedded scripts. It is then up to the client software to properly execute the scripts and produce the necessary dynamic data. One should take caution when using client-side web design as not all browsers will interpret scripts in the same manner. In general, client-side design is reserved for only simple presentation attributes of a web page so that in the event a script is misinterpreted, it is not a catestrophic failure. Some common server side technologies include:

• Javascript. A very popular scripting language that allows users to access the document object model to directly control a web site.
• CSS. Preferred over using HTML to stylize data, this technology allows for control over far more style than is available in plain HTML.

Somewhere in between

An up and coming technology is AJAX which is mostly client-side, but also allows for asynchronous communication with the web server. This allows for web pages that are much more application-like as they don't require a page refresh for every dynamic task.

References

• Template:Web reference full

See also

• Computer accessibility
• Content management
• Faceted navigation
• Graphic design
• Information architecture
• Interaction design
• Knowledge visualization
• Neen art
• Separation of style and content
• Server-side scripting
• Web colors
• Web development
• Web indexing
• Web templates

External links

• CSS Zen Garden
• Jakob Nielsen on Usability and Web Design
• The beginnings of a Wikiversity course on Web Design