Site Design

Design Philosophy  Technical Design 

Design Philosophy
I believe that the three cornerstones of any site must be that it is:

• Quick to load:
  In order to keep bandwidth to a minimum, the site:
  • Minimises use of graphics
    Wherever possible I have avoided images to create the menu. The whole menu is HTML based and contains no images. A standard page on the site will contain only two images: the "robinmassart.com" text on the very left and the page title to the immediate right of this. The simple reason for this is that I have not found a way of displaying vertical text in HTML. If anybody knows a way, please let me know! The only other images you will find are photos, whose size I have tried to keep below 30KB. Pages containing a number of photos use thumbnails.
  • Uses stylesheets
    By completely avoiding inline styles, the site avoids duplication of style data. This not only cuts file size, but also makes it much easier to spot duplicate style classes. Also, by using DIV tags and CSS I have completely removed the need for tables from the general layout of the page. This is something to be encourages, since tables should not be used to layout HTML pages, but to display information in a meaningful way. There are still some pages that use tables for things other than to display tabular information, but these are pages written a few years ago and I haven't got round to updating them yet.
  • Avoids plug-ins
    There are no plug-ins in the site. There is a big, never-ending debate concerning the pros and cons of plug-ins on the web. Given that plug-ins are extras, it is argued that not all browsers will support them. This may have been true 3 years ago, but I believe that nowadays the more popular plug-ins such Flash are available in pretty much all browsers, making this argument invalid. This doesn't mean I agree to the use of Flash etc. There are certain areas where Flash undoubtedly has its uses, eg for presentational purposes. But the one thing which really puts me off entering a site is if, first I have to wait for the page to load and then all I see is "Loading..." whilst Flash then spends 3 minutes to load a presentation. I find the initial page has to be quick to load and can be static. Any presentational elements can then be added within the site. Admittedly my own site goes against this rule, since the initial page is about 100KB and therefore may take a few seconds to load. It then contains some DHTML to create an interesting effect with the arrows. I created this page some time ago and quite like it, so I am letting my heart rule my head and have not removed it. I suppose you could see this as "the exception that proves the rule". :-)
     
• Simple to navigate:
  There is nothing I hate more, than getting 'lost' in a site. I believe a site should not have more than three layers of depth to its navigation. Thus this site has a main menu, each item of which may contain a drop down submenu containing links to the pages. Some pages then contain "next" and "previous" buttons to navigate within the page, if there is a lot of info to display. I have done this, for two reasons. Firstly I have tried to keep scrolling to a minimum, thus long pages are split into two or three. The exceptions to this are my "Diary" page and the page you are currently viewing, which are very long and I have therefore decided to display them in one page. Secondly, by splitting the pages up, I have minimised the number of photos in my travel sections to two per page.
   
• Targets broad audience:
  This site has been designed to be compatible with as many browsers as possible. In order to achieve this, I have minimised the use of JavaScript, except in obvious pages such as "Sokoban". Next I have made sure that it standards compliant (see below). Finally I have tested it in as many browsers as I can get my hands on! These include Mozilla, Firebrid, Opera and Internet Explorer. If anybody is using Safari (Mac), I would be grateful if you can let me know whether the site works properly.
   

top

Technical Design

• Coding:
  A brief word on the code that runs this site. On the server-side, I have used PHP (see below) which is an open source technology and therefore available for free to all. As a database I have MySQL - again because it is free. Actually, there is another reason for this choice of server-side technologies and that is that they were new to me beforehand, so I decided to learn some new programming languages outside of work. On the client-side the technologies are more obvious: HTML, CSS and JavaScript have been combined to display the page, define the layout and provide any functionality that is used.
  
  After a couple of years of being online, I completely recoded the site to bring it inline with new standards and recommendations and also bring it into line with my web development philosophy, which is that Less is More. By this I mean that the less code you use the better the site has been designed. Before then I always found my code to be somewhat unclear, however I didn't want to change it because many of the effects could not be created since few browsers were fully standards compliant. However with the advent of Mozilla and IE6, this problem has now been mainly solved. So I went through the whole code and removed as much HTML and JavaScript code as possible, without altering the visual design. The result is that - to me at least - the code is now crystal clear. Examples included removing as many tables as possible and replacing with div tags positioned using CSS. In fact the site now very rarely uses any HTML tables. This is a good thing, since tables should only really be used to display tabular info (and not to layout a page). I simplified the HTML and JavaScript that provides the menu functionality and I made as much use of CSS as possible. So, whilst visibly, there is little, if any, difference, behind the scenes a lot was changed. (See 'Design Philosophy' for more info). On the other hand, the less is more idea in no way applies to comments, where More is definitely More. It is hard enough trying to understand ones own code after 3 years, let alone that of someone else. Note, though, that you may not find many comments in my HTML, since it is generated using a database and PHP, but my PHP code is fully commented - for my own sanity's sake!
   
• Standards:
  As stated above this site is completely standards compliant:
  •  HTML 4.01 Compliant
  •  CSS 2 Compliant
     
• Compatibility:
  Regarding browser compatibility, I strongly urge users to use a fully standards compliant browser such as Mozilla (which is also OpenSource, meaning bugs are fixed quickly). The obvious reason for this is that only by sticking to standards can web developers guarantee the correct presentation of their site. Microsoft did its best to ignore standards initially and introduce its own tags in an attempt (largely successful) to dominate the market. With IE 6 it now seems to have produced a largely standards compliant browser, but still it is a bit patchy. Also, if security issues are a concern, OpenSource is the best way to go, since this enables millions of developers across the world to search for security issues. Another point to note is that Microsoft has decided to stop offering IE as a standalone browser. This means that the only way to obtain future version of IE will be to install the operating system that contains the latest version.
  In any case, I have successfully tested the site using the following browsers (if you find any bugs, please let me know):
   
  •  Mozilla 1.4
  •  Mozilla Firebird
  •  Opera 7
  •  Netscape 7
  •  Internet Explorer 6
    I would have liked to test it in IE5, but since you can't install both versions on the same computer, I can't. Also, whilst the code is completely standards compliant as mentioned above, the DOCTYPE tag for the DTD info is not included when viewing the page in IE. This is because IE displays the menu wrongly if I include the DTD.This is rather bizarre, given that it works properly in IE without the DTD and in all other browsers with the DTD. Maybe Microsoft can explain this one!
     
• Technologies used:
  I have tried to use OpenSource technologies as far as possible whilst developing this site. The main reason for this is that they are free! But also it means they are more likely to be stable, since bugs will be fixed immediately and you don't have to wait 6 months for service packs.
   
  •  PHP 4.3.1 Click here for PHP Info about this site.
  •  MySQL 4.0.12

top