Rich Internet application

Rich Internet applications (RIAs) are web applications that have some of the characteristics of desktop applications, typically delivered by way of proprietary web browser plug-ins or independently via sandboxes or virtual machines[1]. Examples of RIA frameworks include Adobe Flash, Java/JavaFX[2] and Microsoft Silverlight[3]. The term was introduced in the 1990's by vendors like Macromedia who were addressing limitations at the time in the "richness of the application interfaces, media and content, and the overall sophistication of the solutions" by introducing proprietary extensions[4]. As web standards (such as Ajax and HTML 5) have developed and web browsers' compliance has improved there is less need for such extensions. HTML 5 delivers a full-fledged application platform; "a level playing field where video, sound, images, animations, and full interactivity with your computer are all standardized"[5].

Deployment
With very few exceptions (most notably YouTube which currently relies on Adobe Flash for video playback) the vast majority of the most popular web sites are native web applications[6]. Online gaming is one area where RIAs are prevalent and applications (such as DimDim) which require access to video capture also tend to use RIAs (with the notable exception of Gmail which uses its own task-specific browser plug-in[7]).

Key characteristics
Accessibility of data to search engines and web accessibility can be impaired. For example it took over a decade from release for Adobe Flash to be universally searchable[8]. Advanced communications with supporting servers can improve the user experience, for example by using optimised network protocols, asynchronous I/O and pre-fetching data (eg Google Maps). Accordingly, reliable broadband connections are often required.

Complexity of advanced solutions can make them more difficult to design, develop, deploy and debug than traditional web applications (but typically less so than application software). Consistency of user interface and experience can be controlled across operating systems. Performance monitoring and fault diagnosis can be particularly difficult. Installation and Maintenance of plug-ins, sandboxes or virtual machines is required (but applications are smaller than their predecessors and updates are typically automated). Installation is typically faster than that of application software but slower than that of native web applications and automation may not be possible. Offline use may be supported by retaining state locally on the client machine, but developments in web standards (prototyped in Google Gears) have also enabled this for native web applications. Security can improve over that of application software (for example through use of sandboxes and automatic updates) but the extensions themselves are subject to vulnerabilities and access possible is often much greater than that of native web applications[9]. Performance can improve depending on the application and network characteristics. In particular, applications which can avoid the latency of round-trips to the server by processing locally on the client are often a lot faster. Offloading work to the clients can also improve server performance. Conversely the resource requirements can be prohibitive for small, embedded and mobile devices. Richness by way of features not supported natively by the web browser such as video capture (eg Adobe Flash).

Frameworks
An appropriate Rich Internet application framework is usually required to run an RIA, and needs to be installed using the computer's operating system before launching the application. The software framework is typically responsible for downloading, updating, verifying and executing the RIA.[10]

An example of a web page that uses CSS Layouts Web page design is a process of conceptualization, planning, modeling, and execution of electronic media content delivery via Internet in the form of technologies (such as markup languages) suitable for interpretation and display by a web browser or other web-based graphical user interfaces (GUIs). The intent of web design is to create a web site (a collection of electronic files residing on one or more web servers) that presents content (including interactive features or interfaces) to the end user in the form of web pages once requested. Such elements as text, forms, and bit-mapped images (GIFs, JPEGs, PNGs) can be placed on the page using HTML, XHTML, or XML tags. Displaying more complex media (vector graphics, animations, videos, sounds) usually requires plug-ins such as Flash, QuickTime, Java run-time environment, etc. Plug-ins are also embedded into web pages by using HTML or XHTML tags. Improvements in the various browsers' compliance with W3C standards prompted a widespread acceptance of XHTML and XML in conjunction with Cascading Style Sheets (CSS) to position and manipulate web page elements. The latest standards and proposals aim at leading to the various

browsers' ability to deliver a wide variety of media and accessibility options to the client possibly without employing plug-ins. Typically web pages are classified as static or dynamic. Static pages dont change content and layout with every request unless a human (web master or programmer) manually updates the page. Dynamic pages adapt their content and/or appearance depending on the endusers input or interaction or changes in the computing environment (user, time, database modifications, etc.) Content can be changed on the client side (end-user's computer) by using client-side scripting languages (JavaScript, JScript, Actionscript, media players and PDF reader plug-ins, etc.) to alter DOM elements (DHTML). Dynamic content is often compiled on the server utilizing server-side scripting languages (PHP, ASP, Perl, Coldfusion, JSP, Python, etc.). Both approaches are usually used in complex applications. With growing specialization within communication design and information technology fields, there is a strong tendency to draw a clear line between web design specifically for web pages and web development for the overall logistics of all web-based services.

Contents
[hide]

1 History 2 Web Site Design o 2.1 Multidisciplinary requirements 3 Issues o 3.1 Lack of collaboration in design o 3.2 Liquid versus fixed layouts o 3.3 Flash o 3.4 CSS versus tables for layout o 3.5 Form versus Function 4 Accessible Web design 5 Website Planning o 5.1 Purpose o 5.2 Audience o 5.3 Content

5.4 Compatibility and restrictions 5.5 Planning documentation 6 See also 7 References
o o

8 External links

History
Tim Berners-Lee published what is considered to be the first website in August 1991.[1] Berners-Lee was the first to combine Internet communication (which had been carrying email and the Usenet for decades) with hypertext (which had also been around for decades, but limited to browsing information stored on a single computer, such as interactive CDROM design). Websites are written in a markup language called HTML, and early versions of HTML were very basic, only giving websites basic structure (headings and paragraphs), and the ability to link using hypertext. This was new and different from existing forms of communication - users could easily navigate to other pages by following hyperlinks from page to page. As the Web and web design progressed, the markup language changed to become more complex and flexible, giving the ability to add objects like images and tables to a page. Features like tables, which were originally intended to 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 commonly regarded as outdated. Database integration technologies such as server-side scripting and design standards like W3C further changed and enhanced the way the Web is made. As times change, websites are changing the code on the inside and visual design on the outside with ever-evolving programs and utilities. With the progression of the Web, tens of thousands of web design companies have been established around the world to serve the growing demand for such work. As with much of the information technology industry, many web design companies have been established in technology parks in the developing world as well as many Western design companies setting up offices in countries such as India, Romania, and Russia to take advantage of the relatively lower labor rates found in such countries.

Web Site Design

A web site is a collection of information about a particular topic or subject. Designing a web site is defined as the arrangement and creation of web pages that in turn make up a web site. A web page consists of information for which the web site is developed. A web site might be compared to a book, where each page of the book is a web page. There are many aspects (design concerns) in this process, and due to the rapid development of the Internet, new aspects may emerge. For noncommercial web sites, the goals may vary depending on the desired exposure and response. For typical commercial web sites, the basic aspects of design are: The content: the substance, and information on the site should be relevant to the site and should target the area of the public that the website is concerned with. The usability: the site should be user-friendly, with the interface and navigation simple and reliable. The appearance: the graphics and text should include a single style that flows throughout, to show consistency. The style should be professional, appealing and relevant. The visibility: the site must also be easy to find via most, if not all, major search engines and advertisement media. A web site typically consists of text and images. The first page of a web site is known as the Home page or Index. Some web sites use what is commonly called a Splash Page. Splash pages might include a welcome message, language or region selection, or disclaimer. Each web page within a web site is an HTML file which has its own URL. After each web page is created, they are typically linked together using a navigation menu composed of hyperlinks. Faster browsing speeds have led to shorter attention spans and more demanding online visitors and this has resulted in less use of Splash Pages, particularly where commercial web sites are concerned. Once a web site is completed, it must be published or uploaded in order to be viewable to the public over the internet. This may be done using an FTP client. Once published, the web master may use a variety of techniques to

increase the traffic, or hits, that the web site receives. This may include submitting the web site to a search engine such as Google or Yahoo, exchanging links with other web sites, creating affiliations with similar web sites, etc. Multidisciplinary requirements Web site design crosses multiple disciplines of information systems, information technology and communication design. The web site is an information system whose components are sometimes classified as front-end and back-end. The observable content (e.g. page layout, user interface, graphics, text, audio) is known as the front-end. The back-end comprises the organization and efficiency of the source code, invisible scripted functions, and the server-side components that process the output from the front-end. Depending on the size of a Web development project, it may be carried out by a multi-skilled individual (sometimes called a web master), or a project manager may oversee collaborative design between group members with specialized skills.

Issues
As in collaborative designs, there are conflicts between differing goals and methods of web site designs. These are a few of the ongoing ones.
Lack of collaboration in design

In the early stages of the web, there wasn't as much collaboration between web designs and larger advertising campaigns, customer transactions, social networking, intranets and extranets as there is now. Web pages were mainly static online brochures disconnected from the larger projects. Many web pages are still disconnected from larger projects. Special design considerations are necessary for use within these larger projects. These design considerations are often overlooked, especially in cases where there is a lack of leadership, lack of understanding of why and technical knowledge of how to integrate, or lack of concern for the larger project in order to facilitate collaboration. This often results in unhealthy competition or compromise between departments, and less than optimal use of web pages.

Liquid versus fixed layouts

