Welcome to the new and improved Fiasco Design. With our new identity, comes a new online approach. As explained in our post here, we are welcoming the advent of what is called responsive web design. But what exactly is it, I hear you ask. Put simply, a responsive website has a liquid layout that adjusts to the size of the browser window. As elements are sized in percentages they can dynamically adapt to the screen width, whereas most websites are designed with fixed sizes defined in pixels. You can try it yourself by dragging the bottom right corner of this window to the left and see.
In light of this, we’ve a pick’n’mix of the most syrupy code available on the web, just for you. Some of the best and brightest responsive designs, chosen with particular attention to their innovative treatment of tablet and mobile adaptation. A great place to start is where most responsive designers begin. With the work of Ethan Marcotte. Ethan’s seminal article argues for the practice and shows a few examples, one of which is this charming “Baker Street Enquirer” example which is a benchmark for attention to detail.
Anderssonwise.com is another example of the liquid approach done so well that the site barely ever looks stretched or ugly, yet deals with huge, full-screen images that can be a pain with cropping issues. And its not all for show, the site can do justice to the beautiful photography and can now communicate the best sense of space in Wises’ fantastic architecture.
Next up, we have an illustrative feast in the form of Ready to Inspire! A conference about design and the future of the web, it was important that this one didn’t skimp on the details. But the designers Mangrove have really outdone themselves. Notice how “the historical location” illustrations slide in amongst each other, a feature that actually encourages a little browser exploration.
Scribbletone have produced a site for Design Week Portland that, you might have seen yourself. The simplicity of the mobile site is to be commended, as it would be tempting to hang onto the lovely calendar-like features of the desktop version. The custom type is not to be scoffed at either.
Number five is a fitting site for the clothes make “Dress Responsively“. Yes, that is responsively, and their site codes that way too. The attention to detail in the navigation is a wonder to behold, with navigation elements staying tight alongside very precise font sizes changes.
There’s a roundup of our first five, but we want to see more.
If you have any examples, we’d love to see them! Please share with the comments below or send us a tweet.