Latest Post

Just what I was looking for!

Designing Interfaces: Patterns for Effective Interaction Design is an intermediate-level book about interface and interaction design, structured as a pattern language. It features real-live examples from desktop applications, web sites, web applications, mobile devices, and everything in between. This site contains excerpts from some of the book’s patterns. The book has more, of course — more introductory material, more patterns, and more examples. Naturally, I’d like you to buy it! But this material has been on the Web for a while, and I’d like to keep it here.

On websites with a search box. Should you add a button they can click on, or will users understand a search box like on this site? The target group is not very technical: women aged 40-60.

Just when I start learning about mutation events, I find out they’re deprecated!

Ohohoho interesting! How’d I miss this? :|

In a previous post, I mentioned a way of thinking about interactions and interface within a framework of depth and space. The ideas were centered around the digital space, but as a designer I find it’s important to remove myself from that space and explore solutions that can originate in physical space.

MEDIA QUERIES ARE GREAT, BUT…

Media queries are awesome, a godsend for website developers that want to make small tweaks to their stylesheets to give a better experience for users on devices of various sizes. Media queries essentially let you customize the CSS of your site depending on screen size. Before you dive into this article, learn more about responsive design and check out some fine examples of media queries usage here: mediaqueri.es.

As Brad Frost points out in an earlier article, changing the look is only one of many things to consider when building for the mobile web. If the only thing you do when you build your mobile website is customize your layout with media queries, then we have the following situation:

  • All devices get the same JavaScript, CSS, and assets (images, videos), resulting in longer than necessary load times.
  • All devices get the same initial DOM, potentially forcing developers to write overly complicated CSS.
  • Little flexibility to specify custom interactions tailored to each device.

WEBAPPS NEED MORE THAN MEDIA QUERIES

Don’t get me wrong. I don’t hate responsive design via media queries, and definitely think it has a place in the world. Furthermore, some of the above mentioned issues can be resolved with approaches such as responsive images, dynamic script loading, etc. However, at a certain point, you may find yourself doing too many incremental tweaks, and may be better off serving different versions.

As the UIs you build increase in complexity, and you gravitate toward single-page webapps, you’ll want to do more to customize UIs for each type of device. This article will teach you how to do these customizations with a minimal amount of effort. The general approach involves classifying your visitor’s device into the right device class, and serving the appropriate version to that device, while maximizing code reuse between versions.

Manual jQuery collection ftw!