Responsive Design Experiments 1

I’ve been playing with creating responsive layouts for my template. I want to ensure that my theme is available and adaptable across a range of devices, and to ensure that it is flexible enough to cope with different device resolutions, now and in the future. I like the skeleton framework, which uses media queries to adapt to four sizes – 960px wide (desktop), 768px wide (tablet portrait), 480px wide (phone landscape), and ¬†320px wide (phone portrait). It uses fixed widths, with the pages being delivered to output based on device detection.

I decided to adapt the ¬†template to a percentage based fluid layout, with a maximum 960px width layout. I’m still sticking to the four key layouts, but with percentage spacing between. This ensures that I can define specific ‘looks’ to the four states, but am able to cope with non-standard resolutions. I’ve made a start on the adaptations, defining the columns (skeleton uses a 16 column grid) and gutters as percentages, and typography as ems rather than pixels. The next step is to work into images, making auto resizing images, and looking at how to code a swap, so WordPress loads resolution-sized images, to reduce filesize on mobile devices.

Below are the wireframes for the device states, and you can see it in action here (if you drag the bottom right corner of your browser and manually resize it, you’ll see the layout change). These aren’t the finished layouts, but demonstrate the principle;

Desktop
Desktop/Tablet Landscape
Tablet Portrait
Tablet Portrait
Phone Landscape
Phone Landscape
Phone Portrait
Phone Portrait

Clearly, it is very unpretty at the moment, but it does give me an opportunity to test that fluid resizing is happening, and that my breakpoints are happening where I want them to. I can confidently start to layout pages, and begin to look at responsive layouts for specific post types, such as video pages and image galleries. w00t!