The 2012 version of the edUi Conference website uses basically the same WordPress theme that the 2011 version of the website used. However, for this year, we chose to retrofit the existing design into a responsive layout. This was our first foray into responsive design. Oddly, this version of the edUi website remains one of the few conference websites we’ve visited that offers a responsive layout.
For this project, the functionality of the theme was already in place, so we didn’t have to do any work on that end. Instead, we focused entirely on modifying the existing stylesheet so that it would respond to various screen sizes.
Because of the nature of the layout, we decided to give it a fixed maximum width in order to avoid long lines of text, etc. However, the design should respond and react to smaller screen sizes down to approximately 300 pixels.
There were two challenging aspects of this project. The first was to understand how heights in responsive design are proportional to the widths of their containers. The other challenge was to decide how to present the schedule (which is, by nature, a table of data) in a manner that would work on small screen sizes.