Redesign 2005

Between June 22 2005 and July 11 2005 I recoded most of the site. I spent the month before that doing various research that would help with the design. I even got to see a one-hour long video from Microsoft staff showing the new features in Internet Explorer 7 for Windows Longhorn. My redesign would be prepared for the future.

During the time period of my redesign I got sicker than I have been in years, and I still am. As well, my computer's power supply broke down, and had to be replaced in a computer shop. I got sick during the 2004 redesign as well, so I think getting sick can now be expected when coding for hours at a time.

The redesign was created to address many issues that a range of people and software had with the site. This was not simply a visual redesign. The site is already skinnable.

Usability for both regular visitors and first-time visitors were taken into consideration. I watched how different people would stand over a computer and navigate this site, and take note of where they ended up. Some had never seen the site before and didn't know what it was about, so certainly the redesign would address that. As for software, this would take care of itself with proper coding, but I also created the Bug Report to address compatibility issues with various common browsers.

Organization and Navigation

The new organization and navigation is probably the most drastic change to the site, especially for regular visitors.

When I first created this site I decided that the navigation would be by generic filetype. While other sites had an MP3 or MIDI section, I would have an audio section. While other sites had Animations and Mpegs, I had flash files and video files for my navigation. Then the subnavigation would be by file extension. It was actually unique at the time for something so simple, and I set a few standards when it come to navigation. I say that because some sites ripped off my menu completely. Some of them, even the same order. They were copying my mistakes, and I think they found out the hard way over time.

If I could go back in time, I probably would use the word Animation instead of Flash in the navigation. I didn't know that Flash would be so big that even audio, video and images would be encoded into flash as a standard. When Flash MX came out, video streams could then be converted to flash format. I think I filed these under flash for a while instead of video, but they still have the flash subdomain as their URL. Time to rethink the menu.

The new menu not only simplifies the growing sections of content, but also describes the site. This site has media files, information and software for developers who create such files and a very talented community. These descriptive terms are also related to each other because developers create media for this site and are part of this site's developer community. It is extremely difficult for most sites to attract an audience mature or talented enough to start an artist community, so this luck should be celebrated on ABS. Of course, ABS Community has a few immature people too, but if they get out of hand we sacrifice them.

Another thing about the menu is that I hate those spammy hilariousfunnymoviesfiles sites that I discover from my bandwidth logs. What's worse is to be mistaken for such a "humour" site. Since they will never have a "media - developer - community" navigation, but rather a "funny these - funny those" navigation, I think the menu change was necessary and will be effective against these problems.

I miss the menu at the left too, but if I didn't make the changes now, the left menu would just be a huge list. Also, it's not totally lost. The classic theme has the menu on the left rather than at the top, though it's only the four sections. All it takes is a simple CSS change to move the menu, and you are free to submit CSS designs for this site.

New sections.

The following are new sections that premiered with the redesign.

Bug Report

I added the Bug Report to help coders so they don't have to go through the same headaches I did.

Visitor Map

A new community project that already needs to be updated.

Tutorial

There were tutorials on the site already, and should be grouped in one section for easy reference.

Site Map

A site map that might help some with navigation. Also, making the site maps gave me a better visual of how this site is organized.

Accessibility Statement

I think it's actually illegal for sites to not be accessible in the UK. The accessibility statement also lists the access keys.

GeoURL

A project that lists sites by geographic location, and allows webmasters to list their neighbour sites. I added ABS to the index. I am already predicting that people will fake their location to be near mine in order to get into the listings of ABS neighbour sites. This is linked on every footer and is therefore an easy way for people to spam. I have saved the current neighbour page saved just incase.

I will be adding more sections in the near future. I had other sections started, but didn't want to post them as they were clearly incomplete.

New features.

New links open in the same window site wide. This change is in place because everyone who I watched browse relies on the back button.

The old design didn't show any visual difference for visited links. Some visitors asked for it, but I didn't like the idea of changing the colours around the page in that manner or crossing out links. Instead, the redesign has a checkmark beside certain visited links. This will only work in standards-compliant browsers. Internet Explorer currently does not support the feature I used. A more cross-browser friendly method is to use a background image for visited links, but this is a security risk according to my research.

The new design has access keys. This is a fancy word for keyboard shortcuts. I wanted to add these for a long time. The keyboard shortcuts are listed on the Accessibility page.

The redesign is using a header image in the default theme. The image is only a piece of an image from an ABS Community project to be announced later. I wanted the site to be more graphical without losing out on clean code, so the header image seemed like the method to go. I may even replace the image in the future.

