Accessible websites, more RFP ideas

A graphical depiction of a very simple css doc...

Image via Wikipedia

The example RFP for website construction posted last week mentioned a little about web standards and user agents, but after further reflection it seems we need to examine further the importance of an accessible and usable website and add a few more requirements to the proposal.

An accessible website is one that can be viewed on any browser and any platform by any person or script. A user agent is the combination of the browser and platform. For example, Internet Explorer 6 on Windows and Internet Explorer 7 on Windows are two different user agents. Firefox 3 on a Mac and Firefox 3 on Linux are two different user agents. on A website that can only be viewed on 90% of user agents is one that is not accessible. A website that looks differently on Linux than it does on Windows means that the designer did a poor job testing.

Flash is a great tool for delivering video on the Internet. It’s a bad tool for building websites. When used for websites, it’s most often a way to create animations or navigation. Animation should be avoided because motion that the user didn’t initiate usually annoys or confuses the user. Flash navigation is usually a drop-down or animated system, the down-sides to which we’ll cover shortly. A website built with Flash also requires the user have installed Flash. Many devices can’t install Flash. If Flash is used, the content must have an alternate delivery method in order to support devices that don’t support Flash. Building two versions of the site, one in Flash and one to support non-Flash user agents, is a waste of development time.

With the increased use of mobile devices comes an increased importance for websites to be viewable on those devices. As a Windows Mobile user, it’s very frustrating to visit a website and have to wait for a huge amount of data to load, only to realize that I have to scroll horizontally back and forth only to find that there is a JavaScript drop-down menu that I can’t use anyway because it’s not supported on Windows Mobile. While I acknowledge that great strides are being made on mobile devices to better display the real web, the sheer number of legacy devices as well as the ease that a standards compliant and accessible site can be created dictates that it simply doesn’t make sense to build a site that can’t be viewed on a mobile device.

How should this alternate display be accomplished? Mobile style sheets provide a quick and standards-compliant way to render content in an alternative manner on smaller screens. Since a standards-compliant site is built using style-neutral markup as the content source, a mobile style sheet can be written in addition to the normal style sheet. Where the normal style sheet might display a header that is 750 pixels wide, the mobile style sheet might specify that the header be only 240 pixels wide so as to fit on a mobile browser without horizontal scrolling. Mobile style sheets allow for a completely different arrangement of elements – the components of the page like images and blocks. Elements can be set to display or hide depending on which style sheet is used. With this approach, a single file can be used to completely change the layout to fit on a small browser without making changes to any of the content.

Also of importance is usability. A website with drop-down menus, or their cousin the menus that are hidden until the user clicks the little plus sign to expand a set of links, fails in the usability category. Drop-down menus are for applications to perform actions, like how the file menu in a word processor has the actions to open, save and exit. Drop-down menus don’t work well as natural navigational elements because a user should never have to perform an action to expose navigation. Instead, a site should use a well-defined, hierarchical arrangement of pages with links on each page to the parent and children pages.

Now that we’ve defined the need, here are the additional items for our example RFP.

  1. Website must display properly without Flash or JavaScript. Any use of Flash must be solely to deliver video content if applicable.
  2. Website must use a logical, hierarchical navigational system and must not use drop-down or fly-out menus.
  3. All pages must use mobile style sheets to render properly on Windows Mobile and other handheld browsers so that horizontal scrolling is not required on those devices.

Want to learn more about web standards? The best book on the subject is Designing with Web Standards by Jeffrey Zeldman.

Want to learn more about CSS or get a basic understanding of how to use them? Head on over to previously-mentioned W3 Schools for their section on cascading style sheets.

This entry was posted in design and tagged , , , , , , , . Bookmark the permalink.

Aaron Traffas, CAI, ATS, CES

twitter.com/traffas | aarontraffas.com | aarontraffasband.com

