How We Redesigned our Website (Version 3)

This is the lecture given by Mr. Jojo Esposa during Webmasters’ Interface Seminar on May 18, 2006 at Mango Park Hotel, Cebu City.

How We Redesigned our Website (Version 3)

Backgrounder about the Deaf

A deaf person obviously cannot hear so they rely much on their eyesight. They use their eyes both to see and to listen. They are very visual. Have you heard of a visual noise? Also, deafness is a hidden disability so people presume that a deaf person does not look like a disabled person. Have you heard of the famous Ms. Helen Keller who was both deaf and blind? When she was asked what will she choose, being deaf or being blind? She said its better to be blind because you are only separated from objects. Being deaf means you are separated from people.

As we learned from the seminar in Tagaytay City, there are five considerations in designing accessible websites: Content, Aesthetics, Accessibility, Usability and Sustainability. However, the deaf mostly consider the Aesthetics side; how to make the site beautiful, flashy and with animation.

So a “deaf-friendly” site is multi-colored, flash enabled and graphic intensive. We defended our site because ours is catered only to deaf so we stick to that. Why do we need to change? So that’s how our website looked like before. But when we attended Sir Leo’s seminar, our perspective slowly changed. However, you cannot just change the website of your company overnight. It should be gradual. By the way, if you want to know more about deaf, their culture, and deaf institutions in the Philippines, visit our site. We have an extensive resource about them.

Headaches to Consider

What we did was a total overhaul. I remember Sir Leo said that the first time a person sees your site, he/she will say wow, nice, great site. But when he comes back again and sees the same slow graphics, he won’t visit the site again. They won’t return to your site because they won’t be getting any new information from it. That’s the cost of being an aesthetic website. What are the use of those pictures if they are not related to the site? When Ervin and I assessed the extent of changes that we need to do, we were very much overwhelmed. Why?

  1. Our culture will change. Not much aesthetics, more on content. Also, we cater to PWDs. Why not make a website that is accessible to PWD?
  2. We are web designers, not web coders. Imagine all pictures with equivalent alt text and we cannot stick to just this size or that size, this font or that font. There are many things to consider.
  3. We need to accommodate everyone. Well, almost.

Consider the following:

  1. Old PC Models – I read in one of the articles about Microsoft, they have created a very toned down version of Windows XP, one that will run on old Pentium I units and shipped to Africa. In that continent, more than 70% of their PCs are still on the Jurassic ages. How can they access your website if you will put a warning at the bottom, “Best viewed using Windows XP on a Pentium IV PC”? You will be segregating the whole Africa.
  2. People with Low Vision – How about those who cannot read small letters? How will they read it if a font size is strictly 10px or 12px? It should be allowed to adjust.
  3. All Types of Screen Sizes – We often see the statement at the bottom, “Best viewed on a 1024 x 768 resolution”. How about those who still have 800 x 600 monitor? Are we going to discriminate them? My laptop uses 1280 x 800 resolution. I saw the difference. The table width must adjust depending on the resolution. We need to equate the width in percentage (width=“100%”) and not width=“800” because that is limiting.
  4. Printer Friendly Version – How about those who are only interested in the printed form of your site without those banners, different colors and the navigation bars? They need just plain content printed in black and white.
  5. Visually Impaired – How about those who cannot see the pictures? We need to have an alternative link to explain to them fully.
  6. Mobility Impaired – How about those who cannot use the mouse? You should have a provision for those who don’t need to rely on mouse. Keyboard shortcuts must be used or so called accesskeys so that it’s easy to navigate.
  7. Access Without the Need of Other Programs – How about those websites that need to download files in order to access it like pdf using Adobe Acrobat, Macromedia shockwave to open animations or Sun Microsystem’s Java to open a java file? They are very restricting. How about MS Excel files? You need to have that program installed in your PC before you can open it.
  8. Runs on Any Web Browsers – Your website must not only work on Internet Explorer. It should also be seen in Firefox, Netscape and Opera. 75% of web users access using IE while 20% now use FireFox.
  9. Small File Sizes – Also the files must be in a very compressed format because if it’s more than 100kb, downloading will take a long time, limiting for those using only 56kbps modem.
  10. Web Design Consistency – Your website must be consistent all throughout. People might get confused thinking that they are on another web site if they see a different style on your other pages.
  11. Accessibility Statement – Whoa, what is that? Site map is fine because it is important but accessibility statement?

Our Solution

But you know, it was really worth the change. Just like a car, the engine overhaul made it run smoother and better. The website is trimmer and more fluid. It’s easier to create inside pages if your format is already set in place. Here is what we did:

  • FIRST: We clearly defined the parts of the website. – Be it the header, top navigation bar, side navigation bar, bottom navigation links and of course the content, everything must be defined. That includes those dates and copyrights at the bottom. We designed following the defined format.
  • SECOND: We switched from Microsoft FrontPage to Macromedia Dreamweaver. – Dreamweaver follows the web standards and easier to use unlike FrontPage that creates too many subfolders and files that you did not know where it is being used. You will only know its purpose once you deleted them. Dreamweaver is very helpful for the errors you make like missing partner tags table /table or b /b and will warn you that the command you used will not work properly. When you insert a graphic, a dialog box automatically appears letting you enter the alt text. In Frontpage, it inserts too many alien codes. One more reason that convinced us to switch was during the international skills competition in Web Page Designing in New Delhi, India with Ervin. The gold medal was bagged by India while the silver medals were received by Taiwan and China. All three competitors used Dreamweaver. Only Ervin who won the bronze medal, used FrontPage. Had he used Dreamweaver, he might end up bagging the gold.
  • THIRD: We used Cascading Style Sheets (CSS) extensively. – The MCCID website used CSS very much and removed the tables. The design itself is a concept of using CSS to define the navigation bars and links. We did away with buttons, instead text decoration and even designing the images. Dreamweaver helped us a lot in designing CSS. It offers commands that you can use if you want to define an object say font-family or font-align.
  • FOURTH: We clearly defined our accesskeys or keyboard shortcut links. – We assigned keyboard shortcuts for frequently used parts of the website. We even placed a special accesskey on top of the site for people to go directly to the contents they want. We used alt – number or letter to go directly to the navigation bars.
  • FIFTH: We used both IE and FireFox browsers at the same time. – While doing the webpages, we opened the popular yet bug-ridden IE and the web standard compliant FireFox. That way we know what it looks like on either browsers.
  • LASTLY: We copied what others did. – We relied on many sample websites that are accessible and copied what they did. I believe they would not get angry and sue us because what they want is to further influence others to make their sites accessible. Visit the Related Links at the side to view what sites we visited and (sigh) copied.

For those of you who already started creating accessible websites, I hope that despite the difficulties we encountered and the discouraging scenario I mentioned, still you will be convinced to change your websites especially to those of government agencies. Your sites are extremely important for the Persons with Disabilities because vital government services can be learned from your sites. I also hope that these workshops will continue so that many people will become more aware. Thank you to Sir Leo Valdes and NCWDP for this opportunity. To Christ be the glory.