WhitherApps

OK, after yet another long gap, I’m back. But the hiatus was worth it. I’m excited to announce that I’ve a new job & will soon be working with those smart chaps at Sencha… so hopefully there will be lots more of this sort of thing to come.

We promised ourselves that we would have fun with some CSS and get this application looking a little smarter. It certainly isn’t as glossy as the real thing yet. So here’s our mission statement for this installment: “indistinguishable or your money back”.

We have all the structural areas of the page in place, and the basic user experience – click a thumbnail, get an article. So there should be enough there to be able to style up.

Before we start: one caveat. I’d quite like to see if we can avoid having to use any external resources for this app – apart from the BBC material itself of course! In other words, every button, gradient and shadow you see has to be articulated within our single HTML page. Fortunately for us, the WebKit support for CSS3 styling (or at least, its -webkit- variants) gives us a reliable way to do most, if not all, of this. Let’s see.

Let’s start at the top of the page, where we have a dark red bar across the top of the app. Until now, it’s been styled with:

background:#ff0000;

…which is not quite the craftsmanship I have in mind.

I’ve taken a crop of the top of the application so we can do a proper analysis of it. (Is it me or is the BBC logo not quite centered with the clock?)

The #bbc_controls box is 44 pixels high, which is the upper pink border all the way down to the dark burgundy shadow. The main red part of it has a gentle gradient. It would be very easy to crop this image and use it as a background, but let’s see if we can do it with some CSS. First we need to sample the colors used. To start with, I’ll just use the Apple Digital Color Meter tool to sample some key colors.

The RGB of the pink border at the top is #e36d51. The two lines of shadow at the bottom are #7c110f and #37080a. The red in between goes from #bd1c08 at the top down to #990700 at the bottom.

As an aside… is the gradient linear across the middle 41 pixels of the bar? The histogram for the gradient looks like this:

