responsive

Dave and I started the latest ShopTalk Show with an audio clip from Tim Brown responding to some of our previous chatter regarding vertical rhythm (and such). Transcription here. It sparked another interesting conversation about these things.

A small part of that was about Tim's coined phrase "molten leading", which is essentially line-height that depends on line length.

(more…)

Say you've designed an HTML email with 3 columns. Because of limited and weird CSS support in email clients, email design is done with tables. That 3 column design looks great on large-ish screens, but it squishes awkwardly on small screens. Theoretically a media query would save us here, but as we can't even count on floats we sure can't count on those. There is still a way though.

(more…)

Perhaps you've been keeping up on the responsive images #hotdrama? If you have no idea what "responsive images" means, it means serving different images under different circumstances. How to do that and what those circumstances are vary widely.

(more…)

Tabs are a simple design pattern in which a row of links are obviously clickable navigation and when a link is clicked, new content is shown. There are loads of variations of course, but it's one of the most ubiquitous navigation design patterns out there. When arranged in a horizontal row, it is also one of the least small-screen-friendly design patterns out there.

We can make it work though.

(more…)

You need a mobile strategy for your site. You have to pick Responsive Design or a dedicated mobile site, right? Maybe not. Maybe you can mix and match a variety of strategies.

(more…)

Some design patterns have been explored fairly thoroughly as we've moved into an era of responsive design. Others not so much. There are plenty of complex patterns that are still worth exploring, like this one.

In which Dirk Lüth shows an experimental RWD technique where layouts (and just about everything) is controlled with rem units and the base font size is adjusted based on screen width available.

Tim Pietrusky shares a number of different techniques for handling menus on smaller screens when the large screen version, unaltered, is untenable on the small screen.

Should we allow users to opt out of our responsive designs? Isn't that admitting failure? Or are there reasonable circumstances when it's a good thing? How would we do it?