moxy web culture magazine

we’re embracing “responsive” but neglecting the second part: “design.”

- Paul Lloyd (2012)

This is my attempt to rectify that.

First order of business was to design a home page which was easy to master and accessible but would work at any size.The largest layout works in a four column grid and makes use of the real estate found on wide screens.

The next size down is a three column grid which is ideal for tablets and smaller screens such as those found on notebooks.

The third size is a two column grid which would mostly be found on iPhone 5 and Androids set to portrait mode. Larger images are switched out for smaller versions, which helps with load times and saves on precious bandwidth for people with 3G.

The fourth and final size is a single column which would be most commonly found on most smart phones. Once again larger images are switched out for even smaller ones.

The first two largest versions of the site use the same image, pushing it around a little to arrange it nicely on the screen. The last two images are cut down versions of the large one, easing up on bandwidth usage and unnecessary downloading.

Even the video responds to the size changes which is an uncommon touch. The code has been done in such a way that a non technicalperson can easily swap the video out.

At the next size down the buttons begin to stack.

The mobile layout changes significantly. Buttons become wider to become more accessible on smaller screens.

Navigation buttons are set at the bottom of the page. Since the front page doesn’t fall below the fold of most screens they are still readily accessible.

As the screen goes smaller the buttons close in and get nice and cosey.

The largest size makes use of a lot the horizontal space that’s available on desktop monitors. This is made possible by columns, something that’s common within printed media, but entirely unheard of in the digital realm.

The second size narrows the columns slightly, keeping lines at a comfortable length.

The third size jumps away from the column layout and becomes a more standard layout. Text size grows smaller on the body text, titles and drop caps.

The final size is fluid, allowing the text to span the entire width of a mobile screen. No space is wasted on unnecessary borders down the sides. Mobile phones come at such varying sizes that it’s insane to design for only one size in specific.