Apparently not. There are 10 pixels at the bottom of the bar that are the same color (#990700) and the gradient is only at the top of the bar. Even that is not quite linear, but let’s pretend it is for now, yes?

So anyway, let’s do the CSS for this bar. I’m going to use WebKit’s -webkit-gradient CSS property, which is an alternative to having an image URL for the background. I’ve left the largest slab of color (#990700) as the explicit background-color. At least non-WebKit browsers will have something nice to show.

So, as a first stab:

background-color:#990700;
background-image:-webkit-gradient(linear, left top, left bottom,
  from(#bd1c08), to(#990700)
);

This provides a smooth gradient from the top of the bar to the bottom:

But we need to add some color stops that tell the property that the gradient only goes about two thirds of the way down. Color-stops, unfortunately, are seemingly only specified in percentage, rather than pixel distances. We want the gradient to stop 11 pixels from the bottom of the bar: handily this exactly 75% of the way down.

background-image:-webkit-gradient(linear, left top, left bottom,
  from(#bd1c08), color-stop(0.75, #990700), to(#990700)
);

While we are at it, we might even be able to use the gradient stops to do the highlights and shadows at the top and bottom of the bar. Each pixel is 1/44 (2.27%) of the bar. So…

background-image:-webkit-gradient(linear, left top, left bottom,
  from(#e36d51), color-stop(0.0227, #e36d51),
  color-stop(0.0227, #bd1c08), color-stop(0.7500, #990700),
  color-stop(0.9545, #990700), color-stop(0.9545, #7c110f),
  color-stop(0.9772, #7c110f), color-stop(0.9772, #37080a),
  to(#37080a)
);

Doubled-up color-stops allow you to disjoin the gradient. So we have a one pixel line at the top, then the gradient, then the solid slab, and then two distinctly-colored lines at the bottom. Obviously these percentages only work when the height of the bar is precisely 44 pixels, but we’ve ensured that elsewhere in the CSS.

How does it look?

As they say in New Zealand: sweet as.

The gray ticker bar beneath the top bar doesn’t have a gradient, but it does have a white highlight at the top. We can just do that with a border (and shrink the box’s height by one pixel to account for it:

#bbc_ticker {
  ...
  height:30px;
  border-top:1px solid #ffffff;
}

Before we move on to more gradients and coloring in the selector panels, let’s take a look at some of the typography. We haven’t specified any fonts yet, and it certainly shows. Now, I’m not the world’s greatest font spotter, but there aren’t that many native on the iPad, so figuring out which to use shouldn’t be that hard. We’re aiming for:

The caps are just about 9 pixels high. (It makes it easier to check you’ve got the right font when you’re comparing like sizes). I thought it was Arial at first, but Helvetica seems to be more or less the best match. The fonts seem to be the same on both the section headings (h2) and article headings (h3), except that the former is capitalized. Of course we can do that in CSS too – and we also tweak the kerning and spacing slightly to make the fonts line up as closely as possible with the original.

#bbc_article_selectors * {
  font-family:Helvetica, Arial;
  font-weight:normal!important;
  font-size:12px!important;
  letter-spacing:0.02em;
  line-height:16px;
}
#bbc_article_selectors h2 {
  display:none;
  text-transform: uppercase;
  line-height:8px;
  padding-top:7px;
}

Now is a good time to style up those thumbnail boxes too. They have a fine gray line around them (#464646 on 3 sides, #595959 on the bottom) with a very slight radius, and a background of #222222. There’s a small inset drop shadow. The images themselves have a faint #3A3A3A border around them.

Here’s something very annoying: the images that come from the BBC are 105px by 79px: which is exactly the size that they appear on the app – but with the border included. Should I shrink the image down 2 pixels in each direction so that the border makes up the extra? Or is there a CSS3 way of placing an image border *over* the edge of an image? I don’t know one, so I’ve had to slightly shrink the image to fit the box. The CSS now looks something like:

#bbc_article_selectors nav a {
  display:inline-block;
  width:105px; height:127px;
  margin:4px 5px 6px 5px;
  padding:5px;
  overflow:hidden;
  background:#222222;
  border:1px solid #464646;
  border-bottom-color:#595959;
  -webkit-border-radius:2px;
  -webkit-box-shadow: inset 0px 0px 2px #000;
}
#bbc_article_selectors img {
  border:1px solid #3A3A3A;
  width:103px;
  height:77px;
}

And the result is below. One is the native app, and one is the web app. Can you tell which is which?

Oh, and hey – I feel like doing the logo:

<div id="bbc_logo"><span class="bbc_bbc">B</span><span class="bbc_bbc">B</span><span class="bbc_bbc">C</span> News</div>

#bbc_logo {
  position:absolute;
  left:446px;
  top:14px;
  line-height:18px;
  font-family:"Gill Sans";
  font-size:19px;
  text-transform:uppercase;
}
#bbc_logo .bbc_bbc {
  display:inline-block;
  width:18px;
  height:18px;
  text-align:center;
  margin-right:3px;
  background:#ffffff;
  color: #990700;
}

Might not get past the strictest of brand police, but pretty close, no?

And we also need to do the refresh button. I was nearly stumped here, until I discovered the Unicode character ‘CLOCKWISE OPEN CIRCLE ARROW’ (x21BB since you ask). This looks nice in the Arial font. Throw in a few shadows and gradients:

<a id="bbc_refresh" href="#"<&#x21BB;</a>

#bbc_refresh {
  position:absolute;
  display:block; width:38px; height:24px;
  left:142px; top:10px;
  line-height:18px;
  text-align:center;
  font-family:"Arial";
  font-size:30px;
  text-decoration:none;
  color:#ffffff;
  border:solid 1px #880600;
  background-image:-webkit-gradient(linear, left top, left bottom,
    from(#c20c00), to(#a10800)
  );
  -webkit-border-radius:2px;
  -webkit-box-shadow: inset 0px 1px 1px #ff6666, 0px 1px 1px #bc0e05;
  text-shadow:0px -2px 1px #880600;
}

And we have:

Nice. Not too bad for an imageless element.

OK, I think I’ll leave it there for today – might just be in time for Mobile Monday Silicon Valley, who are debating this very topic tonight. Progress so far:

Next, we need to style up the articles themselves, and also sort out the portrait rotation. Back soon!

• • Comments [10]
  • Categories [BBC News]