Please note that access to examples of sites I created for Lucent Technologies is password protected. The user name is “lucent” and the password is “bell-labs”. Sites created with standards-compliant code are denoted with an icon in the site description.
I have attached the Valid XHTML icon to this description, however, as I write this, there is one validation error that shows up because of a stray ASP directive in the footer on each page. Aside from that implementation detail, the site was delivered as valid XHTML 1.0 Transitional.
I first published a site for the North American Shortwave Association, a non-profit club of which I am a long-time member and for which I serve on the board of directors, in 1996. For the web site’s tenth anniversary, I worked up a comprehensive redesign of the site. The headers on the site are displayed on backgrounds of shortwave radios from the past sixty years. Before the advent of digital frequency readout on receivers in the early 1980s, shortwave listeners often had to create charts of what frequency matched what arbitrary log number on their analog receivers. This was typically done on graph paper, so the graph paper background of the site is a reference to that. Shortwave radio is a graying hobby, so I chose a relatively large font size for the site so that the club members and other users, many in their 50s and 60s and even older, would not have trouble reading the site. Shortwave has a small but significant audience of blind listeners; accessibility was therefore a primary concern on this site. I built the site around WordPress to make it easier to update (the previous version was all static HTML files). I created my own theme for the site, and wrote a couple of extensions to enable certain functionality, such as the ability to use the WordPress header, sidebars and login information in areas of the site not controlled by WordPress. I did significant custom PHP development on the Loggings Database, Listening Guide, Company Store, and Staff sections, which are largely done outside of WordPress.
My committment to using semantic markup and valid HTML made this site the number one result on Google at a previous URL. With the redesign, we moved to a new URL. The results in Google dropped significantly for the first few months, but the site has now returned to the first page of Google results for “shortwave” and “shortwave radio”.
The Loggings Database and Listening Guide sections use Ajax to display extended information. The Listening Guide can be sorted inline using Ajax. In the Loggings Database, clicking on the frequency of any given logging brings up a small window containing full details of the logging so other listeners can compare with what they’re hearing and see if it might be the same station. With accessibility being a concern, I needed to find a way to incorporate Ajax but still have the functionality accessible. To do this, I first built the applications to function without Ajax; for the Listening Guide, sorting listings would mean refreshing the entire page. For the Loggings Database, clicking on the frequency takes listeners to another page containing the full logging details. I then implemented the Ajax functionality using the Hijax progressive enhancement methodology. At the time I implemented the site, I was unable to find any Ajax libraries with sufficient accessibility support, so I wrote the Ajax code from scratch. When doing so, I included a flag to allow users to turn the Ajax functionality off if necessary or desired. I then set this status in a cookie so that returning users would have their desired setting preserved across visits. I keep an eye on developments in Ajax accessibility, but to this point, this approach still appears to be the most foolproof and appropriate for this site, particularly for users with older versions of screen readers.
text/x-component so that the site would work in IE running on Windows XP Service Pack 2.
My clients approached me to implement this design by an outside design firm. Search engine results across the site were problematic; we didn’t place as highly as expected. I told the client that if they allowed me to take a more state-of-the-art approach using web standards-compliant semantic markup and use text where we would previously have used pictures of text, we could improve our search engine results. They approved the change in approach. I implemented this landing page using largely standards-compliant code (with the exception of the 1997-vintage code for page headers and footers) and semantic markup. At the same time, we moved left hand navigation on our Solutions pages from a nested table-based approach to a visually identical CSS-based approach. Six months after implementation, the client was pleased and surprised to find that for one desired keyword, the Lucent site now placed as the second result on Google, and that dramatic improvement was found in many other desired keywords.
text-indent for accessibility reasons instead of
display: none as implemented).
Based on the success of this approach, three further landing pages were developed in the same manner for the Enterprise, Federal Government, and Cable market segments.
I implemented a new design of the front page of www.lucent.com based on a Photoshop comp from another designer inside the company. Large portions of the code for the page were determined by company standards set in place in 1997, so the page as a whole is not a great example of semantic markup and standards-based implementation. But in the areas of the page where I had free reign, I did my best to code cleanly. So the headers for the four major market segments at the top of the page, “Service Providers”, “Enterprises”, “Federal Government”, and “Partners/Developers”, are coded as h3s, the text following them within paragraph tags, and so on. For the press release section, the original guidelines specified that the word “More” be used as the link. This was very poor for search engine optimization and provided an unnecessarily small target, so I coded this section such that the entire headline was a link, but the word “More” was visually distinct in the way the original standard specified.
My personal weblog serves as a sandbox for me to try approaches out before I implement them on client sites. I wrote the content management system for the site as a way of teaching myself PHP. The site has used valid XHTML 1.0 Transitional and CSS layout since its debut in April, 2002. I have updated the site over the years to support the use of tags, use of the Atom format for syndication, and some remarkably effective spam prevention. I expect to fully redesign the site in 2007 to validate as XHTML 1.0 Strict and improve its already good accessibility.
I started working on the external Bell Labs web site in 1997. I led site redesigns in 1998 and 2000 (the graphic design work was done by a staff artist; I worked mostly on site architecture, structure and coding standards) and ensured that the HTML used validated (yes, there was at least one major corporate web site that used valid HTML as early as 1998). This copy of the front page from September, 2000, validates as HTML 4.0 Transitional. We used some basic CSS on the site as well. This predated common understanding of differences in the box model among browsers, so note that in modern browsers, the padding on the headers for “people @ bell labs” and “projects @ bell labs” looks incorrect, but in the browsers of the day, it looked better.