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?

27 notes   February 15, 2012 · 18:04

1. webpackbook reblogged this from sebastianwaters
2. kbogomaz liked this
3. shtin reblogged this from sebastianwaters
4. beautifulstrange liked this
5. mootpointer liked this
6. renaemason liked this
7. callil liked this
8. zombieparade liked this
9. lindseykirkbride reblogged this from sebastianwaters
10. thehookie liked this
11. uvpoblotzki liked this
12. icelandiceland liked this
13. perfectible liked this
14. karl-otto liked this
15. espinnwand liked this
16. austerberryprocon3 liked this
17. eins-ah liked this
18. sausageoutthebombbaydoor answered: love this.
19. carambotti reblogged this from sebastianwaters and added:

    Cool, interactive page to see layouts on multiple platforms. And this guy has an amazing webpage to look thru as well:...

20. kakablogs liked this
21. idontcareee liked this
22. ryantylerthomas reblogged this from sebastianwaters and added:

    Made with HTML/CSS (no images, no JS*) this is a simple interactive experiment with responsive design techniques. Use...

23. lococroco reblogged this from sebastianwaters
24. bjibacache liked this
25. artisticpie liked this
26. 13esmidia liked this
27. sebastianwaters posted this