Designers Are Burnt, Not Made

ScreenshotsCssCaptions

Tricky Curves – 4X Magnification

Obsessive attention to detail – that’s the thing that makes me not too bad at design. Also, the thing that makes design… maybe not so good for me. Several kinds of work will keep me up late into the night. But there are few that I will return to the moment I wake, brimming with new things to try. Web design, particularly in the final stages, is a constant stream of interesting problems.

CSS (Cascading Style Sheets), the design language of the modern Web, is a simple yet powerful tool. A style sheet is just a list of instructions about how things should look, really more like description than programming. I’d encourage anyone to try it out, no matter how non-technical you consider yourself. Sadly though, even today there are discrepancies in the way different Web browsers interpret these instructions. It’s not as bad as it was; there was a time they weren’t even trying. Microsoft’s Internet Explorer and Netscape’s Navigator (ancestor of Firefox) both had features actually designed not to work in the other. Today they at least seem to be aiming at the ambitious standards set out for HTML5 and CSS3. Browsers once competed with each other, now they compete with apps – nothing like a mutual threat to enhance cooperation.

Minor as they are, these discrepancies can still make the design that works beautifully on one platform look like something flung from a catapult on another. There really is no alternative except to test and test and re-test – on Windows, Mac OS, iOS, Android, Linux and so on, in all their different browser versions, at screen sizes from HD to phone. The permutations are slightly mind-blowing.

You find a bug, you think up or look up or remember a solution, you see if it works. If it works in Firefox on a PC you see if it still works in Chrome on a tablet, so on and so forth. When you’re sure you’ve solved that, you immediately go looking for another problem. For the best part of last week I did little but eat, sleep, and hunt bugs. And I was cutting corners on the sleep.

Don’t mention corners… See the one in the picture? Most of a day, that cost me. A lot more is going on than meets the eye. For a start, round corners can be a challenge. They look good, and they’re a part of the CSS3 standard, but people using Internet Explorer 8 and (God forbid) lower don’t see them. Well, you face a choice there: recreate the effect using images of round corners, or let the design gracefully fail in IE8. And really the latter is the sensible approach these days. Which is a little rough on users of XP – still my own favourite version of Windows – but frankly if you’re on XP and not using Firefox or Chrome then you (or your IT department) need a strong light shining up your nose.

Round corners at the foot of a page though are harder still. Look closely and you’ll see that the corkboard background pattern overlaps below the corner. (The random nature of the pattern helps to disguise this.) What’s happening is that this is an extra piece of the background overlying the rest of the design – with a bottom end for the page, complete with rounded corners, overlying that again. This whole unit then sticks to the foot of the page’s contents. Carefully-chosen margins meanwhile make sure that it always has precisely the same width as the rest, no matter what size the screen. Oh and those margins have a length described as a negative percentage, which is a little mindbending in itself.

Next problem is that 3D shadow, to make the page look like it’s inset into the background. CSS3 now has a very attractive way to do soft 3D borders, called “box-shadow”. Unfortunately, as the name suggests it only works for things with four sides. My footer wants a shadow on just two of its sides, and for that my only reasonable option is an ordinary border.

The tricky bit then is where they meet. While a border looks much the same in every browser, the shadow has properties of ‘blur’ and ‘spread’; these make it more realistic, but also more open to interpretation. Therefore it comes out looking wider in some browsers than others. What do you do then when the inconsistent shadow meets the consistent border?

The solution I found is a mad hack: I made the border 2.5 pixels wide. This of course is nonsense. The pixel is the base physical unit of the display screen, you can’t have half of one. What happens in practice is that different browsers interpret this nonsense instruction differently – crudely speaking, some round up and some round down – but they do so in a way that broadly matches how they interpret the box-shadow. The upshot, as the images above show, is that the borders join pretty smoothly in the four most popular browsers. It takes magnification in fact to show that there’s a join at all.

I’d like to say this was unusual, but really this is the essence of the Web design job – a strange blend of technical precision and lateral thinking. Part tweezers and microscope, part bent paperclip and sharpened spoon. It’s a voyage deep into an unusual problem-space, one that takes over both my waking and my sleeping mind.

Browser Wars: Firefox Fights Back

Have you heard of Aurora? This is basically Future Firefox, an experimental version of the great independent browser from Mozilla. Not a beta, because it’s not a test version of a coming product; more a testbed for ideas that might be included soon.

