Skip to content

ICFEM 2013 Conference Website

Visual design and development of a conference website for ICFEM 2013. Hand-coded HTML & CSS to ensure a good user experience in all sizes of device.

Created for ICFEM Conference Organising Committee in 2012

Technologies: CSS, HTML, PHP, Responsive CSS

Requirements

The ICFEM Conference organisers wanted a website to keep potential participants informed about the conference. As the conference is being held in a particularly scenic location (Queenstown, New Zealand), they wanted to highlight the beauty and attractions of the area. They also wanted the site to be accessible to people using a wide variety of devices.

Solution

I was responsible for both the visual design and development of the site. The images were sources from creative commons licenced sources on flickr and I created the main banner image as well as developing the colour palette. The site is responsive using CSS media queries, with three different layouts depending on the size of the viewer's device. It is primarily a static HTML site, although PHP is used in order to reuse the common header, navigation and footer code.

In order to further promote Queenstown as a destination, I researched the conference venue and the local area, and created a location page. This includes a listing of some of the major attractions in the area, as well as information about transport to and within Queenstown.

Screenshots

Home page in large (desktop) size

ICFEM Home

Home page in medium (tablet, small window) size

ICFEM Home - Tablet

Page in mobile size

ICFEM Mobile Home Page

Location & attractions page

ICFEM Locations Page

Registration Page

The registration page includes client-side validation using Twitter Bootstrap styles and jQuery validation framework. This excerpt shows some of the validation in place to ensure valid email addresses and to ensure a selection is made in the dropdown. There are also custom scripts to dynamically calculate the price based on the users selections.

ICFEM Registration

Summary

The site was used successfully for the conference, and is still live even after the conference is over.