Seo And Accessibility Web Report

Web Design, Accesibility and SEO issues concerning a high percentage of Web Sites Web Design Issues Main issue encountered is the use of TABLES instead of the recommended CSS layouts. Some of the advantages of using CSS TABLE-less designs are as follows: 1. Faster page loading Table-based layouts are notorious for having an extraneous amount of junk markup. The biggest drawback to using tables is that both the content (text, images) and visual information (layout, positioning, text sizes, etc) are contained within the same HTML or PHP file. With a CSS-based layout the visual information is stored within a CSS file(s). 2. Redesigns are more efficient Redesigning a website using tables is significantly slower than redesigning a website using CSS. By separating the visual data from the content, a web designer is able to easily make changes to the appearance of a single page (or multiple pages) by simply editing the external CSS style sheet. 3. Redesigns are faster to perform Redesigning a website using CSS should take much less time than redesigning a website using tables. 4. Visual consistency maintained throughout website(s) When using external CSS style sheets, it is much easier to maintain visual consistency throughout a website. Rather than having to edit the code of every page, adjusting column widths, column heights, spacer gifs, and all of the other ugliness that comes with tablebased layouts, CSS gives the designer control over elements that are used throughout a website, on a few pages, or on a single page. 5. Better for SEO CSS is superior than tables for Search Engine Optimization: • • • •

Smaller file size makes it easier for Search Engine Spiders to crawl the website. Less junk markup makes it easier for Search Engine Spiders to decipher between code and content Structural organization is greatly improved by using h1, h2, h3 tags ensuring that the Search Engine Spiders know what we’re trying to show them. Font tags cannot communicate a page title or header, even if the font size is larger. No more Javascript rollover effects. CSS allows the designer to program a variety of rollover effects (images, text decorations, etc) that are defined within the CSS style sheet. This method allows the Search Engine Spiders to focus more on the

website’s content rather than unnecessary Javascript markup. 6. Easier for teams to maintain (and individuals) CSS simplifies projects with multiple contributers. Rather than having to sift through page after page of junk markup found in table-based layouts, designers only need to open and edit the external CSS style sheet. In addition, as long as members of a team use descriptive selector tags in the style sheets(s), then it will make editing much easier for additional team members to go in and edit the file without needing to be briefed and educated about the style sheet’s contents and structure. 7. Increased usability From a website perspective, usability refers to the ease in which people are able to navigate, interact, and browse a website. Without strong usability, a website is destined to fail. There are a number of reasons why usability is better with CSS than with tables, such as: • Printer-friendly style sheets (CSS enables the web designer to serve different style sheets for different media types) •

Different versions of the website for different devices and resolutions

•

Faster page downloading with CSS

Accesibility Issues • •

•

alt texts are omitted: Search Engine software use alt text to identify images. Failing to provide these tags can therefore make visual content inaccessible. In the same fashion, content invideos should also be described for indexing. Nested tables are used: Nested tables usually linearise poorly. Linearisation is the process by which a table is read aloud by a screen reader or speech browser - i.e. cell-by-cell, one after the other, from left-to-right, top-to-bottom. This is the sequence that search engine crawlers use for indexing content as well. Deprecated align attribute(s): A deprecated attribute is a tag that is no longer supported as part of W3C's latest HTML standard. This means that browsers and assistive technologies are under no obligation to support it in future versions, thus potentially rendering its contents inaccessible.

Accessibility is absolutely necessary this day and age. By making websites more accessible using CSS, not only are we making content consumption and site navigation easier for users, but we’re also serving pages to search engines easily digestible. Bear in mind also that in some countries we can even be sued for not having an ccessible website and failing to accommodate those with various disabilities.

Display Issues

Browser Market Share April, 2009

Browser Microsoft Internet Explorer Firefox Safari Chrome Netscape Opera Mozilla Opera Mini Playstation ACCESS NetFront Blazer Microsoft Pocket Internet Explorer ANT Galio BlackBerry iCab WebTV Konqueror Lotus Notes

Total Market Share 66.10% 22.48% 8.21% 1.42% 0.82% 0.68% 0.10% 0.07% 0.05% 0.02% 0.02% 0.01% 0.00% 0.00% 0.00% 0.00% 0.00% 0.00%

You can view how the website looks like across different browsers at the following URL: http://browsershots.org/ Again, the best solution for achieving cross-browser consistency nowadays resides in optimal use of CSS instead of the obsolete code that it is being used right now. There are also several on-line services for testing how web pages would look on different browsers, that are free to use, such as: IE Net Renderer (http://ipinfo.info/netrenderer/) Browser Shots (http://browsershots.org/)

Conclusion: Many websites are badly in need and crying out for a modern CMS (Content Management System) that would take care automatically of the majority of issues described above, plus would allow for non-specialized staff to edit the content of the different sections without the assistance of a Web Developer/Designer. Among the different options available I would recommend either: Joomla (http://www.joomla.org/) or Drupal (http://drupal.org/) Both are Open Source (free) and have been tested thoroughly throughout many years. Joomla is easier to implement and maintain but Drupal (my personal preference) is far more powerful, specially for large sites.

Websites using Drupal: o Harvard Magazine (http://harvardmagazine.com/) o New York Observer (http://www.observer.com/) o The Onion (http://www.theonion.com/) o InfoWorld (http://infoworld.com/) o Virgin Radio (http://www.virginradio999.com/) o Nokia (http://research.nokia.com/) o Abc Family (http://abcfamily.go.com/) o Fox (http://foxsearchlight.com/) Websites using Joomla: o LA Weekly (http://www.laweekly.com/) o IT Wire (http://www.itwire.com/) o Jet Star (http://www.jetstar.com) o Vodafone Islandia (http://www.vodafone.is/) o EcoGeek (http://www.ecogeek.org/) o Danione (http://www.danone.com/) o Cable & Wireless (http://www.cw.com/) o Porsche Brasil (http://porsche.com.br/) o China Trade Data (http://chinatradedata.com/)

-- -- -- -- -- -- -- -- -- -- -- -- -- -Report prepared by: Rafael Minuesa Web Developer [email protected] Skype ID: bf.rafael.minuesa