Labels On Forms

Making forms that look good and work well is hard. At Sitepoint, Jessica Enders has made it a little easier with “The Definitive Guide To Form Label Positioning“, which I would have called something like “A Look At Form Label Positioning” because I tend to hedge, but it’s certainly a guide and if not definitive it’s danged helpful.

Ms. Enders lists the Pros and Cons of 5 placement options (label on top of the field, to the left of the field and flush left, to the left of the field and flush right, inside the field, as a tool tip), dismisses the last two as a bad idea and provides some questions you can ask yourself in deciding among the others (“Will this form be filled out on small screens?”, for instance).

But making forms that look good and work well is still hard.

Google: “Use Responsive Design!”

Some sites that I work on get more than half their traffic from mobile devices (tech-speak for “smart phones”). Not all of them — some businesses appeal more to a demographic of people looking at a big screen on a desk — but many, and the number will do nothing but increase. For while we’ve known that the mobile era is coming. Now it’s arrived. (To be accurate, it arrived a while back when I was paying attention to other things, but now I’ve noticed it.)

The mobile era won’t change the fact that some 95% of web interactions begin with search and the importance of search presence (SEO, SEM, etc.) won’t diminish along with the use of big screens, so, as we choose strategies for adapting our site designs for different screen sizes we need to check in to see how those strategies will effect our search rankings.

In this article, Google settles the question:

We recommend using responsive web design because it has many good aspects:

  • Using a single URL for a piece of content makes it easier for your users to interact with, share, and link to your content, and a single URL for the content helps Google’s algorithms assign the indexing properties for the content.
  • No redirection is needed for users to get to the device-optimized view, which reduces loading time. Also, user agent-based redirection is error-prone and can degrade your site’s user experience (see “Pitfalls when detecting user agents” section for details).
  • It saves resources for both your site and Google’s crawlers. For responsive web design pages, any Googlebot user agents needs to crawl your pages once, as opposed to crawling multiple times with different user agents, to retrieve your content. This improvement in crawling efficiency can indirectly help Google index more of the site’s contents and keep it appropriately fresh.

So, that’s one thing we don’t need to think about anymore.

Review: “Learning Responsive Web Design” by Clarissa Peterson

Assuming little knowledge on the reader’s part, the author skims the important points in developing a responsive web site. Starting with the basic building blocks, HTML and CSS, then continuing on to media queries, work-flow, design philosophies, typography, navigation design, and more, Peterson skims quickly over the subject matter, slowing when things get difficult (as in navigation design). The result is a quick, readable introduction to what you need to know if you’re setting out to build a device-responsive web site, along with links to additional information and more thorough explanations.

The book could be valuable to novice web developers, enabling them to include device responsiveness in their initial repertoire of skills, or to designers launching into flexible designs interested in learning the technical constrains they will be dealing with and need to understand. I appreciated the discussion of work-flow, and useful information even though I’ve build several device-responsive sites, so although it’s mostly for beginners, others may find something of value.

I’m put off, though, by the author’s reluctance to use pixels as a measure of media query breakpoints. Insisting on using “em”, a measurement relative to font size, rather than “px” to set breakpoints is bad advice, especially to novices.

I read an early release ebook which was missing some illustrations and had some typos, but those will be filled-in and fixed-up prior to release, no doubt. The book was made available through O’Reilly’s Reader Review Program.

Review: “Scope and Closures” by Kyle Simpson, O’Reilly Media

Cover of Scopes and ClosuresThis approaches my idea of perfection in a technical book. Simpson takes a limited and important part of JavaScript (scopes and closures, obviously) and explains it, briskly, and thoroughly, with simple code samples demonstrating how these language features work and how a working developer can employ knowledge of them to improve their work.

Like many long-time web developers, I learned JavaScript by picking up pieces here and there as necessary to get something specific done – very different from how I learned, say, PHP or Java. That “Brute Force and Ignorance” (BF&I, I call it) approach to JS began failing in the last few years as JavaScript changed from being an accessory to being a core component of a modern website, and I began a more systematic study of the language.

Simpson’s book is a very welcome addition to my effort. The book is short, covers its subject clearly and comprehensively, the style is good-natured with an insistence of getting things right, and uses examples simple enough that you don’t need to tap out code to get the point. If you’re already fairly experienced with the language you can read this in bed. It was a pleasure to read and a cinch to understand. Here’s a sample: “Closure is when a function can remember and access its lexical scope even when it’s invoked outside its lexical scope.”

I recommend this very highly for intermediate-level JavaScript users who want to improve the command of the language.