On the web the designer has no control over several factors, including the size of the browser window, the web browser used, the input devices used (mouse, touch screen, voice command, text, cell phone number pad, etc.) and the size and characteristics of available fonts. Some designers choose to control the appearance of the elements on the screen by using specific width designations. This control may be achieved through the use of a HTML table-based design or a more semantic div-based design through the use of CSS. Whenever the text, images, and layout of a design do not change as the browser changes, this is referred to as a fixed width design. Proponents of fixed width design prefer precise control over the layout of a site and the precision placement of objects on the page. Other designers choose a liquid design. A liquid design is one where the design moves to flow content into the whole screen, or a portion of the screen, no matter what the size of the browser window. Proponents of liquid design prefer greater compatibility and using the screen space available. Liquid design can be achieved by setting the width of text blocks and page modules to a percentage of the page, or by avoiding specifying the width for these elements all together, allowing them to expand or contract naturally in accordance with the width of the browser. Both liquid and fixed design developers must make decisions about how the design should degrade on higher and lower screen resolutions. Sometimes the pragmatic choice is made to flow the design between a minimum and a maximum width. This allows the designer to avoid coding for the browser choices making up The Long Tail, while still using all available screen space. Depending on the purpose of the content, a web designer may decide to use either fixed or liquid layouts on a case-by-case basis. Similar to liquid layout is the optional fit to window feature with Adobe Flash content. This is a fixed layout that optimally scales the content of the page without changing the arrangement or text wrapping when the browser is resized.

Flash

Adobe Flash (formerly Macromedia Flash) is a proprietary, robust graphics animation or application development program used to create and deliver dynamic content, media (such as sound and video), and interactive applications over the web via the browser. 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 do not have to be refreshed or go to a new web page every time an action occurs. Flash can use embedded fonts instead of the standard fonts installed on most computers. There are many sites which forgo HTML entirely for Flash. Other sites may use Flash content combined with HTML as conservatively as gifs or jpegs would be used, but with smaller vector file sizes and the option of faster loading animations. Flash may also be used to protect content from unauthorized duplication or searching. Alternatively, small, dynamic Flash objects may be used to replace standard HTML elements (such as headers or menu links) with advanced typography not possible via regular HTML or CSS (see Scalable Inman Flash Replacement). Flash is not a standard produced by a vendor-neutral standards organization like most of the core protocols and formats on the Internet. Flash is much more self-contained than the open HTML format as it does not integrate with web browser UI features. For example: the browsers "Back" button couldn't be used to go to a previous screen in the same Flash file, but instead a previous HTML page with a different Flash file. The browsers "Reload" button wouldn't reset just a portion of a Flash file, but instead would restart the entire Flash file as loaded when the HTML page was entered, similar to any online video. Such features would instead be included in the interface of the Flash file if needed. Flash requires a proprietary media-playing plugin to be seen. According to a study,[2] 98% of US Web users have the Flash Player installed.[3] The percentage has remained fairly constant over the years; for example, a study conducted by NPD Research in 2002 showed that 97.8% of US Web users had the Flash player installed. Numbers vary depending on the detection scheme and research demographics.[4]

Flash detractors claim that Flash websites tend to be poorly designed, and often use confusing and non-standard user-interfaces, such as the inability to scale according to the size of the web browser, or its incompatibility with common browser features such as the back button. Up until recently, search engines have been unable to index Flash objects, which has prevented sites from having their contents easily found. This is because many search engine crawlers rely on text to index websites. It is possible to specify alternate content to be displayed for browsers that do not support Flash. Using alternate content also helps search engines to understand the page, and can result in much better visibility for the page. However, the vast majority of Flash websites are not disability accessible (for screen readers, for example) or Section 508 compliant. An additional issue is that sites which commonly use alternate content for search engines to their human visitors are usually judged to be spamming search engines and are automatically banned. The most recent incarnation of Flash's scripting language (called "ActionScript", which is an ECMA language similar to JavaScript) incorporates long-awaited usability features, such as respecting the browser's font size and allowing blind users to use screen readers. Actionscript 2.0 is an Object-Oriented language, allowing the use of CSS, XML, and the design of class-based web applications.
CSS versus tables for layout
For more details on this topic, see Tableless web design.

When Netscape Navigator 4 dominated the browser market, the popular 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 and other WYSIWYG editors 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 subsided, and the dominant browsers such as Internet Explorer became more W3C compliant, designers started turning toward CSS as an alternate means of laying out their pages. CSS proponents say that tables should be used only 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. All modern Web browsers 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 rules. For designers who are used to table-based layouts, developing Web sites in CSS often becomes a matter of trying to replicate what can be done with tables, leading some to find CSS design rather cumbersome due to lack of familiarity. For example, at one time it was rather difficult to produce certain design elements, such as vertical positioning, and full-length footers in a design using absolute positions. With the abundance of CSS resources available online today, though, designing with reasonable adherence to standards involves little more than applying CSS 2.1 or CSS 3 to properly structured markup. These days most modern browsers have solved most of these quirks in CSS rendering and this has made many different CSS layouts possible. However, some people continue to use old browsers, and designers need to keep this in mind, and allow for graceful degrading of pages in older browsers. Most notable among these old browsers 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 World Wide Web back from converting to CSS design. However, the W3 Consortium has made CSS in combination with XHTML the standard for web design.
Form versus Function

Some web developers have a graphic arts background and may pay more attention to how a page looks than considering other issues such as how visitors are going to find the page via a search engine. Some might rely more on advertising than search engines to attract visitors to the site. On the other side of the issue, search engine optimization consultants (SEOs) are concerned with how well a web site works technically and textually: how much traffic it generates via search engines, and how many sales it makes, assuming looks don't contribute to the sales. As a result, the designers and SEOs often end up in disputes where the designer wants more 'pretty' graphics, and the SEO wants lots of 'ugly' keyword-rich text, bullet lists, and text links[citation needed]. One could argue that this is a false dichotomy due to the possibility that a web design may integrate the two disciplines for a collaborative and synergistic solution[citation needed]. Because some graphics serve communication purposes in addition to aesthetics, how well a site

works may depend on the graphic designer's visual communication ideas as well as the SEO considerations. Another problem when using a lot of graphics on a page is that download times can be greatly lengthened, often irritating the user. This has become less of a problem as the internet has evolved with high-speed internet and the use of vector graphics. This is an engineering challenge to increase bandwidth in addition to an artistic challenge to minimize graphics and graphic file sizes. This is an on-going challenge as increased bandwidth invites increased amounts of content.

Accessible Web design

Main article: Web accessibility To be accessible, web pages and sites must conform to certain accessibility principles. These can be grouped into the following main areas: use semantic markup that provides a meaningful structure to the document (i.e. web page) Semantic markup also refers to semantically organizing the web page structure and publishing web services description accordingly so that they can be recognized by other web services on different web pages. Standards for semantic web are set by IEEE use a valid markup language that conforms to a published DTD or Schema provide text equivalents for any non-text components (e.g. images, multimedia) use hyperlinks that make sense when read out of context. (e.g. avoid "Click Here.") don't use frames use CSS rather than HTML Tables for layout. author the page so that when the source code is read line-by-line by user agents (such as a screen readers) it remains intelligible. (Using tables for design will often result in information that is not.)

However, W3C permits an exception where tables for layout either make sense when linearized or an alternate version (perhaps linearized) is made available. Website accessibility is also changing as it is impacted by Content Management Systems that allow changes to be made to webpages without the need of obtaining programming language knowledge.

Website Planning
Before creating and uploading a website, it is important to take the time to plan exactly what is needed in the website. Thoroughly considering the audience or target market, as well as defining the purpose and deciding what content will be developed are extremely important.

Purpose
It is essential to define the purpose of the website as one of the first steps in the planning process. A purpose statement should show focus based on what the website will accomplish and what the users will get from it. A clearly defined purpose will help the rest of the planning process as the audience is identified and the content of the site is developed. Setting short and long term goals for the website will help make the purpose clear and plan for the future when expansion, modification, and improvement will take place.Goalsetting practices and measurable objectives should be identified to track the progress of the site and determine success.

Audience
Defining the audience is a key step in the website planning process. The audience is the group of people who are expected to visit your website the market being targeted. These people will be viewing the website for a specific reason and it is important to know exactly what they are looking for when they visit the site. A clearly defined purpose or goal of the site as well as an understanding of what visitors want to do or feel when they come to your site will help to identify the target audience. Upon considering who is most likely to need or use the content, a list of characteristics common to the users such as:

Audience Characteristics Information Preferences Computer Specifications Web Experience

Taking into account the characteristics of the audience will allow an effective website to be created that will deliver the desired content to the target audience.

Content
Content evaluation and organization requires that the purpose of the website be clearly defined. Collecting a list of the necessary content then organizing it according to the audience's needs is a key step in website planning. In the process of gathering the content being offered, any items that do not support the defined purpose or accomplish target audience objectives should be removed. It is a good idea to test the content and purpose on a focus group and compare the offerings to the audience needs. The next step is to organize the basic information structure by categorizing the content and organizing it according to user needs. Each category should be named with a concise and descriptive title that will become a link on the website. Planning for the site's content ensures that the wants or needs of the target audience and the purpose of the site will be fulfilled.

