Hopefully you’ve already read Jackson Fox’s post on Making Infield Form Labels Suck Less from a UX perspective. If you haven’t, I recommend that you check it out before reading my thoughts from the front-end development perspective.

Can't wait to check out the code? Head down to the jsFiddle at the end of the post.

So often in web design and development, things that are easy to implement aren’t appropriately examined. In this case, placing the label for a text field within the field is a common practice to make form layouts more compact. The implications of that choice create interaction and technical challenges that need to be considered carefully.

Since Jackson covered usability issues with this approach, I want to discuss some of the technical and accessibility considerations. Trevor covered this a few years ago, and while the browser landscape has changed quite a bit, it’s still a good read on the subject. My issue with the popular techniques is more semantic than technical. There are a bunch of ways to get text into a text field to serve as a label, but most of these techniques only solve it visually. Let’s take a look at the two most popular.

Let me start off by saying you really shouldn’t put form labels—or even placeholder text—inside of form fields if you want to be safe. But we can’t always play it safe. Sometimes putting labels inside of form fields is the best option we’ve got. Jeremy Fields, Steve Schoeffel, and I found ourselves making that decision on a recent project, and we set out to make the best of a tricky usability situation.

Over the past year, one thing has become abundantly clear to me. Design is super hard. Being brilliant and conjuring up creative solutions on demand is stressful work. Over time, the added challenge of tight schedules and limited budgets can eat away at your creativity and your enthusiasm to tackle bigger problems. So what to do?

Something Different

Assert control and seek out new experiences. This could be as simple as moving your desk or learning a new skill. But, as I discovered recently, I think it ideally means travel. The act of dropping your physical self in a completely unfamiliar and hopefully vibrant location can be an arresting and energizing experience.

For me, it was a trip to New York City a few weeks back. I was attending a conference, so I was naturally expected to interact with hundreds of new people all at once. To adhere to my itinerary, I also had to navigate the city streets and subway like a pro. And, of course, I was in New York, one of the most crowded and unforgiving cities (at least to tourists).

Dribbble. Maybe you love it; maybe you loathe it. Since its launch in 2009, it's become a popular way for designers to share peeks at what they're working on, or just promote their latest projects. Whether you think it's a good or bad thing for the design community, I wanted to share some of the aspects of the site that I've found useful, beyond just checking out others' work, stalking my favorite designers, and sharing my own work on occasion. You don't even need a coveted invite to take advantage of these Dribbble features.

For the last couple of weeks, I’ve been using this script (h/t Mark) to accomplish something that I’ve wanted to do for quite a while: easily edit corner radiuses in Photoshop. Judging from the teaser preview of CS7, it appears that this type of funtionality will be included in the newest version, but in the meantime, this is a great add-on and will continue to be very useful for versions of Photoshop earlier than CS7. I’d recommend triggering the script with a shortcut key (I’ve got mine set to CMD + SHIFT + R).

Things You Can Do

• Check the current radius of a rounded rectangle
• Modify all the corners of a rectangle or rounded rectangle
• Modify just one, two or three corners
• Change the corners on multiple shape layers at once

Examples

Here are some quick examples of ways to use this script. I’m sure you’ll come up with many new ones on your own that fit your workflow.

Designing tabs → easily make your tab with certain corners at 90º.

Change Multiple Shape Layers at once → you might select all your layers named “Button” and try out a different corner radius.

Check the current radius → if you’re a FED or if you're working with someone else's designs, you can check containers, buttons, and other elements to see what their current corner radius is.

Icon Creation → when working with an icon, you can modify the curve on the fly and try out variations without having to redraw the shape.

Correct your busted corner radiuses → if you change the dimensions of a rounded rectangle using the numbers at the top or with a simple Transform, the corner radiuses get stretched. Now you don’t have to worry about it and can quickly get your perfect rounded corners back. 

I’ve just been using this radius resizer script but the same developer has come out with a new script that includes the ability to change the corner radius and also a number of other things. I haven’t used it much yet but plan to spend some time checking it out. In the meantime, happy corner radius tweaking.