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.

30 Apr

Users’ Pagination Preferences and ‘View All’

When providing a choice of display options, the computer should almost always respect the user’s stated preference and employ it as the default the next time around. I am amazed at how many sites and applications don’t do this and instead force users to repeat their choices again and again.

In short do pagination but if you offer different options remember what the user selected and use it throughout the site.

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.

12 Dec

Adblock Plus – Allowing acceptable ads in Adblock Plus

Starting with Adblock Plus 2.0 you can allow some of the advertising that is considered not annoying. By doing this you support websites that rely on advertising but choose to do it in a non-intrusive way. And you give these websites an advantage over their competition which encourages other websites to use non-intrusive advertising as well. In the long term the web will become a better place for everybody, not only Adblock Plus users. Without this feature we run the danger that increasing Adblock Plus usage will make small websites unsustainable.

via Adblock Plus – Allowing acceptable ads in Adblock Plus. I’m all onboard with this, in fact I’ve even written my own Adblock Plus filters to enable ads that are both interesting and un-intrusive.

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.