Toggle!

What's this all about?

Responsive layouts, responsively wireframed

Made with HTML/CSS (no images, no JS*) this is a simple interactive experiment with responsive design techniques. Use the buttons top-right to toggle between desktop and mobile layouts.

Using simple layout wireframes, this illustrates how a series of pages could work across these different devices, by simulating how the layout of each page would change responsively, to suit the context.

Responsive layouts?

Producing static wireframes to design layouts for websites, web applications and user-interfaces has worked well for a long time. However, with the exponential growth of devices upon which our designs may be viewed, the use of responsive web design techniques is becoming an increasingly popular approach to handling this problem - allowing layouts to adapt to different devices, with their many varied screen sizes.

However, this solution creates a new problem: How should we go about the process of designing these variable layouts? If traditional static wireframes aren't ideal, what approaches should be used? We need to prototype our responsive designs, as we design them - but how?

Enter, responsive wireframes?

The 'wireframes' on this page (which are only very simple, high-level examples) were created with HTML/CSS, and some argue that this is the answer; to design in the browser. Although a logical approach, for some this is too harsh a shift in approach. The creation of code is a precise process, with intention, a purposeful act. For many creative-thinking people, it's too far abstracted from the more direct, fundamental act of mark making, putting paint on a canvas, uninhibited thinking. It stifles their creativity and gets in the way of quick, disposable experimentation and, they argue, leads to formulaic designs.

So which is better?

Traditional wireframes? They're quick, working drafts, disposable... but static. They don't help us imagine layouts in a myriad of different contexts, with variable layouts. When used for responsive designs, a stretch of the imagination is required.

HTML? Much better for prototyping our tricky responsive layouts, and the potentially reusable code avoids duplication of effort. Seems an obvious choice. But it's slower to hand-code mark-up, a more precise craft, less disposable, less suitable for creative thought.

So, what's the answer?

Seems like we're still working it out... As well as being a bit of fun experimentation, this page is also intended as a stimulus for further debate about new approaches, and new tooling.

Just wondering...

Is this page itself responsive? Well of course! Although it's very simple, give it a go. Resize your browser so it's very narrow, or view this page on both a desktop and mobile browser to see how the layout adapts for each. For a much more fun example, you should also see my other experiment:
Responsive Design, Responsively Illustrated

*The only Javascript used is -prefix-free by Lea Verou, css3-mediaqueries.js by Wouter van der Graaf, and finally LESS to compile my CSS. None of these scripts are required to create this demo, but they help keep things tidy, negating the need for lots of manual typing, multiple vendor prefixes etc, while keeping the scope of browser support as wide as possible.

Thanks for viewing

James Mellers Follow @thismanslife