About the December 2003 Web Site Redesign

Author and Page information

  • by Anup Shah
  • This Page Created Wednesday, December 31, 2003

At the end of December 2003, the global issues web site was relaunched with a new design.

The layout is similar to the old style, and visually, in most cases it might not actually look different in any other significant way.

What you might notice is that:

  • The color scheme has changed
  • The fonts are different
  • The navigation looks slightly different, visually
  • The navigation appears on the screen after the main text has loaded

And yet, most of the rest looks the same (unless you are using an old browser, such as Netscape 4, in which case the page looks a lot simpler). So why the big deal?

Why The Redesign?

Even if on most web browsers the changes here look to be cosmetic only, behind the scenes there has been considerable change.

Ever since near the beginning of the site in 1998 and 1999, I have written my own web server software to help easily maintain the siteWhat this means is that I use this software to help dynamically create all the parts of the web page that the reader requests through their web browser. This way, I don't have to change some 400 pages each time I want to make a subtle change throughout the site or large parts of the site.

However, since then, web technologies have moved on. These technologies include web browsing technologies (also known as “client side”), software tools to develop web sites, and technologies employed on the web server (also known as “server side”). The area of change I am primarily concerned with here is the client side and how I create the output that you see.

I felt it was about time to take advantage of some of these changes, especially given some of the practical benefits that should, in theory, be realized.

Back to top

Benefits of the Redesign

What would I get for making up-to-date changes?

Standards that dictate how browsers should interpret the HTML (the language or markup that web pages are written in) have improved considerably. There is a single standards body, the World Wide Web Consortium (W3C) that defines these standards. Browsers that support these standards confer more benefits for developers, and hopefully, users!

Quoting from the Web Standards Project, an organization fighting for more standards to ensure simple and affordable access to web technologies for everybody,

The World Wide Web Consortium, along with other groups and standards bodies, has established technologies for creating and interpreting web-based content. These technologies, which we call “web standards,” are carefully designed to deliver the greatest benefits to the greatest number of web users while ensuring the long-term viability of any document published on the Web.

Designing and building with these standards simplifies and lowers the cost of production, while delivering sites that are accessible to more people and more types of Internet devices. Sites developed along these lines will continue to function correctly as traditional desktop browsers evolve, and as new Internet devices come to market.

WaSP: Fighting for Standards, The Web Standards Project

Unfortunately, it would seem that there are a lot of major web sites out there that do not conform to such standards. This site used to use technologies that were defined by the W3C, but not in the most optimal way. Hence, for this site, a redesign that moves closer towards adopting stricter web standards will allow the potential for

  • Richer features
  • More facilities for those with visual or hearing impairments
  • Reduction of the size of each page to download
  • More adaptable for the future
  • Reduced costs

I will try to explain some of these below:

Richer Features

As new internet devices emerge, and as browser technologies improve, as long as they implement the standards, newer features can be taken advantage of on this site. The nature of this site is not really such that there will be any dazzling visual effects, but there are already many areas where I can provide more context and help for the reader. Over time, I hope it will be easier to add such new features.

Accessibility for those with visual and hearing impairments

One of my hopes for this web site is that it will reach a wide audience. Already, I am very happy with the numbers. As of the end of December 2003, the site's usage was peaking at some 7,000 to 7,500 visitors per day (or about 12,000 to 25,000 page views per day. Side NoteI ignore hits, which would be even higher. Hits include requests for all the images and other bits and pieces that make up the page.)

The other hope is that pro-democracy concerns are bought to the fore, to highlight social injustices, etc. In the spirit of democracy then, making the information here available to as many people as possible would be ideal. In that context, the site redesign allows me to make hopefully important steps into making this site more accessible to people with visual and hearing impairments. Side NoteSome have asked why I don't have forums on the site, as that would be a huge step in terms of democracy being demonstrated on this site itself. The short-term answer is that at this point I just don't have the time to either write software to support this or look into third party solutions. I work on this site spare time, on my own, and out of pocket, so am quite limited. If I were to be able to get something going, I am not sure how much time I can devote to it, or participate myself. Because the site is about political issues, which will no doubt arise strong feelings in people, I don't want a forum to become a forum for abuse and hatred, though at the same time, in the interest of free speech, I would rather not want to police the site either. In short then, I hope one day I can have a forum on this site, but I will need time to think about this properly.

