CSS-Tricks

syndicated content powered by FeedBurner

...

Reset this favorite; show all Subscribe options

Subscribe Now!

...with web-based news readers. Click your choice below:

...with other readers:

(Choose Your Reader)FeedDemonNetNewsWireNewsFireNewsGator Outlook EditionRSSOwlShrookUniversal Subscription Mechanism (USM)

Get CSS-Tricks delivered by email

View Feed XML

FeedBurner makes it easy to receive content updates in My Yahoo!, Newsgator, Bloglines, and other news readers.

Learn more about syndication and FeedBurner...

Current Feed Content

• In Praise of the Forums

  Posted: Mon, 26 Sep 2011 16:22:30 +0000

  Jane Wells of Automattic lays out four reasons why someone may not use forums for a question they have. Then she disputes all four of them while sharing an example of where a forum post get a lot more done than just answers one dude's question.

  The bigger the internet gets, the more valuable it is to make Q&A and customer support public.

  Direct Link to Article — Permalink

  In Praise of the Forums is a post from CSS-Tricks

• Sencha Looks at IE 10

  Posted: Fri, 23 Sep 2011 19:03:35 +0000

  Michael Mullany:

  ...the IE10 HTML5 experience is one of the best we’ve seen on any platform to date.

  I've heard from a number of folks that IE 10 will be the most advanced browser to date (support the most standards and new features). We'll see if this stays true when it actually ships.

  Notable: transitions, transforms (2D and 3D), animations, shadows, gradients, flexbox and SVG filters.

  Direct Link to Article — Permalink

  Sencha Looks at IE 10 is a post from CSS-Tricks

• Upcoming Speaking Engagements

  Posted: Fri, 23 Sep 2011 03:01:08 +0000

  I'll have a little string of events I'll be giving talks at.

  • September 24, 2011 - BarCamp Tampa
  • October 1, 2011 - BarCamp Milwaukee
  • October 3-5, 2011 - Future of Web Apps (London)
  • October 22, 2011 - BarCamp Philly

  I'll (probably) be doing a fork of my pseudo elements talk, which will reduce the pseudo elements stuff to only a part of the time and the rest will be about other ways to improve the way you write HTML and CSS.

  Upcoming Speaking Engagements is a post from CSS-Tricks

• Radio Buttons with 2-Way Exclusivity

  Posted: Wed, 21 Sep 2011 04:06:43 +0000

  Let's say you were tasked with creating a UI in which users can rate three candy bars from their most to least favorite. A grid of radio buttons isn't a terrible way to go about this.

  

  The good news is that radio buttons have natural exclusivity in the name-group they are in, and we can use that to our advantage. The bad news is that we have interlocking groups and there is no way to express that in a functional way through HTML alone.

  

  Let's craft the HTML in such a way that the horizontal groups share the same name, granting exclusivity automatically. And we'll also add an HTML data-* attribute which signifies the column which we'll use to simulate the vertical exclusivity with JavaScript¹.

  <table>
  <tr>
      <th></th>
      <th>1</th>
      <th>2</th>
      <th>3</th>
  </tr>
  <tr>
      <td>Twix</td>
      <td><input type="radio" name="row-1" data-col="1"></td>
      <td><input type="radio" name="row-1" data-col="2"></td>
      <td><input type="radio" name="row-1" data-col="3"></td>
  </tr>
  <tr>
      <td>Snickers</td>
      <td><input type="radio" name="row-2" data-col="1"></td>
      <td><input type="radio" name="row-2" data-col="2"></td>
      <td><input type="radio" name="row-2" data-col="3"></td>
  </tr>
  <tr>
      <td>Butterfingers</td>
      <td><input type="radio" name="row-3" data-col="1"></td>
      <td><input type="radio" name="row-3" data-col="2"></td>
      <td><input type="radio" name="row-3" data-col="3"></td>
  </tr>
  </table>

  Our incredibly simple design can be accomplished with this CSS:

  table {
      border-collapse: collapse;
  }
  td, th {
      border: 1px solid #ccc;
      padding: 10px;
  }
  th:empty {
      border: 0;
  }

  I wouldn't have even posted that CSS except I think it's a super useful case of the :empty pseudo class selector.

  Now to grant the vertical group exclusivity, we'll use a touch of jQuery:

  var col, el;
  
  $("input[type=radio]").click(function() {
     el = $(this);
     col = el.data("col");
     $("input[data-col=" + col + "]").prop("checked", false);
     el.prop("checked", true);
  });

  When a radio button is clicked, the column is determined and all other radio buttons in that column are turned off, then the clicked on is turned back on.

  That's all there is to it.

  View Demo   Download Files

  For the record, I did get this idea from the screencast I linked up earlier in which this idea was briefly mentioned and then discarded.

  Also, I'd be interested to hear if people have alternate design pattern ideas for the "rate these three candy bars" thing. That's always fun to think about.

  ---

  ¹ You could, instead, apply the data attributes through JavaScript programatically, or even calculate column on the fly as needed. As ever, there are more ways to kill a cat than choking it with butter.

  Radio Buttons with 2-Way Exclusivity is a post from CSS-Tricks

• New Poll: What’s Your Favorite Page Title Separator?

  Posted: Tue, 20 Sep 2011 03:53:45 +0000

  Just for silly kicks, let's keep on with the page title polls, this time with perhaps the most trivial of all choices. The poll is embedded on the site in the sidebar. Let everyone know what your favorite page title separator is. The en-dash? The vertical pipe? THE DOUBLE COLON‽

  New Poll: What’s Your Favorite Page Title Separator? is a post from CSS-Tricks

