Desktop, notebook, iPad and smartphone displaying website

Web design: Responsive elegance

Implemented responsive web design to automatically respond to different screen resolutions and device orientation, without having to know details of every possible display, notebook, netbook, smartphone, tablet or other access device.

This new WordPress theme builds on the minimalist approach of the iA³ template from Information Architects. I’ve enhanced the HTML5, CSS3 and JavaScript code so I can easily run all blogs and websites from a shared source.

The new design puts the focus on the content: important as we increasingly consume content away from the website using RSS and magazine apps like Flipboard.

  • The design gracefully collapses as the screen width reduces, with white space and margins disappearing while the content remains fixed.
  • At the width of the iPad in portrait mode the design flips into a narrower version with alternative navigation.
  • On narrow smartphones the navigation is reduced to a space-saving pull-down menu.
  • Icons are removed on smaller devices to further reduce clutter.