Responsive Web Design

The Context & The Problem

We’re a “bring your own device” district. What this means is that we’ve the wild west of screen sizes. Smartphones, at their best, are 800 by 600 pixels (ignore Samsung’s odd experiment). Netbooks (which we have at the middle schools) are 1024 in width with some goofy height. And then there are the many variations of laptop and desktop screen sizes.

At its root, that means websites function differently depending on what is viewing them.

This is a major issue for online learning. A 3 column Moodle theme will look terrible on a cell phone and drive the end user crazy. Your portal site might lack clarity. Parents and students can get lost looking for important information. Design/screen size contrast takes away from the all encompassing technology goal of “it just works.”

Enter: Responsive Web Design

The basic idea of responsive web design is that you develop a website to “respond” to the size of the screen. For example, a four column layout may, on a smartphone, rearrange to a 1 column stacked layout.

Responsive Web Design Example: Mr. Simon Collison

How?

Typically your website (usually in the header) runs a media query to determine what type of screen you’re using. The required CSS is then served up, creating a responsive design.

Down the Road Ideas

My future interest is how to get the web to be the jackknife application. Because students continue to bring in a wide array of devices, we need a platform neutral framework for delivering tools to students. The web (with its promise of HTML 5) is that tool.

Designing pages to respond to the wide variety of screens will increase functionality.

Time to start redeveloping the portal!