ofmatt

Blockbuster files for bankruptcy

Thu, 23 Sep 2010 12:39:45 -0400

It was only a matter of time.

Top-aligned labels make forms faster to fill out

Thu, 02 Sep 2010 17:30:33 -0400

Top-aligned labels make forms faster to fill out:

Anthony at UXMovement (emphasis his):

Top aligned labels have proven to be faster and easier to fill out than left or right aligned labels. This is because top aligned labels require half as many visual fixations than left or right aligned labels. Top aligned labels also allow users to move down the form in one visual direction, instead of two visual directions with left and right aligned labels. This makes filling out forms quicker and easier.

Even though he doesn’t provide the proof to back up his claim, this is a generally accepted concept and one that Luke Wroblewski writes more about in his excellent book Web Form Design: Filling in the Blanks.

It’s worth mentioning that speed isn’t always the best thing for your forms though. For a registration form, sure, get through it as quick as possible. But there are times when you might want to make your users slow down and think about the information they’re entering—like a bank’s bill payment form for example.

SublimeVideo Player to be released as a service

Wed, 01 Sep 2010 21:34:10 -0400

SublimeVideo Player to be released as a service:

Looks like it will work similar to Typekit. The beta will be free, but the full version will be a yet to be determined pricing model.

The Wilderness Downtown

Tue, 31 Aug 2010 22:08:50 -0400

The Wilderness Downtown:

An online music video by Chris Milk and Google featuring “We Used To Wait” by The Arcade Fire built in HTML5. Very impressive and a sign of things to come I wager.

Gmail Priority Inbox

Tue, 31 Aug 2010 21:42:10 -0400

Gmail Priority Inbox:

Doug Aberdeen, Software Engineer for Google:

As messages come in, Gmail automatically flags some of them as important. Gmail uses a variety of signals to predict which messages are important, including the people you email most (if you email Bob a lot, a message from Bob is probably important) and which messages you open and reply to (these are likely more important than the ones you skip over). And as you use Gmail, it will get better at categorizing messages for you.

This really does look like a great feature and I can’t wait to try it out. I finally made the full-time switch to Gmail a few weeks ago and have found myself spending more time using it directly over Mail. This feature just might make it my main email client.

John Rust reviews the new Sharpie Liquid Pencil

Fri, 20 Aug 2010 09:19:30 -0400

John Rust reviews the new Sharpie Liquid Pencil:

John Rust:

For each pencil or pen, I simply picked it up and started writing. I didn’t scribble the pens beforehand to get the ink flowing, and I didn’t deliberately apply any extra pressure when writing. As is to be expected, the generic pen took a few letters to start writing properly, while the G2 pen worked perfectly from the start. The pencils both worked perfectly. The Liquid Pencil, however, barely wrote at all: the flow of the “ink” often skipped as I wrote, and the experience was not at all fluid.

Not a particularly great review but I’ll still probably pick one up to give it a try.

/via Shawn Blanc

How to Run a Meeting

Thu, 19 Aug 2010 13:03:00 -0400

How to Run a Meeting:

Michael Lopp just has a way of nailing this management stuff for us geeks and he does it again with meetings:

I bag on meetings because like any nerd I expect the universe to be efficient and orderly and there is no more vile a violation of this sense of orderliness than a room full of people randomly bumping into shit and calling it a meeting.

If you ever sit in meetings—or especially if you run meetings—this is a must read.

Announcing the jQuery Mobile Project

Fri, 13 Aug 2010 17:13:11 -0400

Announcing the jQuery Mobile Project:

John Resig:

Absolutely critical to us is that jQuery and the mobile UI framework that we’re developing work across all major international mobile platforms (not just a few of the most popular platforms in North America). We’ve published a complete strategy overview detailing the work that we’re doing and a chart showing all the browsers that we’re going to support.

Right now we’re working hard, planning out the features that we want to land and doing testing against the devices that we want to support — and hoping for a release later this year.

Brent Simmons: Flexibility and Power

Tue, 10 Aug 2010 13:23:35 -0400

Brent Simmons: Flexibility and Power:

A nice article on where the focus of software is heading. This bit really rang true with me:

You don’t spend your time skinning your audio player anymore, in other words. You just play music. And you do other things while the music’s playing.

Way back in the day I used to do a lot of app skinning. Hard to believe I used to have time for something so trivial.

/via Shawn Blanc

New Sharpie Liquid Pencil

Mon, 09 Aug 2010 13:38:50 -0400

New Sharpie Liquid Pencil:

Writes like a pen. Erases like a pencil. Becomes permanent after three days. Can’t wait to try it.

Gestalten.tv: All the News that's Fit to Post

Thu, 05 Aug 2010 13:33:03 -0400

Gestalten.tv: All the News that's Fit to Post:

A behind the scenes look at The New York Times graphics department and the methodology behind the creation of their superb graphic work.

Netflix on PS3 Going Disc-Free This Fall

Thu, 22 Jul 2010 21:48:45 -0400

Netflix on PS3 Going Disc-Free This Fall:

Reed Hastings, CEO of Netflix, in a recent earnings call:

“Before our next call in October, we expect to be launching a major new version of our Sony PS3 user interface which doesn’t require a disc and is dynamically updated continuously with the latest Netflix UI improvements,” Hastings said.

