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.
This post explains a tiny boost Internet Explorer needs to render the HTML5 element “<main>” the same way the rest of the modern world does. It came up for me using IE 11-64 bit, but may pertain elsewhere.
(read more )
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.
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.
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.”