Main Points

  • ASP.NET Changeover Moving from XHTML to ASP.NET development, the next big website upgrade.
  • Accessibility and SEO Testing and tweaking for SEO and accessibility. As well as CSS tweaks for future flexibility.

Here our development really started to take off. We not only started to polish the accessibility and SEO aspects of the webpage, you'll see the theme of code separation firmly take hold at this point in the development of the website. This was a critical redesign for the website behind the scenes. We'll show you how it happened and you'll appreciate how relatively small changes to the appearance heralded major changes happening on the back end.

ASP.NET Changeover

The menu driven navbar was a big upgrade and we'd learned CSS much better, but this was when we really started to take it to the next level in terms of best practices. The initial javascript work on the navbar became a full fledged unobtrusive javascript library. We revamped a well-crafted CSS file to serve the entire website, and moved the pages from XHTML to ASP.NET laying the foundation to do much more advanced work in the future; the contact form would be the first fruit of this upgrade. These changes transformed Earth Chronicle into a much more professional and maintainable website. The server side includes can even be seen as a first step on the road to the master page template which ushered in Earth Chronicle 2.0.

  1. Accessibility1.html Based on our initial tests, the accessibility of the template is virtually unaffected by the Javascript events controlling the windows. Therefore, the header navbar was returned to the top of the code so that it is more linear. The css file has become a master file which calls the other .css files, this seems to be the most effective way to control styles from multiple style sheets. All the master settings are controlled in the first style sheet called, and any modifications are applied in the second. Accessible / SEO links have also been tweaked so they now mimic precisely the layout of the main navbar. The presentation is a bit better that way, especially with CSS off. Still need to test future CSS manipulation tweaks. Testing accessibility in JAWS with and w/o braille display as well as Zoomtext, the main packages for the blind and visually impaired. Still need to assimilate information from the W3C guidelines to increase accessibility as well. AND consider SEO. Wow! A long ways to go.

    [chroniclemaster1, 2006/11/29]

    Ironically, we moved the navbars back to the end for accessibility reasons after all. When CSS is off, as it effectively is for accessible devices, the navbar makes for a long obnoxious header. It was therefore moved to the end so it can be found and used easily, yet the content is the first thing on the webpage.

    [chroniclemaster1, 2009/04/02]

  2. AspnetTemplate.aspx Wow... talk about a hiatus. One minute I'm working slowly and steadily on getting Earth Chronicle up and running, and the next I'm training to become a web developer. That Javascript clock I'd been begging for... here it is. I built it. And it comes with fully deployed CSS, unobtrusive Javascript, and server side includes as well. So large chunks of the code are in separate external files, that when changed update every page site wide. CSS naturally condenses the styles for a website into a single separate sheet. And there is no Javascript code in any of the webpages (unobtrusive Javascript) except for the reference to our master script file, making it easy to update the entire site by changing one file. Keep your eyes open for the new Contact form, coming soon. Or at least, right after I finish applying this new template to Earth Chronicle Beta.

    [chroniclemaster1, 2007/06/23]

Accessibility and SEO

Accessibility turns out to have more kinks in it than you'd expect. Some very simple things like keyboard accessibility turn out to have very subtle problems that are painful to solve in a way that ensure cross browser compatibility. For the most part our pages validated well on the W3C as transitional XHTML up to this point (if it didn't have Flash on the page, at least). This phase of development pretty much blew that. We had to decide between a couple rules mandated by the W3C and the ways that IE, Firefox, and Opera all behaved. While we respect the W3C rules, when every browser runs counter to it, I'd say we have a de facto standard whether the W3C likes it or not. We look forward to everyone getting onto the same page, however until then, we're racking up a small family of about a dozen validation errors on most pages. They are deliberate and critical to maintaining keyboard accessibility.

  1. SkipLinksTemplate.aspx This takes the AspnetTemplate.aspx and updates a few key features that I kept building in to Earth Chronicle as I was trying to get it posted. They were fairly easy to incorporate into the .aspx pages (including this one) and so this template is the one that the current Beta site is based on. One, the Main Points box controls access to the entire page, but there's no way to get to it. This template adds skip links back to the main menu whose title has a new named anchor to skip back to. It also removes a fairly useless title class on the main <h1> heading. Some of the spacing of the code was corrected to maintain proper indentation. And all the variables and names (except file names) were converted to the more standardized lowerCamelCase structure so that naming conventions for the Earth Chronicle family of websites would have consistent naming practices. It also boasts the revised meta keywords I developed on Earth Chronicle while retaining the extra beta keywords. I also revised the main header navbar for the beta site. This should be much more user friendly.

    [chroniclemaster1, 2007/07/06]

  2. SemanticXhtmlTemplate.aspx This template never saw the light of day, but it served as an important transitional step during the development of the contact form. The contact form was being added at this time naturally, although it had not implemented across the site. Too many things were going on, which is one reason this step in the development of the template is showcased. We were building the contact form, redesigning it's CSS, adopting the new POSH philosophy of semantic XHTML markup, redesigning the navbar, writing the VB code for the contact email, dealing with sitemap problem, and looking to dump VB and begin coding in C#. We were even considering ASP.NET 2.0 master pages to implement the elements which we now are using server side includes. We probably will ultimately do that, though they seem to be biting off a bit much at this point.

    [chroniclemaster1, 2007/08/12]

  3. KeyboardAccessible.aspx This template is the culmination of a lot of work. The Semantic XHTML template was upgraded with the full working contact form including functional rollover script. The Javascript event handler code for the drop down menus has been cleaned up and done much more efficiently. The Internet Explorer keyboard navigation problem has been remedied. The breadcrumb menus have been put back into the page, here's hoping they work this time. {They didn't. [chroniclemaster1, 2009/04/02]} The navbar has been remodeled as close as possible to a standard menu bar on a windows desktop application.

    [chroniclemaster1, 2007/09/12]