07 Sep

GitHub – davatron5000/FitVids.js

A lightweight, easy-to-use jQuery plugin for fluid width video embeds.

FitVids automates the Intrinsic Ratio Method by Thierry Koblentz to achieve fluid width videos in your responsive web design.

via GitHub – davatron5000/FitVids.js. Pretty cool, not something I personally would need often but still useful.

23 Aug

CSS-Tricks – Functional CSS Tabs Revisited

The idea of "CSS Tabs" has been around for a long time. If you Google it, a lot of what you get is styled CSS tabs, but less stuff on the building an actually functional tabbed area. At least, functional in the sense as we think of tabbed areas today: click a tab, see a new content area with no page refresh.

Tackling functional CSS tabs has less of a deep history. Brad Kemper was messing around with it in 2008 trying to utilize the :checked pseudo selector with radio buttons and adjacent sibling combinators. This is a really cool technique that can be utilized to do things like an expand/contract tree style menu or visually replace form elements with graphics (pioneered by Ryan Seddon).

I personally tried messing with functional tabs a while back, and came up with seven different ways to do it. Most of them centered around the use of the :target pseudo class selector and most of those techniques sucked. One was OK. They all had one major flaw and that was that URL hashes needed to be used, which "jumps" the page down to the element with the matching ID, and that is totally unexpected, jerky, and just a bad overall experience.

Working with the radio-button/:checked technique is way better, but there was a long-standing WebKit bug that prevented pseudo class selectors and adjacent sibling combinators from working together. Good news! That’s fixed as of stable browser releases Safari 5.1 and Chrome 13.

So let’s get this thing done the :checked way, which I think is the cleanest way to do it for now and for the next few years.

via CSS-Tricks – Functional CSS Tabs Revisited. Very nice, pretty decent support if you don’t need to worry much about IE.

01 Aug

Jakob Nielsen’s Alertbox – Defer Secondary Content When Writing for Mobile Users

Mobile devices require a tight focus in content presentation, with the first screen limited to only the most essential information.

via Jakob Nielsen’s Alertbox – Defer Secondary Content When Writing for Mobile Users. Wikipedia’s mobile version while typically not known for it’s usability is used as a good example of hiding information until needed.

02 May

Google Web Fonts – Streamline your web font requests. Introducing “text=”

Google will optimize the web font served based on the contents of this parameter. For example, if you only require a few letters for a logo, such as “MyText”, Google will return a font file that is optimized to those letters. Typically, that means Google will return a font file that contains only the letters you requested. Other times, Google might return a more complete font file, especially when that will lead to better caching performance.

via Google Web Fonts – Streamline your web font requests. Introducing “text=”. Pretty intelligent Google.