Shapecatcher: Draw the Unicode character you want! How Pinterest Changed Website Design Forever Even if you haven't ever visited popular visual bookmarking site Pinterest, you might recognize its design elements — which have been popping up everywhere since the startup burst onto the mainstream scene in 2011. The site doesn't use traditional web building blocks. "It's almost like a window-shopping mode," says Khoi Vinh, the former design director for NYTimes.com. "It puts the ball back in the user's court," muses Andrew Beck, a web designer at Blue Fountain Media. "It flattens the information hierarchy," describes Jeff Croft, a web designer and co-founder of ebook lending site Lendle. Pinterest puts web content into sticky-note sized blocks users can organize onto pinboards that fill the entire browser screen. Though the hot Palo Alto startup is staying mum about its user numbers, one study found it drives more traffic to websites than Google+, YouTube and LinkedIn combined. As it has gained in popularity, so too has its unusual design. Consequently, the design caught on.
Responsive Measure: A jQuery plugin for responsive typography Responsive Measure is a simple script that allows you to pass in a selector (ideally the container where your primary content will go) which generates the ideal font size needed to produce the ideal measure for your text. It also has the ability to generate a resolution independent font-scale based on the ideal font-size. $(document).on('responsiveMeasureUpdated', function(e, data) { $('.giga').css('fontSize', data.fontRatios[9] + 'px'); $('h1').css('fontSize', data.fontRatios[8] + 'px'); $('h2').css('fontSize', data.fontRatios[7] + 'px'); $('h3').css('fontSize', data.fontRatios[6] + 'px'); $('p').css('fontSize', data.fontRatios[5] + 'px'); $('.sm').css('fontSize', data.fontRatios[4] + 'px'); }); Check out the examples to see the plugin in action.
Blog — Client-side Javascript errors tracking in the browser Tracking Javascript errors in production is very critical and still few of the developers do it. Many of them assume that launching a Web App is the final step of a project and “their job here is done as the Web site is finished now”. It’s hard to realize that launching is only half of the job. The app has to be monitored and a lot of feedback and usability tracking should be done to get it to the final level. Critical Javascript errors can occur in the client’s browser while using a heavy Javascript Single Page App and prevent them to finalize a payment, a signup or searching for the right product… Sometimes, these errors can even prevent the page load , so, the site user will barely understand what’s the Web Page about and leave. Most of this errors are a result of the unsupported browser versions, poorly developed browser extensions, wrongly handled mobile devices or the app’s code itself. To make the debugging process less painful, we developed JSLogger .
stAllio!'s way: databending and glitch art primer, part 1: the wordpad effect welcome to my databending and glitch art primer! in part 1, we're going to talk about one of my favorite glitch art effects—the wordpad effect. i'm starting off with this effect because it's so easy that any windows user should be able to do it (note: i haven't tried it in vista), but it's complex enough under-the-hood that it allows me to discuss several important principles of glitch art. but first, let's define a few terms. databending is, in essence, the artistic misuse of digital information. the term is inspired by the similar art of circuit bending ; you could say that databending is like circuit bending with no circuits. the term is used most frequently in the context of electronic music (primarily glitch music ). the most common types of databending are: the wordpad effect: the wordpad effect is a simple glitch effect i discovered a couple years back, with the help of my readers . here's how it works: you take a digital photo like this: pretty dramatic results, eh?
Watch videos later on the iPad, Xoom and Galaxy Tab with Squrl — Online Video News Isotope CoffeeScript What’s the most readable font for the screen? If there’s a topic that’s bound to get designers riled up into a fiery debate, it’s the issue of choosing the most readable fonts for use on the screen. For most of the web’s life, designers haven’t had much flexibility when it comes to setting the type for their sites, and type decisions have almost always come down to choosing one or two web-safe fonts (a small collection of fonts that are installed on most users’ machines) and setting the font sizes. CSS’s @font-face has garnered significant attention in the past year as browsers expanded their support for it and major type foundries began developing web licenses, making services such as Typekit possible. What many people don’t realize is that @font-face isn’t new–in fact, Internet Explorer 6, every web designer’s headache, supported it before just about everyone else. There were many problems with Microsoft’s implementation. Serif or Sans-Serif? There are two main types of font: serif and sans-serif. What’s the best typeface?