A new responsive design

I just launched a new website that is my first venture into responsive web design. In a nutshell, responsive web design involves designing and coding a site to adjust itself to the size of the screen it’s being viewed on. To put it another way, it’s responding to the ever-changing and diverse spectrum of screen sizes and resolutions that web designers have to take into account when creating a website. So, if you have a giant monitor, an iPad or a mobile phone, the site will look and act appropriately.

The site I just finished is for a KU project called CRL Learns, a lecture series that centers around cutting edge educational research and technology. It features a flexible grid that’s all based on the screen width and switches between 1, 2 and 3 column layouts.

I’ll get the technical stuff out of the way first: The site is coded in HTML5 and uses the media queries in CSS3 to detect the screen size. ExpressionEngine is powering the backend and is actually drawing content from across multiple websites using the multi-site manager. It features a Vimeo widget on the front page to display the latest videos and a custom Google Search.

Here is a quick rundown of the various screen sizes (click the images for larger versions):

At the largest size, 1200+ pixels, the layout has 3 columns. The idea was to make the coming events prominent and have the featured video feature prominently in the center of the screen.

The medium size is the primary size for most desktop computer screens. The thumbnails of past videos move to the bottom since they’re the third most important piece of information. The two column layout works well with the content with a submenu on the secondary pages.

The iPad or tablet size takes the layout down to 1 column and boosts the text size for the smaller device. That is a main complaint I hear with websites on mobile devices – the text is too small! One of the coolest parts of CSS3 and responsive web design is being able to address and fix issues with the viewing platform with respect to the content.

The iPhone or phone size continues using the 1 column layout and larger text. However, the menu for past events and presenter bios moves down to the bottom of the page because we felt that most people that come to the site on a phone are looking for the upcoming events and we wanted that to show up first.

I’m really excited to continue working with responsive design on the web! It makes a lot of sense to me since the web is a flexible and adaptable medium to begin with. For more information on responsive web design, check out this article on A List Apart.

So, go ahead and try the site out! On most modern browsers, you should be able to just resize your screen to see the different sizes take effect.

UPDATE: I wrote an overview of responsive web design over at the Stratepedia blog if you’re interested in some other examples.