07 May

10 Years

So for the tenth anniversary, the Zen Garden is open for business once more. I’ve thrown the codebase on Github, given the dusty copy a refresh, started the conversion of the site to HTML5, and brought all of the existing designs kicking and screaming into the modern age. The work isn’t done yet, but it’s a darn sight closer to what how we would build it these days. If you see an area that needs help, consider sending a patch.

Hello CSS Zen Garden, it’s been awhile.

07 May

Line Clampin’ | CSS-Tricks

You want X lines of text. Anything after that, gracefully cut off. That’s “line clamping” and it is a perfectly legit desire. When you can count on text being a certain number of lines, you can create stronger and more reliable grids from the elements that contain that text, as well as achieve some symmetric aesthetic harmony.

There are a couple of ways to get it done, none of them spectacular.

If you are doing Web Design/Development as a full-time and aren’t reading CSS-Tricks, you really should be. Awesome little tricks like this one..

30 Apr

Hex Color Tool

I needed a tool that either added white or black to a hex color. Launching Photoshop just to drag a color picker around wasn’t cutting it. I looked around for a web app that would do this but unfortunately most good programmers are terrible designers. I built HexColorTool to fill the gap. It’s responsive too! Launch it on your smartphone or tablet and use it as you please.

Just added it to my list of web design tools, I know I’ve needed something like it more than once.

16 Feb

Frankie Roberto – Responsive Text

Some websites now contain ‘responsive images’. These scale (or crop) depending upon your screen’s viewing area, so the image sizes remain appropriate whether you’re looking at the website on a mobile phone, or on a huge flat screen monitor.

This is an example of responsive text.

The amount of textual detail scales relative to your screen size.

The effect is achieved using simple HTML class names and CSS media queries which show or hide the content depending upon the current screen width.

via Frankie Roberto – Responsive Text. In agreement, nifty idea, but defiantly unsure of the practical application.

06 Feb

Tinycon – Favicon Alerts

Tinycon allows the addition of alert bubbles and changing the favicon image. Tinycon gracefully falls back to a number in title approach for browers that don’t support canvas or dynamic favicons.

Alerts in the favicon allow users to pin a tab and easily see if their attention is needed.

via GitHub – Tinycon. Pretty sure I could count the times I actually looked at a favicon alert on one hand, that being said nice work.

26 Jan

whatwg – Requests for new elements for comments

We already have an element for comments and other self-contained document modules, namely, <article>. The spec in fact specifically calls out an <article> nested in another <article> as being, by definition, a comment <article> on the outer <article>

via whatwg – Requests for new elements for comments. Want to do comments on your new spiffy HTML5 site, use an article element inside your main article element.

01 Jan

Subtraction.com – Subscribing to The New York Times

The total customer experience here is haphazard at best, and, at worst — I hate to say this because I am still friendly with many people at the company, but in truth there’s no way around it — it’s insulting. It shows a certain amount of disrespect to customers for a company to choose not to present a full accounting of available offers, displayed plainly and in an easy-to-compare chart, so that anyone can fully understand all of the options and decide quickly.

Why would it be so hard to be as explicit that? I ask that rhetorically, but from my experience as an employee I remember exactly why: The Times as a business remains both in thrall of and a prisoner of its old print mathematics, wherein pricing for delivery of the physical newspaper was complicated and subject to frequent and fleeting special promotions. By design, print subscribers were never sure if they were getting the best deal on their subscriptions, and that mentality has transferred over to its digital business. The result is sadly hostile to those looking to subscribe digitally, and gives the unmistakable impression that the company is gaming its customers.

Just for comparison, here’s how some other digital businesses price their products: Netflix is US$8 a month. Spotify is between US$5 and US$10 per month. Evernote is US$5 per month or US$45 per year. Birchbox is US$10 per month. Hulu Plus is US$8 per month. Flickr is US$25 per year. MLB.tv is US$25 per year. And so on. There is really no good reason that pricing for The New York Times couldn’t be as simple as that.

via Subtraction.com – Subscribing to The New York Times. Media companies respect their customers or maybe not.

16 Nov

The ALA 2011 Web Design Survey

The profession that dares not speak its name needs you. Digital design is the wonder of the world. But the world still hasn’t bothered to stop and wonder about web workers—the designers, developers, project managers, information architects slash UX folk, content strategists, writers, editors, marketers, educators, and other professionals who make the web what it is.

via The ALA 2011 Web Design Survey. It’s that time of year for the A List Apart Web Design Survey or The Survey for People Who Make Websites. Take it and tell the world (or really A List Apart and people who read it) a little bit about yourself and everyone else who makes websites.

09 Nov

Mozilla Popcorn – Making video work like the web

Popcorn makes video work like the web. We create tools and programs to help developers and authors create interactive pages that supplement video and audio with rich web content, allowing your creations to live and grow online.

via Mozilla Popcorn – Making video work like the web. The video at the link makes it a little bit clearer. The concept is basically at points in the video you can load in data from the web about the video or what’s shown in the video from Twitter, Wikipedia, Google Maps and other stuff.