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 table-
based 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 Total Market Share

Microsoft Internet Explorer 66.10%
Firefox 22.48%
Safari 8.21%
Chrome 1.42%
Netscape 0.82%
Opera 0.68%
Mozilla 0.10%
Opera Mini 0.07%
Playstation 0.05%
ACCESS NetFront 0.02%
Blazer 0.02%
Microsoft Pocket Internet Explorer 0.01%
ANT Galio 0.00%
BlackBerry 0.00%
iCab 0.00%
WebTV 0.00%
Konqueror 0.00%
Lotus Notes 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

rafael.minuesa@gmail.com

Skype ID: bf.rafael.minuesa