Something I ran across in my free time over the last few days. I was surfing the web for student/campus ministry sites, when I saw that FOCUS (Fellowship of Catholic University Students) had re-designed their web site http://www.focusonline.org* . It looks radically different from their original site (which was designed using a black background, with white & yellow text). This looks a little bit cleaner in design, the color scheme is a little easier on the eyes and the site is a little better organized than their previous site… Pretty good site, except for one problem…
99% OF THE DESIGN ARE GRAPHICS! The site is completely made up of completely uncompressed images! The front page of their web site is 245k, where by comparison, Yahoo!’s front page is 24k. That’s right, FOCUS’s web site is 10x bigger than Yahoo’s main page. What does this mean? Well if you’re looking at this web site through dial up (which believe it or not, is still pretty widely used today), you can expect to wait 95 seconds on your 28.8 modem connection. With a 56k modem (the fastest dial-up speed), your wait time is cut down to a mere 49 seconds! On average, a user would be lucky to spend 15-30 seconds waiting for your page to load up.
It’s not the fact that the web site is graphics intensive, because there are graphics intensive web sites for legitimate reasons (i.e. an art web site, movie web sites that use a lot of Flash animation), but not only did they go overboard with using non-compressed images, but they committed the ultimate web-design sin of WRITING TEXT with their graphics editor. Someone opened up Photoshop, Paint Shop Pro or whatever they use for graphics and started typing in there as if it was Microsoft Word! Instead of taking a mere few seconds for your browser to download and format the text on it’s own, you’re now at the mercy of waiting for these graphics to download so you can read their web site! Unbelievable!
I know what you may be thinking – "Big deal, I have High-Speed Internet and I don’t have to worry about download times, this site still comes up in a few seconds over here." While that may be true, you are also blessed to be reading this with your two working eyes. You may not realize it, but visually-impaired people surf the internet as well, but they do it with the help of a browser that actually reads the web site to them! The browser software identifies anything that’s text and reads it to the user. With sites that incorporate graphics into their logos, menus and graphics with other useful information, the site relies on a TAG called the "Alt tag" (HTML 101 lol). This tag is meant to be displayed if the graphics have not yet loaded (or cannot load at all for whatever reason), if the user chooses to turn graphics off when they browse the web (and yes, there are many people that do this), or for visually-impaired browser software to read.
Well the FOCUS site, being 99% graphics intensive (actually out of the whole site I only found 1 line of actual text), you would think they would be using ALT tags for people who cannot or will not load all of their graphics. Well they haven’t, and shame on them for not doing so.
In the business world, not conforming to web accessibility standards (i.e. visually-impaired users) means that you’ve alienated part of your customer base. In the world of religious web sites, failure to adhere to accessibility standards means that you have shunned the disabled brothers and sisters in your church, and have effectively turned your back on a segment of the people you are ministering to. Personally, this is a grave Social Justice issue.
Additionally, all those great search engine sites like Google & Yahoo, their "bots" or spiders aren’t intelligent enough to read graphics, so whatever you have that’s not text or an ALT tag, has just been passed up by two of the most powerful search engines on this planet.
Recently, many resources have come available to assist developers in making their web sites accessible. Dreamweaver 8, the latest version of Macromedia’s awesome web design solution, allows you to set up accessibility standards in the program, so that when you insert an image or something that may not be full accessible it prompts you with the steps in order to fix the solution right there. This only takes a few extra seconds of your time, but makes a world of different to blind people viewing your site.
One of my favorite de-bugging/troubleshooting tools is the Web Developer extension for Mozilla Firefox. Which has a really cool option called "Replace Images with Alt Attributes", which paints a pretty decent picture of what a web site would "look" like to the visually impaired.
I pointed this over to a few web sites that I feel effectively illustrated this issue. I took screen shots of the "with graphics" and then "with alt tags". You can get a few screen shot by clicking on the image.
Yahoo.com
NCSC – CatholicStudent.org, A site that I’ve sent a lot of time designing
John XXIII University Ministry – The site that I used to do, but now has been changed (Note: I did incorporate ALT tags into my original design, what you see is the new design that replaced mine) – Body text looks ok, no menus though…
And finally FOCUSOnline.org– Now you see it, now you don’t!
Moral of the story: Just because a site looks "sexy" with a lot of pictures and images all over the place, it doesn’t mean it’s "Professional". Mix in some source code and stop designing in Microsoft Paint or whatever you used to build the site.
*Note: One of the commonplace rules about URL’s – don’t ever incorporate "on-line" or "web site" into the actual URL. We know it’s on-line, that’s why we’re accessing it on the Internet. I understand that FOCUS.org was likely taken, but I can think of 5-10 other possible alternatives than using the word "on-line". It’s like saying "I on ‘Pine Avenue’ street." It’s just redundant.