Wednesday, February 15th, 2012

27 notes

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. 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? (via sebastianwaters)

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.

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?

(via sebastianwaters)

View in High-Res Source: sebastianwaters

Tagged with

Share this post