Compatibility and restrictions

Because of the market share of modern browsers (depending on your target market), the compatibility of your website with the viewers is restricted. For instance, a website that is designed for the majority of websurfers will be limited to the use of valid XHTML 1.0 Strict or older, Cascading Style Sheets Level 1, and 1024x768 display resolution. This is because Internet Explorer is not fully W3C standards compliant with the modularity of XHTML 1.1 and the majority of CSS beyond 1. A target market of more alternative browser (e.g. Firefox, Safari and Opera) users allow for more W3C compliance and thus a greater range of options for a web designer. Another restriction on webpage design is the use of different Image file formats. The majority of users can support GIF, JPEG, and PNG (with restrictions). Again Internet Explorer is the major restriction here, not fully supporting PNG's advanced transparency features, resulting in the GIF

format still being the most widely used graphic file format for transparent images. Many website incompatibilities go unnoticed by the designer and unreported by the users. The only way to be certain a website will work on a particular platform is to test it on that platform.

Planning documentation
Documentation is used to visually plan the site while taking into account the purpose, audience and content, to design the site structure, content and interactions that are most suitable for the website. Documentation may be considered a prototype for the website a model which allows the website layout to be reviewed, resulting in suggested changes, improvements and/or enhancements. This review process increases the likelihood of success of the website. First, the content is categorized and the information structure is formulated. The information structure is used to develop a document or visual diagram called a site map. This creates a visual of how the web pages will be interconnected, which helps in deciding what content will be placed on what pages. There are three main ways of diagramming the website structure:

Linear Website Diagrams will allow the users to move in a predetermined sequence; Hierarchical structures (of Tree Design Website Diagrams) provide more than one path for users to take to their destination; Branch Design Website Diagrams allow for many interconnections between web pages such as hyperlinks within sentences.

In addition to planning the structure, the layout and interface of individual pages may be planned using a storyboard. In the process of storyboarding, a record is made of the description, purpose and title of each page in the site, and they are linked together according to the most effective and logical diagram type. Depending on the number of pages required for the website, documentation methods may include using pieces of paper and drawing lines to connect them, or creating the storyboard using computer software. Some or all of the individual pages may be designed in greater detail as a website wireframe, a mock up model or comprehensive layout of what the

page will actually look like. This is often done in a graphic program, or layout design program. The wireframe has no working functionality, only planning, though it can be used for selling ideas to other web design companies.

See also

asp.net Biositemap Color tool Content Delivery Network Content management Faceted navigation Google guidelines Information architecture Interaction design Java Knowledge visualization Link rot

List of HTTP status codes PHP Progressive Enhancement Ruby on Rails Server-side scripting Sitemap Streaming Media Style sheet (web development) Unobtrusive JavaScript User interface design Web 2.0

Web application framework Web colors Web indexing Web integration Website templates Web usability Web usage mining Website architecture Website awards Website builder Yahoo! Site Explorer

Content management
Content management, or CM, is a set of processes and technologies that support the evolutionary life cycle of digital information. This digital information is often referred to as content or, to be precise, digital content. Digital content may take the form of text, such as documents, multimedia files, such as audio or video files, or any other file type which follows a content lifecycle which requires management.

Contents
[hide]

1 The process of content management 2 Implementations 3 See also 4 References

The process of content management

Content management practices and goals vary with mission. News organizations, e-commerce websites, and educational institutions all use content management, but in different ways. This leads to differences in terminology and in the names and number of steps in the process. Typically, though, the digital content life cycle consists of 6 primary phases: create, update, publish, translate, archive and retrieve. For example, an instance of digital content is created by one or more authors. Over time that content may be edited. One or more individuals may provide some editorial oversight thereby approving the content for publication. Publishing may take many forms. Publishing may be the act of pushing content out to others, or simply granting digital access rights to certain content to a particular person or group of persons. Later that content may be superseded by another form of content and thus retired or removed from use. Content management is an inherently collaborative process. It often consists of the following basic roles and responsibilities:

Creator - responsible for creating and editing content.

Editor - responsible for tuning the content message and the style of delivery, including translation and localization. Publisher - responsible for releasing the content for use. Administrator - responsible for managing access permissions to folders and files, usually accomplished by assigning access rights to user groups or roles. Admins may also assist and support users in various ways. Consumer, viewer or guest- the person who reads or otherwise takes in content after it is published or shared.

A critical aspect of content management is the ability to manage versions of content as it evolves (see also version control). Authors and editors often need to restore older versions of edited products due to a process failure or an undesirable series of edits. Another equally important aspect of content management involves the creation, maintenance, and application of review standards. Each member of the content creation and review process has a unique role and set of responsibilities in the development and/or publication of the content. Each review team member requires clear and concise review standards which must be maintained on an ongoing basis to ensure the long-term consistency and health of the knowledge base. A content management system is a set of automated processes that may support the following features:

Import and creation of documents and multimedia material Identification of all key users and their roles The ability to assign roles and responsibilities to different instances of content categories or types. Definition of workflow tasks often coupled with messaging so that content managers are alerted to changes in content. The ability to track and manage multiple versions of a single instance of content. The ability to publish the content to a repository to support access to the content. Increasingly, the repository is an inherent part of the system, and incorporates enterprise search and retrieval.

Content management systems take the following forms:

a web content management system is software for web site management - which is often what is implicitly meant by this term the work of a newspaper editorial staff organization a workflow for article publication a document management system a single source content management system - where content is stored in chunks within a relational database

Implementations
Content management implementation must be able to manage content distributions and digital rights in content life cycle. Content management systems are usually involved with Digital Rights Management Systems to be able to control user access and digital right. In this step the read only structures of Digital Rights Management Systems force some limitations on Content Management implementations as they do not allow the protected contents to be changed in their life cycle. Creation of new contents using the managed(protected) ones is also another issue which will get the protected contents out of Content Management controlling systems. There are a few Content Management implementations covering all these issues.

See also

List of content management systems Enterprise content management Enterprise information management Content management system (includes links to system providers) Information architecture Website architecture Web design Digital asset management Content engineering Content delivery Persuasive Content Content Management Interoperability Services

colors
HTML

HTML Dynamic HTML XHTML XHTML Mobile Profile Character encodings Font family HTML editor HTML element HTML scripting Layout engine Quirks mode Style sheets Unicode and HTML W3C Web colors Comparison of o document markup languages o web browsers o layout engines for HTML HTML5 Non-standard HTML

XHTML

This box: view talk edit

Web colors are colors used in designing web pages, and the methods for describing and specifying those colors. Authors of web pages have a variety of options available for specifying colors for elements of web documents. Colors may be specified as an RGB triplet in hexadecimal format (a hex triplet); they may also be specified according to their common English names in some cases. Often a color tool or other graphics software is used to generate color values. The first versions of Mosaic and Netscape Navigator used the X11 color names as the basis for their color lists, as both started as X Window System applications.

Web colors have an unambiguous colorimetric definition, sRGB, which relates the chromaticities of a particular phosphor set, a given transfer curve, adaptive whitepoint, and viewing conditions. These have been chosen to be similar to many real-world monitors and viewing conditions, so that even without color management rendering is fairly close to the specified values. However, user agents vary in the fidelity with which they represent the specified colors. More advanced user agents use color management to provide better color fidelity; this is particularly important for Web-to-print applications.

Contents
[hide]

1 Hex triplet o 1.1 Converting RGB to hexadecimal 2 HTML color names 3 X11 color names 4 Web-safe colors o 4.1 Color table o 4.2 Safest web colors 5 CSS colors 6 Accessibility 7 See also 8 References 9 External links

Hex triplet
A hex triplet is a six-digit, three-byte hexadecimal number used in HTML, CSS, SVG, and other computing applications, to represent colors. The bytes represent the red, green and blue components of the color. One byte represents a number in the range 00 to FF (in hexadecimal notation), or 0 to 255 in decimal notation. This represents the least (0) to the most (255) intensity of each of the color components. The hex triplet is formed by concatenating three bytes in hexadecimal notation, in the following order: Byte 1: red value (color type red) Byte 2: green value (color type green) Byte 3: blue value (color type blue)

For example, consider the color where the red/green/blue values are decimal numbers: red=36, green=104, blue=160 (a greyish-blue color). The decimal numbers 36, 104 and 160 are equivalent to the hexadecimal numbers 24, 68 and A0 respectively. The hex triplet is obtained by concatenating the 6 hexadecimal digits together, 2468A0 in this example. Note that if any one of the three color values is less than 16 (decimal) or 10 (hex), it must be represented with a leading zero so that the triplet always has exactly six digits. For example, the decimal triplet 4, 8, 16 would be represented by the hex digits 04, 08, 10, forming the hex triplet 040810. The number of colors that can be represented by this system is

An abbreviated, three (hexadecimal) digit form is sometimes used.[1] Expanding this form to the six-digit form is as simple as doubling each digit: 09C becomes 0099CC. This allows each color value to cover its full range from 00 to FF. However, the three-digit form is not interpreted correctly in some versions of Opera[citation needed].

Converting RGB to hexadecimal