So you can’t say every feature it displays will end up in Firefox. Some though I’m pretty certain will – at least when it comes to the Android version. Particularly the way Aurora now responds to hover events, so things like dropdown menus work when you pass a mouse pointer over them.

What should I care, you may ask, when my phone doesn’t have a mouse pointer? Actually it probably could… A lot of Androids will let you plug in a mouse (and indeed a keyboard, external drive, or other peripherals) if you use a USB host adapter, and there are Bluetooth mice too. More importantly though, it helps Android adapt to a greater variety of hardware: tablets with and without pens, laptops, even desktop devices. I have no doubt that in a couple of years Android will be seen as a serious alternative to Windows for a lot of work situations.

Another good thing about this desktop-like ability in a browser is that it helps close a gap threatening to open between the desktop and mobile Web. Sure, mobile sites have their uses, especially on smaller screens. But they will nearly always be simplified versions offering less control, and it would be hugely frustrating if your browser wasn’t capable of switching to the full version when needed.

And certainly, no one should ever be forced into using an app just because their phone can’t handle a website.

My new default browser then? Nope. Aurora is in no way intended for primetime. It has some really weird bugs, a predictable consequence of throwing in new features to see what happens, and quickly becomes frustrating to use. But proper Firefox for mobile is pretty good. It has perhaps the most attractive look of any Android browser, and it’s been very stable. Certainly try this. Or if you want to be a bit brave, there’s a good beta version that has some of the more stable of the new features.

Aurora also test-runs a “reader mode”, for when you don’t care about the fancy bits of a website

But if I praise Mozilla here, it’s with faint damns. The reason I’m so certain this feature will make it into Firefox for Android is that every single major rival has it already. The standard Android browser, Chrome for Android, Dolphin HD, even Opera Mobile.

All of them have their own foibles and bugs too; desktop-class browsing on a phone is obviously no walkover. Opera I regard as too eccentric to be really usable now. Try to upload an image with it, for example, and it will use its own non-graphical file explorer instead of Android’s image gallery. How many of your photographs do you know by name? Dolphin is a browser designed exclusively for mobile devices and there is a lot to recommend it, but it feels more orientated to smaller screens. The Android native browser gets better all the time, and now features a full screen mode and a thumb-friendly menu system, but can seem a little flaky.

The leader still though is Google’s Chrome for Android. I’ve raved about it before, so I’ll restrict myself to happily reporting that its chief weakness – a regrettable tendency to crash if you look at it sideways – does seem to have been fixed in Android 4.0.4.

It’s maybe not surprising that Google’s product is doing well. It’s got Google’s money behind it after all, and Google’s ambition. But Mozilla have their own ambition now, and though it’s been taking them far too long, they do look to be on their way to producing a serious mobile contender.

Chrome. Beautiful, Brittle

Good news if you’re using an Android phone or tablet. The mobile version of the Chrome browser, about which I have raved before, has finally been officially released. Chrome handles complex modern sites better than anything else available for mobile, a distinct advantage for the Android platform over iPhone. If you have a decently big screen you can enjoy an experience almost indistinguishable from a desktop browser, using real websites instead of over-simple mobile versions or apps. The illusion becomes perfect on the Galaxy Note, as hovering the pen near to the screen triggers “mouseover” events like dropdown menus, just as on a desktop computer – and just as I’d hoped.

All right, it doesn’t have Flash. This is Adobe’s (and ultimately, Apple’s) fault rather than Google’s though, and there should be a plug-in to fix it soon. It still seems to lack any full-screen mode too. But in every other respect it outclasses the competition, from Google’s own default mobile browser to even the likes of Dolphin HD. Naturally it still has that lovely playing-card interface, it’s as neat and simple as any Chrome variant, and it’s fast. Remember, this is coming from someone who vastly prefers Firefox on the desktop, both for its features and for its independence. Firefox for mobile is getting very good, but this leaves it standing.

Really just one thing stops me from telling you to go install Chrome for Android directly without passing Go or collecting two hundred euros. This would be its slight tendency to crash every five f***ing minutes. Seriously, it happened so many times while I was writing this that I’ve given up and am completing it in Jota. I’m enormously disappointed. I was hoping that the final release would fix the instability that plagued the beta. You know what? It’s actually worse.

I still suggest you download this, even try it as your default browser. It is that nice. I just wouldn’t recommend you use it to write anything longer than a Tweet.

Really Google, what the hell?

Galaxy Note With Ice Cream Sandwich 2

Some Screenshots:

Multitasking, something of an afterthought until now, becomes integral in Android 4 (Ice Cream Sandwich). Hold the home button and every app you’ve used recently is there waiting to take up from where you left off. Well I say recently; presumably it’s limited by available memory, but it seems able to hold dozens.

That “Deck of Cards” view in Google Chrome Beta for mobile, allowing you to flick through your open tabs. This is a really good idea.

Another feature of the new Chrome browser – preview of search results. Touch a small magnifying glass icon in the results and screenshots are spread out for you. It’s remarkably fast too.


In short, I love this browser! It’s not perfect yet; it crashed once, and it took me a while to coax it into allowing me to upload those screenshots. (Tip: Zoom out. When screen is magnified, WordPress can get confused about which link you’re pressing.) But I created this post using it exclusively, a real-world challenge involving complex JavaScript-heavy pages and devilish floating input panels. The only mobile browser to even barely pass before this was Nokia’s MicroB, which is essentially desktop Firefox for Linux in a mobile guise. To finally surpass this is high praise indeed – and an indictment of other mobile browsers when you consider that they’re still behind a standard Nokia set three years ago.

Anyway, the take-home here is that mobile browsing finally works right. Well done, Google.

What Phone Was Right For Me?

Tricky lighting led to overexposure and noise in the dark areas – soon corrected by The GIMP

All the time I’ve been writing articles under the heading “What Phone Is Right For You?“, I have never confessed to what I actually use myself. Do I favour the Apple or the Blackberry, Windows or Androids?

None of the above. There was a reason I didn’t bring my own choice into it – the phone that’s right for me probably isn’t right for you. Or most anyone, it seems. Don’t get me wrong, it is an extraordinary piece of kit. But it sold in the hundreds of thousands at best, rather than the millions a hit mobile device needs.

Which is a shame, because it could have been the future.

That device is the Nokia N900 – less a phone really than a tiny PC with phone capabilities. Of course that can be said loosely of any smartphone, but it’s true of the N900 in spades. On this one you can have an actual desktop, and edit office-standard documents in powerful applications. Not bad for something you can carry around in your pocket.

Nokia achieved this with the help of the Open Source Software community – people who create free programs because they believe information technology should be free. Or just for the hell of it. OSS has brought us many great things, famously the Firefox browser of course, but also the free alternative to Windows and Mac OS called Linux.

The N900’s “Maemo” operating system is, like Ubuntu, based on the respected Debian¹ variant of Linux, so installing full-scale desktop applications is relatively straightforward. One great example: The GIMP², an Open Source alternative to Photoshop with all the image-editing power you could want. Thanks to this I was able to take, correct and upload the image above entirely on the phone.

And the usefulness only begins there. By hooking up a mouse and keyboard and using the TV-out as a monitor, I can have a desktop PC in any hotel room. Or indeed I can use the phone itself as a Bluetooth mouse and keyboard to control a PC from bed – which came in darn useful when I was ill – or control TVs and so on with its infra-red output. It’s versatility is matchless. Furthermore it excels as a media player, with powerful stereo speakers and a screen that wasn’t surpassed until the iPhone 4 came out.

English: Nokia N900 communicator/internet tabl...
The N900 with its keyboard open

Its greatest strength though has to be its browser. Nokia had been making specialised “Internet tablets”, portable Web browsing devices, as a semi-experimental sideline since 2005. The N900 just took that and added phone call abilities. Its browser therefore is proper Firefox, just with a finger-friendly interface, and brooks no ‘mobile view’ nonsense. It displays Web pages exactly as they’d appear on a desktop. With Flash, of course.

And though the phone aspect is a late addition, its integration is exemplary. Skype is just there – you can make and receive VoIP calls just as easily as ordinary ones. Similarly, IM services like Facebook and Google Chat integrate seamlessly with the phone’s text messaging. Contacts on different social networks can be merged into a single address book entry too. That’s just the way it should be.

So, what the hell went wrong? If this was such a paragon of smartphone virtue, why did no one buy it? Hopefully I’ll have the strength to face that sorry tale tomorrow.

  1. Poignant little story – Debian was named for its creator, Ian, and his girlfriend Deb – before they broke up. He’s going to have a hard time forgetting her now.
  2. The GIMP stands for The GNU2 Image Manipulation Package.
  3. GNU stands for GNU Is Not UNIX3. Recursive acronyms are kind of an OSS in-joke.
  4. Surprisingly, UNIX doesn’t stand for anything.