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.
Latest Post
[Flash 9 is required to listen to audio.]
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!
[Flash 9 is required to listen to audio.]
My new sounds:
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!
You hold down the ‘Shift’ key to move a window in a program in a straight line, but it doesn’t work
IE6 1 - FF 0 ?!
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 :)
(Source: newtab)
Love the idea of shadow DOM pseudo selectors in CSS…buuuuut needs a lot moar browser support. (Mozilla, get on your sh*t!)
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.