Converting a decimal RGB value to a hexadecimal value is fairly straightforward. RGB values are usually given in the 0-255 range; if they are in the 0-1 range, the values are multiplied by 255 before conversion. This number divided by 16 (integer division; ignoring any remainder) gives us the first hexadecimal digit (between 0 and F, where the letters A to F represent the numbers 10 to 15. See hexadecimal for more details). The remainder gives us the second hexadecimal digit. For instance the RGB value 201 divides into 12 groups of 16, thus the first digit is C. A remainder of 9 gives us the hexadecimal number C9. This process is repeated for each of the three color values. Most modern operating systems have a built-in calculator to perform conversions between number bases and this can also be done with some hand-held calculators. This task can also be carried out using various web resources.[2]

HTML color names

Main article: HTML color names The HTML 4.01 specification[3] defines sixteen named colors, as follows (names are defined in this context to be case-insensitive; the table is alphabetically ordered):
Color aqua black blue fuchsia Hexadecimal Color Hexadecimal Color Hexadecimal Color Hexadecimal #00FFFF #808080 gray navy #000080 silver #C0C0C0 #000000 #008000 #808000 #008080 green olive teal #0000FF #00FF00 lime purple #800080 white #FFFFFF #FF00FF #FF0000 maroon #800000 red yellow #FFFF00

These 16 were also specified as sRGB and included in the HTML 3.0 specification which noted "These colors were originally picked as being the standard 16 colors supported with the Windows VGA palette." [4]

X11 color names

In addition, a number of colors are defined by web browsers. A particular browser may not recognize all of these colors, but as of 2005 all modern general-use browsers support the full list. Many of these colors are from the list of X11 color names distributed with the X Window System. These colors were standardized by SVG 1.0, and are accepted by SVG Full user agents. They are not part of SVG Tiny. Almost the exact same color names are used in .NET Framework, in the KnownColor and Color enumerations. The only color difference is DarkSeaGreen which is defined as 8F,BC,8B (instead of 8F,BC,8F). The list of colors actually shipped with the X11 product varies between implementations, and clashes with certain of the HTML names such as green. Furthermore, X11 colors are defined as simple RGB (hence, no particular color space), rather than sRGB. This means that the list of colors found in X11 (e.g. in /usr/lib/X11/rgb.txt) should not directly be used to choose colors for the web.[5]

The list of web "X11 colors" from the CSS3 specification, along with their hexadecimal and decimal equivalents, is shown below, compare the alphabetical lists in the W3C standards. Note that this includes the common synonyms: aqua (HTML4/CSS 1.0 standard name) and cyan (common sRGB name), magenta (common sRGB name) and fuchsia (HTML4/CSS 1.0
standard name), gray (HTML4/CSS 1.0 standard name) and grey. [6] [7]
Hex code R G B CD 5C F0 80 FA 72 E9 7A FF 7A DC 3C FF 00 B2 22 8B 00 Decimal code R G B 92 128 128 150 160 20 0 34 0 Hex code HTML name R G B Green colors AD FF GreenYellow 2F 7F FF Chartreuse 00 7C FC LawnGreen 00 00 FF Lime 00 32 CD LimeGreen 32 98 FB PaleGreen 98 90 EE LightGreen 90 MediumSprin 00 FA 9A gGreen 00 FF SpringGreen 7F MediumSeaG 3C B3 71 reen 2E 8B SeaGreen 57 22 8B ForestGreen 22 00 80 Green 00 00 64 DarkGreen 00 9A CD YellowGreen 32 6B 8E OliveDrab 23 80 80 Olive 00 DarkOliveGre 55 6B 2F en MediumAqua 66 CD AA marine Decimal code R G B 173 47 127 0 124 0 0 0 50 50 152 152 144 144 0 154 0 127 60 113 46 87 34 34 0 0 0 0 154 50 107 35 128 0 85 47 102 170 255 255 252 255 205 251 238 250 255 179 139 139 128 100 205 142 128 107 205 Hex code R G B Brown colors FF F8 Cornsilk DC BlanchedAl FF EB CD mond FF E4 Bisque C4 NavajoWhi FF DE AD te F5 DE Wheat B3 DE B8 BurlyWood 87 D2 B4 Tan 8C BC 8F RosyBrown 8F SandyBrow F4 A4 60 n DA A5 Goldenrod 20 DarkGolde B8 86 0B nrod CD 85 Peru 3F D2 69 Chocolate 1E SaddleBro 8B 45 13 wn A0 52 Sienna 2D A5 2A Brown 2A 80 00 Maroon 00 White colors FF FF White FF FF FA Snow HTML name Decimal code R G B 255 220 255 205 255 196 255 173 245 179 222 135 210 140 188 143 244 96 218 32 184 11 205 63 210 30 139 19 160 45 165 42 128 0 248 235 228 222 222 184 180 143 164 165 134 133 105 69 82 42 0

HTML name Red colors IndianRed LightCoral Salmon DarkSalmon LightSalmon Crimson Red FireBrick DarkRed Pink colors

5C 205 92 80 240 128 80 250 114 96 233 122 A0 255 122 14 220 60 00 255 0 22 178 34 00 139 0 C0 255 203 B6 255 193 69 255 180 14 255 147 15 199 133 70 219 147

FF Pink CB FF LightPink C1 FF HotPink B4 FF DeepPink 93 MediumViolet C7 85 Red DB PaleVioletRed 93 Orange colors FF LightSalmon 7A FF Coral 50 FF Tomato 47

192 182 105 20 21 112

A0 255 160 122 7F 255 127 80 63 255 99 71

255 255 255 255 250

OrangeRed DarkOrange Orange Yellow colors

FF 45 255 69 00 0 FF 8C 255 140 00 0 FF A5 255 165 00 0 D7 255 0 FF 255 0 FF 255 224 FA 255 205 FA 250 210 EF 255 213 E4 255 181 DA 255 185 E8 238 170 E6 240 140 B7 189 107 E6 230 250 BF 216 216 A0 221 221 82 238 238 70 218 214 00 255 255 00 255 255 55 186 211 70 147 219 66 153 204 2B 138 226 215 255 255 250 250 239 228 218 232 230 183

DarkSeaGree n LightSeaGree n DarkCyan Teal Blue colors

FF 00 FF Yellow 00 FF LightYellow E0 FF LemonChiffon CD LightGoldenro FA D2 dYellow FF PapayaWhip D5 FF Moccasin B5 FF PeachPuff B9 EE PaleGoldenrod AA F0 Khaki 8C BD DarkKhaki 6B Purple colors E6 Lavender FA D8 Thistle D8 DD Plum DD EE Violet EE DA Orchid D6 FF Fuchsia FF FF Magenta FF BA MediumOrchid D3 93 MediumPurple DB 99 Amethyst CC 8A BlueViolet E2 Gold

8F 8F 20 AA 00 8B 00 80

BC 143 143 B2 32 170 8B 0 139 80 0 128 FF FF FF EE FF E0 D1 CE 9E 82 C4 E0 D8 CE CE BF 90 95 68 69 00 00 0 255 0 255 224 255 175 238 127 212 64 208 72 204 0 209 95 160 70 180 176 222 176 230 173 230 135 235 135 250 0 255 30 255 100 237 123 238 65 225 0 255 0

188 178 139 128

230 191 160 130 112 0 0 85 112 102 43

00 FF 00 Cyan FF E0 LightCyan FF PaleTurquois AF EE e 7F Aquamarine D4 40 Turquoise D0 MediumTurq 48 CC uoise DarkTurquois 00 D1 e 5F CadetBlue A0 46 SteelBlue B4 LightSteelBlu B0 DE e B0 PowderBlue E6 AD LightBlue E6 87 SkyBlue EB 87 LightSkyBlue FA 00 DeepSkyBlue FF 1E DodgerBlue FF CornflowerBl 64 ED ue MediumSlate 7B EE Blue 41 RoyalBlue E1 00 Blue FF MediumBlue 00 Aqua

255 255 255 238 255 224 209 206 158 130 196 224 216 206 206 191 144 149 104 105 0 0

FA F0 Honeydew F0 F5 MintCream FA F0 Azure FF F0 AliceBlue FF GhostWhit F8 FF e WhiteSmok F5 F5 e FF Seashell EE F5 Beige DC FD OldLace E6 FloralWhit FF F0 e FF Ivory F0 AntiqueWh FA D7 ite FA Linen E6 LavenderBl FF F5 ush FF MistyRose E1 Grey colors DC Gainsboro DC D3 LightGray D3 D3 LightGrey D3 C0 Silver C0 A9 DarkGray A9 A9 DarkGrey A9 80 Gray 80 80 Grey 80 69 DimGray 69 69 DimGrey 69

250 FF 240 240 FF 245 250 FF 240 255 F8 240 255 F8 248 255 F5 245 245 F5 255 238 F5 245 220 F5 253 230 FA 255 240 FF 255 240 EB 250 215 F0 250 230 F0 255 245 E4 255 225 DC 220 220 D3 211 211 D3 211 211 C0 192 192 A9 169 169 A9 169 169 80 128 128 80 128 128 69 105 105 69 105 105

255 255 255 248 248 245 245 245 245 250 255 235 240 240 228

220 211 211 192 169 169 128 128 105 105