Aaron Traffas, CAI, AMM, CES, is an auctioneer from Medicine Lodge, Kansas. He is currently community evangelist for Purple Wave in Manhattan, Kansas. Aaron serves as the current president of the Kansas Auctioneers Association and in the past has served on the National Auctioneers Association Education Institute Board of Trustees. He is a past instructor at CAI and co-wrote and instructed the ATS designation course from NAA. He currently instructs the Internet Auction Methods course offered by the NAA. An active contract bid caller, he has competed in multiple state auctioneer contests including placing twice within the top 5 in Kansas. During the summer, Aaron operates a farm in south central Kansas. Aaron is an active singer and songwriter and the Aaron Traffas Band's latest release, Enter: The Wind, can be found at iTunes, Amazon and Spotify.
  • Aaron,

    These have been great posts relating to RFPs for designing web sites.

    How does PHP relate to Internet 2.0 standards. Is it simply the latest and best language for data base work?

    • @Sarah Sonke
      PHP is a scripting language. Think of a scripting language as a programming language of the web, designed to let designers build scripts that actually generate the XHTML and JavaScript – the standard languages of the web – based on the requirements or requests of the user.

      For example, when a user enters his ZIP code and asks to find auctions within a 50 mile radius, the form can be submitted to a PHP script that will look in a database for all auctions matching that criteria and then print to the screen the appropriate XHTML that will display those auctions for the user. PHP isn’t a database, but PHP can be used to query and work with all kinds of databases such as MySQL or PostgreSQL.

      Other scripting languages similar to PHP are Perl, Ruby on Rails, ColdFusion and ASP. Many tasks can be performed using each of these languages, and it can be simply a preference of the web developer as to which he or she wants to use. They all generate the XHTML, CSS and JavaScript that is read and displayed by the browser.

  • On this score, I have to disagree. This is where preference begins to bleed into neccessity.

    Flash is much more than a video delivery tool; web standards and rich multimedia are not mutually exclusive. They both have a worthy place in a modern website and lend advantages to experiences outside the web. In fact, a site using both Flash and web standards has a distinct advantage over a site using exclusively one or the other.

    A site with a Flash interface that connects with a Flex application, for example, has an inexpensive route to a desktop app that can work when a web browser is not connected. The compiled swf client also boasts client-side data storage opportunities unavailable to AJAX. Also the procedural manipulation of art assets allows for interfacing that can produce a faster, more intuitive transaction experience.

    Further, Flash does things that AJAX and DOM scripting is just not ready for. Graphing, mapping, timelining, realtime delivery of rich content, etc. are all beyond not only the ability but the scope of Web standards. Great examples of the harmonious interaction between web standards and Flash applications in the Web 2.0 world are Google Finance and Analytics, MapJack, Flickr slideshows, Digg Labs, Slide, RockYou, and many, many more all of which have use cases applicable to the auction space.

    Real time threaded display of live bidding in an embeddable cross-platform widget? Cover Flow interface for hot auctions? 3D tour of real estate sale? Graph of lot performance in a seller portal? All are ill-suited for HTML+CSS+AJAX alone.

    Don’t throw the baby out with the bathwater. There are well-established best practices surrounding the application of many front end technologies that can deliver scale and flexibility on all platforms and devices. Remember that the real objective with an Request for Proposal is to compel discovery of a vendor’s capabilities.

    Weeds are your enemy at the RFP stage. Don’t let a largely religious technological detail affect the online business strategy for your enterprise.

  • On this score, I have to disagree. This is where preference begins to bleed into neccessity.

    Flash is much more than a video delivery tool; web standards and rich multimedia are not mutually exclusive. They both have a worthy place in a modern website and lend advantages to experiences outside the web. In fact, a site using both Flash and web standards has a distinct advantage over a site using exclusively one or the other.

    A site with a Flash interface that connects with a Flex application, for example, has an inexpensive route to a desktop app that can work when a web browser is not connected. The compiled swf client also boasts client-side data storage opportunities unavailable to AJAX. Also the procedural manipulation of art assets allows for interfacing that can produce a faster, more intuitive transaction experience.

    Further, Flash does things that AJAX and DOM scripting is just not ready for. Graphing, mapping, timelining, realtime delivery of rich content, etc. are all beyond not only the ability but the scope of Web standards. Great examples of the harmonious interaction between web standards and Flash applications in the Web 2.0 world are Google Finance and Analytics, MapJack, Flickr slideshows, Digg Labs, Slide, RockYou, and many, many more all of which have use cases applicable to the auction space.

    Real time threaded display of live bidding in an embeddable cross-platform widget? Cover Flow interface for hot auctions? 3D tour of real estate sale? Graph of lot performance in a seller portal? All are ill-suited for HTML+CSS+AJAX alone.

    Don’t throw the baby out with the bathwater. There are well-established best practices surrounding the application of many front end technologies that can deliver scale and flexibility on all platforms and devices. Remember that the real objective with an Request for Proposal is to compel discovery of a vendor’s capabilities.

    Weeds are your enemy at the RFP stage. Don’t let a largely religious technological detail affect the online business strategy for your enterprise.

    • @Rob Spectre
      Thanks for the resource. I hadn’t heard of Vuvox. The site didn’t work under Linux with Flash installed, but I opened it in Windows and saw what I would consider to be a good use of Flash. Another really cool use is at http://www.sproutbuilder.com.

      Nobody’s talking about building bidding applications or, really, applications of any kind. The scope of the RFP project here is to build an inexpensive, functional and accessible site that has the capability to embed these kinds of widgets if desired. I agree that there are good uses for Flash, such as those really cool ideas you mentioned, but I’m going to stick with the position that basic site navigation and presentation are probably not good uses for Flash. The reason I mention this topic at all is because I’ve seen some pretty horrific implementations of that technology on other auction websites and it’s worth considering when it’s appropriate and when it isn’t.

      Someone looking to actually build applications will have a completely different set of requirements and many of the suggestions given here will be irrelevant. I can say from experience that most of those auctioneers needing help with an RFP have neither the immediate need nor the initial budget to build rich media content tools, but will rather use services such as Sprout and Vuvox to embed widgets and applications into their pages.

  • Aaron,

    These have been great posts relating to RFPs for designing web sites.

    How does PHP relate to Internet 2.0 standards. Is it simply the latest and best language for data base work?

  • @Sarah Sonke
    PHP is a scripting language. Think of a scripting language as a programming language of the web, designed to let designers build scripts that actually generate the XHTML and JavaScript – the standard languages of the web – based on the requirements or requests of the user.

    For example, when a user enters his ZIP code and asks to find auctions within a 50 mile radius, the form can be submitted to a PHP script that will look in a database for all auctions matching that criteria and then print to the screen the appropriate XHTML that will display those auctions for the user. PHP isn’t a database, but PHP can be used to query and work with all kinds of databases such as MySQL or PostgreSQL.

    Other scripting languages similar to PHP are Perl, Ruby on Rails, ColdFusion and ASP. Many tasks can be performed using each of these languages, and it can be simply a preference of the web developer as to which he or she wants to use. They all generate the XHTML, CSS and JavaScript that is read and displayed by the browser.

  • @Rob Spectre
    Thanks for the resource. I hadn’t heard of Vuvox. The site didn’t work under Linux with Flash installed, but I opened it in Windows and saw what I would consider to be a good use of Flash. Another really cool use is at http://www.sproutbuilder.com.

    Nobody’s talking about building bidding applications or, really, applications of any kind. The scope of the RFP project here is to build an inexpensive, functional and accessible site that has the capability to embed these kinds of widgets if desired. I agree that there are good uses for Flash, such as those really cool ideas you mentioned, but I’m going to stick with the position that basic site navigation and presentation are probably not good uses for Flash. The reason I mention this topic at all is because I’ve seen some pretty horrific implementations of that technology on other auction websites and it’s worth considering when it’s appropriate and when it isn’t.

    Someone looking to actually build applications will have a completely different set of requirements and many of the suggestions given here will be irrelevant. I can say from experience that most of those auctioneers needing help with an RFP have neither the immediate need nor the initial budget to build rich media content tools, but will rather use services such as Sprout and Vuvox to embed widgets and applications into their pages.

  • Pingback: Posts about CSS as of December 6, 2008 | XHTML and CSS()