About this site
While this site is quite small, the technologies it uses are common to many of the solutions we deliver to our clients. Similar to this site, a lot of our projects mix elements from our existing codebase, third-party libraries and bespoke code to deliver effective and good value solutions. The following article summarises the various different technical components of the site.
XHTML and CSS
All that you see on the page is a result of your web browser reading XHTML and CSS code. The content of the page is formatted in standards-compliant XHTML, with layout and design defined by the CSS. Writing code that conforms to web standards brings the following benefits:
- XHTML/CSS solutions produce significantly less code than table-based layouts. This affords numerous advantages including easier maintenance, less bandwidth usage, improved scalability and better stability.
- The separation of content (XHTML) and layout (CSS) makes it much simpler to deliver the website across multiple platforms (e.g. web, mobile devices, etc.), should that be required in the future.
- Website accessibility is improved across browser platforms, including software designed specifically for people with disabilities (e.g. voice, Braille and large-text browsers).
- As web standards are designed with forward and backward compatibility in mind, the amount of work required to ensure compatibility with future browser releases is reduced.
- A standards-compliant website will be more understandable to a wider range of web professionals, ensuring the client is not tied in by a developer producing unreadable and obscure code.
The Web Standards Project website has further information on the benefits of producing standards-compliant websites.
Microsoft IIS
When you visit a web page by clicking on a link or entering a URL, your browser is asking a web server for a particular set of files that make up that page. The web server is a piece of software that is always available on a designated computer, and is specially designed to listen for these requests.
The web server we are currently using for this site is Microsoft Internet Information Server (IIS), which comes with Windows. Alternative web server software we often use is Apache, the very popular open-source web server platform that can run on Windows and Linux operating systems.
Web servers are generally quite straighforward application, optimized to service as many requests in as short a time as possible. The web server does a bit more for us on this site, using the Ionics ISAPI Rewrite filter to tidy up the URLs for each page, making them a bit more user-friendly.
Adobe Coldfusion
Certain parts of the site (e.g. Company News and the Blog), require something a bit more sophisticated than the standard request/response process of the basic web page. News and blog items are stored in a database (see below) and Adobe Coldfusion gives us the ability to read information out of the database and insert it into our web pages.
This approach to writing websites means we can easily create larger and more functionally rich web-based applications. The vast majority of our technical solutions use Coldfusion to give our clients sophisticated functionality, often using their existing corporate databases.
Microsoft SQL Server
Some of the content of this site is stored in a database, in this case Microsoft SQL Server. Other database server platforms we have used include Oracle and MySQL. While it is technically possible to drive a dynamic website on software such as Microsoft Access, desktop packages like this are not designed to work in the high-volume, speed-optimized environments required by most web sites.
Subversion
All code and static content is held in a Subversion repository. This life-saving version control system keeps track of code, images and documents, giving us the peace of mind that comes with knowing that you can easily rectify any mistakes. It also greatly simplifies the backups (via batch files), makes uploading only the new and modified files a breeze (in conjunction with Ant) and even gives us the raw statistics (via StatSVN) that show us how much we are undercharging our clients for the thousands of lines of code we write for them.
It is, quite simply, indispensable and we use it on all of our projects.
Microformats
Microformats are a set of simple data formats for structuring common types of information to make the same content readable by machines and human beings.
For instance, our contact page includes an hCard that displays our company contact information to people reading the page, but is also structured in such a way that an hCard-enabled piece of software can automatically extract the contact information from the page and do something useful with it (such as export it to your online address book).
This is a relatively new technology, but is rapidly gaining traction in the online world. We reckon it will be one of those things that as more people use it, we'll wonder how we ever did without it.
RSS
Every time we write a new blog entry or news article, it is added to our RSS feed. This is a text file in a standard format that can be read by RSS-compatible software. This means that people who use a feed reader application can subscribe to our feed and have our latest news delivered straight to them without having to visit the website.
This is an incredibly powerful piece of technology. For instance, Matt currently subscribes to over 125 feeds - it would take ages to visit all these websites individually, but aggregating the fresh content into a single place saves a great deal of time.
The BBC has a good guide to RSS, subscription and news reader software. If you regularly use more than one computer, a web-based aggregator service (such as Bloglines) will probably suit you best.
Gravatars
When someone comments on a blog entry, we check their email address with the Gravatar (Globally Recognised Avatar) service to try and find their personal image to display with their comment. We think it adds something to a comment thread to see the participants' photos, and would urge everyone to sign up with this great little free service.
Third-party code and assets
Always keen to avoid reinventing the wheel, we have used a number of third-party code and digital asset libraries:
- We have integrated Ray Camden's BlogCFC code into the site to drive the administration of the blog and news content. The man is a Coldfusion legend.
- The funky iTunes-style reflections below the screenshots on our homepage (and in various other places) are generated by the Reflection.js Javascript library.
- The case study screenshots use the Lightbox JS script, which is a delightfully unobtrusive way of providing clickable image thumbnails avoiding the usability minefield and technical rigmarole of popup windows. We're big fans of this one.
- The little icons used on the blog are from the famfamfam.com Mini collection.
- The site navigation is implemented in CSS after a technique from Exploding Boy.
Other software
Producing and managing the site involves a quite a few different pieces of software too:
- Coldfusion, XHTML, CSS and SQL is written in our favourite open-source development environment, Eclipse and the Homesite-slaying CFEclipse plugin.
- Original images and graphics are generated and optimized in Adobe Photoshop/ImageReady.
- We cross-browser test in various different configurations of browser (Internet Explorer, Firefox, Safari, Opera, etc.) and operating systems (Windows and Apple OSX).
- We're finding JMeter increasingly useful in website testing.
- We often stare at our site usage statistics in Google Analytics, and wonder why no-one loves us.