Furthermore, it is a human right for all to be able to access information, so accessibility is more than just a nice feature.

Behind the scenes, the site's use of HTML (the markup language for web pages) has been improved and structured more appropriately.

  • This should allow utility software to better understand and explain the different parts of the site to the end-user.
  • For example, blind people may have software to read web pages to them.
  • Those whose eyesight is poor may have pages magnified for easier reading and may disable or override the default styles the web site provides.
  • The more accurately the HTML structure reflects the structure of a page, the more accessible the site can be.

The analogy I often think of is when using a word processor, such as Microsoft Word or Open Office.

  • They allow you to make a heading quickly.
  • It is common for people to do this by simply marking some text as bold and increasing its font size.
  • However, the most appropriate and structurally correct way to do this would be to use the predefined styles such as Heading 1, in this example.
  • If you want to change the appearance of this heading style, you use style editors for the word processor.

In the same way, web technologies such as HTML define the structure, while CSS allows the creation and maintenance of styles. Doing so, allows the site to be meaningful for those who have special needs when using the web.

Standards should also make it more accessible to search engines, because appropriate use of structure gives appropriate weight to things like headings and sub-headings. Time will tell if this is the case for this web site...!

Old browsers are more likely to interpret basic, well-structured HTML even if it doesn't look aesthetically appealing. That is, it will at least function. Web developers have often struggled with Netscape 4.x in particular for crashing or partly rendering a page when there has been a mistake in the HTML or the HTML being used gets too complex. Keeping to simpler HTML (and using CSS for the visual presentation) allows more browsers to understand the site.

Slightly Reduced Page Size

Poor adherence to standards and low quality software products to produce web pages have contributed to many web pages having more HTML than necessary. This leads to bloated pages, which is bad on at least two accounts:

  • The page takes longer to download for the end user.
  • There is increased cost for the individual, company or organization to have the web site hosted. For example,
    • More bandwidth may be required to serve these larger files. This can often mean more cost to the web hosting company.
    • Sometimes, additional servers may be required to handle the load, which also adds to the cost.

This web site's HTML structure in the past was not too bad, in my opinion, although in a few places there was unnecessary HTML markup leading to unnecessary bloat. In other cases, there was less than optimal use of other technologies, such as Cascading Stylesheets (CSS), which allow the style of the web pages to be defined. Such “cleaning up” has allowed the final HTML to be a bit more streamlined.

The Home Page has perhaps seen the most improvement in this respect. Before, the home page used to be about 12 to 12.5K in size. This has been reduced to about 8 to 8.5K -- saving roughly one third of the page size. This should imply a quicker download time.

However, for many other pages within the site, there is a lot of content; so unfortunately, the saving isn't that large, though there is some.

(Cost savings are mentioned further below.)

“Standards Compliant”

Using HTML and other web technologies in the most appropriate way that adheres to the standards will also mean that as the technologies change in the future, the web site should still function correctly in newer web browsers. In addition, should I need to make major changes, in theory it should be more easily possible, if needed. This is because the standards will always need to be supported by web browsers and other internet applications that claim to be standards compliant for reading web pages.

Note though, the web site isn't fully standards compliant in all pages yet. There are over 450 pages on the site, and it will still take me a long time to go through all the pages to ensure that each one is compliant. However, this redesign has accomplished a large percentage of the work already.

Standards Help Reduce Costs

In terms of saving raw dollars, I don't personally save much. While the site is quite popular for these types of issues, it is not so large that bandwidth costs are of concern at this time. Other on-going costs remain. Yet, costs can implying at least two things: time, as well as money.

