Portfolio — Front End Web Development by Ralph Brandi

I worked on this site for Intel’s entry in the “small laptop computer for children” sweepstakes while working freelance for MRM Worldwide in New York. My primary responsibilities were the Product Info and In The Classroom pages of the site, although I touched pretty much every page on the site at one point or another. These two pages are the most interactive on the site. The Product Info page has a tabbed interface implemented using the jQuery Javascript library, as well as secondary “tab” sets under the “Design” and “Features” tabs. The tabbing was accomplished by adding and removing CSS classes to surrounding div tags; divs representing inactive tabs were thrown off the left edge of the page rather than hidden with the CSS display: none directive to ensure that users with screenreaders would still be able to access the content. Similarly, the bubble tooltips with details of classroom deployments around the world were implemented as definition lists; the definition terms were placed with absolute positioning within the relatively positioned map, given a height and width so that they would be an appropriate size for the star indicators on the map, and the title text within the definition term thrown off the left of the page using the CSS text-indent directive. The actual tooltip text was place within definition description tags that were thrown off the left of the page with absolute positioning, then positioned within the page when the definition term was hovered over. This approach ensures that screenreader users also have access to all of the details of the classroom deployments.

On this site, I also worked out a method of implementing Omniture tracking that did not slow down access to information on the site, as described in a posting on my weblog, There Is No Cat. Essentially, the method boils down to calling a separate file with the tracking information applied to it using an Ajax asyncrhonous call, so that the desired action isn’t blocked by the tracking Javascript.

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.

Link to the live site.

One of the members of the WaSP ILG mocked up a members list page that included a Google Maps mashup, but it was having problems in some browsers. The mockup used a widely-distributed Javascript that generated the list of map points and members dynamically from an XML file. This was problematic from an accessibility standpoint, and the code generated by the Javascript wasn’t terribly semantic, just a name and an anchor tag followed by a break tag. It didn’t degrade gracefully; in browsers that didn’t support Ajax, the list of names would not appear. I rejiggered the page so that the list of members was included in the page as an ordered list with links to their web sites. This list was then hijaxed, setting an onclick event handler so that instead of linking directly to the members’ sites, clicking on the name brought up a brief biography on the map, including a link to their site. I rewrote the script so that the map was only generated in those browsers that supported its functionality rather than for everyone, as without support for Ajax the map was meaningless. In the course of working on this, I discovered a design flaw in Google’s code; when checking for Ajax support, it was first checking for ActiveX support, then for the native XMLHttpRequest object. This caused a problem for IE7 in environments where ActiveX support is turned off, such as in corporations. IE6 and 7 would say they supported ActiveX but not run the code if ActiveX was turned off. In IE7’s case, though, the native XMLHttpRequest object was also supported, meaning that it would be possible to support the Ajax functionality even if ActiveX was turned off. Google’s code did not allow for this, so I rewrote the function that checked for Ajax support to check for the native object first. As a result, the page works as designed in IE7 and in other standards-compliant browsers like Safari, Opera, and Firefox. It works with reduced functionality in IE6; the text links do not work with the map, but clicking on the flags on the map works. Clicking on the text links in IE6 links to the members’ pages. Progressive enhancement in action.

Link to the live site.

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.

Link to the live site.

The client requested a site with a different design than that used by the corporate site. Given the mission of this site to communicate the importance of brand conformity, I designed something that was like a more modern, souped up version of the existing corporate site, recognizably Lucent but more up-to-date. Without the necessity to be tied to certain existing standard page elements (headers and footers in particular), I implemented this site using standards-compliant code and semantic markup. Instead of the nested tables, images and Javascript that made up the pulldown menus of the main site, here I used unordered lists and CSS, current best practices for such navigation. The left navigation was similarly implemented. To ensure that second-level navigation on the left navigation worked in IE, I used an HTML Component file, csshover.htc, and had the server configured to serve this using the proper MIME type of text/x-component so that the site would work in IE running on Windows XP Service Pack 2.

Link to a local mirror (password protected).

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.

The basic layout here is still table-based, but nested tables inside the layout table are banished. The three focus sections are implemented using CSS. The folding lists are implemented using Javascript to toggle CSS display attributes (today, I would instead do this using 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.

Link to a local mirror (password protected).

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.

Link to a local mirror (password protected).

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.

Link to the live site.

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.

Link to a local mirror (password protected).