eCommerce Thought Leadership - Shiny Webby Things #4
Here are our top 10 articles, tricks, resources and web tools from the last few weeks. Spoiler Alert tool: blurs/unblurs content to avoid "spoiling" users.
Cool Web Tools
It’s been bit of a delay since the last one of these articles, but we were craving a hit of excitement about what’s out there in the Shiny Webby Universe and decided to gather some web tool links together.
Here are our top 10 articles, tricks, resources and web tools from the last few weeks:
1. Spoiler Alert.
A js tool to blur and unblur images and text so that your user doesn't get "spoiled." By default, it blurs a little less on hover (for hinting) and reveals the content on click.
http://joshbuddy.github.com/spoiler-alert/
2. NYTimes Redesign.
nytimes.com is launching a full website redesign in the next few weeks, and it seems much cleaner and more useable than their current site, with much more effective use of mobile features brought back over to the general website. You can see a preview of their work now...comparing the old site against the new, clean, mobile-friendly site is a useful UI/UX thought exercise.
http://www.nytimes.com/marketing/prototype/index.html
3. Lunr.js.
A simple client-side search engine, no server-side stuff needed.
4. Rapid Prototyping: how 42 Floors does it.
This fascinating article takes you through the rapid prototyping process at 42 Floors. It's exactly the sort of design process we are like to implement more at EYEMAGINE in the future.
http://42floors.com/blog/fake-it-trash-it-build-it/
5. Responsive Web Design: The War Has Not Yet Been Won. (Tell us about it).
Among the gems in this article is the author's observation that Responsive Web Design "does not have to take more time, or cost more money," at least once you've ramped up and gone through the Responsive Web Design process once with your team. Food for thought.
http://elliotjaystocks.com/blog/responsive-web-design-the-war-has-not-yet-been-won/
6. New HTML5 input field types.
A good look at the new types of inputs available in HTML5. The author breaks it down and shows you how labeling an input with one of the new types can give you different native UI features on certain devices (for instance, the iPhone will show a different keyboard depending on the input type a user is entering their information in to). Another small but crucial tool in the war to enhance the mobile experience.
http://html5doctor.com/html5-forms-input-types/
7. Put your site on a "diet."
26 great tips to make your site lighter in the browser. Most of these will be somewhat obvious (i.e., avoid inline code) but it serves as a really handy check list to go through if you want to make a site lighter.
8. Level 4 Media Queries?!?!
This talks about things with pretty much "non-existent" browser support right now, but which are currently being worked on by the W3C and seem really cool. In the future, we may be able to set media queries for luminance and the type of pointer device being used (stylus, mouse, etc.). Holy awesome, Batman.
http://www.stucox.com/blog/the-good-and-bad-of-level-4-media-queries/
9. The Media Fragments Module.
You probably had idea you could do this, but it's pretty awesome. You can use HTML5 media fragments inside image, audio or video media tags to play only fragments of a video. Really cool stuff! Could be very useful for only displaying brief previews of videos, audio, etc.
http://www.broken-links.com/2012/02/28/the-media-fragments-module/
And for fun:
10. Streetfighter... made in CSS and JavaScript!
http://davidwalsh.name/street-fighter
That's it for this edition of Shiny Webby Things: Cool Web Tools. Let us know what you think about these web tools and share your favorites in the comments below. Stay tuned for the next edition, which is sure to blow your nerdy socks off!