Without standards adherence, web developers have in the past (and continue to do so) write software twice or more.

  • In essence they have to write software that follows the rules of “If the browser is Microsoft Internet Explorer 5 or newer, then show all these features. Else, if it is Netscape 4 or older, show just a minimal set of features” and so on.
  • This approach, although still unfortunately very common, doesn't cater for newer emerging browsers that some could even argue as being technically more superior to the dominant Microsoft Internet Explorer.
  • That is, this approach doesn't “scale” very well.
  • For businesses, people would have to plan projects and budgets to support extra browsers, which is costly.
  • Alternatively users would have to make do with limited functionality even if their web browser is feature rich, or be redirected to an alternative site, which is another cost.

Browsers such as Mozilla (or the leaner Firebird) on which Netscape 7 is based, and Opera, amongst various others, offer richer standards support than Internet Explorer, as well as many useful browsing features.

In working on this redesign, some of my opinions about web browsers have changed. For example:

  • I used to think that Microsoft's Internet Explorer (IE), although dominant in controversial ways, was, like it or not, the best browser out there.
  • However, I have come to the conclusion and opinion that Mozilla/Firebird, for example, is a far better browser, technically, than the overwhelmingly dominant IE, even though the latter is still decent.
  • I have found that Internet Explorer in fact doesn't have many of the common but advanced features that some of these other browsers have, which would have made this redesign even easier.
  • But importantly, Internet Explorer does account for anything from 90 to 98% of the browser type that accesses my site so I must ensure it works properly in this browser. Side NoteNote these statistics come from standard information logged in web server log files. These are standard logs that almost all web servers log to give the web master an idea of what pages are being requested, how well the server responds, where the user came from and so on. An IP address is also logged, but these days an IP address doesn't necessarily mean an end user because of proxy servers and other technology that act on behalf of the end user to actually request the information across the internet. AOL, for example, as well as many other ISPs, use proxy servers, so usually personally identifiable information is not transmitted and logged. I have no control over what information is logged in my log files, as that is governed by the web hosting company that hosts my site. Such numbers are also typical of what you find being discussed on web development web sites.

But perhaps more importantly for businesses, the cost savings would be considerable if the dominant browser had its various bugs fixed and had better standards support.

  • Costs would be in the area of bandwidth, number of servers needed, time wasted coding twice, time wasted creating alternative sites for accessibility requirements, etc.
  • Furthermore, it is likely then that standards oriented efforts would increase in pace, perhaps offering more potential benefits.

An organization known as the Web Standards Project is a grassroots coalition fighting for standards that ensure simple, affordable access to web technologies for all. They provide more detailed, but easy to understand, explanations, if you are interested.

Why Now?

The end of December and beginning of January is usually the month where I get the lowest hits, due to Christmas, holidays, New Year, etc. As a result, launching the change at this time would allow feedback of problems and so on to hopefully be manageable!

But There is Still a Lot More to do

I should stress here that while I have talked about the benefits of web standards in web sites, I have not reached it yet, fully. Some pages such as the home page may be standards compliant, but many pages, will not be. However, they will be closer to standards compliancy than before, and with the changes I have made, I hope over time these remaining pages will also be improved.

There are still many places where I can tidy up content and HTML structure.

XHTML is the next generation for web page language. It is very similar to HTML. This site currently uses XHTML only on the home page. The rest are still HTML, although I have attempted to adhere strictly to the standards where I can. Over time, the goal is to convert pages to be XHTML-compliant.

Due to limited resources, I have not been able to testing on all browsers that I would like to. For example, I don't have ready access to a Mac with popular browsers such as Safari, or Konqueror for Linux. Hopefully, I will be able to do some of this soon, though.

Back to top

Technical Issues

Font, Text and Web Site Sizes on Different Screens

The biggest unknown for me to decide on was the font and default size. In addition, to test how the site would look on a few different font sizes also raised the question of should I let the width change with the font size, or should I fix it, like in the old site? I have decided for now, to let the width change with the font size. This way the site remains mostly proportional and a little bit fluid. Hopefully, this way nothing will therefore move out of place if the screen font is set much larger than default.

