Designing the Clare Hall Summer Soirée Website

My first foray into the world of web design, and some lessons from designing the event webpage for my college’s annual student garden party.

Clare Hall Sumemr Soirée banner Clare Hall Summer Soirée Homepage Banner | Photographed: F.X. Quah | Vector art:

Humble Beginnings

In Cambridge, I belong to Clare Hall, a humble college of about 250 people. It was in last November when I heard news of some students keen to organise a Garden Party at our college. To the uninitiated, Garden Parties and their larger counterparts the May Balls, are student-run parties that mark and celebrate the end of an academic year. The large and famous colleges (think Trinity, St John’s) take the organisation of these parties very seriously and tickets often sell out in record time. It was heartwarming to know that despite being a small player in the game, there were people at Clare Hall who wanted to be starting something.

Having some decent experience in coding, I thought that Clare Hall could use an event website. Moreover, I was keen to be involved in a full creative project from start to finish. I knew I possessed the correct, albeit incomplete, skillset for the task, but learning the necessary knowledge was something achievable. Therefore, I signed up: that move alone increased the size of the organising team by a whooping 33% — a testament to how tiny Clare Hall was. In this blog post, I intend to detail my experience designing the website for Clare Hall Summer Soirée 2019, with the hope that the advice and links might be useful for upcoming student web designers.

Aiming High with Little

I believed that having an actual event website was important, because it would elevate the event’s credibility and allure. I also set myself the aim of creating an amazing website without spending a single penny, as I wanted us to conserve as much of the revenue from ticket sales for the actual event (performers, decorations, food, etc.). I also wanted to go beyond the straightforward Facebook event page. I guess it’s to do with the nature of Facebook being a do-it-all social media platform. Events hosted there have that “mass produced” feel which everyone has become too accustommed with, and would give us a difficult time standing out.

The first step was to find a domain to host the website. There were various free options out there, such as GitHub Pages which I have used extensively for my personal websites. Alternatively, the University also had a Student Run Computing Facility who provided domains for University members. These centrally managed domains had another advantage that the ownership access was authenticated through my University online account, i.e. Raven, and I can easily request for others to be added. This was much more superior for future proofing when I eventually hand over the management of the website, compared to passwords in a Google Drive document.

With our Internet accomodation woes out of the way, the time had come to bring our webpage to life. In 2019, it goes without saying that a great website must be optimised for the mobile user experience. Although websites vary substantially in their apprearence, underlying them is a similar structure: a folder of files that specify content and style. The content files are written in the Hypertext Markup Language, or HTML, which by default manifest as boring plain white pages. It is through the amalgamation of the HTML with the style files, i.e., Cascading Style Sheets (CSS), that the content springs to life. Grasping HTML and CSS at a basic proficiency was not difficult (I recommend this excellent book by Shay Howe). However, it was much more challenging to learn how to write good CSS code for mobile devices, especially if one wishes to optimise for the wealth of screen sizes in use today.

Fortunately, there are a plethora of ready made website templates that are optimised for normal and mobile viewing. The layman might be familiar with those bundled with the popular Squarespace, Wordpress and Wix platforms. Sticking to mantra of keeping the site free of cost, I opted for the open source site generator Jekyll. Many generous programmers have handcrafted beautiful Jekyll themes to choose from, and even made the underlying source code publicly available. The source code was, you guess it, in the HTML and CSS languages! With a basic understanding of HTML + CSS, I was able to read, understand and tweak the website templates to suit our purposes. I knew that knowledge would come in handy, and the Clare Hall Summer Soirée website is all eye candy.

Reflecting on the Journey

I have written a lot about the hard skills in coding the website, but there is an equally important soft aspect pertaining to the art of actually designing the website. Knowing HTML + CSS coding is likened to memoring the words of a language and the correct grammar. The soft skills came into play as when one thinks about how to piece web elements together to form a functioning website. In a normal language setting, there are many vocabularily and gramatically correct ways to say something. However, there are usually one or two ways of doing so which are easier to understand, and this was no different in web design.

Taking the Clare Hall Summer Soirée website as an example, I strived for simplicity in its design and keeping the content concise. Although it was technically possible to include more content, that would require more rows and columns, and I would have to worry how these elements resize/behave/position on a mobile device. In retrospect, I realised that these design ideas and choices came almost subconsciously to me. I attribute it to the little natural artistic talent I have. Such concepts might not be as intuitive to other people, but they are not impossible to learn. There is a book called Don’t Make Me Think by Steve Krug, which I have not read, but has been widely recommended for those interested about web usability.

The Clare Hall Summer Soirée website was launched on Tuesday 26th March, just under a week ago. I received rave praises from colleagues and friends alike. Building this website was challenging and off the beaten path, but it has been ultimately an invaluable experience in terms of enhancing my technical skills and expressing my creativity. I can’t be grateful enough to my team members, who provided the most honest (and harshest) critique with no sugar coating. What I wouldn’t mind, however, is some sugar coated doughnuts and macaroons when the party happens this summer!

— f(x) quah

The Clare Hall Summer Soirée 2019: Lost in Wonderland takes place on Saturday 14th July 2019. The event website was created by me and is viewable here.