AnyBrowser.org Redesigned!

Intro

Probably everyone on the internet has heard about the any browser campaign or at least has seen little banners on some web sites saying something like “Best viewed with any browser”.

We have redesigned anybrowser.org recently and now are presenting you with a short summary of what has been accomplished. The summary will be given in the form of an interview with Cari D. Burstein, owner of anybrowser.org, Sergio Blanco – project manager, Mariarti – graphical designer, and one of the coders from Template Monster, Tiger.

About the Project and Site – featuring Cari D. Burstein (owner)

How did you think up the idea for the (Any Browser) campaign?

Cari: I originally became aware of standards and cross-browser issues when the first version of Netscape with Javascript came out. The beta versions of it had been rendering my personal web page with missing text and I just assumed it was a bug until the final version came out and it was still broken. Doing some checking I discovered I had missing ” in my tags and that version of Netscape had made their checking for such things more strict to properly support Javascript. This led me to discover the value of validation and standards support in addition to basic browser testing. In the next few years I’d been working professionally doing website coding and backend scripting and I was fairly active on the related newsgroups. There was a discussion in September 1996 on the newsgroups regarding designing sites for accessibility and some ugly arguments on both sides that basically led me to create the initial web page for “Best Viewed With Any Browser”. I really wasn’t planning to build a major site around it but it sort of took off pretty quickly from the original newsgroup posting on the topic. At the time there was very little on the web with regards to browser compatibility or accessibility.

Who designed the very first version of anybrowser.org? Have you ever redesigned the site before?

Cari: Well design is a bit of an exaggeration for the first version of the site. It was really just a simple page with information and one crappy little graphic that I threw together. My skills have always lain more in the HTML and backend programming end of things and not the design end of things, so it wasn’t much of a design Since then there were at least two redesigns to the site that I recall, I may be forgetting some. One was a fairly simplistic redesign which was basically me attempting to use stylesheets to improve the look of the page some without going overboard. Back then stylesheets weren’t that widely supported though so it didn’t change the appearance of the site for that many people. About 5 or so years ago I had a friend at a company I worked for create a new design for the site which was the first design of the site that actually looked like a real design. That design was in use until the new one that Template Monster created went live a few weeks ago.

What were your requirements for redesigning the (logo, graphic design, coding)?

Cari: Mostly I just wanted a design that would be easy to read and look good without being overly slow to load. Highest priority was that it follow the XHTML standard and be able to degrade decently on older browsers. My site has a wide variety of visitors from all over the world and many obscure browsers so it’s important that it work for as many people as possible.

How do you like your new design? Have you received any compliments on it already?

Cari: I’ve been quite happy with it. I’ve had to do a few adjustments already as users have given input but for the most part reaction to the redesign has been very positive.

About the Template Monster Team – featuring Sergio Blanco (project manager)

Can you tell us a little more about the Template Monster team (involved in the project) and about the responsibilities of each member on the team?

Sergio: Basically it was a small team of three people, but definitely each member was the best in their fields of expertise. Me - as a manager and dispatcher, MariArti - the leading and without question the most talented designer I have ever known, and Tiger - the coder responsible for that nice logical markup.

Which things were you responsible for on the (Template Monster team) in this project and what things were Cari responsible for?

Sergio: Well, I personally was kind of like an air traffic control tower - I had to receive and analyze Cari’s requirements and comments, then, based on those things, I had to write technical descriptions and distribute the tasks to the members of the Template Monster Team who were responsible for different parts of the job - designers, coders, the guys from the quality assurance department, etc. Then I passed the results to Cari with descriptions and explanations regarding what had been accomplished. After that came the most critical part of the process - Cari had to test the new design on her side and make a decision on whether it’s appropriate and if it meets the requirements she sent us and the requirements imposed by the mission of the Any Browser Campaign. To Cari’s credit let it be said that she managed to do all that in really a short period of time.

About Graphical Design and Logo – featuring Mariarti (graphic designer)

What were the main weaknesses of the past design? How did you improve it?

Mariarti: The main problem as I saw it was a one-column layout. What is wrong with this? The links that go to the forum recently added and to the other language versions of the website were at the top of the page. In addition, the buttons ‘Content Enhanced’, ‘Open Content’, and “W3C validation were there too. As a result, any visitor had to scroll down a little bit to start reading. I believe that a one column layout worked pretty well for the website for some time but the number of buttons that link to important sub-pages will grow as the site grows. That’s why I decided to get rid of it and add a second column. This will free up some space for any other highlighted links, buttons, announcements, etc.

The site looked like it was designed (and it was) several years ago. The main change was in the layout. The rest of what has been done can be described as a complete overhaul. I don’t want to offend anyone but I really think that a site like UseIt (I’m not talking about the content now) is not only out of fashion but stuck in 1996 making the visitors feel like they are in a paleontology museum observing some dinosaur bones…

You haven’t redesigned every page. What pages received you personal touch and why?

Mariarti: No, I haven’t redesigned every page. I have only worked with a few of them:

• Main page – Because it’s the main page. Every design or redesign starts with the main page as it is the basis for the rest of the site’s pages.
• Accessible Design Guide in order to demonstrate the way the text should be formatted (header, sub-header, etc.)
• Feedback in order to give an example of a form design which matches the site design.

We coded these pages and some others too. The rest of the pages were on Cari.

What do you think about the old logo? How did you enhance it?

Mariarti: The old logo looked rather antiquated but I liked the idea. Cari was open for any suggestions but I had nothing to suggest really. I just thought it would be good to make it look more stylish and fresh. I used the same idea and took a couple of icons (earth and computer) and added a couple of effects. Here’s the result of my changes.

Why have you used rounded corners? Is it a hint to Web 2.0?

Mariarti: Not really. Does anybody really know what Web 2.0 is? It seems to me that it’s just another buzz word. Anyhow, I’ve used rounded corners just because I like them more… Besides, it seems that Cari likes rounded corners as well – you can find a couple of them on the previous version of the design.

Coding the Site – featuring Tiger (HTML coding)

What version of HTML did you use when coded anybrowser.org?

Tiger: I’ve decided to use XHTML 1.0 Strict. This version was chosen because it allows designers to make sites which look the same in various browsers and electronic gadgets. The point is that content is separate from style tags; all formatting is placed in a separate CSS file which reduces load time and insures that even clients who do not support CSS will still see the site because it will be rendered in way so that it will be understandable to everyone.

What elements have you commented in the code?

Tiger: Comments used to mark structure elements, like header, footer, content part, etc. for further easier editing. We have coded only several pages, the rest were for Cari to handle. Commenting is a good practice in coding but in this case, it was essential to comment everything properly.

Did you use and hacks or tricks when coding?

Tiger: There are no hacks in this code in any way. The design did not need any hacks because it was really not that hard to use. There are not that many images and other decorative elements in the site because its mostly content oriented.