Mobile Optimization

As part of the junior-level curriculum in Interactive Media, we take a class called "Designing for the World Wide Web." The course focuses on learning how to write valid XHTML and CSS by hand to create better websites. The fourth project in the course required us to develop a blog design that was optimized for both the iPhone and printing. The HTML wasn't to change between the two designs — only the CSS was to change.

My design features a three-column layout that transforms to one column on Mobile Safari. The Flash video doesn't appear when using Mobile Safari (since the iPhone, iPod touch, and iPad do not support Flash). Also, when printing, none of the sidebars or Flash video appear because they're not relevant to the content that's being printed (a navigation menu on a print out doesn't do a lot of good!).