Why Do I Have A Horizontal Scroll Bar?

With the decision to let the width of the pages remain proportional to the font size, rather than fixed, if you browse on a larger sized font, the default width may very likely be more than 600 pixels, and for those with a low resolution screen of 800 by 600 may see horizontal scroll bars.

I don't have statistics on what screen resolutions readers read my site in, what font settings and so on, so I have to guess here. Because there are so many combinations of screen resolution, browser window size, preferred font size set by the user and so on, I can't possibly create a screen size that will look right in all these cases. Hence, I have tried to make a few guesses based on some information from web development web sites, etc. Hopefully, these decisions are ok, but as and when needed, and based on feedback I will make changes where possible.

Why Does The Navigation Appear After a Long Delay?

In restructuring the underlying HTML, I have organized it such that the navigation links come at the end of the file, but are still rendered typically on the left hand side of the page.

Putting the navigation at the end of the HTML serves a few purposes:

  • It allows the content to be downloaded first.
  • Readers who turn off styles will see the content first and can begin reading immediately.
  • Even readers using modern browsers will still see content first and can read while the navigation is still being downloaded.
  • Search engines can put more weight appropriately on content, as it appears before the navigation. In the past, the navigation content was getting more weighting with search engines, leading to some pages being more inappropriately popular, or, some pages not being ranked as well as they could.

This will lead to the effect of the navigation appearing last. In the old site, this would happen to the content. For some very long pages, the header and navigation would appear, but it would take some time for the real content (the primary purpose of the page) to appear. I have reversed this now. I hope it is bearable!

I am using Netscape 4. Why is it so basic looking now?

One of the things mentioned above was that old and new browsers should be able to access the content more easily with more standards oriented web pages. Netscape 4 has often caused problems for web developers.

Due to the extremely tiny percentage of readers on my site that use Netscape 4, I have decided not to worry about making the site look aesthetically pleasing for Netscape 4, but to at least ensure it is still functional, and that all the basic features are still there so content can still be read.

In fact, Netscape 4 is not standards compliant, and it would be impossible to create this site to look the same for that browser without resorting to the double coding described earlier.

Standards-oriented browsers (though themselves sometimes with bugs!) are browsers such as Microsoft Internet Explorer 5.x and higher, Opera, and Mozilla/Firebird/Netscape 7 mentioned above (as well as others). If you are on Netscape 4 you are encouraged to upgrade to one of these browsers, though it is not necessary. Mozilla or Opera is a good (perhaps better?) alternative if you refuse to use Microsoft software!

Back to top

More Information

There are a number of web development magazines and web sites now encouraging the adoptions of web standards. The following list is not meant to be exhaustive, but just a sampling, including the ones I have frequently used and benefited from. If you are a web developer or belong to an organization who has a web site, perhaps also on social justice issues, then you might find it useful to consider these issues:

  • The Web Standards Project is a grassroots coalition fighting for more standards to ensure simple and affordable access to web technologies for everybody.
  • WebAim; Web Accessibility in Mind has the daunting goal to “improve accessibility to online learning opportunities for all people.” They provide article showing how to make sites that are accessible, without losing style and excitement.
  • CSS Zen Garden is a web site that showcases how with minimal HTML markup, standards-based sites do not need to look boring and simple (even though maybe mine is!!) On this site, they provide a simple web page where the XHTML markup is standards compliant, and they allow people to submit different CSS styles to showcase how varied and creative one can be with standards oriented technologies. Side NoteOf course, this is less practical for my site, but for those interested in these issues, provides a useful example of the potential. To have created some of the variations seen on their site with bloated HTML as many sites (including, for example, Microsoft's own web site), would require larger pages, which means more download time for users, and more bandwidth costs for owners of such web sites.

Back to top

Read more about this site:

Author and Page Information

  • by Anup Shah
  • Created: Wednesday, December 31, 2003

Back to top