Website Auditing
When a business begins to become concerned about the traffic on their site, their conversion rates, or the amount of returning viewer it is time to consider having a web site audit performed. The basics of a web site audit are simple and basic, but the first question to ask is whether or not the site is ready for an audit. Common reasons(questions) the site is ready for an audit include:What is the goal of this site and are we accomplishing that goal?
How can we increase our visitor-to-customer rate (this is also known as a conversion rate, you want visitors to return to your site in order to create business or in order for your information to be heard)
How can we generate more sales (or how can you generate more usage of the services you are providing)
When these questions are brought to the forefront it is a sure sign you are ready for an audit. The purpose of a web site audit is to have an outside perspective of your site and review all the ways the visitors experience can be improved through you site. This improved experience can lead to greater sales, accessibility, and the ability to have your information in the hands of consumers.
Elements that will be reviewed by auditors:
- Competitors Websites
- "Call-to-Action"
- Usability Issues and Interface Design
- Search Engine Optimization
- Brand Equity
Auditing Resources:
Are you ready for a Website Audit?
Web Site Audit Template
Website Audit & Recommendations Report
Widget Checklist -- netconcepts.com
The new features in the upcoming CSS3
CSS2 has been around for over 11 years and has allowed web page developers to add consistency, creative ideas, and change how viewers interact with the internet forever. However, it does seem odd that as technology rapidly changes that the current CSS we are using is 11 years old. CSS3 has been around, but it is not frequently used. The limited usage may be a result of the browser capabilities or the fact the designers just don't know much about it.Browser Capabilities -- before we talk about what CSS3 can do its important to understand how browsers understand CSS3.
- Vendor-specific extensions: Browsers have only partially activated some CSS3 elements. This is a result of the uncertainty that WC3 will recommend all CSS3 functions. As a result of users having to use extensions, style sheets can become large, disorganized, and time consuming as a result of how each browser reacts differently.
- -moz- : Gecko-based browsers such as Firefox
- -webkit- : Used with Safari
- -khtml- :Konqueror
- -o- : Opara
- -ms-: Internet Explorer
When looking at the element that CSS3 can provide designers we break them into 13 different categories. Each category does not necessarily work with all browsers.
- Selectors
- RGBA and Opacity
- Multi-Column Layout
- Multiple Backgrounds
- Word Wrap
- Text Shadow
- @font-face-Attribute
- Border Radius
- Border Image
- Box Shadow
- Box Sizing
- Media Queries
- Speech
The Differances of CSS1 and CSS2
Cascading Style Sheets was first developed in order to help web designers develop consistent pages with less coding. Before CSS was released web designers had to insert the style into each page on the web site. This could be very time consuming and also leave room for error, leaving pages inconsistent.CSS1 was introduced 13 years ago. Two years later an updated version (CSS2) came along, furthermore as we look into the future CSS3 is on the horizon. Looking back on web pages that were designed years ago it is easy to see how far we have traveled in designing esthetically pleasing web pages. With the new development in both CSS2 and CSS3 web pages can rise to an entirely new level.
CSS1 had basic features including limited font selections, usage of tables, and restricted positioning elements. While these features gave designers a new tools to use they only provided some flexibility in design. With the development of CSS2 designers were given many more useful resources.
CSS2 surround the concepts of accessibility. Below are a few ways that CSS2 allows designers to be creative, efficient, and effective.
- Aural Style Sheets -- Not only can web site be viewed, but they can now be heard. This allows to add another aspect to enrich the viewer experience of the web page. This feature also allows for blind viewers to access and use your page. Pages that have aural capabilities can be used in cars and other instances where reading may not be a good option.
- Paging -- This element allows for media to be placed on web pages such as slide shows, automated books, or paper. Features like this allow for designers to be able to effect how printing marks are viewed and modified.
- Media Types -- By having different rules set up for different media types the page handles each media type different, instead of lumping them together. The different types of media are aural, braille, hand held, screen, print, and others.
- International -- CSS2 can now appropriately handle international documents including bidirectional text or specific language features like language-sensitive quotation marks.
About.com - Article
JavaScript and DOM - Hand in Hand
JavaScript- Introduced in 1996 by Netscape as a way to add different and new elements to a web page.
- During this time Netscape dominated the Browser market.
- JavaScript's main purpose is to instruct the Browser on what do to by manipulating elements like height, width, and position of existing element or newly created elements.
- Document Object Model (DOM) was largely used when fourth generation browsers came out.
- Known as an API (Application Programming Interface) -- these are conventions that are agreed on by mutual consent. This is an interface between the user and the content. Some APIs are part of Facebook, Twitter, or Photobuck and allows users to share photos, videos, and other multimedia content.
- DOM scripting is a way for developers to conceptualize contents of a document on a web site.
- Different Levels of DOM:
- Level 0 -- This was the first level of DOM ever created and is used on basic terms for features such as rollover buttons or client validation.
- Level 1 -- Provides a DOM Core: This allows for a set of basic interfaces that are in most common documents as well as extending interfaces found in XML documents. Level 1 also provides HTML: A higher level of interfaces than the core. Interfaces introduced at this level were: Document, Node, Attr, Element, and Text.
- Level 2 -- This level provide us with DOM Core 2: which enhanced Core 1, DOM2 Views: this allows access to content to that it can be updated through programs or coding, DOM2 CSS: this allowed for progams to update or change current CSS sheets, DOM2 traversal and range, DOM2 HTML.
- Level 3 -- This level introduced a few new aspects including Load and Save, Validation, Events, and XPath. While these are new elements, this level also improved the DOM Core.
Best Practices
JavaScript:
- In the early stages developers did not approve or use JavaScript for several reasons including the similar name to Java (programming language). Many developers expected a more complex or powerful language, however this simple language can easily alter pages for new effects. Don't mistake the name for a new programming language, and just because it can look simple doesn't mean that it can provide new elements to web design.
- JavaScript was adopted because it was the only way that designers could manipulate objects within the page.
- Remember: Everyone can learn the basics of HTML. As a result of this there are many pages that have poor structure and want to use JavaScript without learning the language. Coping and Pasting script is not always the right way to do things and may cause the opposite effect you wanted. People can continually copy and past script and each time it becomes change. Be CAREFUL with script that is copied and pasted.
- When designing a web site ask the question: How will users experience be affected by JavaScript?
- Graceful Degradation: It is very common that users have browsers that are old or have JavaScript disabled. As a result of this the web page may not be navigable and users will not visit this site anymore. Use JavaScript correctly so that users can visit your site despite their status of JavaScript.
- Pseudo-protocol - Try to avoid using this as a reference to your JavaScript for several reasons. Old browsers won't understand the protocol and if JavaScript is disabled it will be a broken link.
- Backward Compatibility -- use this in the form of if statements to surround code. This way you can find out if the browser supports JavaScript and the code will act accordingly. This will prevent the problems with compatibility and broken links.
- Browser Wars -- When DOM scripting first came out the market was completely focused on Netscape, however as Internet Explorer came out the Browsers began to have a technology war. It is because of this that DOM scripting and JavaScript has become more useful and can do more things.
- The development of AJAX: Ajax is a new way that was developed to use DOM scripting. Web pages are even more interactive than before!
Dynamic HTML (DHTML)
Before browsers were capable of manipulating objects and creating spectacular pages, designers manually created script interactions through HTML. However, with the ever developing technology designers are able to use Javascript, HTML and CSS to create and manipulate pages so that users can interact with the page.DHTML = HTML + CSS + JavaScript
DHTML has become a useful tool to designers, users, and businesses within the internet, however despite its success it has the pitfall of having some compatibility problems. As a result of browsers being different particular objects may not be displayed and syntax may be different. A solution to this major problem is DOM scripting.
DOM Scripting
Document Object Model (DOM) is a WC3 standard and has helped to solve many of these compatibility problems. Designers can access the contents of a document in a more suitable way. There are several levels of DOM scripting that can be used to access HTML elements.
The main purpose of DOM scripting is to manipulate already existent tags as well as creating new tags or new elements. Adding, Moving, Deleting, and Editing elements are all made possible through JavaScript and DOM scripting.
Common Features using DHTML
- Last Modification Date
- Pull Down Menu Navigation
- Rollover Butoon
- Form Validation
