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.
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.
- Website must use a logical, hierarchical navigational system and must not use drop-down or fly-out menus.
- 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.