• Poll Results: Favorite Page Title Structure

  Posted: Mon, 19 Sep 2011 17:57:04 +0000

  This was an interesting poll because there is no clear consensus on "the best way" for sites to handle page titles. It varies quite a bit even among similar websites. To keep things more focused, I put forth a very specific page: a blog article in a specific category. The choices were:

  • 17%[Site Name] - [Category] - [Article Title]
  • 17%[Article Title] - [Category] - [Site Name]
  • 8%[Article Title]
  • 37%[Article Title] - [Site Name]
  • 17%[Site Name] - [Article Title]

  And the winner, with 37% of the vote, [Article Title] - [Site Name]. This was a relief to me, as that's what I use on this site and what I personally like the most. Also: that may have influenced the vote a bit but I like to think of regular readers here as being independently minded.

  

  Full, real time results for this poll and all post polls in the polls archive.

  These are the things that I think should be considered when choosing a site title structure, in order of importance:

  1. Human understandability & usability - The title useful for humans
  2. SEO value - Title clearly summarizes and correlates to content on page, looks enticing to click, and no funny business
  3. How it bookmarks - The specific page is easy to find again in social or local bookmarks

  We should consider the fact that we don't get much room for the page title when it's displayed as a tab (all desktop browsers have tabbed browsing by default). We get about 26 characters at a maximum per tab. So if your website's name is really short, like "NBC", starting with site title might be OK. If it's long, like "Smashing Magazine", you are probably chewing up too much of that valuable tab room starting that way.

  The usage of the site in question also bears consideration. I like that the site title at Gmail always starts with "Gmail". I only ever have one tab open of Gmail and I want to be able to find that quickly I don't care what "state" it is in at the moment. Whereas I often have multiple CSS-Tricks tabs open and it's more valuable to me to know the title of the article on that page.

  I can't imagine a site where the category would be essential for human usability to be included in the title, but if it's near the end and add some SEO juice, I can't imagine it hurting either.

  I'm not overly surprised with the #1 outcome, but I am by last place. [Article Title] was last with only 8% of the vote. With the limited number of visible characters in a title, the limited usefulness of the site title being at the end of the structure, and the "cleanness" of it, I'm surprised there aren't more proponents of it.

  Poll Results: Favorite Page Title Structure is a post from CSS-Tricks

• Watch Ryan Singer Think Through a Design Problem

  Posted: Sun, 18 Sep 2011 23:50:56 +0000

  High quality video training marketplace PeepCode has a series of screencasts called Play by Play where they record masters of their trade doing their thing.

  In this one, we get to watch a user experience designer think through a design problem. This is the rarest of all design tutorials. I think it's because it feels weird both teaching and being taught this stuff directly, but watching people work it out themselves is instructional as heck.

  Direct Link to Article — Permalink

  Watch Ryan Singer Think Through a Design Problem is a post from CSS-Tricks

• Default Tab UI of the Current Desktop Browser Landscape

  Posted: Sat, 17 Sep 2011 23:16:00 +0000

  I opened up the same 6 tabs in current versions of all the desktop browsers, then took screenshots of the UI of just the tabs themselves. These are from a Mac running OS X Lion.

  

  

  

  

  

  Some facts

  • You get an average of 26 visible characters per tab if the user has 1-3 tabs open at around 1200px (average for this site).
  • All browsers maintain this 26 visible character average until about 5 tabs, then that number shrinks. At 6 tabs you get ~18 characters.
  • IE 9 starts shrinking at 4 tabs and at 6 tabs only an average of 3 characters are shown per tab.
  • Every browser shows favicons except Safari.
  • Every browser puts tabs on the top (above URL bar) except Safari.

  Some opinions

  • You don't have much room, make it count.
  • You can largely count on the favicon to identify your site so don't start with site title, start with the next most significant thing. Unless you have a ton of Safari traffic (remember, your site's stats are the only ones that matter.)
  • Safari should get over it and put favicons in the tabs.

  Default Tab UI of the Current Desktop Browser Landscape is a post from CSS-Tricks

• Fancy Scrolling Sites

  Posted: Wed, 14 Sep 2011 16:48:54 +0000

  In the last year or so, there's been enough sites that do fancy things when you scroll down that it's kind of a trend. I thought I'd blog it, you know, for the sake of history.

  By "fancy things" I mean something happens when scrolling down besides the site scrolling down. Elements might move around in unexpected ways or change their size/shape/color/content in some way. It's easier to just experience some of these yourself than listen to me try to fumble through explaining it. These screenshots also don't do much justice. Many of them are video-documented on this site's YouTube channel.

  

  

  

  

  

  

  

  

  

  So how do they do that?

  JavaScript. They detect window scroll position then do stuff (e.g. apply classes, adjust positioning, whatever) according to that position. There aren't any "helper" libraries for doing stuff like this as far as I know since it's so dependent on what you want to do and it already isn't difficult to detect scroll position.

  Know any others?

  Add them in the comments.

  Fancy Scrolling Sites is a post from CSS-Tricks

• Videos of my Pseudo Elements Talk

  Posted: Wed, 14 Sep 2011 02:24:29 +0000

  I've given this one a few times now, and luckily a few of them were recorded.

  Front End Design Conference

  In St. Petersburg, Florida - July 2011.

  WordCamp San Francisco

  In San Francisco, California - August 2011. This one is tweaked a bit to be shorter and more about WordPress.

  YAH YAH I KNOW I NEED TO GO SHIRT SHOPPING.

  Videos of my Pseudo Elements Talk is a post from CSS-Tricks

FeedBurner delivers the world's subscriptions wherever they need to go. Publish a feed for text or podcasting?
You should try FeedBurner today.