Design & Stuff

Interface Origami • Tack Blog

Mon, 21 May 2012 16:40:09 -0500

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.

Audio

Fri, 18 May 2012 03:47:44 -0500

A non-responsive approach to building cross-device webapps - HTML5 Rocks

Thu, 26 Apr 2012 10:14:02 -0500

A non-responsive approach to building cross-device webapps - HTML5 Rocks:

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.

$("#id") vs $(document.getElementById) · jsPerf

Wed, 25 Apr 2012 10:03:48 -0500

$("#id") vs $(document.getElementById) · jsPerf:

Manual jQuery collection ftw!

Grid Designer

Wed, 11 Apr 2012 16:13:46 -0500

Grid Designer

uxrave: Golden Ratio Web Typography Secret Symphony: The...

Wed, 04 Jan 2012 18:40:05 -0600

uxrave:

Golden Ratio Web Typography Secret Symphony: The Ultimate Guide to Readable Web Typography

My new sounds:

Wed, 21 Dec 2011 04:42:26 -0600

My new sounds:

jQuery: » What Is Happening To The jQuery Plugins Site?

Fri, 09 Dec 2011 10:31:59 -0600

jQuery: » What Is Happening To The jQuery Plugins Site?:

TL;DR

So that was a lot of words, here’s the takeaway.

We’d been planning on replacing the original, spam-ridden plugin site for quite some time

In the process of deleting on the spam, all the plugins were deleted and we didn’t have a recent backup

Instead of burning cycles keeping the old site on life support, we decided to make a clean break and kick development on the new site into high gear.

The new site is powered by GitHub and a package manifest for plugins

Plugins from the old site were never going to be automatically imported into the new one.

The repo is at github.com/jquery/plugins.jquery.com

We are very sorry, but also very excited!

(via Here’s to the Crazy Ones - Letterpress Poster - Steve...

Thu, 08 Dec 2011 14:00:32 -0600

(via Here’s to the Crazy Ones - Letterpress Poster - Steve Jobs)

Know Your Combinators

Mon, 05 Dec 2011 16:21:30 -0600

Know Your Combinators

"You hold down the ‘Shift’ key to move a window in a program in a straight line, but it doesn’t work"

Mon, 05 Dec 2011 15:48:33 -0600

“You hold down the ‘Shift’ key to move a window in a program in a straight line, but it doesn’t work”

- Amen to that, now show me more! (via youreadesignerwhen)

Text-overflow CSS3 property explained – Pure CSS solution to get ellipsis

Mon, 05 Dec 2011 12:10:00 -0600

Text-overflow CSS3 property explained – Pure CSS solution to get ellipsis:

IE6 1 - FF 0 ?!

html:not([os='mac'])

Wed, 23 Nov 2011 10:50:45 -0600

html:not([os='mac']):

Came a cross this little snippet of code in the source for the “New Tab” window in Chrome. I didn’t realize you could target an operating system as an attribute of an html file! Not sure what I’ll use it for, but nice to know :)

What the Heck is Shadow DOM? « Dimitri Glazkov

Wed, 16 Nov 2011 13:14:19 -0600

What the Heck is Shadow DOM? « Dimitri Glazkov:

Love the idea of shadow DOM pseudo selectors in CSS…buuuuut needs a lot moar browser support. (Mozilla, get on your sh*t!)

Extending the jQuery Form Validation Plugin | Randall Morey

Tue, 15 Nov 2011 09:44:56 -0600

Extending the jQuery Form Validation Plugin | Randall Morey:

Form validation is one of the most elementary practical uses of JavaScript. It is a standard topic in introductory JavaScript courses and is handled by numerous libraries. This entry seeks to explain how to use and extend the jQuery form validation plugin. You’ll need a basic working knowledge of the plugin to benefit from this entry. Learn the basics of the jQuery form validation plugin if you haven’t done so already.

Orthogonality and the DRY Principle

Mon, 14 Nov 2011 22:01:43 -0600

Orthogonality and the DRY Principle:

Pragmatic Programmers Andy Hunt and Dave Thomas talk with Bill Venners about maintenance programming, the DRY principle, code generators and orthogonal systems, and a story about one highly coupled control system: the helicopter.

Midnight Forever | 2Kewl Yo Everyone, We just threw together a...

Sat, 12 Nov 2011 16:18:56 -0600

Midnight Forever | 2Kewl

Yo Everyone, We just threw together a new mashup for ya’ll to chill to. Hope you enjoy.

Meet the Pseudo Class Selectors | CSS-Tricks

Fri, 11 Nov 2011 10:01:36 -0600

Meet the Pseudo Class Selectors | CSS-Tricks:

Using CSS? Know your pseudo selectors ;)

The Principles of Experience Design and 10 sites doing it right

Tue, 08 Nov 2011 23:31:32 -0600

The Principles of Experience Design and 10 sites doing it right:

Whitney Hess’s principles can be applied to both online and offline worlds. While you and I might see a normal bathroom door on an airplane, Hess sees smart design. Not only does the bathroom door lock close the door, but it controls the inside light and illuminates the occupied sign. It’s her observant eye and careful thought process that makes her set of principles remarkable. Whether you are dabbling with wireframes, personas, site maps or scenarios, be sure to give Hess’ 10-step philosophy a read here:

Stay out of people’s way

Create a hierarchy that matches people’s needs.

Provide strong information.

Provide signposts and cues.

Provide context.

Use constraints appropriately

Make actions reversible

Provide feedback

Make a good first impression.

Brad Frost Web | Web Development, Design, Music and Art

Thu, 03 Nov 2011 13:28:50 -0500

Brad Frost Web | Web Development, Design, Music and Art:

In which @brad_frost posts demo pages to testing `position: fixed` on mobile devices, subsequently wins the internet:

— @beep (Ethan Marcotte)