Notebook
Tonight we’re gonna mockup like it’s 1929 Thursday, April 8th, 2010 Permalink
There are lots of ways to wireframe a design. I sometimes will use grid paper, or just sketch on whatever’s handy. Other times I don’t do much of a sketch at all if I’ve been thinking about a design for days or weeks beforehand. But for a project I’m working on now, I needed a more constrained method. I whipped up a quick sheet you can use to mockup screens for your iPhone apps. Each page has four separate boxes designed to mimic the iPhone’s proportions, with labels and a page title. It helped me out. Maybe it’ll help you, too. (And don’t worry: as soon as I have an iPad I’ll make one for that, too.)
iPhone Template Sheet (85k ZIP Archive) – Download
Stupid input tricks Wednesday, March 24th, 2010 Permalink
One of the things you “get for free” when designing or coding for a WebKit-based browser (and unless you’re from the past, you probably are) are “bezels” around active form inputs. It’s a useful effect, but it’s a bit limited. On the Mac, the color used for these highlights is controlled by the overall look and feel you’ve selected in System Preferences > Appearance.
In my case, it happens to be the default “Graphite” look, which is sort of a dull purplish-blue. It gets the job done, but it does nothing for the design of my site. Chances are, unless your site follows Apple’s HIG to the letter, it won’t match yours either. So, here’s how to turn it off and replace it with something that works in other browsers (yes, you too Firefox) and matches your site a bit better. First thing to do is hide it. We’ll use the following rule to do just that.
input[type=text]:focus,
textarea:focus {
outline: none;
}
There’s a lot we could do from here. The outline property is really useful in and of itself; it does just what you’d expect; it draws an outline around an object that extends beyond any border you’ve set. It’s nice because it allows you to create three dimensional effects like insets and bezels, or simply call attention to something on the page—like form fields. One side note though: outline doesn’t respect -webkit-border-radius or any prefixed border-radius variant, so it’s a no-go if you’re looking to do fancy bevels or effects on elements you’ve radiused this way.
Next, we’ll need some sort of method for controlling what happens when the input has focus. Ah, you say, what about using :focus for that. After all, that’s what it was designed for! Well, you’re right. You also don’t do much with IE6. Yes, I’ve vowed never to code for IE6 again. That doesn’t mean I don’t have a past littered with attempts to placate it. A lack of faith in :focus is a casualty of just such placation. Instead, we’ll use jQuery to do the heavy lifting. First, we’ll create a class that will change the look of inputs on focus.
input[type=text].active,
textarea.active {
-webkit-box-shadow: 0 0 3px #0072ac;
-moz-box-shadow: 0 0 3px #0072ac;
box-shadow: 0 0 3px #0072ac;
}
Now, we’ll need some code that applies that class (or removes it) when the user changes focus. The following does the trick.
// Add the effect
$('input,textarea').focus(function(){
$(this).addClass('active');
});
// Remove the effect
$('input,textarea').blur(function(){
$(this).removeClass('active');
});
So, instead of the default outline treatment users will see a soft shadow, about three pixels in width, that’s a much nicer shade of blue. On the light background of my site, I think it looks quite nice. For yours you can change it to anything you like.
Bonus – now with 100% more old schoolness
If you want to do this with pure CSS and you haven’t been bitten by IE6, use this rule in your CSS and skip the jQuery.
input[type=text]:focus,
textarea:focus {
-webkit-box-shadow: 0 0 3px #0072ac;
-moz-box-shadow: 0 0 3px #0072ac;
box-shadow: 0 0 3px #0072ac;
}
You can see the jQuery method working on my contact page. Hey, you should fill it out and hire me!
When we were new wave Sunday, March 14th, 2010 Permalink
Single image buttons with CSS3 Friday, March 5th, 2010 Permalink
With the advent of WebKit and its support for CSS3 selectors, it seems the world has gone mad for rounded corners. The trend that you once thought was dead lingers on in new and more interesting ways; things like box-shadow and text-shadow give designers more ways to suggest depth and dimension in their designs without resorting to images. Case in point is the contact button from our new site.
The goal with this button was to provide a more colorful and eye-catching anchor than a simple text link. I also wanted the button to look more like a modified native control than an image. The light-sourcing needed to be consistent with the other embossed controls and surfaces on the site, so I would need to devise a way to provide an inner highlight. Finally, I wanted to do it with as few images as possible.
I started by building out a basic rounded button
.contact {
margin: 20px 0 10px 180px;
width: 240px;
text-align: center;
padding: 4px 6px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
border: 1px solid #125476;
background: #0072ac url('/assets/backgrounds/contact-button.gif')
top left repeat-x;
}
and used the following markup to put it into the page
<div class="contact">
<a href="/contact/">
<h4>Contact us about your project.</h4>
</a>
</div>
This yields the following fairly serviceable button
CSS3 to the rescue
We're already using a CSS3 selector (border-radius) to give our button a rounded look. Now we'll use a few more to give the button an inset shadow along its bottom edge. This is important, because it gives the button depth and helps preserve the faux light source at the top of the overall design. Best of all, it just makes it feel more "buttony".
.contact {
margin: 20px 0 10px 180px;
width: 240px;
text-align: center;
padding: 4px 6px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
border: 1px solid #125476;
background: #0072ac url('/assets/backgrounds/contact-button.gif')
top left repeat-x;
-webkit-box-shadow: 0 1px 0 #fff;
-moz-box-shadow: 0 1px 0 #fff;
color: #ebebeb;
-webkit-box-shadow: 0 1px 0 #fff;
-moz-box-shadow: 0 1px 0 #fff;
}
Yes, it's quite a few selectors. More of the bulk comes from providing custom selector types for Firefox and Safari/WebKit/Chrome. Hopefully, we won't need those in the future. But for now, it's a good idea to provide them. By now, the button looks something like this
It looks as though it's "sinking" into the surrounding page. It's like it's meant to be there. Nifty! Now, how do we get an inner highlight on the top of the button, while still maintaining the outer border? And why is that even important? For an answer, look at something that has buttons on it; a remote control for instance.
More human than human
What makes computer/human interfaces work--probably better than any other trope in the designer's toolbox--is mimicry. People seem to automatically know what to do when faced with computer interfaces that duplicate real world controls and user touch points. The iPhone is filled with examples of this--light-sourced buttons, inset lists, rollers, scrollbars; they make the UI feel familiar and "right". Fudge the angle of light or the scroll speed on any one of these controls and all of a sudden they look "wrong" or "cheap".
The remote control in the image above is real. See how the button in the center reflects the light? It looks as though it would sink into the body of the remote control if you pressed it down. It has a clear border, which is about 70% darker than the silver color of the remote itself, but it also has a specular highlight beyond that border that gives you a clue to the shininess of the button. That's what we want to mimic for our link button.
We could do that by adding a single pixel stroke to the top of the background image. Then, the CSS border would render outside the button, the stroke would render in the top inside, and you'd have a highlight. The problem with that approach is the highlight would drop off before reaching the rounded corners. Instead we need a way to make the highlight follow the rounded edge of the button, and fall off naturally. We do this by applying some selectors to the text inside the button, like so:
.contact h4 {
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
margin: -3px -5px;
padding: 4px 6px;
font-weight: lighter;
-webkit-box-shadow: 0 -1px 0 #66c2f1;
-moz-box-shadow: 0 -1px 0 #66c2f1
}
This gets us something like what you see below, a convincing inset button.
If you plan to use something like this in one of your projects, keep in mind that the specular highlight and the bottom edge highlight are both dependent on the colors underneath them. In other words, this button would look very out of place on a red background with purple as the button background color. Just like in real life, these colors affect and are taken from the ones beneath them.
What about IE?
What about it? Seriously, this example won't--in a million years--work in IE6. Luckily, there are lots of other browsers it will work in. If you got browser problems I feel bad for you son, but I got ninety-nine problems and IE ain't one.
Know your robot.
Nick Jones is a web developer, graphic designer and CSS nut living in Norfolk, VA.
As a graphic designer he has worked with everyone from car dealerships to record labels. As a web developer he's helped everyone from the Taiwanese embassy to large news organizations. Maybe you're next?