I never had an official logo for this site. I drew a few sheep and so did other artists, but none that had the qualities of a logo. Without me even asking, the ABS Community held a contest to make an "official" ABS banner. The member, atsakir, made a few amazing banners featuring his sheep that is currently the logo. This logo may be replaced if a better one comes along.

I've converted the sheep into a favicon. Firefox, Opera and Safari user will see it in the title bar right away, but Internet Explorer users may have to bookmark the main page to see it.

For most old versions of this site, I had in mind to make the design compatible with screen resolutions as small as 640x480. In addition the old design had a fluid width. Making sure everything displayed properly in in all sizes caused a lot of headaches. I held a poll in ABS Forums on screen resolutions and also checked my stats to see if 640x480 compatibility was really needed. It turned out that nobody preferred anything lower than 1024x768, but were often stuck with a minimum resolution of 800x600 due to some technical limitation, such as restricted administration settings at work or an old monitor. I coded for slightly less than 800x600, keeping some space for browsers that may have a small side tab.

The old design used Fastcounter for the counter, and unfortunately, so does the new design. Fastcounter is a remotely hosted image-based counter by Microsoft. The counter sometimes loads slow, and may even display a broken image. I got an account for Fastcounter when it was still free. Some counter hosting services charge by traffic.

I had a script online for a new text-based fast loading counter. It was in the redesign for about 10 minutes until it got hacked! I was just about to update the number to the current Fastcounter number when I noticed that someone had reset my counter. If you are this person, please contact me. I would really like to use my counter without any security problems and could use your help. I'd also like to know why you reset it.

This site uses new icons and is phasing out the Windows XP icons. ABS Member Noam complained about the dullness of the new icons.

Edit: Well, he didn't complain, but commented that the Windows XP icons looked better.

Also, a new feature is the abbreviation tooltips. These only work in standards-compliant browsers (not Internet Explorer) and I will get into more detail about them later.

Semantic Markup

I thought I was always using semantic markup. I still think I was, but it needed to be improved upon in the redesign.

Semantic markup by definition is code written in such a way that it is more easily processed (by machines), and the semantic web would therefore process semantic markup on a global scale. This is more important than it sounds.

The Semantic Web was thought up by Tim Berners-Lee, inventor of the WWW, URIs, HTTP, and HTML.

Semantic markup and the semantic web are also meaningless buzzwords. I don't see the semantic web as any type of practical invention since code isn't really standardized to the extreme it needs to be. For the semantic web to be practical, there would need to be strict rules for defining areas of data. There are a few convensions in XHTML and HTML code, but not enough. This is why RSS feeds are seen as the future. The tags are all the same. In XHTML however, I could have divs or spans that can enclose anything from a sidebar to a footer to an ad. The best way to determine is to look. Certainly not a job for processors and search engines.

XHTML 2.0 will be semantic, as well as XML based. However, XHTML 2.0, a language I have been waiting on for years, still is not released. I therefore relied on structural markup, convensions and Meta data for semantic markup.

Structural Markup

I was not properly using structural markup before, and it was plainly obvious to anyone navigating this site without a style sheet.

