Gallery of responsive websites. A great collection ! 

Recently I set out to build a responsive thumbnail gallery. I expected it to take me a few minutes, but in reality it took me a few hours to work through. We’ll walk through a similar process today to help you get your mind wrapped around how it works.

dstorey:

With all this new fangled talk of responsive web design, its about time that we had a poster child CSS unit to go with it. So move over em, CSS3 Values and Units introduces a bunch of new viewport units that are getting ready for their time in the limelight.

Motorola recently implemented…

Last Thursday, I popped over to London and met with a small group of folks to chat about the various tools, techniques, problems, and solutions surrounding the subject of responsive web design; a day we semi-jokingly referred to as ‘Responsive Summit’. As soon as we announced it, the hashtag exploded with all sorts of idiotic snark, but I’ll get to that later. For now, I want to discuss the day itself and some of its outcomes.

Since 1997, I’ve been working almost exclusively on the web. Throughout all of that time, the realisation of what the projects would look like are done in Photoshop. That means, yes, I’ve been using Photoshop in a production environment for fifteen years. Malcolm Gladwell said it takes 10,000 hours, or 10 years of repetitive use, to become an expert in something. I guess that means I’m an expert in creating pictures of websites. Photoshop is like an extension of my mind. To use Photoshop for me is as effortless and almost as fast as a pencil. I get stuff done; quickly.

We apply percentage-based widths to our img elements to get fluid images and this is a very good thing. But what about background images? Support for background-size is pretty abysmal right now and still isn’t bulletproof, even when it is supported (I’ll get to that in a second), so we’ve been hacking our way around it, usually by using inline imgelements and absolutely positioning them behind the content. This is all well and good, but at certain browser widths, it breaks…

There’s a great article by Wilto in the latest edition of A List Apart. It’s called Responsive Images: How they Almost Worked and What We Need.

What all I really like about the article is that it details the the thought process that went into trying working out responsive images for the Boston Globe. Don’t get me wrong: I like it when articles provide code, but I really like it when they provide an insight into how the code was created.

People enjoy the ability to pinch and zoom websites on their iPhones, iPads, and iPod Touch devices. Unfortunately, a nasty usability bug exists on iOS that causes a user-zoomable page to scale beyond the width of the viewport when the device’s orientation changes from portrait to landscape. As a result, the page ends up cropped by the viewport, and users have to manually zoom the page back out again after changing orientation: annoying at best, confusing at worst.

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

TinyNav.js is a tiny jQuery plugin (350 bytes gzipped) that converts <ul> and <ol> navigations to a select boxes on small screen. It also automatically selects the current page and adds selected=”selected” for that item.

This isn’t the first plugin to do this and it doesn’t provide a lot of options, but it might be the smallest (file size).

In responsive web design, one of the toughest design problems to solve is how format complex tabular data for display on smaller screens. In this post, we’ll explore an experimental approach to rendering a complex table, using progressive enhancement and responsive design methods, that displays comfortably at a wide range of screen sizes, provides quick access to the data, and preserves the table structure so that data can still be compared across columns.

Nice responsive Christmas card from Headscape! Merry christmas to all.