Great news.

User Interface Design Framework for Illustrator

Tue, 20 Jul 2010 21:47:29 -0400

User Interface Design Framework for Illustrator:

If you create wireframes using Adobe Illustrator, you’ll want this framework. It includes hundreds of GUI elements, 260 vector icons and 200 different button styles.

How to hold an Apple press conference

Fri, 16 Jul 2010 11:51:01 -0400

How to hold an Apple press conference:

Jason Kottke’s prediction on how the press conference will go:

As the first-question scrum begins, Jobs will start madly ringing up purchases on the very loud register while pointing to his ears, shaking his head, and shouting “gosh, I’m sorry I can’t hear you guys over the sound of the register”.

Improv Everywhere’s latest mission, Star Wars Subway Car.

Thu, 15 Jul 2010 09:15:00 -0400

Improv Everywhere’s latest mission, Star Wars Subway Car.

Google Releases App Inventor for Android

Mon, 12 Jul 2010 10:44:00 -0400

Google Releases App Inventor for Android:

Google is attempting to bring Android software development to the masses with their free software Google App Inventor for Android. I think the demo video is probably a good example of the kinds of apps we can expect to see from this.

Icon Reference Chart from Hicksdesign

Fri, 09 Jul 2010 13:35:50 -0400

Icon Reference Chart from Hicksdesign:

Jon Hicks is putting together a great reference for creating icons on a variety of platforms, including the iPhone, iPad, Android and more. The chart has specs for icon size, format, corner radius and more. Bookmarked.

EpicWin

Thu, 08 Jul 2010 22:50:57 -0400

EpicWin:

A to-do app combined with a role playing game for your iPhone. Could just be cheesy enough to be fun. Or not.

Custom Styles for Squarespace Search Results Pages

Thu, 08 Jul 2010 10:00:00 -0400

I’m finding Squarespace to be a good service when you need to turn something around quickly without a lot of development resources. But if your design breaks out of the traditional two- or three-column blog design, you may find yourself wrestling with some of their naming conventions and system limitations.

One issue I’ve encountered (and it appears a few others have too) is you can’t specify a custom style for every page of your site. If you’re using the Advanced package or higher, you can set a Style Override for most pages of your site in the Architecture section, but there are a few pages in the site—let’s call them “system pages”—that automatically use the style sheet of your active template with no option of overriding it. A couple examples of these system pages are the search results display page and 404 pages.

I needed a way to specify custom style sheets for these system pages in a project I’m working on currently. I’m using one template for the public section of the site (which is considered the active template) and a different template for all the pages in the member’s section using the Style Override feature. Both of these templates are using completely custom style sheets. The problem is that any searches conducted in the member’s section automatically display using the active, or public, template’s style sheet. Since there isn’t a Style Override option for this page, how do we set a custom style sheet?

Sniff it out

This article assumes a basic familiarity with jQuery.

What we want to do is determine what page we’re on by checking to see if specific classes or ids are present on the page, and if they are, load our alternate style sheet. To do this, we’ll use jQuery.

In my project, I was trying to target the search results display page. After looking at the code I found the page uses a div with a class of search-results to wrap the results display. We can sniff for the presence of this div on the page using:

     $(".search-results").length)

If we are on a page with this div, then this bit of code will return true. Now we just need to switch out our CSS file. We can do this using jQuery’s .attr() method:

     $("#primaryStylesheet").attr('href', '/url/toyour/styleheet.css');

Handily, Squarespace puts an id of primaryStylesheet on their link to the CSS file. The statement above finds this link and changes it’s href to the value you specify.

If you’re using another custom template in Squarespace for your alternate style sheet, you’ll have to load a page in your browser using that template then look at the URL they are using for the CSS file.

Putting it all together, we get:

I wonder if this trick would work on the Basic and Pro packages as a workaround to not being able to use the Style Override feature?

$(document).ready(function(){
      if ($(".search-results").length) {
     $("#primaryStylesheet").attr('href', '/url/toyour/stylesheet.css');
     }
});

Granted, this is not a perfect solution and one downside to this I’ve noticed is that depending on how quickly the page loads, you could see a flicker of the unstyled page or page styled with the main style sheet before the JavaScript has a chance to catch up. The ideal solution of course would be for Squarespace to allow the same Style Override feature for these pages as they do for others.

Taking it a step further

You can extend this basic technique in many ways when building your Squarespace site. Sometimes a page is using the right style sheet, but might not have an id on the body tag for you to hook into. To apply custom styles to these pages I would check the h2 element for a certain string and then use that to add a class to the body element:

    // Check if current page is 404 page
    var h2Check = $('h2.document-title').html();
    if (h2Check == "Page Not Found") {
        $('body').addClass("page-404");
    }

I’m still pretty new with Squarespace and there may be some other ways of working around these issues, but until Squarespace tightens up their system to allow for a little more access to these pages, these little tricks have helped me get the design where I needed it to be.

jQuery for Designers: Debugging Tools

Wed, 07 Jul 2010 22:36:28 -0400

jQuery for Designers: Debugging Tools:

A great overview by Remy Sharp on the various debugging tools available for the big five web browsers.