94 D3 99 DarkOrchid CC 8B DarkMagenta 8B 80 Purple 80 4B Indigo 82 6A SlateBlue CD 48 DarkSlateBlue 8B MediumSlateBl 7B EE ue DarkViolet

00 148 0 211 32 153 50 204 00 139 0 139 00 128 0 128 00 75 0 130 5A 106 90 205 3D 72 61 139 68 123 104 238

CD 205 00 00 0 DarkBlue 8B 139 00 00 0 Navy 80 128 19 19 25 MidnightBlue 70 112

0 0 25

77 99 77 99 70 SlateGray 90 70 SlateGrey 90 DarkSlateG 2F 4F ray DarkSlateG 2F 4F rey 00 Black 00 LightSlate Gray LightSlate Grey

88 119 153 88 119 153 80 112 144 80 112 144 4F 47 79 4F 47 79 00 0 0

136 136 128 128 79 79 0

Web-safe colors
Pixel color depth 1-bit monochrome 8-bit grayscale 8-bit color 16-bit Highcolor 24-bit Truecolor 30/36/48-bit Deep Color Related RGB color model Indexed color Palette Web-safe color
This box: view talk edit

Another set of 216 color values is commonly considered to be the "websafe" color palette, developed at a time when many computer displays were only capable of displaying 256 colors. A set of colors was needed that could be shown without dithering on 256-color displays; the number 216 was chosen partly because computer operating systems customarily reserved sixteen to twenty colors for their own use; it was also selected because it allows exactly six shades each of red, green, and blue (6 6 6 = 216). The list of colors is often presented as if it has special properties that render them immune to dithering. In fact, on 256-color displays applications can set a palette of any selection of colors that they choose, dithering the rest. These

colors were chosen specifically because they matched the palettes selected by the then leading browser applications. Fortunately, there were not radically different palettes in use in different popular browsers. "Web-safe" colors had a flaw in that, on systems such as X11 where the palette is shared between applications, smaller color cubes (5x5x5 or 4x4x4) were often allocated by browsers thus, the "web safe" colors would actually dither on such systems. Better results were obtained by providing an image with a larger range of colors and allowing the browser to quantize the color space if needed, rather than suffer the quality loss of a double quantization. As of 2007, personal computers typically have at least 16-bit color and usually 24-bit (TrueColor). Even mobile devices have at least 16-bit color, driven by the inclusion of cameras on cellphones. The use of "web-safe" colors has fallen into practical disuse, but persisted in culture. The web-safe palette system persists as being the palette with the greatest number of distinct colors, where each color can be distinguished individually by human eyes. This led to the use of web-safe colors in antiphishing systems.[8] The "web-safe" colors do not all have names, but each can be specified by an RGB triplet. Below are the values for the 6 shades of each color out of 256 possible color shades. 6 shades of each color digit hexadecimal decimal 0 00 0 3 33 51 6 66 102 9 99 153 C or (12) CC 204 F or (15) FF 255 The following table shows all of the "web-safe" colors, underlining the really-safe colors. The lack of gamma correction means that the six desired intensities 0%, 20%, 40%, 60%, 80%, and 100% are displayed as 0%, 2%, 10%, 28%, 57%, and 100% on a Windows standard 2.5 gamma CRT or

LCD, making most colors very dark. The intensities at the low end of the range, especially 0 and 3, are nearly indistinguishable from each other:
Color table
Note that in the table below, each color code listed is a short-hand for the RGB value; for example, code 609 is equivalent to RGB code 660099. Web-Safe Colors 600 900 603 903 606 906 609 909 60C 90C 60F 90F 630 930 633 933 636 936 639 939 63C 93C 63F 93F 660 960 663 963 666 966 669 969 66C 96C 66F 96F 690 990 693 993 696 996 699 999 69C 99C 69F 99F 6C0 9C0 6C3 9C3 6C6 9C6 6C9 9C9 6CC 9CC 6CF 9CF *6F0* 9F0 *6F3* 9F3 6F6 9F6

*000* *003* 006 009 00C *00F* 030 033 036 039 03C 03F 060 063 066 069 06C 06F 090 093 096 099 09C 09F 0C0 0C3 0C6 0C9 0CC 0CF *0F0* 0F3 *0F6*

300 303 306 309 30C 30F 330 333 336 339 33C 33F 360 363 366 369 36C 36F 390 393 396 399 39C 39F 3C0 3C3 3C6 3C9 3CC 3CF 3F0 *3F3* *3F6*

C00 C03 C06 C09 C0C C0F C30 C33 C36 C39 C3C C3F C60 C63 C66 C69 C6C C6F C90 C93 C96 C99 C9C C9F CC0 CC3 CC6 CC9 CCC CCF CF0 CF3 *CF6*

*F00* *F03* F06 F09 F0C *F0F* F30 F33 F36 F39 F3C F3F F60 F63 F66 F69 F6C F6F F90 F93 F96 F99 F9C F9F FC0 FC3 FC6 FC9 FCC FCF *FF0* *FF3* *FF6*

0F9 *0FC* *0FF*

3F9 *3FC* *3FF*

6F9 6FC *6FF*

9F9 9FC 9FF

CF9 CFC CFF

FF9 FFC *FFF*

Safest web colors

Designers were often encouraged to stick to these 216 "web-safe" colors in their websites; however, 8-bit color displays were much more common when the 216-color palette was developed than they are now. David Lehn and Hadley Stern have since discovered that only 22 of the 216 colors in the web-safe palette are reliably displayed without inconsistent remapping on 16-bit computer displays. They called these 22 colors the "really safe" palette; it consists mainly of shades of green and yellow, as can be seen in the table above, where the "really safe" colors are underlined. [9]

CSS colors
The Cascading Style Sheets language defines the same number of named colors as the HTML 4 spec, namely the 16 listed previously. Additionally, CSS 2.1 adds the 'orange' color name to the list:
Color Hexadecimal orange #FFA500

CSS 2, SVG and CSS 2.1 also allow web authors to use so-called system colors, which are color names whose values are taken from the operating system. This enables web authors to style their content in line with the operating system of the user agent.[10] As of early 2004, it appears that the CSS3 color module will once again drop these values, marking them deprecated, but this may change.[11] The developing CSS3 specification will also introduce HSL color space values to style sheets:

/* RGB model */ p { color: #F00 } /* #rgb */ p { color: #FF0000 } /* #rrggbb */ p { color: rgb(255,0,0) } /* integer range 0 - 255 */ p { color: rgb(100%, 0%, 0%) } /* float range 0.0% - 100.0% */ /* RGB with alpha channel, added to CSS3 */ p { color: rgba(255,0,0,0.5) } /* 0.5 opacity, semi-transparent */ /* HSL model, added to CSS3 */ p { color: hsl(0, 100%, 50%) } /* red */ p { color: hsl(120, 100%, 50%) } /* green */ p { color: hsl(120, 100%, 25%) } /* dark green */ p { color: hsl(120, 100%, 75%) } /* light green */ p { color: hsl(120, 50%, 50%) } /* pastel green */ /* HSL model with alpha channel */ p { color: hsla(120, 100%, 50%, 1) } /* green */ p { color: hsla(120, 100%, 50%, 0.5) } /* semi-transparent green */ p { color: hsla(120, 100%, 50%, 0.1) } /* very transparent green */

Accessibility

Some browsers and devices do not support colors. For blind and colorblind users, Web content depending on colors can be unusable or difficult to use. Mixing legacy markup like bgcolor with modern CSS fails for legacy browsers not supporting CSS. Both foreground and background color should be modified to avoid black on black effects.

Popular browsers show links as shades of blue. Dark background colors, such as blue or navy, do not display well for such links. Using CSS to modify link colors does not work with legacy browsers. For example, in Netscape 4.x support for CSS is frequently disabled for being rather paltry.
[citation needed]

See also

List of palettes Color tool List of colors

Interaction design
Interaction Design (IxD) is the discipline of defining the behavior of products and systems that a user can interact with. The practice typically centers around complex technology systems such as software, mobile devices, and other electronic devices. However, it can also apply to other types of products and services, and even organizations themselves. Interaction design defines the behavior (the "interaction") of an artifact or system in response to its users. Certain basic principles of cognitive psychology provide grounding for interaction design. These include mental models, mapping, interface metaphors, and affordances. Many of these are laid out in Donald Norman's influential book The Design of Everyday Things. Academic research in Human Computer Interaction (HCI) includes methods for describing and testing the usability of interacting with an interface, such as cognitive dimensions and the cognitive walkthrough. Interaction designers are typically informed through iterative cycles of user research. They design with an emphasis on user goals and experience, and evaluate designs in terms of usability and affective influence.

Contents
[hide]

1 User-centered interaction design 2 Relationship with user interface design 3 Methodologies o 3.1 1. Design research o 3.2 2. Research analysis and concept generation o 3.3 3. Alternative design and evaluation o 3.4 4. Prototyping and usability testing o 3.5 5. Implementation o 3.6 6. System testing 4 Aspects of interaction design o 4.1 Social interaction design o 4.2 Affective interaction design 5 Interaction design domains 6 History 7 See also 8 References 9 Further reading 10 External links

User-centered interaction design

As new technologies are often overly complex for their intended target audience, interaction design aims to minimize the learning curve and to increase accuracy and efficiency of a task without diminishing usefulness. The objective is to reduce frustration and increase user productivity and satisfaction. Interaction design attempts to improve the usability and experience of the product, by first researching and understanding certain users' needs and then designing to meet and exceed them. (Figuring out who needs to use it, and how those people would like to use it.)

Only by involving users who will use a product or system on a regular basis will designers be able to properly tailor and maximize usability. Involving real users, designers gain the ability to better understand user goals and experiences. (see also: User-centered design) There are also positive side effects which include enhanced system capability awareness and user ownership. It is important that the user be aware of system capabilities from an early stage so that expectations regarding functionality are both realistic and properly understood. Also, users who have been active participants in a product's development are more likely to feel a sense of ownership, thus increasing overall satisfaction.

Relationship with user interface design

Interaction Design is often associated with the design of system interfaces in a variety of media (see also: Interface design, Experience design) but concentrates on the aspects of the interface that define and present its behavior over time, with a focus on developing the system to respond to the user's experience and not the other way around. The system interface can be thought of as the artifact (whether visual or other sensory) that represents an offering's designed interactions. Interactive voice response (Telephone User Interface) is an example of interaction design without graphical user interface as a media. Interactivity, however, is not limited to technological systems. People have been interacting with each other as long as humans have been a species. Therefore, interaction design can be applied to the development of all solutions (or offerings), such as services and events. Those who design these offerings have, typically, performed interaction design inherently without naming it as such.

Methodologies
Interaction designers often follow similar processes to create a solution (not the solution) to a known interface design problem. Designers build rapid prototypes and test them with the users to validate or rebut the idea. There are six major steps in interaction design. Based on user feedback, several iteration cycles of any set of steps may occur.
1. Design research

Using design research techniques (observations, interviews, questionnaires, and related activities) designers investigate users and their environment in order to learn more about them and thus be better able to design for them.

2. Research analysis and concept generation Drawing on a combination of user research, technological possibilities, and business opportunities, designers create concepts for new software, products, services, or systems. This process may involve multiple rounds of brainstorming, discussion, and refinement. To help designers realize user requirements, they may use tools such as personas or user profiles that are reflective of their targeted user group. From these personae, and the patterns of behavior observed in the research, designers create scenarios (or user stories) or storyboards, which imagine a future work flow the users will go through using the product or service. After thorough analysis using various tools and models, designers create a high level summary spanning across all levels of user requirements. This includes a vision statement regarding the current and future goals of a project.

3. Alternative design and evaluation

Once clear view of the problem space exists, designers will develop alternative solutions with crude prototypes to help convey concepts and ideas. Proposed solutions are evaluated and perhaps even merged. The end result should be a design that solves as many of the user requirements as possible. Some tools that may be used for this process are wireframing and flow diagrams. The features and functionality of a product or service are often outlined in a document known as a wireframe ("schematics" is an alternate term). Wireframes are a page-by-page or screen-by-screen detail of the system, which include notes ("annotations") as to how the system will

operate. Flow Diagrams outline the logic and steps of the system or an individual feature.

4. Prototyping and usability testing

Interaction designers use a variety of prototyping techniques to test aspects of design ideas. These can be roughly divided into three classes: those that test the role of an artifact, those that test its look and feel and those that test its implementation. Sometimes, these are called experience prototypes to emphasize their interactive nature. Prototypes can be physical or digital, high- or low-fidelity.
5. Implementation

Interaction designers need to be involved during the development of the product or service to ensure that what was designed is implemented correctly. Often, changes need to be made during the building process, and interaction designers should be involved with any of the on-the-fly modifications to the design.
6. System testing

Once the system is built, often another round of testing, for both usability and errors ("bug catching") is performed. Ideally, the designer will be involved here as well, to make any modifications to the system that are required.

Aspects of interaction design

Social interaction design

Social interaction design (SxD) is emerging because many of our computing devices have become networked and have begun to integrate communication capabilities. Phones, digital assistants and the myriad connected devices from computers to games facilitate talk and social interaction. Social interaction design accounts for interactions among users as well as between users and their devices. The dynamics of interpersonal communication, speech and writing, the pragmatics of talk and interaction--these now become critical factors in the use of social technologies. And they are factors

described less by an approach steeped in the rational choice approach taken by cognitive science than that by sociology, psychology, and anthropology.

Affective interaction design

Throughout the process of interaction design, designers must be aware of key aspects in their designs that influence emotional responses in target users. The need for products to convey positive emotions and avoid negative ones is critical to product success.[1] These aspects include positive, negative, motivational, learning, creative, social and persuasive influences to name a few. One method that can help convey such aspects is the use of expressive interfaces. In software, for example, the use of dynamic icons, animations and sound can help communicate a state of operation, creating a sense of interactivity and feedback. Interface aspects such as fonts, color pallet, and graphical layouts can also influence an interface's perceived effectiveness. Studies have shown that affective aspects can affect a user's perception of usability.[1] Emotional and pleasure theories exist to explain peoples responses to the use of interactive products. These includes Don Norman's emotional design model, Patrick Jordan's pleasure model, and McCarthy and Wright's Technology as Experience framework.

Interaction design domains Interaction designers work in many areas, including software interfaces, (business) information systems, internet, physical products, environments, services, and systems which may combine many of these. Each area requires its own skills and approaches, but there are aspects of interaction design common to all. Interaction designers often work in interdisciplinary teams as their work requires expertise in many different domains, including graphic design,

programming, psychology, user testing, product design, etc (see below for more related disciplines). Thus, they need to understand enough of these fields to work effectively with specialists.

History
The term interaction design was first proposed by Bill Moggridge[2] and Bill Verplank in the late 1980s. To Verplank, it was an adaptation of the computer science term user interface design to the industrial design profession.[3] To Moggridge, it was an improvement over soft-face, which he had coined in 1984 to refer to the application of industrial design to products containing software (Moggridge 2006). In 1989, Gillian Crampton-Smith established an interaction design MA at the Royal College of Art in London (originally entitled "computer-related design" and now known as "design interactions"). In 2001, she helped found the Interaction Design Institute Ivrea, a small institute in Northern Italy dedicated solely to interaction design; the institute moved to Milan in October 2005 and merged courses with Domus Academy. Today, interaction design is taught in many schools worldwide.

User interface design

User interface design or user interface engineering is the design of computers, appliances, machines, mobile communication devices, software applications, and websites with the focus on the user's experience and interaction. Where traditional graphic design seeks to make the object or application physically attractive, the goal of user interface design is to make the user's interaction as simple and efficient as possible, in terms of accomplishing user goalswhat is often called user-centered design. Where good graphic/industrial design is bold and eye catching, good user interface design is to facilitate finishing the task at hand over drawing unnecessary attention to itself. Graphic design may be utilized to apply a theme or style to the interface without compromising its usability. The design process of an interface must balance the meaning of its visual elements that conform the mental model of operation, and the functionality from a technical engineering perspective, in order to create a system that is both usable and easy to adapt to the changing user needs. User Interface design is involved in a wide range of projects from computer systems, to cars, to commercial planes; all of these projects involve much of the same basic human interaction yet also require some unique skills and knowledge. As a result, user interface designers tend to specialize in certain types of projects and have skills centered around their expertise, whether that be software design, user research, web design, or industrial design.

Processes
There are several phases and processes in the user interface design some of which are more demanded upon than others depending on the project. (note for the remainder of this section the word system is used to denote any project whether it is a web site, application, or device)

Functionality requirements gathering assembling a list of the functionality required of the system to accomplish the goals of the project and the potential needs of the users. User analysis analysis of the potential users of the system either through discussion with people who work with the users and/or the potential users themselves. Typical questions involve: o What would the user want the system to do? o How would the system fit in with the user's normal workflow or daily activities? o How technically savvy is the user and what similar systems does the user already use? o What interface look & feel styles appeal to the user? Information architecture development of the process and/or information flow of the system (i.e. for phone tree systems, this would be an option tree flowchart and for web sites this would be a site flow that shows the hierarchy of the pages). Prototyping development of wireframes, either in the form of paper prototypes or simple interactive screens. These prototypes are stripped of all look & feel elements and most content in order to concentrate on the interface. Usability testing testing of the prototypes on an actual useroften using a technique called talk aloud protocol where you ask the user to talk about their thoughts during the experience. Graphic Interface design actual look & feel design of the final graphical user interface (GUI). It may be based on the findings developed during the usability testing if usability is unpredictable, or based on communication objectives and styles that would appeal to the user. In rare cases, the graphics may drive the prototyping, depending on the importance of visual form versus function. If the interface requires multiple skins, there may be multiple interface designs for one control panel, functional feature or widget. This phase is often a collaborative effort between a graphic designer and a user

interface designer, or handled by one who is proficient in both disciplines.

User interface design requires a good understanding of user needs.

Search Webmasters/Site ow ners Help

Webmasters/Site owners Help

Get Google Help Webmasters/Site owners Help Recommend started My site and Google Google-friendly sites ed Webmast Webmaster Guidelines er articles Guideline Webmaster Guidelines s 1. About About Sitemaps Following these guidelines will help Google find, Webmast 2. Ranking index, and rank your site. Even if you choose not er Tools 3. Search to implement any of these suggestions, we Explore Engine strongly encourage you to pay very close attention Google Optimization to the "Quality Guidelines," which outline some About (SEO) of the illicit practices that may lead to a site being Google 4. Adding a site removed entirely from the Google index or search to Google otherwise penalized. If a site has been penalized, results 5. Google 101: it may no longer show up in results on Services How Google Google.com or on any of Google's partner sites. and tools crawls, Business indexes, and solutions serves the

Design and content guidelines

Learn more... Learn more... Learn more...

web

Technical guidelines

Help resources

Quality guidelines

Webmaster Help Forum Learn from other users

When your site is ready:

Submit it to Google at http://www.google.com/addurl.html.

Webmaster Tools Data API Free service for webmasters

Advertisi ng

Submit a Sitemap using Google Webmaster Tools. Google uses your Sitemap to learn about the structure of your site and to increase our coverage of your webpages.

Third-party Sitemap Tools Tools for creating Sitemaps

Make sure all the sites that should know about your pages are aware your site is online.

Design and content guidelines

back to top

Webmaster Tools on YouTube See tips and tricks

Make a site with a clear hierarchy and text links. Every page should be reachable from at least one static text link.

Video tutorial Tools for webmasters

Offer a site map to your users with links that point to the important parts of your site. If the site map is larger than 100 or so links, you may want to break the site map

into separate pages.

Create a useful, information-rich site, and write pages that clearly and accurately describe your content.

Think about the words users would type to find your pages, and make sure that your site actually includes those words within it.

Try to use text instead of images to display important names, content, or links. The Google crawler doesn't recognize text contained in images.

Make sure that your <title> elements and alt attributes are descriptive and accurate.

Check for broken links and correct HTML.

If you decide to use dynamic pages (i.e., the URL contains a "?" character), be aware that not every search engine spider crawls dynamic pages as well as static pages. It helps to keep the parameters short and the number of them few.

Keep the links on a given page to a reasonable number (fewer than 100).

Technical guidelines

back to top

Use a text browser such as Lynx to examine your site, because most search engine spiders see your site much as Lynx would. If fancy features such as JavaScript, cookies, session IDs, frames, DHTML, or Flash keep you from seeing all of your site in a text browser, then search engine spiders may have trouble crawling your site.

Allow search bots to crawl your sites without session IDs or arguments that track their path through the site. These techniques are useful for tracking individual user behavior, but the access pattern of bots is entirely different. Using these techniques may result in incomplete indexing of your site, as bots may not be able to eliminate URLs that look different but actually point to the same page.

Make sure your web server supports the IfModified-Since HTTP header. This feature allows your web server to tell Google whether your content has changed since we last crawled your site. Supporting this feature saves you bandwidth and overhead.

Make use of the robots.txt file on your web server. This file tells crawlers which directories can or cannot be crawled. Make sure it's current for your site so that you don't accidentally block the Googlebot crawler. Visit http://www.robotstxt.org/faq.html to learn how to instruct robots when they visit your site. You can test your robots.txt file to

make sure you're using it correctly with the robots.txt analysis tool available in Google Webmaster Tools.

If your company buys a content management system, make sure that the system can export your content so that search engine spiders can crawl your site.

Use robots.txt to prevent crawling of search results pages or other autogenerated pages that don't add much value for users coming from search engines.

Test your site to make sure that it appears correctly in different browsers. back to top

Quality guidelines

These quality guidelines cover the most common forms of deceptive or manipulative behavior, but Google may respond negatively to other misleading practices not listed here (e.g. tricking users by registering misspellings of well-known websites). It's not safe to assume that just because a specific deceptive technique isn't included on this page, Google approves of it. Webmasters who spend their energies upholding the spirit of the basic principles will provide a much better user experience and subsequently enjoy better ranking than those who spend their time looking for loopholes they can exploit. If you believe that another site is abusing Google's quality guidelines, please report that site at https://www.google.com/webmasters/tools/spamre port. Google prefers developing scalable and automated solutions to problems, so we attempt to

minimize hand-to-hand spam fighting. The spam reports we receive are used to create scalable algorithms that recognize and block future spam attempts.

Quality guidelines - basic principles

Make pages primarily for users, not for search engines. Don't deceive your users or present different content to search engines than you display to users, which is commonly referred to as "cloaking."

Avoid tricks intended to improve search engine rankings. A good rule of thumb is whether you'd feel comfortable explaining what you've done to a website that competes with you. Another useful test is to ask, "Does this help my users? Would I do this if search engines didn't exist?"

Don't participate in link schemes designed to increase your site's ranking or PageRank. In particular, avoid links to web spammers or "bad neighborhoods" on the web, as your own ranking may be affected adversely by those links.

Don't use unauthorized computer programs to submit pages, check rankings, etc. Such programs consume computing

resources and violate our Terms of Service. Google does not recommend the use of products such as WebPosition Gold that send automatic or programmatic queries to Google.

Quality guidelines - specific guidelines

Avoid hidden text or hidden links.

Don't use cloaking or sneaky redirects.

Don't send automated queries to Google.

Don't load pages with irrelevant keywords.

Don't create multiple pages, subdomains, or domains with substantially duplicate content.

Don't create pages with malicious behavior, such as phishing or installing viruses, trojans, or other badware.

Avoid "doorway" pages created just for search engines, or other "cookie cutter" approaches such as affiliate programs with little or no original content.

If your site participates in an affiliate program, make sure that your site adds value. Provide unique and relevant content that gives users a reason to visit your site first.

If you determine that your site doesn't meet these guidelines, you can modify your site so that it does and then submit your site for reconsideration.

Was this information helpful?

Yes No

You may also be interested in...

Other helpful articles:

How do I add my site to Google's search results? How can I create a Google-friendly site?

Website architecture
Website architecture is an approach to the design and planning of websites which, like architecture itself involves technical, aesthetic and functional criteria. As in traditional architecture, the focus is properly on the user and on user requirements. This requires particular attention to web content, a business plan, usability, interaction design, information architecture and web

design. For effective Search Engine Optimisation it is necessary to have an appreciation of how a single website relates to the World Wide Web. Since web content planning, design and management come within the scope of design methods, the traditional Vitruvian aims of Commodity, Firmness and Delight can guide the architecture of websites, as they do physical architecture and other design disciplines. Website architecture is coming within the scope of Aesthetics and Critical Theory and this trend may accelerate with the advent of the Semantic Web and Web 2.0. Both ideas emphasise the structural aspects of information. Structuralism is an approach to knowledge which has influenced a number of academic disciplines including aesthetics, critical theory and postmodernism. Web 2.0, because it involves user-generated content, directs the website architect's attention to the structural aspects of information. "Website architecture" has the potential to be a term used for the intellectual discipline of organizing website content. "Web design", by way of contrast, describes the practical tasks, part-graphic and part-technical, of designing and publishing a website. The distinction compares to that between the task of editing a newspaper or magazine and its graphic design and printing. But the link between editorial and production activities is much closer for web publications than for print publications.

Website design styles

see also: Website design styles

Over the short history of the web, various architectural and artistic styles have developed among different online language, national, social and cultural communities. Such differences in website design styles would set European websites apart from North American ones, Taiwanese websites from the ones originated in Mainland China (marked by the tendency to proliferate pop-up windows activated by left-click), Japanese (marked by employment of bright colors and flashing cute anime characters) from Korean (marked by gray text-white background, clean, "MacIntosh"-style interface). Especially innovative is a style originated in the Netherlands and other Dutch-speaking online communities, of the web interface heavily drawing on flash and postmodern visual arts at the expense of text and ordinary functionality.

Document Object Model

Hierarchy of objects in an example HTML DOM - Document Object Model The Document Object Model (DOM) is a platform- and languageindependent standard object model for representing HTML or XML documents as well as an Application Programming Interface (API) for querying, traversing and manipulating such documents.

Contents
[hide]

1 History o 1.1 Legacy DOM o 1.2 Intermediate DOM o 1.3 Standardization 2 Applications o 2.1 Web browsers 3 Implementations o 3.1 Layout engines o 3.2 Libraries 4 See also 5 References 6 External links o 6.1 Specifications
o

6.2 Bindings

History
The history of the Document Object Model is intertwined with the history of the "browser wars" of the late 1990s between Netscape Navigator and Microsoft Internet Explorer, as well as that of JavaScript and JScript, the first scripting languages to be widely implemented in the layout engines of web browsers.
Legacy DOM

JavaScript was released by Netscape Communications in 1996 as part of Netscape Navigator 2.0. Netscape's competitor, Microsoft released Internet Explorer 3.0 later the same year with a port of JavaScript called JScript. JavaScript and JScript enabled web developers to create web pages with client-side interactivity. The limited facilities for detecting user-generated events and modifying the HTML document in the first generation of these

languages eventually became known as "DOM Level 0" or "Legacy DOM". No independent standard was developed for DOM Level 0, but it was partly described in the specification of HTML4. Legacy DOM was limited in the kinds of elements that could be accessed. Form, link and image elements could be referenced with a hierarchical name that began with the root document object. A hierarchical name could make use of either the names or the sequential index of the traversed elements. For example, a form input element could be accessed as either
"document.formName.inputName" or "document.forms[0].elements[0]".

The Legacy DOM enabled client-side form validation and the popular "rollover" effect.
Intermediate DOM

In 1997, Netscape and Microsoft released version 4.0 of Netscape Navigator and Internet Explorer, adding support for Dynamic HTML (DHTML), functionality enabling changes to a loaded HTML document. DHTML required extensions to the rudimentary document object that was available in the Legacy DOM implementations. Although the Legacy DOM implementations were largely compatible since JScript was based on JavaScript, the DHTML DOM extensions were developed in parallel by each browser maker and remained incompatible. These versions of the DOM became known as the "Intermediate DOM." The Intermediate DOMs enabled the manipulation of Cascading Style Sheet (CSS) properties which influence the display of a document. They also provided access to a new feature called "layers" via the "document.layers" property (Netscape Navigator) and the "document.all" property (Internet Explorer). Because of the fundamental incompatibilities in the Intermediate DOMs, cross-browser development required special handling for each supported browser. Subsequent versions of Netscape Navigator abandoned support for its Intermediate DOM. Internet Explorer continues to support its Intermediate DOM for backwards compatibility.

Standardization

The World Wide Web Consortium (W3C), founded in 1994 to promote open standards for the World Wide Web, brought Netscape Communications and Microsoft together with other companies to develop a standard for browser scripting languages, called "ECMAScript". The first version of the standard was published in 1997. Subsequent releases of JavaScript and JScript would implement the ECMAScript standard for greater cross-browser compatibility. After the release of ECMAScript, W3C began work on a standardized DOM. The initial DOM standard, known as "DOM Level 1," was recommended by W3C in late 1998. About the same time, Internet Explorer 5.0 shipped with limited support for DOM Level 1. DOM Level 1 provided a complete model for an entire HTML or XML document, including means to change any portion of the document. Non-conformant browsers such as Internet Explorer 4.x and Netscape 4.x were still widely used as late as 2000. DOM Level 2 was published in late 2000. It introduced the "getElementById" function as well as an event model and support for XML namespaces and CSS. DOM Level 3, the current release of the DOM specification, published in April 2004, added support for XPath and keyboard event handling, as well as an interface for serializing documents as XML. By 2005, large parts of W3C DOM were well-supported by common ECMAScript-enabled browsers, including Microsoft Internet Explorer version 6 (2001), Gecko-based browsers (like Mozilla, Firefox and Camino), Konqueror, Opera, and Safari.

Applications
DOM is likely to be best suited for applications where the document must be accessed repeatedly or out of sequence order. If the application is strictly sequential and one-pass, the SAX model is likely to be faster and use less memory. In addition, non-extractive XML parsing models, such as VTDXML, provide a new memory-efficient option.

Web browsers
A web browser is not obliged to use DOM in order to render an HTML document. However, the DOM is required by JavaScript scripts that wish to inspect or modify a web page dynamically. In other words, the Document Object Model is the way JavaScript sees its containing HTML page and browser state.

Implementations
Because DOM supports navigation in any direction (e.g., parent and previous sibling) and allows for arbitrary modifications, an implementation must at least buffer the document that has been read so far (or some parsed form of it).
Layout engines

Web browsers rely on layout engines to parse HTML into a DOM. Some layout engines such as Gecko or Trident/MSHTML are associated primarily or exclusively with a particular browser such as Firefox or Internet Explorer. Others, such as WebKit, are shared by a number of browsers, such as Safari and Google Chrome. Various layout engines implement the DOM standards to varying degrees.

Libraries

JAXP (Java API for XML Processing) libxml2 MSXML VTD-XML for building SOA intermediary applications Xerces

See also

DOM scripting

JDOM - A Java-based document object model for XML that integrates with DOM and SAX and uses parsers to build the document. SXML - a model for representing XML and HTML in the form of S-expressions Ajax - A methodology employing DOM in combination with techniques for retrieving data without reloading a page. TinyXml - efficient platform-independent XML library for C++

Web page layout

A web page layout refers to the structural design of a web page being served up on the World Wide Web. There are various key sections or components that make up the core layout of a web page: the header, body, and footer. Other sections that contribute to the web page layout are the channels (or rails) and ankle.

Contents
[hide]

1 Header 2 Body 3 Footer 4 Channel 5 Ankle

Header
The web page header represents the heading of the web page. The header usually contains some sort of graphical element such as a masthead, corporate logo, or web site title. Other elements such as utility navigation, a search form, or even site navigation can also be included in the header.

Body
The web page body contains the primary content of the page. The body is usually positioned between the page header and page footer.

Footer
The web page footer contains ancillary content usually comprised of official notices (such as legal policies and copyright declarations) and auxiliary hyperlinks to internal page content. The footer is normally the last rendered bit of content on a page by the web browser.

Channel
The web page channel or web page rail contains meta links or other auxiliary content that supports the web page body content. Subnavigation or submenus may also be displayed in the channel.

Ankle
The web page ankle contains additional internal hyperlinks and other relevant content to the web site. With the increase in popularity of the AJAX driven content and menuing systems, the ankle servers as a redundant method to guarantee critical hyperlinked web content is indexed by search engines and Internet spiders. The ankle is usually positioned between the web page body content and the web page footer

ECMAScript (JavaScript)
Here is an equivalent example in ECMAScript:
// Without reflection new Foo().hello() // With reflection // assuming that Foo resides in this new this['Foo']()['hello']() // or without assumption new (eval('Foo'))()['hello']()

Page layout

Consumer magazine sponsored advertisements and covers rely heavily on professional page layout skills to compete for visual attention. Page layout is the part of graphic design that deals in the arrangement and style treatment of elements (content) on a page. Beginning from early illuminated pages in hand-copied books of the Middle Ages and proceeding down to intricate modern magazine and catalog layouts, proper page design has long been a consideration in printed material. With print media, elements usually consist of type (text), images (pictures), and occasionally place-holder graphics for elements that are not printed with ink such as die/laser cutting, foil stamping or blind embossing. Since the advent of personal computing, page layout skills have expanded to electronic media as well as print media. The electronic page is better known as a graphical user interface (GUI) when interactive elements are included. Page layout for interactive media overlaps with (and is often called) interface design. This usually includes interactive elements and multimedia in addition to text and still images. Interactivity takes page layout skills from planning attraction and eye flow to the next level of planning user

experience in collaboration with software engineers and creative directors.

[citation needed]

A page layout may be designed in a rough paper and pencil sketch before producing, or produced during the design process to the final form. Both design and production may be achieved using hand tools or page layout software. Producing the most popular electronic page (the web page) may require knowledge of markup languages along with WYSIWYG editors to compensate for incompatibility between platforms. Special considerations must be made for how the layout of an HTML page will change (reflow) when resized by the end-user. Cascading style sheets are often required to keep the page layout consistent between web browsers.

Grids versus templates

Grids and templates are page layout design patterns used in advertising campaigns and multiple page publications, including websites.

A grid is a set of guidelines, visible in the design process and invisible to the end-user/audience, for aligning and repeating elements on a page. A page layout may or may not stay within those guidelines, depending on how much repetition or variety the design style in the series calls for. Grids are meant to be flexible. Using a grid to layout elements on the page may require just as much or more graphic design skill than that which was required to design the grid. In contrast, a template is more rigid. A template involves repeated elements mostly visible to the end-user/audience. Using a template to layout elements usually involves less graphic design skill than that which was required to design the template. Templates are used for minimal modification of background elements and frequent modification (or swapping) of foreground content.

Most desktop publishing software allows for grids in the form of a page filled with automatic dots placed at a specified equal horizontal and vertical distance apart. Automatic margins and booklet spine (gutter) lines may be specified for global use throughout the document. Multiple additional horizontal and vertical lines may be placed at any point on the page.

Invisible to the end-user/audience shapes may be placed on the page as guidelines for page layout and print processing as well. Software templates are achieved by duplicating a template data file, or with master page features in a multiple page document. Master pages may include both grid elements and template elements such as header and footer elements, automatic page numbering, and automatic table of contents features.

Front-end versus back-end

With modern media content retrieval and output technology, there is much overlap between visual communications (front-end) and information technology (back-end). Large print publications (thick books, especially instructional in nature) and electronic pages (web pages) require meta data for automatic indexing, automatic reformatting, database publishing, dynamic page display and end-user interactivity. Much of the meta data (meta tags) must be hand coded or specified during the page layout process. This divides the task of page layout between artists and engineers, or tasks the artist/engineer to do both. More complex projects may require two separate designs: page layout design as the front-end, and function coding as the back-end. In this case, the front-end may be designed using the alternate page layout technology such as image editing software or on paper with hand rendering methods. Most image editing software includes features for converting a page layout for use in a "What You See Is What You Get" (WYSIWYG) editor or features to

export graphics for desktop publishing software. WYSIWYG editors and desktop publishing software allow front-end design prior to back end-coding in most cases. Interface design and database publishing may involve more technical knowledge or collaboration with information technology engineering in the front-end.