Portfolio: ESSA website

The latest website I have been working on is a new WordPress blog (in fact, the first WP theme I have made) for my good friends over at the Economics Student Society of Australia, a new club at the University of Melbourne (where I study and work).

The website based on WordPress, however a complex theme had to be developed for their needs, as they wanted many different custom pages not normally exposed by the WordPress engine. This is evident on the home page, where the posts are organised in an irregular fashion, and there is a listing of the categories on the site.

Anyway, check out the site at, and if you have any comments just post below.

Adventures in responsive design

This site is but a few days old, and I am already trying to improve the design. Oh well. The first thing on my site improvement agenda is to try to make the design “responsive”. Basically, a responsive web design is one that is able to adapt, or respond, to different browsing environments, namely, different screen resolutions (and to an extent, different pixel densities, but more on that later). This is of course, great, since then even people with really small screens can still view the site, and perhaps most importantly it negates the need for a dedicated mobile version.

The basic way to make a web design responsive is to use CSS to specify certain styles that only apply at different screen resolutions, through the use of the @media directive:

@media screen and (max-width: 980px) { }

Using these “conditional” selectors, if you like, it is possible to make elements change width or font-size, or hide themselves altogether, without the need for JavaScript. Using these selectors is quite easy: I found the hard part was designing the markup of the pages so that they could be modified easily using CSS. For example, I wanted the sidebar to become a footer at low widths (as the links on the sidebar are secondary, the breadcrumbs providing the primary navigation). However, this meant I had to ensure that the sidebar HTML was entirely after the markup of the main content.

Read more…