The first thing in the code was the navigation. Since every page had this navigation code on top for those without style sheets (top is always displayed first if there's no style sheet), browsing to the different sections had no visual difference until the visitor would scroll down. Back then, I was new to CSS and just wanted my menu to be on the left without using tables. I put the menu's code first and floated it to the left. Visually, this is perfect, but structurally very wrong.

It's not so important because everyone is using a browser with a style sheet, but it is important to me and for others who have coding ethics. Pretend for a second that coding ethics are the same life ethics, and you will understand why I see bad coders as barbarians.

With structural markup, one must understand that a web page is a document. It is different from, but can be treated just the same as other valid documents in life such as letters, census reports, postcards and resumes. They all have a structure. The title as the header on top, followed by the information separated with a hierarchy of subheadings. Sign your name at the bottom, and you are done.

Web page navigation complicates the issue because coders want a certain visual look, and sometimes have to sacrifice the code to get the menu in the right place.

In the new design the menu is on top, but not until after the title header. Any user of a text-mode browser will know exactly what page they are on.

Coding conventions

Not that I didn't use any conventions in the old design, but I have learnt some upon the way.

First, use full meaningful words in your code. When I insert an image by itself into a paragraph, the paragraph's class is "image". The navigation's div ID is "navigation", and the footer's ID is "footer". This should be obvious. I thought about using really weird words to entertain the odd person that may look at my source code, but that's for another project.

Everything listed is a list. There is no visual difference, but when there is a list of files with their thumbnails, they are each a list item. In the old code, they were each enclosed in a paragraph.

One thing I really want to note here is that I added an ID named after the site to the body tag. There is no visual reason for this in my design. It is a convention so that people can customize their software to display different sites differently. For example, if the website of Brand X widget has a visually disturbing image in their header you feel you are forced to look at, you can properly modify Firefox to hide the background image of the header in Brand X's site, but only if they specified a unique ID to their body tag. Another use for this is to increase or decrease the text on a website that has abnormally small or large text. Visitors will always find something they may need to change.

Uncommon tags that webmasters need to learn.

On ABS, when I type I can sometimes be formal and technical. People still read what I write, but they can be frustrated when I use acronyms and abbreviations without specifying what they stand for. A user may go to a search engine or a dictionary to look up what the acronyms or abbreviations stand for. I remember telling Fredryk Phox I'd help him with his CSS, only to discover he wasn't talking about the CSS that I know of at all, but actually Counter-Strike code that has the same acronym. Now, a reader may not be that confused, but webmasters should certainly specify the full terms for their acronyms and abbreviations.

Without adding extra text or length to their writing (except behind the scenes in code) they can use the acronym or abbr tag. Inside the tag I declare the meaning with title="Cascading Style Sheets". By convention, and by default in some browsers, these acronyms and abbreviations are underlined with a dashed or dotted line, and the user can hover over, seeing a tooltip and help cursor that shows the meaning of the acronyms or abbreviations. I must note that this does not work for abbr in Internet Explorer as of current, but there are a few workarounds.

Instead of deciding between acronym or abbr in your website just stick to one. XHTML 2.0 only allows abbr, but IE only knows acronym. I use abbr in the redesign. The next version of IE should support it.

In the redesign, when there is code of any web language I enclose it with the code tag code. I did this with the old design as well, but must mention it for those who don't use it.

In the redesign, email addresses and other contact or address information is enclosed in the address tag.

Like the old design, but not the one before it back in the dark ages of web design, bold and italic tags are replaced with structural strong and em tags. The em strands for emphasis. There is a meaningful difference between the two unlike bold and italic that are just two different visual methods of emphasis.

I think I was influenced by Jeffrey Zeldman to use definition lists. Definition lists are hardly used by webmasters, but they serve a useful and practical purpose. Instead of single item listings, definition lists are in groups of two. One being the definition term, and the second being the definition for that term. Keep in mind that it does not need to be used for actual definitions, but just for pairs of items.

<dl>
<dt>File #1</dt>
<dd>Requires Flash Player</dd>
<dt>File #2</dt>
<dd>Requires JavaScript</dd>
</dl>

I almost used this method for the thumbnail file lists where the definition would be the author and file size.

I was using the blockquote tag before to define quotted text, but the redesign has cite and lang as attributes for some quotes. I will also be sure to use the q tag as I write for inline quotes.

Just as before, text that is code is in the code tag.

Useful Meta data

Meta data on a web page is extra information to be used by software. Many developers know about Meta tags and have taken advantage of them by spamming them. The most popular Meta tag is the keyword Meta tag. Spammers still spam the keyword Meta tag unaware that search engines (including Google) don't use them anymore because they are considered spam. Do you use them?

There are other, better useful Meta and link (also Meta data) tags that I knew the redesign needed when I was researching these tags.

Using relation Meta data, I am specifying the location of the index for many pages. For example, the related index of the Animutation page is the flash page. It is obvious that this is the relation since Animutation is a subdirectory of Flash. The index relation is more useful for the Speaker's Corner page, where the subdirectory is Image, but Speaker's Corner is actually part of the photography index.

I also use the link relation for home, search, help, alternate and shortcut icon. Opera 7 is default to display buttons for many types of relation if specified on the web page.

I'm using the ICBM Meta tag to specify a local location for the site's Meta data. Not an exact location of course. That would be dangerous. The ICBM is also used for the GeoURL project.

Overall

Overall, the new design is using less markup, resulting in smaller file sizes and faster loading times. This is always my main goal in any redesign. It's also very easy to style with CSS, so I expect that users will submit more creative alternative style sheets, and not simply change only the colour. Check the Style page alterative style sheets I have created so far.

I still have a few more sections to change the code for, and many minor tweaks to come resulting from user feedback. Thanks to everyone for all the support and patience.

July 11, 2005

Related